From 3b563b3b82f4b4f20e66e1f9aea6dc16a08fc802 Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Sat, 27 Dec 2014 16:42:05 -0500 Subject: Clean up markup & styles --- assets/stylesheets/site.scss | 224 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 assets/stylesheets/site.scss (limited to 'assets/stylesheets/site.scss') 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; + } +} -- cgit v1.2.3