From 063d5f9880aafb2587aa44f4b2b4cd1df0d6de1a Mon Sep 17 00:00:00 2001 From: Jesper Hess Nielsen Date: Thu, 31 Mar 2016 21:25:03 +0200 Subject: [PATCH] Implemented "slim" template from https://github.com/syaning/slim --- _layouts/default.html | 16 +-- _layouts/page.html | 11 +- _layouts/post.html | 16 +-- _sass/_base.scss | 99 ++++++-------- _sass/_layout.scss | 234 +++++++------------------------- _sass/_syntax-highlighting.scss | 153 ++++++++++++--------- css/main.scss | 16 +-- 7 files changed, 207 insertions(+), 338 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index e4ab96f..0ba67ec 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,20 +1,12 @@ - {% include head.html %} - - - {% include header.html %} - +
+ {{ site.title }} +
-
- {{ content }} -
+ {{ content }}
- - {% include footer.html %} - - diff --git a/_layouts/page.html b/_layouts/page.html index 74c1a11..a1c7288 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,14 +1,11 @@ --- layout: default --- -
- +

{{ page.title }}

- -
+
{{ content }} -
- -
+ + diff --git a/_layouts/post.html b/_layouts/post.html index a2b4e52..ab0adce 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,15 +1,13 @@ --- layout: default --- -
- +
-

{{ page.title }}

-

{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}

+

{{ page.title }}

+

{% if page.author %} • {% endif %}

- -
+
{{ content }} -
- -
+ + {% include dq.html %} + diff --git a/_sass/_base.scss b/_sass/_base.scss index e5fd0fd..5466826 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -14,13 +14,9 @@ dl, dd, ol, ul, figure { * Basic styling */ body { - font-family: $base-font-family; - font-size: $base-font-size; - line-height: $base-line-height; - font-weight: 300; + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; color: $text-color; background-color: $background-color; - -webkit-text-size-adjust: 100%; } @@ -30,7 +26,7 @@ body { */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, -ul, ol, dl, figure, +ul, ol, dl, figure, table, %vertical-rhythm { margin-bottom: $spacing-unit / 2; } @@ -80,7 +76,7 @@ li { * Headings */ h1, h2, h3, h4, h5, h6 { - font-weight: 300; + font-weight: $base-font-weight; } @@ -92,12 +88,7 @@ a { color: $brand-color; text-decoration: none; - &:visited { - color: darken($brand-color, 15%); - } - &:hover { - color: $text-color; text-decoration: underline; } } @@ -109,11 +100,10 @@ a { */ blockquote { color: $grey-color; - border-left: 4px solid $grey-color-light; padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; + border-left: 2px solid $grey-color-light; font-style: italic; + font-size: $small-font-size; > :last-child { margin-bottom: 0; @@ -127,47 +117,66 @@ blockquote { */ pre, code { - font-size: 15px; - border: 1px solid $grey-color-light; - border-radius: 3px; - background-color: #eef; + background-color: #fcfcfc; } code { padding: 1px 5px; + font-family: $code-font-family; } pre { padding: 8px 12px; - overflow-x: scroll; + overflow-x: auto; + border-left: 2px solid $grey-color-light; > code { border: 0; padding-right: 0; padding-left: 0; + tab-size: 4; } } /** - * Wrapper + * Table */ -.wrapper { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); - max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); - margin-right: auto; - margin-left: auto; - padding-right: $spacing-unit; - padding-left: $spacing-unit; - @extend %clearfix; +table { + width: 100%; + max-width: 100%; + border-collapse: separate; + border-spacing: 0; + table-layout: fixed; +} - @include media-query($on-laptop) { - max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); - max-width: calc(#{$content-width} - (#{$spacing-unit})); - padding-right: $spacing-unit / 2; - padding-left: $spacing-unit / 2; - } +th, +td { + padding: 0.5rem; + line-height: inherit; +} + +th { + text-align: left; + vertical-align: bottom; + border-bottom: 2px solid $grey-color-light; +} + +td { + vertical-align: top; + border-bottom: 1px solid $grey-color-light; +} + + +/** + * Horizontal rule + */ +hr { + width: 30%; + border: none; + border-top: 1px solid lighten($brand-color, 30%);; + margin: $spacing-unit auto; } @@ -176,29 +185,9 @@ pre { * Clearfix */ %clearfix { - &:after { content: ""; display: table; clear: both; } } - - - -/** - * Icons - */ -.icon { - - > svg { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; - - path { - fill: $grey-color; - } - } -} diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 0be167f..71695e3 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -2,157 +2,20 @@ * Site header */ .site-header { - border-top: 5px solid $grey-color-dark; border-bottom: 1px solid $grey-color-light; - min-height: 56px; - - // Positioning context for the mobile navigation icon - position: relative; + text-align: center; + padding: 1rem 0; } .site-title { - font-size: 32px; - line-height: 56px; + font-size: 1.5rem; + font-weight: 300; letter-spacing: -1px; - margin-bottom: 0; - float: left; + color: $grey-color-dark; &, - &:visited { - color: $grey-color-dark; - } -} - -.site-nav { - float: right; - line-height: 56px; - - .menu-icon { - display: none; - } - - .page-link { - color: $text-color; - line-height: $base-line-height; - - // Gaps between nav items, but not on the first one - &:not(:first-child) { - margin-left: 20px; - } - } - - @include media-query($on-palm) { - position: absolute; - top: 9px; - right: 30px; - background-color: $background-color; - border: 1px solid $grey-color-light; - border-radius: 5px; - text-align: right; - - .menu-icon { - display: block; - float: right; - width: 36px; - height: 26px; - line-height: 0; - padding-top: 10px; - text-align: center; - - > svg { - width: 18px; - height: 15px; - - path { - fill: $grey-color-dark; - } - } - } - - .trigger { - clear: both; - display: none; - } - - &:hover .trigger { - display: block; - padding-bottom: 5px; - } - - .page-link { - display: block; - padding: 5px 10px; - } - } -} - - - -/** - * Site footer - */ -.site-footer { - border-top: 1px solid $grey-color-light; - padding: $spacing-unit 0; -} - -.footer-heading { - font-size: 18px; - margin-bottom: $spacing-unit / 2; -} - -.contact-list, -.social-media-list { - list-style: none; - margin-left: 0; -} - -.footer-col-wrapper { - font-size: 15px; - color: $grey-color; - margin-left: -$spacing-unit / 2; - @extend %clearfix; -} - -.footer-col { - float: left; - margin-bottom: $spacing-unit / 2; - padding-left: $spacing-unit / 2; -} - -.footer-col-1 { - width: -webkit-calc(35% - (#{$spacing-unit} / 2)); - width: calc(35% - (#{$spacing-unit} / 2)); -} - -.footer-col-2 { - width: -webkit-calc(20% - (#{$spacing-unit} / 2)); - width: calc(20% - (#{$spacing-unit} / 2)); -} - -.footer-col-3 { - width: -webkit-calc(45% - (#{$spacing-unit} / 2)); - width: calc(45% - (#{$spacing-unit} / 2)); -} - -@include media-query($on-laptop) { - .footer-col-1, - .footer-col-2 { - width: -webkit-calc(50% - (#{$spacing-unit} / 2)); - width: calc(50% - (#{$spacing-unit} / 2)); - } - - .footer-col-3 { - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); - } -} - -@include media-query($on-palm) { - .footer-col { - float: none; - width: -webkit-calc(100% - (#{$spacing-unit} / 2)); - width: calc(100% - (#{$spacing-unit} / 2)); + &:hover { + text-decoration: none; } } @@ -162,30 +25,41 @@ * Page content */ .page-content { - padding: $spacing-unit 0; + position: relative; + max-width: 48rem; + padding: $spacing-unit ($spacing-unit * 0.75); + margin: 0 auto; + box-sizing: border-box; } -.page-heading { - font-size: 20px; -} -.post-list { - margin-left: 0; - list-style: none; - - > li { - margin-bottom: $spacing-unit; +/** + * Pages + */ +.home { + section + section { + margin-top: $spacing-unit; } } -.post-meta { - font-size: $small-font-size; - color: $grey-color; +.smallcap { + text-transform: lowercase; + font-variant: small-caps; + + &::first-letter { + text-transform: uppercase; + } } -.post-link { - display: block; - font-size: 24px; +.post-list > li { + margin-bottom: $spacing-unit / 4; + + @include media-query($on-palm) { + span { + display: block; + font-size: $small-font-size; + } + } } @@ -198,43 +72,39 @@ } .post-title { - font-size: 42px; + font-size: 2rem; letter-spacing: -1px; line-height: 1; +} - @include media-query($on-laptop) { - font-size: 36px; - } +.post-meta { + font-size: $small-font-size; + color: $grey-color; } .post-content { margin-bottom: $spacing-unit; - h2 { - font-size: 32px; + h1, h2, h3, + h4, h5, h6 { + margin-top: 2rem; + } - @include media-query($on-laptop) { - font-size: 28px; - } + h1, + h2 { + font-size: 2rem; } h3 { - font-size: 26px; - - @include media-query($on-laptop) { - font-size: 22px; - } + font-size: 1.5rem; } h4 { - font-size: 20px; + font-size: 1.25rem; + } - @include media-query($on-laptop) { - font-size: 18px; - } + h5, + h6 { + font-size: 1rem; } } - -#test { - color: green; -} \ No newline at end of file diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss index e36627d..57dbad3 100644 --- a/_sass/_syntax-highlighting.scss +++ b/_sass/_syntax-highlighting.scss @@ -1,67 +1,90 @@ -/** - * Syntax highlighting styles - */ -.highlight { - background: #fff; - @extend %vertical-rhythm; +/* Solarized Light - .c { color: #998; font-style: italic } // Comment - .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator - .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc - .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special - .gd { color: #000; background-color: #fdd } // Generic.Deleted - .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific - .ge { font-style: italic } // Generic.Emph - .gr { color: #a00 } // Generic.Error - .gh { color: #999 } // Generic.Heading - .gi { color: #000; background-color: #dfd } // Generic.Inserted - .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific - .go { color: #888 } // Generic.Output - .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong - .gu { color: #aaa } // Generic.Subheading - .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type - .m { color: #099 } // Literal.Number - .s { color: #d14 } // Literal.String - .na { color: #008080 } // Name.Attribute - .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class - .no { color: #008080 } // Name.Constant - .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function - .nn { color: #555 } // Name.Namespace - .nt { color: #000080 } // Name.Tag - .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word - .w { color: #bbb } // Text.Whitespace - .mf { color: #099 } // Literal.Number.Float - .mh { color: #099 } // Literal.Number.Hex - .mi { color: #099 } // Literal.Number.Integer - .mo { color: #099 } // Literal.Number.Oct - .sb { color: #d14 } // Literal.String.Backtick - .sc { color: #d14 } // Literal.String.Char - .sd { color: #d14 } // Literal.String.Doc - .s2 { color: #d14 } // Literal.String.Double - .se { color: #d14 } // Literal.String.Escape - .sh { color: #d14 } // Literal.String.Heredoc - .si { color: #d14 } // Literal.String.Interpol - .sx { color: #d14 } // Literal.String.Other - .sr { color: #009926 } // Literal.String.Regex - .s1 { color: #d14 } // Literal.String.Single - .ss { color: #990073 } // Literal.String.Symbol - .bp { color: #999 } // Name.Builtin.Pseudo - .vc { color: #008080 } // Name.Variable.Class - .vg { color: #008080 } // Name.Variable.Global - .vi { color: #008080 } // Name.Variable.Instance - .il { color: #099 } // Literal.Number.Integer.Long +For use with Jekyll and Pygments + +http://ethanschoonover.com/solarized + +SOLARIZED HEX ROLE +--------- -------- ------------------------------------------ +base01 #586e75 body text / default code / primary content +base1 #93a1a1 comments / secondary content +base3 #fdf6e3 background +orange #cb4b16 constants +red #dc322f regex, special keywords +blue #268bd2 reserved keywords +cyan #2aa198 strings, numbers +green #859900 operators, other keywords +*/ + +.highlight { + background-color: #fcfcfc; + color: #586e75; + .c { color: #93a1a1 } /* Comment */ + .err{ color: #586e75 } /* Error */ + .g{ color: #586e75 } /* Generic */ + .k{ color: #859900 } /* Keyword */ + .l{ color: #586e75 } /* Literal */ + .n{ color: #586e75 } /* Name */ + .o{ color: #859900 } /* Operator */ + .x{ color: #cb4b16 } /* Other */ + .p{ color: #586e75 } /* Punctuation */ + .cm{ color: #93a1a1 } /* Comment.Multiline */ + .cp{ color: #859900 } /* Comment.Preproc */ + .c1{ color: #93a1a1 } /* Comment.Single */ + .cs{ color: #859900 } /* Comment.Special */ + .gd{ color: #2aa198 } /* Generic.Deleted */ + .ge{ color: #586e75; font-style: italic } /* Generic.Emph */ + .gr{ color: #dc322f } /* Generic.Error */ + .gh{ color: #cb4b16 } /* Generic.Heading */ + .gi{ color: #859900 } /* Generic.Inserted */ + .go{ color: #586e75 } /* Generic.Output */ + .gp{ color: #586e75 } /* Generic.Prompt */ + .gs{ color: #586e75; font-weight: bold } /* Generic.Strong */ + .gu{ color: #cb4b16 } /* Generic.Subheading */ + .gt{ color: #586e75 } /* Generic.Traceback */ + .kc{ color: #cb4b16 } /* Keyword.Constant */ + .kd{ color: #268bd2 } /* Keyword.Declaration */ + .kn{ color: #859900 } /* Keyword.Namespace */ + .kp{ color: #859900 } /* Keyword.Pseudo */ + .kr{ color: #268bd2 } /* Keyword.Reserved */ + .kt{ color: #dc322f } /* Keyword.Type */ + .ld{ color: #586e75 } /* Literal.Date */ + .m{ color: #2aa198 } /* Literal.Number */ + .s{ color: #2aa198 } /* Literal.String */ + .na{ color: #586e75 } /* Name.Attribute */ + .nb{ color: #B58900 } /* Name.Builtin */ + .nc{ color: #268bd2 } /* Name.Class */ + .no{ color: #cb4b16 } /* Name.Constant */ + .nd{ color: #268bd2 } /* Name.Decorator */ + .ni{ color: #cb4b16 } /* Name.Entity */ + .ne{ color: #cb4b16 } /* Name.Exception */ + .nf{ color: #268bd2 } /* Name.Function */ + .nl{ color: #586e75 } /* Name.Label */ + .nn{ color: #586e75 } /* Name.Namespace */ + .nx{ color: #586e75 } /* Name.Other */ + .py{ color: #586e75 } /* Name.Property */ + .nt{ color: #268bd2 } /* Name.Tag */ + .nv{ color: #268bd2 } /* Name.Variable */ + .ow{ color: #859900 } /* Operator.Word */ + .w{ color: #586e75 } /* Text.Whitespace */ + .mf{ color: #2aa198 } /* Literal.Number.Float */ + .mh{ color: #2aa198 } /* Literal.Number.Hex */ + .mi{ color: #2aa198 } /* Literal.Number.Integer */ + .mo{ color: #2aa198 } /* Literal.Number.Oct */ + .sb{ color: #93a1a1 } /* Literal.String.Backtick */ + .sc{ color: #2aa198 } /* Literal.String.Char */ + .sd{ color: #586e75 } /* Literal.String.Doc */ + .s2{ color: #2aa198 } /* Literal.String.Double */ + .se{ color: #cb4b16 } /* Literal.String.Escape */ + .sh{ color: #586e75 } /* Literal.String.Heredoc */ + .si{ color: #2aa198 } /* Literal.String.Interpol */ + .sx{ color: #2aa198 } /* Literal.String.Other */ + .sr{ color: #dc322f } /* Literal.String.Regex */ + .s1{ color: #2aa198 } /* Literal.String.Single */ + .ss{ color: #2aa198 } /* Literal.String.Symbol */ + .bp{ color: #268bd2 } /* Name.Builtin.Pseudo */ + .vc{ color: #268bd2 } /* Name.Variable.Class */ + .vg{ color: #268bd2 } /* Name.Variable.Global */ + .vi{ color: #268bd2 } /* Name.Variable.Instance */ + .il{ color: #2aa198 } /* Literal.Number.Integer.Long */ } diff --git a/css/main.scss b/css/main.scss index cc72c18..4f84033 100755 --- a/css/main.scss +++ b/css/main.scss @@ -4,17 +4,18 @@ @charset "utf-8"; - // Our variables -$base-font-family: Verdana, Helvetica, Arial, sans-serif; +$base-font-family: "Cutive Mono", "Courier New", "Helvetica Neue", Helvetica, FangSong, STFangsong, sans-serif; +$code-font-family: "Courier New", Consolas, monopace, FangSong, STFangsong; $base-font-size: 16px; -$small-font-size: $base-font-size * 0.875; +$base-font-weight: 400; +$small-font-size: 0.875rem; $base-line-height: 1.5; -$spacing-unit: 30px; +$spacing-unit: 2rem; $text-color: #111; -$background-color: #fdfdfd; +$background-color: #fff; $brand-color: #2a7ae2; $grey-color: #828282; @@ -22,14 +23,12 @@ $grey-color-light: lighten($grey-color, 40%); $grey-color-dark: darken($grey-color, 25%); // Width of the content area -$content-width: 840px; - $on-palm: 600px; $on-laptop: 800px; -// Using media queries with like this: +// Use media queries like this: // @include media-query($on-palm) { // .wrapper { // padding-right: $spacing-unit / 2; @@ -46,6 +45,7 @@ $on-laptop: 800px; // Import partials from `sass_dir` (defaults to `_sass`) @import + url(https://fonts.googleapis.com/css?family=Cutive+Mono), "base", "layout", "syntax-highlighting"