+
{{content}}
-
- {{> "post-single-meta"}} +
+ {{> "post-meta"}}
- -
- {{/post}} \ No newline at end of file diff --git a/source/js/sidebar.js b/source/js/sidebar.js new file mode 100644 index 0000000..e3678cf --- /dev/null +++ b/source/js/sidebar.js @@ -0,0 +1,52 @@ +/* + | ----------------------------------------------------------------------------- + | Functionality for off-canvas menu / sidebar visibility + | ----------------------------------------------------------------------------- +*/ + +/*jslint browser:true*/ + +(function (document) { + 'use strict'; + + document.addEventListener('DOMContentLoaded', function () { + var menu = document.getElementById('mobile-menu'), + wrapper = document.getElementById('site-wrapper'), + content = document.getElementById('site-content'), + menuVisibilityData = 'data-menu-visible'; + + if (!menu || !wrapper || !content) { + return; + } + + /* + | --------------------------------------------------------------------- + | Click on content element results in menu getting closed + | --------------------------------------------------------------------- + */ + content.addEventListener('click', function (event) { + if (wrapper.getAttribute(menuVisibilityData)) { + wrapper.removeAttribute(menuVisibilityData); + + event.preventDefault(); + event.stopPropagation(); + } + }); + + /* + | --------------------------------------------------------------------- + | Click on menu element results in menu getting opened + | --------------------------------------------------------------------- + */ + menu.addEventListener('click', function (event) { + if (!wrapper.getAttribute(menuVisibilityData)) { + wrapper.setAttribute(menuVisibilityData, '1'); + } else { + wrapper.removeAttribute(menuVisibilityData); + } + + event.preventDefault(); + event.stopPropagation(); + }); + }); +}(document)); \ No newline at end of file diff --git a/source/sass/components/_error-message.scss b/source/sass/components/_error-message.scss new file mode 100644 index 0000000..085c33b --- /dev/null +++ b/source/sass/components/_error-message.scss @@ -0,0 +1,10 @@ +/* +|------------------------------------------------------------------------------- +| Error message - 404 page +|------------------------------------------------------------------------------- +*/ +.c-error-message { + line-height: 2em; + text-align: center; + color: $c-grayAccent; +} \ No newline at end of file diff --git a/source/sass/components/_mobile-header.scss b/source/sass/components/_mobile-header.scss new file mode 100644 index 0000000..8c1b5e0 --- /dev/null +++ b/source/sass/components/_mobile-header.scss @@ -0,0 +1,37 @@ +/* +|------------------------------------------------------------------------------- +| Mobile header +|------------------------------------------------------------------------------- +*/ +.c-mobile-header { + @extend .clear; + margin-bottom: 30px; + padding-bottom: 25px; + border-bottom: 1px solid $c-grayMedium; + + // Not visible for desktop + @include breakpoint(desktop) { + display: none; + } +} + +.c-mobile-header__link, +.c-mobile-header__logo, +.c-mobile-header__logo__image { + height: 40px; + line-height: 40px; +} + +.c-mobile-header__link { + font-weight: bold; +} + +.c-mobile-header__logo { + float: right; +} + +.c-mobile-header__logo__image { + width: 40px; + height: 40px; + @include border-radius(20px); +} \ No newline at end of file diff --git a/source/sass/components/_post-list.scss b/source/sass/components/_post-list.scss new file mode 100644 index 0000000..3220b4b --- /dev/null +++ b/source/sass/components/_post-list.scss @@ -0,0 +1,57 @@ +/* +|------------------------------------------------------------------------------- +| Post list +|------------------------------------------------------------------------------- +*/ +// Wrapper +.c-post-list { + @extend .clear; +} + +// Article item +.c-post-list__item { + margin-bottom: 35px; + padding-bottom: 20px; + border-bottom: 1px solid $c-grayMedium; + + @media (min-width: 1200px) { + @include post3Col(); + } + + @media (max-width: 1199px) and (min-width: 880px) { + @include post2Col(); + } +} + +// Image and image link +.c-post-list__image { + display: block; + margin-bottom: 15px; + + &:hover { + opacity: 0.8; + } +} + +.c-post-list__image__img { + width: 100%; + display: block; +} + +// Title +.c-post-list__title { + font-size: 1.1em; + line-height: 1.4em; + margin-bottom: 10px; +} + +// Meta info +.c-post-list__meta { + font-size: 0.8em; + font-style: italic; + color: $c-grayAccent; +} + +.c-post-list__meta__tags { + text-transform: lowercase; +} \ No newline at end of file diff --git a/source/sass/components/_post-pagination.scss b/source/sass/components/_post-pagination.scss new file mode 100644 index 0000000..f9d9e92 --- /dev/null +++ b/source/sass/components/_post-pagination.scss @@ -0,0 +1,12 @@ +/* +|------------------------------------------------------------------------------- +| Post pagination +|------------------------------------------------------------------------------- +*/ +.c-post-pagination { + @extend .clear; +} + +.c-post-pagination__item--older { + float: right; +} \ No newline at end of file diff --git a/source/sass/components/_post-view-meta.scss b/source/sass/components/_post-view-meta.scss new file mode 100644 index 0000000..4d322b5 --- /dev/null +++ b/source/sass/components/_post-view-meta.scss @@ -0,0 +1,15 @@ +/* +|------------------------------------------------------------------------------- +| Post view meta - date & tags +|------------------------------------------------------------------------------- +*/ +.c-post-view-meta { + font-size: 0.8em; + line-height: 2em; + font-style: italic; + color: $c-grayAccent; +} + +.c-post-view-meta__tags { + text-transform: lowercase; +} \ No newline at end of file diff --git a/source/sass/components/_post-view-share.scss b/source/sass/components/_post-view-share.scss new file mode 100644 index 0000000..cb61687 --- /dev/null +++ b/source/sass/components/_post-view-share.scss @@ -0,0 +1,20 @@ +/* +|------------------------------------------------------------------------------- +| Post view share - share on Twitter, Facebook and Google+ +|------------------------------------------------------------------------------- +*/ +.c-post-view-share { + font-weight: bold; +} + +.c-post-view-share__item--twitter { + color: #4099FF; +} + +.c-post-view-share__item--facebook { + color: #3B5998; +} + +.c-post-view-share__item--google { + color: #d34836; +} \ No newline at end of file diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss new file mode 100644 index 0000000..913cf12 --- /dev/null +++ b/source/sass/components/_post-view.scss @@ -0,0 +1,40 @@ +/* +|------------------------------------------------------------------------------- +| Post view +|------------------------------------------------------------------------------- +*/ +.c-post-view--narrow { + text-align: center; + max-width: 610px; + margin: 0 auto; +} + +// Header +.c-post-view__header { + text-align: center; + padding: 10px 0 40px 0; + margin-bottom: 40px; + border-bottom: 1px solid $c-grayMedium; +} + +.c-post-view__header__title { + line-height: 1.5em; + margin-bottom: 20px; +} + +.c-post-view__header__title--no-meta { + margin-bottom: 0; +} + + // Content +.c-post-view__content { + @extend .markdown; +} + +// Footer +.c-post-view__footer { + text-align: center; + margin-top: 40px; + padding: 40px 0 10px; + border-top: 1px solid $c-grayMedium; +} \ No newline at end of file diff --git a/source/sass/components/_sidebar-blog-description.scss b/source/sass/components/_sidebar-blog-description.scss new file mode 100644 index 0000000..f1c312b --- /dev/null +++ b/source/sass/components/_sidebar-blog-description.scss @@ -0,0 +1,11 @@ +/* +|------------------------------------------------------------------------------- +| Sidebar blog description +|------------------------------------------------------------------------------- +*/ +.c-sidebar-blog-description { + font-size: 0.8em; + font-weight: normal; + color: $c-grayAccent; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/source/sass/components/_sidebar-blog-title.scss b/source/sass/components/_sidebar-blog-title.scss new file mode 100644 index 0000000..9fe343b --- /dev/null +++ b/source/sass/components/_sidebar-blog-title.scss @@ -0,0 +1,9 @@ +/* +|------------------------------------------------------------------------------- +| Sidebar blog title +|------------------------------------------------------------------------------- +*/ +.c-sidebar-blog-title { + font-size: 1.2em; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/source/sass/components/_sidebar-contact-links.scss b/source/sass/components/_sidebar-contact-links.scss new file mode 100644 index 0000000..ebb644a --- /dev/null +++ b/source/sass/components/_sidebar-contact-links.scss @@ -0,0 +1,15 @@ +/* +|------------------------------------------------------------------------------- +| Sidebar contact links - github, linkedin, twitter, etc. +|------------------------------------------------------------------------------- +*/ +.c-sidebar-contact-links { + font-size: 0.8em; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid $c-grayMedium; +} + +.c-sidebar-contact-links__item { + padding: 0 5px; +} \ No newline at end of file diff --git a/source/sass/components/_sidebar-header.scss b/source/sass/components/_sidebar-header.scss new file mode 100644 index 0000000..0c24f16 --- /dev/null +++ b/source/sass/components/_sidebar-header.scss @@ -0,0 +1,36 @@ +/* +|------------------------------------------------------------------------------- +| Sidebar header +|------------------------------------------------------------------------------- +*/ +// Cover +.c-sidebar-header { + height: 100px; + position: relative; + margin-bottom: 70px; + @include bg-size(cover); + background-position: 50% 50%; +} + +// Logo and link +.c-sidebar-header__link, +.c-sidebar-header__image { + width: 80px; + height: 80px; + display: block; +} + +// Logo +.c-sidebar-header__image { + @include border-radius(40px); + border: 2px solid $c-white; +} + +// Link { +.c-sidebar-header__link { + left: 50%; + bottom: -40px; + z-index: 1; + position: absolute; + margin-left: -40px; +} \ No newline at end of file diff --git a/source/sass/components/_sidebar-navigation.scss b/source/sass/components/_sidebar-navigation.scss new file mode 100644 index 0000000..17efed3 --- /dev/null +++ b/source/sass/components/_sidebar-navigation.scss @@ -0,0 +1,17 @@ +/* +|------------------------------------------------------------------------------- +| Sidebar navigation +|------------------------------------------------------------------------------- +*/ +.c-sidebar-navigation { + font-size: 0.9em; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid $c-grayMedium; +} + +.c-sidebar-navigation__item { + padding: 5px; + font-weight: bold; + display: inline-block; +} \ No newline at end of file diff --git a/source/sass/components/_sidebar-promotion-links.scss b/source/sass/components/_sidebar-promotion-links.scss new file mode 100644 index 0000000..751c5bc --- /dev/null +++ b/source/sass/components/_sidebar-promotion-links.scss @@ -0,0 +1,16 @@ +/* +|------------------------------------------------------------------------------- +| Sidebar promotion links +|------------------------------------------------------------------------------- +*/ +.c-sidebar-promotion-links { + font-size: 0.8em; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid $c-grayMedium; +} + +.c-sidebar-promotion-links__item { + padding: 5px 0; + display: block; +} \ No newline at end of file diff --git a/source/sass/components/_site-content.scss b/source/sass/components/_site-content.scss new file mode 100644 index 0000000..d81bc32 --- /dev/null +++ b/source/sass/components/_site-content.scss @@ -0,0 +1,24 @@ +/* +|------------------------------------------------------------------------------- +| Site content +|------------------------------------------------------------------------------- +*/ +.c-site-content { + min-height: 100vh; + max-width: $maxPageWidth; + + background: $c-white; + border-left: 1px solid $c-grayMedium; + border-right: 1px solid $c-grayMedium; + + // Less padding for mobile devices + @include breakpoint(mobile) { + padding: 20px; + } + + // More padding + margin on desktop + @include breakpoint(desktop) { + padding: 30px; + margin-left: $sidebarWidth; + } +} \ No newline at end of file diff --git a/source/sass/components/_site-sidebar.scss b/source/sass/components/_site-sidebar.scss new file mode 100644 index 0000000..f552b93 --- /dev/null +++ b/source/sass/components/_site-sidebar.scss @@ -0,0 +1,23 @@ +/* +|------------------------------------------------------------------------------- +| Site sidebar +|------------------------------------------------------------------------------- +*/ +.c-site-sidebar { + width: $sidebarWidth; + height: 100%; + position: absolute; + top: 0; + z-index: 1; + text-align: center; + + // Visible by default on desktop + @include breakpoint(desktop) { + left: 0; + } + + // Off canvas by default on mobile + @include breakpoint(mobile) { + left: -$sidebarWidth; + } +} \ No newline at end of file diff --git a/source/sass/components/_site-viewport.scss b/source/sass/components/_site-viewport.scss new file mode 100644 index 0000000..20990dd --- /dev/null +++ b/source/sass/components/_site-viewport.scss @@ -0,0 +1,20 @@ +/* +|------------------------------------------------------------------------------- +| Site viewport +|------------------------------------------------------------------------------- +*/ +.c-site-viewport { + width: 100%; + @include translateX(0); + + @include breakpoint(mobile) { + @include transition(300ms); + } +} + +// Sidebar visible state +@include breakpoint(mobile) { + [data-menu-visible="1"] .c-site-viewport { + @include translateX($sidebarWidth); + } +} \ No newline at end of file diff --git a/source/sass/components/_site-wrapper.scss b/source/sass/components/_site-wrapper.scss new file mode 100644 index 0000000..395cbda --- /dev/null +++ b/source/sass/components/_site-wrapper.scss @@ -0,0 +1,12 @@ +/* +|------------------------------------------------------------------------------- +| Site wrapper +|------------------------------------------------------------------------------- +*/ +.c-site-wrapper { + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +} \ No newline at end of file diff --git a/source/sass/elements/_elements.scss b/source/sass/elements/_elements.scss new file mode 100644 index 0000000..1f6eb2f --- /dev/null +++ b/source/sass/elements/_elements.scss @@ -0,0 +1,52 @@ +/* +|------------------------------------------------------------------------------- +| Base elements / Un-classed elements +|------------------------------------------------------------------------------- +*/ +// All +* { + box-sizing: border-box; +} + +// Body, Html +body, html { + height: 100%; +} + +// Body +body { + min-width: 320px; + background: $c-grayLight; + color: $c-grayDark; + font-size: 16px; + line-height: 1.2em; + font-family: 'Merriweather', serif; +} + +// Anchors +a { + outline: none; + color: $c-grayDark; + @include transition(); + text-decoration: none; + + &:hover { + color: $c-grayAccent; + } +} + +// Headings +h1 { + margin: 0; + font-size: 1.4em; +} + +h2 { + margin: 0; + font-size: 1.2em; +} + +h3 { + margin: 0; + font-size: 1em; +} \ No newline at end of file diff --git a/source/sass/helpers/_classes.scss b/source/sass/helpers/_classes.scss new file mode 100644 index 0000000..ad05498 --- /dev/null +++ b/source/sass/helpers/_classes.scss @@ -0,0 +1,84 @@ +/* +|------------------------------------------------------------------------------- +| Helpers / Overrides +|------------------------------------------------------------------------------- +*/ +.clear:after { + content: ""; + clear: both; + display: table; +} + +/* + | ----------------------------------------------------------------------------- + | Markdown content style + | ----------------------------------------------------------------------------- +*/ +.markdown { + line-height: 2em; + + h1, h2, h3, p, ul, + blockquote, pre, .gist { + margin-bottom: 30px; + word-wrap: break-word; + + &:last-child { + margin-bottom: 0; + } + } + + ul { + padding-left: 3em; + } + + a { + text-decoration: underline; + + &:hover { + text-decoration: none; + + img { + opacity: 0.8; + } + } + } + + img { + width: 100%; + @include transition(); + + &.inline { + width: auto; + display: inline-block; + } + } + + blockquote { + padding-left: 30px; + font-style: italic; + border-left: 4px solid $c-grayMedium; + } + + hr { + border: 0; + height: 1px; + margin: 30px 0; + background: $c-grayMedium; + } + + pre { + padding: 1em; + overflow: auto; + font-size: 0.9em; + line-height: 1.5em; + background: $c-grayLight; + } + + code { + background: $c-grayLight; + } + + .gist .gist-file { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/source/sass/styles.scss b/source/sass/styles.scss new file mode 100644 index 0000000..834b281 --- /dev/null +++ b/source/sass/styles.scss @@ -0,0 +1,65 @@ +/* +|------------------------------------------------------------------------------- +| Configuration +|------------------------------------------------------------------------------- +*/ +$c-white: #ffffff; + +$c-grayDark: #555555; +$c-grayLight: #f7f7f7; +$c-grayMedium: #eaeaea; +$c-grayAccent: #888888; + +$sidebarWidth: 290px; +$maxPageWidth: 1000px; + +/* +|------------------------------------------------------------------------------- +| Tools +|------------------------------------------------------------------------------- +*/ +@import "tools/mixins"; + +/* +|------------------------------------------------------------------------------- +| Generic / Reset / Normalize +|------------------------------------------------------------------------------- +*/ +@import "vendor/normalize"; + +/* +|------------------------------------------------------------------------------- +| Base elements / Un-classed elements +|------------------------------------------------------------------------------- +*/ +@import "elements/elements"; + +/* +|------------------------------------------------------------------------------- +| Components +|------------------------------------------------------------------------------- +*/ +@import "components/site-wrapper"; +@import "components/site-viewport"; +@import "components/site-sidebar"; +@import "components/site-content"; +@import "components/mobile-header"; +@import "components/sidebar-header"; +@import "components/sidebar-blog-title"; +@import "components/sidebar-blog-description"; +@import "components/sidebar-contact-links"; +@import "components/sidebar-navigation"; +@import "components/sidebar-promotion-links"; +@import "components/post-list"; +@import "components/post-pagination"; +@import "components/post-view"; +@import "components/post-view-meta"; +@import "components/post-view-share"; +@import "components/error-message"; + +/* +|------------------------------------------------------------------------------- +| Helpers / Overrides +|------------------------------------------------------------------------------- +*/ +@import "helpers/classes"; \ No newline at end of file diff --git a/source/sass/tools/_mixins.scss b/source/sass/tools/_mixins.scss new file mode 100644 index 0000000..7db16e6 --- /dev/null +++ b/source/sass/tools/_mixins.scss @@ -0,0 +1,85 @@ +/* +|------------------------------------------------------------------------------- +| Mixins +|------------------------------------------------------------------------------- +*/ +// Shortcuts to breakpoints +@mixin breakpoint($breakpoint) { + @if $breakpoint == "mobile" { + @media (max-width: 640px) { + @content; + } + } + + @else if $breakpoint == "desktop" { + @media (min-width: 641px) { + @content; + } + } +} + +// Border radius +@mixin border-radius($value: 3px) { + -webkit-border-radius: $value; + -moz-border-radius : $value; + -ms-border-radius : $value; + -o-border-radius : $value; + border-radius : $value; +} + +// Background size +@mixin bg-size($value: cover) { + -webkit-background-size: $value; + -moz-background-size : $value; + -ms-background-size : $value; + -o-background-size : $value; + background-size : $value; +} + +// Transition +@mixin transition($transition : all 150ms ease-in-out) { + -webkit-transition: $transition; + -moz-transition : $transition; + -ms-transition : $transition; + -o-transition : $transition; + transition : $transition; +} + +// TranslateX +@mixin translateX($value) { + -webkit-transform: translateX($value); + -moz-transform: translateX($value); + -ms-transform: translateX($value); + -o-transform: translateX($value); + transform: translateX($value); +} + +// 2 column layout +@mixin post2Col() { + width: 48%; + float: left; + margin-right: 4%; + + &:nth-child(2n) { + margin-right: 0; + } + + &:nth-child(2n + 1) { + clear: left; + } +} + +// 3 column layout +@mixin post3Col() { + width: 31.33333%; + float: left; + margin-right: 3%; + + &:nth-child(3n) { + margin-right: 0; + } + + &:nth-child(3n + 1) { + clear: left; + } +} \ No newline at end of file diff --git a/source/sass/vendor/_normalize.scss b/source/sass/vendor/_normalize.scss new file mode 100644 index 0000000..a7e1833 --- /dev/null +++ b/source/sass/vendor/_normalize.scss @@ -0,0 +1 @@ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,/* 1 */figcaption,figure,footer,header,main,/* 2 */menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,/* 1 */[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],/* 1 */[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} \ No newline at end of file