From 6955d770fe5fdeba40377509d12030e9ebfe0130 Mon Sep 17 00:00:00 2001 From: Barry Clark Date: Wed, 30 Jul 2014 17:36:13 -0400 Subject: Update Sass files to be built by GitHub Pages --- style.scss | 284 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100755 style.scss (limited to 'style.scss') diff --git a/style.scss b/style.scss new file mode 100755 index 0000000..de8fc42 --- /dev/null +++ b/style.scss @@ -0,0 +1,284 @@ +--- +--- + +// +// IMPORTS +// + +@import "_reset"; +@import "_variables"; + +/*/ +/* BASE RULES +/*/ + +html { + font-size: 100%; +} + +body { + background: $white; + font: 18px/1.4 $helvetica; + color: $darkGray; +} + +.container { + margin: 0 auto; + max-width: 740px; + padding: 0 10px; + width: 100%; +} + +h1, h2, h3, h4, h5, h6 { + font-family: $helveticaNeue; + color: $darkerGray; + font-weight: 600; + + line-height: 1.7; + margin: 1em 0 15px; + padding: 0; + + @include mobile { + line-height: 1.4; + } +} + +h1 { + font-weight: 500; + font-size: 32px; + a { + color: inherit; + } +} + +h2 { + font-weight: 400; + font-size: 24px; +} + +h3 { + font-size: 18px; +} + +h4 { + font-size: 18px; + color: $gray; +} + +p { + margin: 15px 0; +} + +a { + color: $blue; + text-decoration: none; + cursor: pointer; + &:hover, &:active { + color: $blue; + } +} + +ul, ol { + margin: 15px 0; + padding-left: 30px; +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: decimal; +} + +ol ul, ul ol, ul ul, ol ol { + margin: 0; +} + +ul ul, ol ul { + list-style-type: circle; +} + +em, i { + font-style: italic; +} + +strong, b { + font-weight: 600; +} + +img { + max-width: 100%; +} + +.date { + font-style: italic; + color: $gray; +} + +// Specify the color of the selection +::-moz-selection { + color: $black; + background: $lightGray; +} +::selection { + color: $black; + background: $lightGray; +} + +// Nicolas Gallagher's micro clearfix hack +// http://nicolasgallagher.com/micro-clearfix-hack/ +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +/*/ +/* LAYOUT / SECTIONS +/*/ + +// +// .masthead +// + +.wrapper-masthead { + margin-bottom: 50px; +} + +.masthead { + padding: 20px 0; + border-bottom: 1px solid $lightGray; + + @include mobile { + text-align: center; + } +} + +.site-avatar { + float: left; + width: 70px; + height: 70px; + margin-right: 15px; + + @include mobile { + float: none; + display: block; + margin: 0 auto; + } + + img { + border-radius: 5px; + } +} + +.site-info { + float: left; + + @include mobile { + float: none; + display: block; + margin: 0 auto; + } +} + +.site-name { + margin: 0; + color: $darkGray; + cursor: pointer; + font-family: $helveticaNeue; + font-weight: 300; + font-size: 28px; + letter-spacing: 1px; +} + +.site-description { + margin: -5px 0 0 0; + color: $gray; + font-size: 16px; + + @include mobile { + margin: 3px 0; + } +} + +nav { + float: right; + margin-top: 23px; // @TODO: Vertically middle align + font-family: $helveticaNeue; + font-size: 18px; + + @include mobile { + float: none; + margin-top: 9px; + display: block; + font-size: 16px; + } + + a { + margin-left: 20px; + color: $darkGray; + text-align: right; + font-weight: 300; + letter-spacing: 1px; + + @include mobile { + margin: 0 10px; + color: $blue; + } + } +} + +// +// .main +// + +.posts > .post { + padding-bottom: 2em; + border-bottom: 1px solid $lightGray; +} + +.posts > .post:last-child { + padding-bottom: 1em; + border-bottom: none; +} + +.post { + blockquote { + margin: 1.8em .8em; + border-left: 2px solid $gray; + padding: 0.1em 1em; + color: $gray; + font-size: 22px; + font-style: italic; + } + + .comments { + margin-top: 10px; + } + + .read-more { + text-transform: uppercase; + font-size: 15px; + } +} + +.wrapper-footer { + margin-top: 50px; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + background-color: $lightGray; +} + +footer { + padding: 20px 0; + text-align: center; +} + +// Settled on moving the import of syntax highlighting to the bottom of the CSS +// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start +@import "_highlights"; \ No newline at end of file -- cgit v1.2.3