diff options
Diffstat (limited to 'assets/stylesheets')
| -rw-r--r-- | assets/stylesheets/site.scss | 224 | ||||
| -rw-r--r-- | assets/stylesheets/viewtime.css | 107 |
2 files changed, 331 insertions, 0 deletions
diff --git a/assets/stylesheets/site.scss b/assets/stylesheets/site.scss new file mode 100644 index 0000000..a2ae002 --- /dev/null +++ b/assets/stylesheets/site.scss @@ -0,0 +1,224 @@ +--- +--- + +@import "normalize"; +@import "global"; +@import "960-responsive"; +// @import "syntax"; + +body { + font-family: $serif; + font-size: 20px; + color: $black; +} + +h1, h2, h3, h4, h5, h6 { + font-family: $sans; + font-weight: 200; + margin-top: 1em; + margin-bottom: 0.5em; + text-align: center; + padding-left: 10%; + padding-right: 10%; +} + +a { + color: $red; + text-decoration: none; + @include transition(color, $link-fade-time, ease); + + &:hover { + color: darken($red, $link-darken-amount); + } + + &.project { + color: $blue; + &:hover { + color: darken($blue, $link-darken-amount); + } + } + + &.post { + color: $magenta; + &:hover { + color: darken($magenta, $link-darken-amount); + } + } +} + +p { + line-height: 2em; + margin-bottom: 2em; + margin-top: 2em; +} + +pre { + margin-bottom: 2em; + margin-top: 2em; +} + +blockquote { + width: 80%; + margin-right: auto; + margin-left: auto; + margin-top: 0; + margin-bottom: 0; + position: relative; + + quotes: "\201C""\201D""\2018""\2019"; + + &:before { + content: open-quote; + color: $base1; + font-size: 4em; + margin: 0; + padding: 0; + line-height: 0; + position: absolute; + left: -0.7em; + top: 0.5em; + font-family: $monospace; + } +} + +table { + margin-top: 1em; + margin-bottom: 1em; +} + +td { + font-size: 0.8em; + padding: 0.5em; + vertical-align: top; +} + +ul { + list-style-type: square; +} + +ul, ol { + margin-left: 2em; + margin-bottom: 1em; +} + +li { + margin-bottom: 1em; +} + +code { + font-family: $monospace; + font-size: 0.8em; + // color: $base1; +} + +footer { + font-family: $monospace; + text-align: center; + border-top: 2px solid $base1; + padding-top: 1em; + padding-bottom: 1em; + font-size: 0.8em; + @include transition(color, $link-fade-time, ease); + color: $base1; + + a { + color: $base1; + } + + &:hover { + color: $black; + + a { + color: $red; + &:hover { + color: darken($red, $link-darken-amount); + } + } + } +} + +header { + a { + font-family: $sans; + font-weight: 200; + color: $white; + display: block; + border: none; + text-align: center; + padding: 0.5em; + @include transition(all, $link-fade-time, ease); + + &:hover { + color: $white; + } + } + + .projects { + @include nav_button($blue); + } + + .posts { + @include nav_button($magenta); + } + + .github { + @include nav_button($green); + } + + .resume { + @include nav_button($orange); + } +} + +.about { + width: 80%; + margin-left: auto; + margin-right: auto; +} + +.portrait { + width: 200px; + height: 200px; + margin-top: 2em; + margin-left: auto; + margin-right: auto; + background-image: url('/assets/images/ben_circle.png'); + background-repeat: no-repeat; +} + +.center { + text-align: center; +} + +.right { + text-align: right; +} + +.date { + // margin-bottom: 1em; + font-family: $monospace; + // font-weight: 200; + color: $base1; + text-align: center; +} + +article { + img { + max-width: 100%; + } +} + +@media print { + body { + color: #000; + } + + a { + color: #000; + } + + header, footer { + display: none; + visibility: hidden; + } +} diff --git a/assets/stylesheets/viewtime.css b/assets/stylesheets/viewtime.css new file mode 100644 index 0000000..b37bebc --- /dev/null +++ b/assets/stylesheets/viewtime.css @@ -0,0 +1,107 @@ +* { + padding: 0; + margin: 0; +} + +html { + font-family: 'Helvetica', sans-serif; + font-size: 24px; + text-align: center; + background-color: #2A2A2A; + color: #2A2A2A; +} + +.container { + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75); + box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.75); + width: 960px; + max-width: 100%; + min-width: 240px; + margin-left: auto; + margin-right: auto; + padding-bottom: 1em; +} + +a { + text-decoration: none; +} + +p { + padding-top: 40px; + width: 90%; + margin-left: auto; + margin-right: auto; +} + +h1 { + width: 960px; + max-width: 100%; + min-width: 240px; + height: 250px; + background-image: -o-linear-gradient(-89deg, #C02126 0%, #4A1112 100%); + background-image: -moz-linear-gradient(-89deg, #C02126 0%, #4A1112 100%); + background-image: -ms-linear-gradient(-89deg, #C02126 0%, #4A1112 100%); + background-image: linear-gradient(-179deg, #C02126 0%, #4A1112 100%); + font-size: 72px; + line-height: 250px; + color: #FFFFFF; + text-shadow: 0px 2px 4px rgba(0,0,0,0.50); +} + +a#install_button { + border-radius: 10px; + font-size: 48px; + padding: 10px 120px; +} + +.inactive { + background-color: #AAAAAA; + color: #cccccc; +} + +.active { + color: #FFFFFF; + text-shadow: 0px -2px 0px rgba(0,0,0,0.50); + background-image: -o-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%); + background-image: -moz-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%); + background-image: -ms-linear-gradient(-89deg, #86C01E 0%, #2F6F15 100%); + background-image: linear-gradient(-179deg, #86C01E 0%, #2F6F15 100%); +} + +.active:hover { + background-image: -o-linear-gradient(-89deg, #6DA705 0%, #165600 100%); + background-image: -moz-linear-gradient(-89deg, #6DA705 0%, #165600 100%); + background-image: -ms-linear-gradient(-89deg, #6DA705 0%, #165600 100%); + background-image: linear-gradient(-179deg, #6DA705 0%, #165600 100%); + text-shadow: 0px -2px 0px rgba(0,0,0,0.50); +} + +.active:active { + background-image: -o-linear-gradient(-89deg, #165600 0%, #6DA705 100%); + background-image: -moz-linear-gradient(-89deg, #165600 0%, #6DA705 100%); + background-image: -ms-linear-gradient(-89deg, #165600 0%, #6DA705 100%); + background-image: linear-gradient(-179deg, #165600 0%, #6DA705 100%); + text-shadow: 0px 2px 0px rgba(0,0,0,0.50); +} + +p img { + padding: 10px; +} + +.install_tagline { + font-size: 14px; + padding-top: 10px; +} + +#safari_text, #chrome_text { + display: none; +} + +.home_link { + font-size: 18px; + color: #dc322f; + letter-spacing: 1px; + text-transform: uppercase; +} |