From bef7dc6c7378cfdfa3662d60873335b7f7dc6f1e Mon Sep 17 00:00:00 2001 From: Jesper Hess Nielsen Date: Wed, 6 Apr 2016 18:15:42 +0200 Subject: [PATCH] Layout updates --- _includes/header.html | 20 ++-- _layouts/default.html | 19 ++-- _layouts/page.html | 12 ++- _layouts/post.html | 14 ++- _sass/_base.scss | 209 ++++++++++++++++++++++++++++++++++++++---- _sass/_layout.scss | 199 ++++++++++++++++++++-------------------- css/main.scss | 55 ++++++++++- 7 files changed, 372 insertions(+), 156 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 1a7e89a..e341bb8 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,18 +1,12 @@ -
-

{{ site.title }}

-
\ No newline at end of file +
+
+ {{ site.title }} +
+
This site is also available as a Tor hidden service here: http://mjfjbs3547exsy6r.onion
+
diff --git a/_layouts/default.html b/_layouts/default.html index 2406af3..c369788 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,15 +1,10 @@ -{% include head.html %} - - - {% include header.html %} -
-
+ {% include head.html %} + + {% include header.html %} +
{{ content }} -
- {% include footer.html %} -
- - - \ No newline at end of file + + + diff --git a/_layouts/page.html b/_layouts/page.html index fff3b5b..a1c7288 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -1,7 +1,11 @@ --- layout: default --- - -

{{ page.title }}

- - {{ content }} \ No newline at end of file +
+
+

{{ page.title }}

+
+
+ {{ content }} +
+
diff --git a/_layouts/post.html b/_layouts/post.html index 1417320..0da8930 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,8 +1,12 @@ --- layout: default --- - -

{{ page.title }}

- - -{{ content }} \ No newline at end of file +
+
+

{{ page.title }}

+

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

+
+
+ {{ content }} +
+
diff --git a/_sass/_base.scss b/_sass/_base.scss index f5f73c5..5466826 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -1,18 +1,193 @@ -$content-width: 800px; -$main: #19CCAA; -$font-style: 'Open Sans', sans-serif; -$font-color: #262626; -$link-color: #425469; -$link-hover-color: $main; -$heading-font: 'Muli', sans-serif; -$heading-font-color: #425469; -$light: #E7EDF4; -$header: #1D1425; +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; +} -*, -*::before, -*::after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} \ No newline at end of file + + +/** + * Basic styling + */ +body { + font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; + color: $text-color; + background-color: $background-color; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, table, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: $base-font-weight; +} + + + +/** + * Links + */ +a { + color: $brand-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + + + +/** + * Blockquotes + */ +blockquote { + color: $grey-color; + padding-left: $spacing-unit / 2; + border-left: 2px solid $grey-color-light; + font-style: italic; + font-size: $small-font-size; + + > :last-child { + margin-bottom: 0; + } +} + + + +/** + * Code formatting + */ +pre, +code { + background-color: #fcfcfc; +} + +code { + padding: 1px 5px; + font-family: $code-font-family; +} + +pre { + padding: 8px 12px; + overflow-x: auto; + border-left: 2px solid $grey-color-light; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + tab-size: 4; + } +} + + + +/** + * Table + */ +table { + width: 100%; + max-width: 100%; + border-collapse: separate; + border-spacing: 0; + table-layout: fixed; +} + +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; +} + + + +/** + * Clearfix + */ +%clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss index cebc0be..71695e3 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -1,111 +1,110 @@ -body { - margin: 0; - color: $font-color; - font-family: $font-style; - font-size: 1.1em; - line-height: 1.6; - -webkit-font-smoothing: antialiased; +/** + * Site header + */ +.site-header { + border-bottom: 1px solid $grey-color-light; + text-align: center; + padding: 1rem 0; } -h1, -h2, -h3 { - font-weight: 600; - color: $heading-font-color; - font-family: $heading-font; - line-height: 1.5; -} -h1 { - color: $main; - font-size: 2.5em; - a, - a:visited { + +.site-title { + font-size: 1.5rem; + font-weight: 300; + letter-spacing: -1px; + color: $grey-color-dark; + + &, + &:hover { text-decoration: none; - color: $main; } } -h2 { - font-size: 2em; -} -a, -a:visited { - color: $link-color; - text-decoration: underline; - font-weight: bold; -} -a:hover { - color: $link-hover-color; - text-decoration: underline; -} -header { - background: $header; - padding: 0px 15px; - text-align: center; - margin: 50px 0 0; - height: 50vh; - display: flex; - justify-content: center; - align-items: center; -} -main { - padding: 0 15px; - max-width: $content-width; - margin: 0 auto; -} -time { - color: #898989; -} -.container { - max-width: $content-width; + + + +/** + * Page content + */ +.page-content { + position: relative; + max-width: 48rem; + padding: $spacing-unit ($spacing-unit * 0.75); margin: 0 auto; + box-sizing: border-box; } -/* Aside */ -aside { - position: fixed; - top: 0; - left: 0; - background: #fff; - width: 100%; - z-index: 2; - border-bottom: 1px solid lighten($light, 30%); - box-shadow: 0px 1px 1px RGBA(4, 25, 54, .1); - nav { - float: left; - max-width: 800px; - margin: 0 auto; - ul { - margin: 0; - padding: 0; - list-style: none; - li { - float: left; - position: relative; - a { - text-decoration: none; - display: block; - padding: 15px; - font-family: 'Muli', sans-serif; - line-height: 20px; - margin-bottom: -1px; - box-shadow: 0; - &:hover, - &:active { - background: $header; - text-decoration: none; - color: $main; - } - } - } - } - &:after { - content: ''; - display: table; - clear: both; +/** + * Pages + */ +.home { + section + section { + margin-top: $spacing-unit; + } +} + +.smallcap { + text-transform: lowercase; + font-variant: small-caps; + + &::first-letter { + text-transform: uppercase; + } +} + +.post-list > li { + margin-bottom: $spacing-unit / 4; + + @include media-query($on-palm) { + span { + display: block; + font-size: $small-font-size; } } } -footer { - text-align: center; - padding: 40px; -} \ No newline at end of file + + + +/** + * Posts + */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title { + font-size: 2rem; + letter-spacing: -1px; + line-height: 1; +} + +.post-meta { + font-size: $small-font-size; + color: $grey-color; +} + +.post-content { + margin-bottom: $spacing-unit; + + h1, h2, h3, + h4, h5, h6 { + margin-top: 2rem; + } + + h1, + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.25rem; + } + + h5, + h6 { + font-size: 1rem; + } +} diff --git a/css/main.scss b/css/main.scss index 1339dc5..4f84033 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,7 +1,52 @@ --- -# Front matter comment to ensure Jekyll properly reads file. +# Only the main Sass file needs front matter (the dashes are enough) --- -@import - "base", - "layout", - "syntax-highlighting" \ No newline at end of file +@charset "utf-8"; + + +// Our variables +$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; +$base-font-weight: 400; +$small-font-size: 0.875rem; +$base-line-height: 1.5; + +$spacing-unit: 2rem; + +$text-color: #111; +$background-color: #fff; +$brand-color: #2a7ae2; + +$grey-color: #828282; +$grey-color-light: lighten($grey-color, 40%); +$grey-color-dark: darken($grey-color, 25%); + +// Width of the content area +$on-palm: 600px; +$on-laptop: 800px; + + + +// Use media queries like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + + + +// Import partials from `sass_dir` (defaults to `_sass`) +@import + url(https://fonts.googleapis.com/css?family=Cutive+Mono), + "base", + "layout", + "syntax-highlighting" +;