+
{{content}}
-
- {{> "post-single-meta"}} +
+ {{> "post-meta"}}
- -
- {{/post}} \ No newline at end of file diff --git a/assets/src/js/script.js b/source/js/sidebar.js similarity index 88% rename from assets/src/js/script.js rename to source/js/sidebar.js index 95e8c9f..e3678cf 100644 --- a/assets/src/js/script.js +++ b/source/js/sidebar.js @@ -11,10 +11,14 @@ document.addEventListener('DOMContentLoaded', function () { var menu = document.getElementById('mobile-menu'), - wrapper = document.getElementById('wrapper'), - content = document.getElementById('content'), + 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 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/assets/src/sass/helpers/_classes.scss b/source/sass/helpers/_classes.scss similarity index 70% rename from assets/src/sass/helpers/_classes.scss rename to source/sass/helpers/_classes.scss index 0e0090e..ad05498 100644 --- a/assets/src/sass/helpers/_classes.scss +++ b/source/sass/helpers/_classes.scss @@ -1,7 +1,7 @@ /* - | ----------------------------------------------------------------------------- - | Helper classes - | ----------------------------------------------------------------------------- +|------------------------------------------------------------------------------- +| Helpers / Overrides +|------------------------------------------------------------------------------- */ .clear:after { content: ""; @@ -20,24 +20,13 @@ h1, h2, h3, p, ul, blockquote, pre, .gist { margin-bottom: 30px; + word-wrap: break-word; &:last-child { margin-bottom: 0; } } - h1 { - font-size: 1.4em; - } - - h2 { - font-size: 1.2em; - } - - h3 { - font-size: 1em; - } - ul { padding-left: 3em; } @@ -57,30 +46,36 @@ img { width: 100%; @include transition(); + + &.inline { + width: auto; + display: inline-block; + } } blockquote { padding-left: 30px; font-style: italic; - border-left: 4px solid $c-grayNormal; + border-left: 4px solid $c-grayMedium; } hr { border: 0; height: 1px; margin: 30px 0; - background: $c-grayNormal; + background: $c-grayMedium; } pre { padding: 1em; + overflow: auto; font-size: 0.9em; line-height: 1.5em; - background: $c-grayNormal; + background: $c-grayLight; } code { - background: $c-grayNormal; + background: $c-grayLight; } .gist .gist-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/assets/src/sass/helpers/_mixins.scss b/source/sass/tools/_mixins.scss similarity index 71% rename from assets/src/sass/helpers/_mixins.scss rename to source/sass/tools/_mixins.scss index 6730448..7db16e6 100644 --- a/assets/src/sass/helpers/_mixins.scss +++ b/source/sass/tools/_mixins.scss @@ -1,8 +1,9 @@ /* - | ----------------------------------------------------------------------------- - | Breakpoints - | ----------------------------------------------------------------------------- +|------------------------------------------------------------------------------- +| Mixins +|------------------------------------------------------------------------------- */ +// Shortcuts to breakpoints @mixin breakpoint($breakpoint) { @if $breakpoint == "mobile" { @media (max-width: 640px) { @@ -17,11 +18,7 @@ } } -/* - | ----------------------------------------------------------------------------- - | Useful mixins - | ----------------------------------------------------------------------------- -*/ +// Border radius @mixin border-radius($value: 3px) { -webkit-border-radius: $value; -moz-border-radius : $value; @@ -30,6 +27,16 @@ 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; @@ -38,6 +45,7 @@ transition : $transition; } +// TranslateX @mixin translateX($value) { -webkit-transform: translateX($value); -moz-transform: translateX($value); @@ -46,11 +54,7 @@ transform: translateX($value); } -/* - | ----------------------------------------------------------------------------- - | Columns for posts - | ----------------------------------------------------------------------------- -*/ +// 2 column layout @mixin post2Col() { width: 48%; float: left; @@ -65,6 +69,7 @@ } } +// 3 column layout @mixin post3Col() { width: 31.33333%; float: left; @@ -77,4 +82,4 @@ &: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 -- 2.34.1