From fddbf5f532d241ea67a6c316c7300cbe4997833d Mon Sep 17 00:00:00 2001 From: Jesper Hess Nielsen Date: Wed, 6 Apr 2016 13:06:04 +0200 Subject: [PATCH] More of the basic scaffolding for the site. All the basic stuff is in place now. --- _pages/01_about.md | 10 + _pages/02_contact.md | 9 + _sass/_base.scss | 222 ++------------------- _sass/_layout.scss | 329 ++++++++++---------------------- _sass/_syntax-highlighting.scss | 1 - about.md | 15 -- blog/index.html | 11 ++ css/main.scss | 56 +----- index.html | 20 +- 9 files changed, 153 insertions(+), 520 deletions(-) create mode 100644 _pages/01_about.md create mode 100644 _pages/02_contact.md delete mode 100644 about.md create mode 100644 blog/index.html diff --git a/_pages/01_about.md b/_pages/01_about.md new file mode 100644 index 0000000..e9795cb --- /dev/null +++ b/_pages/01_about.md @@ -0,0 +1,10 @@ +--- +layout: page +title: About +permalink: /about/ +--- + +About content goes here. + +* A list item +* Another list item \ No newline at end of file diff --git a/_pages/02_contact.md b/_pages/02_contact.md new file mode 100644 index 0000000..6ebc295 --- /dev/null +++ b/_pages/02_contact.md @@ -0,0 +1,9 @@ +--- +layout: page +title: Contact +permalink: /contact/ +--- + +Contact content goes here. + +My e-mail is [email@something.com](mailto:email@something.com). \ No newline at end of file diff --git a/_sass/_base.scss b/_sass/_base.scss index 0883c3c..f5f73c5 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -1,206 +1,18 @@ -/** - * Reset some basic elements - */ -body, h1, h2, h3, h4, h5, h6, -p, blockquote, pre, hr, -dl, dd, ol, ul, figure { - margin: 0; - padding: 0; -} +$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; - - -/** - * Basic styling - */ -body { - 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%; - -webkit-font-feature-settings: "kern" 1; - -moz-font-feature-settings: "kern" 1; - -o-font-feature-settings: "kern" 1; - font-feature-settings: "kern" 1; - font-kerning: normal; -} - - - -/** - * Set `margin-bottom` to maintain vertical rhythm - */ -h1, h2, h3, h4, h5, h6, -p, blockquote, pre, -ul, ol, dl, figure, -%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; - - &:visited { - color: darken($brand-color, 15%); - } - - &:hover { - color: $text-color; - text-decoration: underline; - } -} - - - -/** - * Blockquotes - */ -blockquote { - color: $grey-color; - border-left: 4px solid $grey-color-light; - padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; - font-style: italic; - - > :last-child { - margin-bottom: 0; - } -} - - - -/** - * Code formatting - */ -pre, -code { - font-size: 15px; - border: 1px solid $grey-color-light; - border-radius: 3px; - background-color: #eef; -} - -code { - padding: 1px 5px; -} - -pre { - padding: 8px 12px; - overflow-x: auto; - - > code { - border: 0; - padding-right: 0; - padding-left: 0; - } -} - - - -/** - * Wrapper - */ -.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; - - @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; - } -} - - - -/** - * 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; - } - } -} +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} \ No newline at end of file diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 9cbfdde..cebc0be 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -1,242 +1,111 @@ -/** - * 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; +body { + margin: 0; + color: $font-color; + font-family: $font-style; + font-size: 1.1em; + line-height: 1.6; + -webkit-font-smoothing: antialiased; } - -.site-title { - font-size: 26px; - font-weight: 300; - line-height: 56px; - letter-spacing: -1px; - margin-bottom: 0; - float: left; - - &, - &:visited { - color: $grey-color-dark; +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 { + 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; + margin: 0 auto; +} -.site-nav { - float: right; - line-height: 56px; +/* Aside */ - .menu-icon { - display: none; - } - - .page-link { - color: $text-color; - line-height: $base-line-height; - - // Gaps between nav items, but not on the last one - &:not(:last-child) { - margin-right: 20px; - } - } - - @include media-query($on-palm) { - position: absolute; - top: 9px; - right: $spacing-unit / 2; - 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; +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; + } } } } - - .trigger { + &:after { + content: ''; + display: table; clear: both; - display: none; - } - - &:hover .trigger { - display: block; - padding-bottom: 5px; - } - - .page-link { - display: block; - padding: 5px 10px; - - &:not(:last-child) { - margin-right: 0; - } - margin-left: 20px; - } - } -} - - - -/** - * 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)); - } -} - - - -/** - * Page content - */ -.page-content { - padding: $spacing-unit 0; -} - -.page-heading { - font-size: 20px; -} - -.post-list { - margin-left: 0; - list-style: none; - - > li { - margin-bottom: $spacing-unit; - } -} - -.post-meta { - font-size: $small-font-size; - color: $grey-color; -} - -.post-link { - display: block; - font-size: 24px; -} - - - -/** - * Posts - */ -.post-header { - margin-bottom: $spacing-unit; -} - -.post-title { - font-size: 42px; - letter-spacing: -1px; - line-height: 1; - - @include media-query($on-laptop) { - font-size: 36px; - } -} - -.post-content { - margin-bottom: $spacing-unit; - - h2 { - font-size: 32px; - - @include media-query($on-laptop) { - font-size: 28px; - } - } - - h3 { - font-size: 26px; - - @include media-query($on-laptop) { - font-size: 22px; - } - } - - h4 { - font-size: 20px; - - @include media-query($on-laptop) { - font-size: 18px; } } } +footer { + text-align: center; + padding: 40px; +} \ No newline at end of file diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss index 8fac597..a6233bc 100644 --- a/_sass/_syntax-highlighting.scss +++ b/_sass/_syntax-highlighting.scss @@ -3,7 +3,6 @@ */ .highlight { background: #fff; - @extend %vertical-rhythm; .highlighter-rouge & { background: #eef; diff --git a/about.md b/about.md deleted file mode 100644 index d0e6de5..0000000 --- a/about.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: page -title: About -permalink: /about/ ---- - -This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) - -You can find the source code for the Jekyll new theme at: -{% include icon-github.html username="jglovier" %} / -[jekyll-new](https://github.com/jglovier/jekyll-new) - -You can find the source code for Jekyll at -{% include icon-github.html username="jekyll" %} / -[jekyll](https://github.com/jekyll/jekyll) diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..b049c25 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,11 @@ +--- +layout: default +--- + +

blog

+{% for post in site.posts %} + +

{{ post.title }}

+{% endfor %} + +

subscribe via RSS

\ No newline at end of file diff --git a/css/main.scss b/css/main.scss index f2e566e..1339dc5 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,53 +1,7 @@ --- -# Only the main Sass file needs front matter (the dashes are enough) +# Front matter comment to ensure Jekyll properly reads file. --- -@charset "utf-8"; - - - -// Our variables -$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -$base-font-size: 16px; -$base-font-weight: 400; -$small-font-size: $base-font-size * 0.875; -$base-line-height: 1.5; - -$spacing-unit: 30px; - -$text-color: #111; -$background-color: #fdfdfd; -$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 -$content-width: 800px; - -$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 - "base", - "layout", - "syntax-highlighting" -; +@import + "base", + "layout", + "syntax-highlighting" \ No newline at end of file diff --git a/index.html b/index.html index 83d9398..9e486cc 100644 --- a/index.html +++ b/index.html @@ -2,22 +2,6 @@ layout: default --- -
+

Main Page

-

Posts

- - - -

subscribe via RSS

- -
+ Main content goes here. \ No newline at end of file