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 --- _config.yml | 5 + _scss/_highlights.scss | 93 +++++++++ _scss/_reset.scss | 53 +++++ _scss/_variables.scss | 27 +++ scss/_highlights.scss | 93 --------- scss/_reset.scss | 53 ----- scss/_variables.scss | 27 --- scss/style.scss | 282 -------------------------- style.css | 530 ------------------------------------------------- style.scss | 284 ++++++++++++++++++++++++++ 10 files changed, 462 insertions(+), 985 deletions(-) create mode 100644 _scss/_highlights.scss create mode 100644 _scss/_reset.scss create mode 100644 _scss/_variables.scss delete mode 100644 scss/_highlights.scss delete mode 100644 scss/_reset.scss delete mode 100644 scss/_variables.scss delete mode 100755 scss/style.scss delete mode 100644 style.css create mode 100755 style.scss diff --git a/_config.yml b/_config.yml index a48f57d..75a0f91 100644 --- a/_config.yml +++ b/_config.yml @@ -55,6 +55,11 @@ permalink: /:title # The release of Jekyll Now that you're using version: beta +# Set the Sass partials directory, as we're using @imports +sass: + sass_dir: _scss + style: :expanded # You might prefer to minify using :compressed + # Use the following plug-ins gems: - jemoji # Emoji please! diff --git a/_scss/_highlights.scss b/_scss/_highlights.scss new file mode 100644 index 0000000..d764cd0 --- /dev/null +++ b/_scss/_highlights.scss @@ -0,0 +1,93 @@ + +/***********************/ +/* SYNTAX HIGHLIGHTING */ +/***********************/ + +.highlight { + background-color: $darkerGray; + padding: 5px 10px; + margin: 20px 0; +} + +.highlight pre { + // overflow: scroll; // Prefer no word wrap? Uncomment this line and comment out the 2 lines below. + word-break: break-all; + word-wrap: break-word; +} + +code { + font-family: 'Courier', monospace; + font-size: 14px; + color: #999 +} + +// Solarized Light Pygments +// Thanks https://gist.github.com/edwardhotchkiss/2005058 +.highlight .c, .highlight .c1 { color: #586E75 } /* Comment */ +.highlight .err { color: #93A1A1 } /* Error */ +.highlight .g { color: #93A1A1 } /* Generic */ +.highlight .k { color: #859900 } /* Keyword */ +.highlight .l { color: #93A1A1 } /* Literal */ +.highlight .n { color: #93A1A1 } /* Name */ +.highlight .o { color: #859900 } /* Operator */ +.highlight .x { color: #CB4B16 } /* Other */ +.highlight .p { color: #93A1A1 } /* Punctuation */ +.highlight .cm { color: #586E75 } /* Comment.Multiline */ +.highlight .cp { color: #859900 } /* Comment.Preproc */ +.highlight .c1 { color: #586E75 } /* Comment.Single */ +.highlight .cs { color: #859900 } /* Comment.Special */ +.highlight .gd { color: #2AA198 } /* Generic.Deleted */ +.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #DC322F } /* Generic.Error */ +.highlight .gh { color: #CB4B16 } /* Generic.Heading */ +.highlight .gi { color: #859900 } /* Generic.Inserted */ +.highlight .go { color: #93A1A1 } /* Generic.Output */ +.highlight .gp { color: #93A1A1 } /* Generic.Prompt */ +.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #CB4B16 } /* Generic.Subheading */ +.highlight .gt { color: #93A1A1 } /* Generic.Traceback */ +.highlight .kc { color: #CB4B16 } /* Keyword.Constant */ +.highlight .kd { color: #268BD2 } /* Keyword.Declaration */ +.highlight .kn { color: #859900 } /* Keyword.Namespace */ +.highlight .kp { color: #859900 } /* Keyword.Pseudo */ +.highlight .kr { color: #268BD2 } /* Keyword.Reserved */ +.highlight .kt { color: #DC322F } /* Keyword.Type */ +.highlight .ld { color: #93A1A1 } /* Literal.Date */ +.highlight .m { color: #2AA198 } /* Literal.Number */ +.highlight .s { color: #2AA198 } /* Literal.String */ +.highlight .na { color: #93A1A1 } /* Name.Attribute */ +.highlight .nb { color: #B58900 } /* Name.Builtin */ +.highlight .nc { color: #268BD2 } /* Name.Class */ +.highlight .no { color: #CB4B16 } /* Name.Constant */ +.highlight .nd { color: #268BD2 } /* Name.Decorator */ +.highlight .ni { color: #CB4B16 } /* Name.Entity */ +.highlight .ne { color: #CB4B16 } /* Name.Exception */ +.highlight .nf { color: #268BD2 } /* Name.Function */ +.highlight .nl { color: #93A1A1 } /* Name.Label */ +.highlight .nn { color: #93A1A1 } /* Name.Namespace */ +.highlight .nx { color: #555 } /* Name.Other */ +.highlight .py { color: #93A1A1 } /* Name.Property */ +.highlight .nt { color: #268BD2 } /* Name.Tag */ +.highlight .nv { color: #268BD2 } /* Name.Variable */ +.highlight .ow { color: #859900 } /* Operator.Word */ +.highlight .w { color: #93A1A1 } /* Text.Whitespace */ +.highlight .mf { color: #2AA198 } /* Literal.Number.Float */ +.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ +.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ +.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ +.highlight .sb { color: #586E75 } /* Literal.String.Backtick */ +.highlight .sc { color: #2AA198 } /* Literal.String.Char */ +.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ +.highlight .s2 { color: #2AA198 } /* Literal.String.Double */ +.highlight .se { color: #CB4B16 } /* Literal.String.Escape */ +.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ +.highlight .si { color: #2AA198 } /* Literal.String.Interpol */ +.highlight .sx { color: #2AA198 } /* Literal.String.Other */ +.highlight .sr { color: #DC322F } /* Literal.String.Regex */ +.highlight .s1 { color: #2AA198 } /* Literal.String.Single */ +.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ +.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #268BD2 } /* Name.Variable.Class */ +.highlight .vg { color: #268BD2 } /* Name.Variable.Global */ +.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ +.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/_scss/_reset.scss b/_scss/_reset.scss new file mode 100644 index 0000000..fcf2bf0 --- /dev/null +++ b/_scss/_reset.scss @@ -0,0 +1,53 @@ + +/***************/ +/* MEYER RESET */ +/***************/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +// HTML5 display-role reset for older browsers +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +// Apply a natural box layout model to all elements +// from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ +*, *:before, *:after { + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; +} diff --git a/_scss/_variables.scss b/_scss/_variables.scss new file mode 100644 index 0000000..5ec3394 --- /dev/null +++ b/_scss/_variables.scss @@ -0,0 +1,27 @@ + +// +// VARIABLES +// + +// Colors +$blue: #4183C4; + +// Grays +$black: #000; +$darkerGray: #222; +$darkGray: #333; +$gray: #666; +$lightGray: #eee; +$white: #fff; + +// Font stacks +$helvetica: Helvetica, Arial, sans-serif; +$helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif; +$georgia: Georgia, serif; + +// Mobile breakpoints +@mixin mobile { + @media screen and (max-width: 640px) { + @content; + } +} \ No newline at end of file diff --git a/scss/_highlights.scss b/scss/_highlights.scss deleted file mode 100644 index d764cd0..0000000 --- a/scss/_highlights.scss +++ /dev/null @@ -1,93 +0,0 @@ - -/***********************/ -/* SYNTAX HIGHLIGHTING */ -/***********************/ - -.highlight { - background-color: $darkerGray; - padding: 5px 10px; - margin: 20px 0; -} - -.highlight pre { - // overflow: scroll; // Prefer no word wrap? Uncomment this line and comment out the 2 lines below. - word-break: break-all; - word-wrap: break-word; -} - -code { - font-family: 'Courier', monospace; - font-size: 14px; - color: #999 -} - -// Solarized Light Pygments -// Thanks https://gist.github.com/edwardhotchkiss/2005058 -.highlight .c, .highlight .c1 { color: #586E75 } /* Comment */ -.highlight .err { color: #93A1A1 } /* Error */ -.highlight .g { color: #93A1A1 } /* Generic */ -.highlight .k { color: #859900 } /* Keyword */ -.highlight .l { color: #93A1A1 } /* Literal */ -.highlight .n { color: #93A1A1 } /* Name */ -.highlight .o { color: #859900 } /* Operator */ -.highlight .x { color: #CB4B16 } /* Other */ -.highlight .p { color: #93A1A1 } /* Punctuation */ -.highlight .cm { color: #586E75 } /* Comment.Multiline */ -.highlight .cp { color: #859900 } /* Comment.Preproc */ -.highlight .c1 { color: #586E75 } /* Comment.Single */ -.highlight .cs { color: #859900 } /* Comment.Special */ -.highlight .gd { color: #2AA198 } /* Generic.Deleted */ -.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #DC322F } /* Generic.Error */ -.highlight .gh { color: #CB4B16 } /* Generic.Heading */ -.highlight .gi { color: #859900 } /* Generic.Inserted */ -.highlight .go { color: #93A1A1 } /* Generic.Output */ -.highlight .gp { color: #93A1A1 } /* Generic.Prompt */ -.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #CB4B16 } /* Generic.Subheading */ -.highlight .gt { color: #93A1A1 } /* Generic.Traceback */ -.highlight .kc { color: #CB4B16 } /* Keyword.Constant */ -.highlight .kd { color: #268BD2 } /* Keyword.Declaration */ -.highlight .kn { color: #859900 } /* Keyword.Namespace */ -.highlight .kp { color: #859900 } /* Keyword.Pseudo */ -.highlight .kr { color: #268BD2 } /* Keyword.Reserved */ -.highlight .kt { color: #DC322F } /* Keyword.Type */ -.highlight .ld { color: #93A1A1 } /* Literal.Date */ -.highlight .m { color: #2AA198 } /* Literal.Number */ -.highlight .s { color: #2AA198 } /* Literal.String */ -.highlight .na { color: #93A1A1 } /* Name.Attribute */ -.highlight .nb { color: #B58900 } /* Name.Builtin */ -.highlight .nc { color: #268BD2 } /* Name.Class */ -.highlight .no { color: #CB4B16 } /* Name.Constant */ -.highlight .nd { color: #268BD2 } /* Name.Decorator */ -.highlight .ni { color: #CB4B16 } /* Name.Entity */ -.highlight .ne { color: #CB4B16 } /* Name.Exception */ -.highlight .nf { color: #268BD2 } /* Name.Function */ -.highlight .nl { color: #93A1A1 } /* Name.Label */ -.highlight .nn { color: #93A1A1 } /* Name.Namespace */ -.highlight .nx { color: #555 } /* Name.Other */ -.highlight .py { color: #93A1A1 } /* Name.Property */ -.highlight .nt { color: #268BD2 } /* Name.Tag */ -.highlight .nv { color: #268BD2 } /* Name.Variable */ -.highlight .ow { color: #859900 } /* Operator.Word */ -.highlight .w { color: #93A1A1 } /* Text.Whitespace */ -.highlight .mf { color: #2AA198 } /* Literal.Number.Float */ -.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ -.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ -.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ -.highlight .sb { color: #586E75 } /* Literal.String.Backtick */ -.highlight .sc { color: #2AA198 } /* Literal.String.Char */ -.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ -.highlight .s2 { color: #2AA198 } /* Literal.String.Double */ -.highlight .se { color: #CB4B16 } /* Literal.String.Escape */ -.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ -.highlight .si { color: #2AA198 } /* Literal.String.Interpol */ -.highlight .sx { color: #2AA198 } /* Literal.String.Other */ -.highlight .sr { color: #DC322F } /* Literal.String.Regex */ -.highlight .s1 { color: #2AA198 } /* Literal.String.Single */ -.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ -.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #268BD2 } /* Name.Variable.Class */ -.highlight .vg { color: #268BD2 } /* Name.Variable.Global */ -.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ -.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/scss/_reset.scss b/scss/_reset.scss deleted file mode 100644 index fcf2bf0..0000000 --- a/scss/_reset.scss +++ /dev/null @@ -1,53 +0,0 @@ - -/***************/ -/* MEYER RESET */ -/***************/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -// HTML5 display-role reset for older browsers -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -// Apply a natural box layout model to all elements -// from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ -*, *:before, *:after { - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -} diff --git a/scss/_variables.scss b/scss/_variables.scss deleted file mode 100644 index 5ec3394..0000000 --- a/scss/_variables.scss +++ /dev/null @@ -1,27 +0,0 @@ - -// -// VARIABLES -// - -// Colors -$blue: #4183C4; - -// Grays -$black: #000; -$darkerGray: #222; -$darkGray: #333; -$gray: #666; -$lightGray: #eee; -$white: #fff; - -// Font stacks -$helvetica: Helvetica, Arial, sans-serif; -$helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif; -$georgia: Georgia, serif; - -// Mobile breakpoints -@mixin mobile { - @media screen and (max-width: 640px) { - @content; - } -} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss deleted file mode 100755 index d1a7fa6..0000000 --- a/scss/style.scss +++ /dev/null @@ -1,282 +0,0 @@ - -// -// 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 diff --git a/style.css b/style.css deleted file mode 100644 index 8734188..0000000 --- a/style.css +++ /dev/null @@ -1,530 +0,0 @@ -/***************/ -/* MEYER RESET */ -/***************/ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - -blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -*, *:before, *:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - -/*/ -/* BASE RULES -/*/ -html { - font-size: 100%; } - -body { - background: white; - font: 18px/1.4 Helvetica, Arial, sans-serif; - color: #333333; } - -.container { - margin: 0 auto; - max-width: 740px; - padding: 0 10px; - width: 100%; } - -h1, h2, h3, h4, h5, h6 { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222222; - font-weight: 600; - line-height: 1.7; - margin: 1em 0 15px; - padding: 0; } - @media screen and (max-width: 640px) { - h1, h2, h3, h4, h5, h6 { - line-height: 1.4; } } - -h1 { - font-weight: 500; - font-size: 32px; } - h1 a { - color: inherit; } - -h2 { - font-weight: 400; - font-size: 24px; } - -h3 { - font-size: 18px; } - -h4 { - font-size: 18px; - color: #666666; } - -p { - margin: 15px 0; } - -a { - color: #4183c4; - text-decoration: none; - cursor: pointer; } - a:hover, a:active { - color: #4183c4; } - -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: #666666; } - -::-moz-selection { - color: black; - background: #eeeeee; } - -::selection { - color: black; - background: #eeeeee; } - -.clearfix:before, .clearfix:after { - content: " "; - display: table; } - -.clearfix:after { - clear: both; } - -/*/ -/* LAYOUT / SECTIONS -/*/ -.wrapper-masthead { - margin-bottom: 50px; } - -.masthead { - padding: 20px 0; - border-bottom: 1px solid #eeeeee; } - @media screen and (max-width: 640px) { - .masthead { - text-align: center; } } - -.site-avatar { - float: left; - width: 70px; - height: 70px; - margin-right: 15px; } - @media screen and (max-width: 640px) { - .site-avatar { - float: none; - display: block; - margin: 0 auto; } } - .site-avatar img { - border-radius: 5px; } - -.site-info { - float: left; } - @media screen and (max-width: 640px) { - .site-info { - float: none; - display: block; - margin: 0 auto; } } - -.site-name { - margin: 0; - color: #333333; - cursor: pointer; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - font-size: 28px; - letter-spacing: 1px; } - -.site-description { - margin: -5px 0 0 0; - color: #666666; - font-size: 16px; } - @media screen and (max-width: 640px) { - .site-description { - margin: 3px 0; } } - -nav { - float: right; - margin-top: 23px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 18px; } - @media screen and (max-width: 640px) { - nav { - float: none; - margin-top: 9px; - display: block; - font-size: 16px; } } - nav a { - margin-left: 20px; - color: #333333; - text-align: right; - font-weight: 300; - letter-spacing: 1px; } - @media screen and (max-width: 640px) { - nav a { - margin: 0 10px; - color: #4183c4; } } - -.posts > .post { - padding-bottom: 2em; - border-bottom: 1px solid #eeeeee; } - -.posts > .post:last-child { - padding-bottom: 1em; - border-bottom: none; } - -.post blockquote { - margin: 1.8em 0.8em; - border-left: 2px solid #666666; - padding: 0.1em 1em; - color: #666666; - font-size: 22px; - font-style: italic; } -.post .comments { - margin-top: 10px; } -.post .read-more { - text-transform: uppercase; - font-size: 15px; } - -.wrapper-footer { - margin-top: 50px; - border-top: 1px solid #dddddd; - border-bottom: 1px solid #dddddd; - background-color: #eeeeee; } - -footer { - padding: 20px 0; - text-align: center; } - -/***********************/ -/* SYNTAX HIGHLIGHTING */ -/***********************/ -.highlight { - background-color: #222222; - padding: 5px 10px; - margin: 20px 0; } - -.highlight pre { - word-break: break-all; - word-wrap: break-word; } - -code { - font-family: 'Courier', monospace; - font-size: 14px; - color: #999999; } - -.highlight .c, .highlight .c1 { - color: #586e75; } - -/* Comment */ -.highlight .err { - color: #93a1a1; } - -/* Error */ -.highlight .g { - color: #93a1a1; } - -/* Generic */ -.highlight .k { - color: #859900; } - -/* Keyword */ -.highlight .l { - color: #93a1a1; } - -/* Literal */ -.highlight .n { - color: #93a1a1; } - -/* Name */ -.highlight .o { - color: #859900; } - -/* Operator */ -.highlight .x { - color: #cb4b16; } - -/* Other */ -.highlight .p { - color: #93a1a1; } - -/* Punctuation */ -.highlight .cm { - color: #586e75; } - -/* Comment.Multiline */ -.highlight .cp { - color: #859900; } - -/* Comment.Preproc */ -.highlight .c1 { - color: #586e75; } - -/* Comment.Single */ -.highlight .cs { - color: #859900; } - -/* Comment.Special */ -.highlight .gd { - color: #2aa198; } - -/* Generic.Deleted */ -.highlight .ge { - color: #93a1a1; - font-style: italic; } - -/* Generic.Emph */ -.highlight .gr { - color: #dc322f; } - -/* Generic.Error */ -.highlight .gh { - color: #cb4b16; } - -/* Generic.Heading */ -.highlight .gi { - color: #859900; } - -/* Generic.Inserted */ -.highlight .go { - color: #93a1a1; } - -/* Generic.Output */ -.highlight .gp { - color: #93a1a1; } - -/* Generic.Prompt */ -.highlight .gs { - color: #93a1a1; - font-weight: bold; } - -/* Generic.Strong */ -.highlight .gu { - color: #cb4b16; } - -/* Generic.Subheading */ -.highlight .gt { - color: #93a1a1; } - -/* Generic.Traceback */ -.highlight .kc { - color: #cb4b16; } - -/* Keyword.Constant */ -.highlight .kd { - color: #268bd2; } - -/* Keyword.Declaration */ -.highlight .kn { - color: #859900; } - -/* Keyword.Namespace */ -.highlight .kp { - color: #859900; } - -/* Keyword.Pseudo */ -.highlight .kr { - color: #268bd2; } - -/* Keyword.Reserved */ -.highlight .kt { - color: #dc322f; } - -/* Keyword.Type */ -.highlight .ld { - color: #93a1a1; } - -/* Literal.Date */ -.highlight .m { - color: #2aa198; } - -/* Literal.Number */ -.highlight .s { - color: #2aa198; } - -/* Literal.String */ -.highlight .na { - color: #93a1a1; } - -/* Name.Attribute */ -.highlight .nb { - color: #b58900; } - -/* Name.Builtin */ -.highlight .nc { - color: #268bd2; } - -/* Name.Class */ -.highlight .no { - color: #cb4b16; } - -/* Name.Constant */ -.highlight .nd { - color: #268bd2; } - -/* Name.Decorator */ -.highlight .ni { - color: #cb4b16; } - -/* Name.Entity */ -.highlight .ne { - color: #cb4b16; } - -/* Name.Exception */ -.highlight .nf { - color: #268bd2; } - -/* Name.Function */ -.highlight .nl { - color: #93a1a1; } - -/* Name.Label */ -.highlight .nn { - color: #93a1a1; } - -/* Name.Namespace */ -.highlight .nx { - color: #555555; } - -/* Name.Other */ -.highlight .py { - color: #93a1a1; } - -/* Name.Property */ -.highlight .nt { - color: #268bd2; } - -/* Name.Tag */ -.highlight .nv { - color: #268bd2; } - -/* Name.Variable */ -.highlight .ow { - color: #859900; } - -/* Operator.Word */ -.highlight .w { - color: #93a1a1; } - -/* Text.Whitespace */ -.highlight .mf { - color: #2aa198; } - -/* Literal.Number.Float */ -.highlight .mh { - color: #2aa198; } - -/* Literal.Number.Hex */ -.highlight .mi { - color: #2aa198; } - -/* Literal.Number.Integer */ -.highlight .mo { - color: #2aa198; } - -/* Literal.Number.Oct */ -.highlight .sb { - color: #586e75; } - -/* Literal.String.Backtick */ -.highlight .sc { - color: #2aa198; } - -/* Literal.String.Char */ -.highlight .sd { - color: #93a1a1; } - -/* Literal.String.Doc */ -.highlight .s2 { - color: #2aa198; } - -/* Literal.String.Double */ -.highlight .se { - color: #cb4b16; } - -/* Literal.String.Escape */ -.highlight .sh { - color: #93a1a1; } - -/* Literal.String.Heredoc */ -.highlight .si { - color: #2aa198; } - -/* Literal.String.Interpol */ -.highlight .sx { - color: #2aa198; } - -/* Literal.String.Other */ -.highlight .sr { - color: #dc322f; } - -/* Literal.String.Regex */ -.highlight .s1 { - color: #2aa198; } - -/* Literal.String.Single */ -.highlight .ss { - color: #2aa198; } - -/* Literal.String.Symbol */ -.highlight .bp { - color: #268bd2; } - -/* Name.Builtin.Pseudo */ -.highlight .vc { - color: #268bd2; } - -/* Name.Variable.Class */ -.highlight .vg { - color: #268bd2; } - -/* Name.Variable.Global */ -.highlight .vi { - color: #268bd2; } - -/* Name.Variable.Instance */ -.highlight .il { - color: #2aa198; } - -/* Literal.Number.Integer.Long */ \ No newline at end of file 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