diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_highlights.scss | 60 | ||||
| -rw-r--r-- | scss/_mixins.scss | 6 | ||||
| -rw-r--r-- | scss/_reset.scss | 48 | ||||
| -rw-r--r-- | scss/_variables.scss | 32 | ||||
| -rwxr-xr-x | scss/style.scss | 216 |
5 files changed, 362 insertions, 0 deletions
diff --git a/scss/_highlights.scss b/scss/_highlights.scss new file mode 100644 index 0000000..1e651cf --- /dev/null +++ b/scss/_highlights.scss @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
\ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 0000000..d6da0e9 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,6 @@ + +// Define font-size and line height together +@mixin font-size-line-height($font-size, $line-height) { + font-size: $font-size; + line-height: $line-height; +} diff --git a/scss/_reset.scss b/scss/_reset.scss new file mode 100644 index 0000000..c50757b --- /dev/null +++ b/scss/_reset.scss @@ -0,0 +1,48 @@ + +// +// 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; +} diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 0000000..0a85575 --- /dev/null +++ b/scss/_variables.scss @@ -0,0 +1,32 @@ + +// +// VARIABLES +// + +// Colors +$blue: #4183C4; +$orange: #D26911; + +// Grays +$black: #000; +$darkerGray: #222; +$darkGray: #333; +$gray: #666; +$lightGray: #bbb; +$lighterGray: #eee; +$white: #fff; + +// Font stacks +$helvetica: Helvetica, Arial, sans-serif; +$helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif; +$georgia: Georgia, serif; + +// Breakpoints +$mobile-width: 520px !default; + +// Mobile breakpoint +@mixin mobile { + @media screen and (max-width: $mobile-width) { + @content; + } +} diff --git a/scss/style.scss b/scss/style.scss new file mode 100755 index 0000000..f49ed62 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,216 @@ + +// +// IMPORTS +// + +@import "_reset"; +@import "_variables"; +@import "_mixins"; +@import "_highlights"; // Tempted to move this to the end of the file, so that it shows up at the end of the .css + +// +// BASE RULES +// + +html { + font-size: 100%; +} + +body { + max-width: 820px; + margin: 0 auto; + + background: $white; + font: 18px/1.4 $helvetica; + color: $darkGray; +} + +h1, h2, h3, h4, h5, h6, .section > header { + font-family: $helveticaNeue; + color: $darkerGray; + font-weight: bold; + + line-height: 1.7; + margin: 2em 0 15px; + padding: 0; +} + +h1 { + font-size: 2rem; + @include mobile { + font-size: 2rem; + } +} + +h2 { + letter-spacing: 1px; + font-weight: 300; + + font-size: 1.7rem; + @include mobile { + font-size: 1.5rem; + } +} + +h3 { + font-weight: 600; + + font-size: 1.2rem; + @include mobile { + font-size: 1.2rem; + } +} + +h4 { + font-size: 1rem; + @include mobile { + font-size: 1rem; + } +} + +p { + margin: 15px 0; +} + +a { + text-decoration: none; + cursor: pointer; + color: $blue; + &:hover, &:active { + text-decoration: underline; + } +} + +ul { + padding-left: 30px; + list-style-type: disc; +} + +// Specify the color of the selection +::-moz-selection { + color: $black; + background: $lighterGray; +} +::selection { + color: $black; + background: $lighterGray; +} + + +// +// LAYOUT / SECTIONS +// + +header { + margin: 40px 0; +} + +.logo { + float: left; + + a { + text-decoration: none; + cursor: pointer; + color: $darkGray; + &:hover, &:active { + color: $blue; + } + } +} + +nav { + float: right; + + font-family: $helveticaNeue; + font-size: 1.1rem; + @include mobile { + font-size: 1rem; + } + + a { + margin-left: 25px; + text-align: right; + font-weight: 300; + letter-spacing: 1px; + color: $gray; + + &:hover, &:active { + text-decoration: none; + cursor: pointer; + color: $darkGray; + &:hover, &:active { + color: $blue; + } + } + } +} + +.logo, nav { + @include mobile { + float: none; + width: 100%; + text-align: center; + } +} + +.hero { + margin: 80px 20px 40px; + @include mobile { + margin: 40px 0; + } + + img { + float: left; + width: 160px; + padding-right: 30px; + } + + h1 { + float: left; + width: 590px; + + margin: 0; + + font-weight: 400; + font-size: 2.5rem; + line-height: 1.3; + @include mobile { + font-size: 2.5rem; + } + } + + p { + float: left; + width: 590px; + } +} + +article { + width: 700px; + //margin: 0 auto; + + @include mobile { + width: 100%; + } + + blockquote { + border-left: 2px solid $gray; + font-size: 1.2em; + font-style: italic; + margin: 1.8em .8em; + padding: 0.1em 1em; + color: $gray; + } +} + +footer { + text-align: center; + + border-top: 1px $lightGray solid; + padding: 1rem 0; + + p { + margin: 0 0 1rem 0; + font-size: 14px; + } +} |