+################################################################################
+# Exclude node_modules/ folder from theme files
+################################################################################
node_modules/
sass: {
dist: {
files: {
- 'assets/css/styles.css': 'assets/src/sass/styles.scss',
- 'assets/css/print.css': 'assets/src/sass/print.scss'
+ 'assets/css/styles.css': 'source/sass/styles.scss'
},
options: {
},
uglify: {
- script: {
+ scripts: {
files: {
- 'assets/js/script.js': [
- 'assets/src/js/vendor/*.js',
- 'assets/src/js/*.js'
+ 'assets/js/scripts.js': [
+ 'source/js/vendor/*.js',
+ 'source/js/*.js'
]
}
}
},
watch: {
- css: {
- files: 'assets/src/sass/**/*.scss',
+ sass: {
+ files: 'source/sass/**/*.scss',
tasks: ['sass']
},
- js: {
- files: 'assets/src/js/**/*.js',
+ scripts: {
+ files: 'source/js/**/*.js',
tasks: ['uglify']
}
}
-# Willow Ghost Theme
+# Willow Ghost Theme 2.0
+
Personal, responsive, minimalist and open-source theme for Ghost blogging platform.
+Lightweight - only 2.8KB of CSS and 828B of JavaScript. No jQuery, vanilla JS only.
+Version 2.0 comes with SASS in BEM style using ITCSS (http://itcss.io/) architecture.
-
+
-## Demo
+## Theme Demo
-This theme is currently used on my [personal blog](https://raivis.com/).
+This theme is currently being used on my personal blog - [https://raivis.com/](https://raivis.com/).
-## Styling & Compiling
+## Compiling SASS & Minifying JavaScript
Requires Grunt task runner & NPM to be installed.
$ cd content/themes/[theme-folder]
$ npm install
$ grunt
-
-## Adding Disqus
-
-Open the `content/themes/[theme-folder]/post.hbs` file,
-lookup `/* Paste Your Disqus Embed Code Here */`
-line and replace it with your Disqus embed code, which usually looks like this:
-
- (function() {
- var d = document, s = d.createElement('script');
- s.src = '//yourdisqussite.disqus.com/embed.js';
- s.setAttribute('data-timestamp', +new Date());
- (d.head || d.body).appendChild(s);
- })();
-
-## Editing Social Links
-
-Edit the `content/themes/[theme-folder]/partials/social-links.hbs` file.
+
+## Editing Social Links and Promo Links
+
+Edit the `content/themes/[theme-folder]/partials/sidebar.hbs` file.
\ No newline at end of file
+++ /dev/null
-.content{margin-left:0 !important}.sidebar,.mobile-header,.post-image{display:none !important}
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.clear:after,.content .pagination:after{content:"";clear:both;display:table}.markdown,.content .post-content{line-height:2em}.markdown h1,.content .post-content h1,.markdown h2,.content .post-content h2,.markdown h3,.content .post-content h3,.markdown p,.content .post-content p,.markdown ul,.content .post-content ul,.markdown blockquote,.content .post-content blockquote,.markdown pre,.content .post-content pre,.markdown .gist,.content .post-content .gist{margin-bottom:30px}.markdown h1:last-child,.content .post-content h1:last-child,.markdown h2:last-child,.content .post-content h2:last-child,.markdown h3:last-child,.content .post-content h3:last-child,.markdown p:last-child,.content .post-content p:last-child,.markdown ul:last-child,.content .post-content ul:last-child,.markdown blockquote:last-child,.content .post-content blockquote:last-child,.markdown pre:last-child,.content .post-content pre:last-child,.markdown .gist:last-child,.content .post-content .gist:last-child{margin-bottom:0}.markdown h1,.content .post-content h1{font-size:1.4em}.markdown h2,.content .post-content h2{font-size:1.2em}.markdown h3,.content .post-content h3{font-size:1em}.markdown ul,.content .post-content ul{padding-left:3em}.markdown a,.content .post-content a{text-decoration:underline}.markdown a:hover,.content .post-content a:hover{text-decoration:none}.markdown a:hover img,.content .post-content a:hover img{opacity:0.8}.markdown img,.content .post-content img{width:100%;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}.markdown blockquote,.content .post-content blockquote{padding-left:30px;font-style:italic;border-left:4px solid #f7f7f7}.markdown hr,.content .post-content hr{border:0;height:1px;margin:30px 0;background:#f7f7f7}.markdown pre,.content .post-content pre{padding:1em;font-size:0.9em;line-height:1.5em;background:#f7f7f7}.markdown code,.content .post-content code{background:#f7f7f7}.markdown .gist .gist-file,.content .post-content .gist .gist-file{margin-bottom:0}*{box-sizing:border-box}h1,h2,h3,p,ul,blockquote,pre{margin:0;padding:0}html,body{height:100%}html,body{min-width:320px;background:#f7f7f7;font-size:16px;line-height:1.2em;color:#555;font-family:'Merriweather', serif}a{outline:none;color:#555;text-decoration:none;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}a:hover{color:#888}.wrapper{width:100%;height:100%;overflow-x:hidden}.viewport{width:100%;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}@media (max-width: 640px){.viewport{-webkit-transition:300ms;-moz-transition:300ms;-ms-transition:300ms;-o-transition:300ms;transition:300ms}}@media (max-width: 640px){.wrapper[data-menu-visible="1"] .viewport{-webkit-transform:translateX(290px);-moz-transform:translateX(290px);-ms-transform:translateX(290px);-o-transform:translateX(290px);transform:translateX(290px)}}.sidebar{width:290px;position:absolute;height:100%;z-index:1;top:0}@media (min-width: 641px){.sidebar{left:0}}@media (max-width: 640px){.sidebar{left:-290px}}.content{min-height:100vh;max-width:1000px}@media (min-width: 641px){.content{margin-left:290px}}.sidebar{text-align:center}.sidebar .sidebar-header{background-position:50% 50%;background-size:cover;margin-bottom:70px;position:relative;height:100px}.sidebar .sidebar-header a,.sidebar .sidebar-header img{width:80px;height:80px}.sidebar .sidebar-header a{left:50%;bottom:-40px;position:absolute;margin-left:-40px}.sidebar .sidebar-header img{display:block;border:2px solid #fff;-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.sidebar h1,.sidebar h2,.sidebar .sidebar-menu,.sidebar .sidebar-links{margin:0 auto 20px;max-width:265px}.sidebar h1{font-size:1.2em}.sidebar h2{font-size:0.8em;color:#888;font-weight:normal}.sidebar .sidebar-links{font-size:0.8em;padding-bottom:20px;border-bottom:1px solid #eaeaea}.sidebar .sidebar-links a{padding:0 5px}.sidebar .sidebar-menu a{display:block;padding:5px 0;font-size:0.9em;font-weight:bold}.mobile-header{margin-bottom:20px}.mobile-header .mobile-menu,.mobile-header .mobile-logo{height:40px;cursor:pointer;display:inline-block}.mobile-header .mobile-menu{font-weight:bold;line-height:40px}.mobile-header .mobile-logo{width:40px;float:right}.mobile-header .mobile-logo img{max-width:100%;-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px}@media (min-width: 641px){.mobile-header{display:none}}.error-page{text-align:center;color:#888;line-height:2em}.content{background:#fff;border-left:1px solid #eaeaea}@media (max-width: 640px){.content{padding:20px}}@media (min-width: 641px){.content{padding:30px;border-right:1px solid #eaeaea}}.content .post-listed{margin-bottom:35px;padding-bottom:20px;border-bottom:1px solid #eaeaea}.content .post-listed h2{font-size:1.1em;line-height:1.4em;margin-bottom:10px}@media (min-width: 1200px){.content .post-listed{width:31.33333%;float:left;margin-right:3%}.content .post-listed:nth-child(3n){margin-right:0}.content .post-listed:nth-child(3n+1){clear:left}}@media (max-width: 640px) and (min-width: 600px){.content .post-listed{width:48%;float:left;margin-right:4%}.content .post-listed:nth-child(2n){margin-right:0}.content .post-listed:nth-child(2n+1){clear:left}}@media (max-width: 1199px) and (min-width: 880px){.content .post-listed{width:48%;float:left;margin-right:4%}.content .post-listed:nth-child(2n){margin-right:0}.content .post-listed:nth-child(2n+1){clear:left}}.content .post-single .post-header,.content .post-single .post-footer{margin:50px 0 40px;padding:40px 0;text-align:center;border-top:1px solid #f7f7f7;border-bottom:1px solid #f7f7f7}.content .post-single .post-header h1,.content .post-single .post-footer h1{font-size:1.4em;line-height:normal;margin-bottom:20px}.content .post-single .post-header{margin-top:0}.content .post-image{display:block;margin-bottom:15px}.content .post-image:not(div):hover{opacity:0.8}.content .post-image img{width:100%;display:block}.content .post-meta{font-size:0.8em;font-style:italic;color:#888}.content .post-meta .tags a{text-transform:lowercase}.content .post-meta .share a{font-weight:bold;padding:0 5px 0 0}.content .post-meta .share .share-twitter{color:#4099FF}.content .post-meta .share .share-facebook{color:#3B5998}.content .post-meta .share .share-google-plus{color:#d34836}.content .post-meta .share .share-twitter:hover,.content .post-meta .share .share-facebook:hover,.content .post-meta .share .share-google-plus:hover{color:#888}.content .pagination{clear:both}.content .pagination .older-posts{float:right}
+/*! 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,figcaption,figure,footer,header,main,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,[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"],[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}*{box-sizing:border-box}body,html{height:100%}body{min-width:320px;background:#f7f7f7;color:#555;font-size:16px;line-height:1.2em;font-family:'Merriweather', serif}a{outline:none;color:#555;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;text-decoration:none}a:hover{color:#888}h1{margin:0;font-size:1.4em}h2{margin:0;font-size:1.2em}h3{margin:0;font-size:1em}.c-site-wrapper{width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch}.c-site-viewport{width:100%;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}@media (max-width: 640px){.c-site-viewport{-webkit-transition:300ms;-moz-transition:300ms;-ms-transition:300ms;-o-transition:300ms;transition:300ms}}@media (max-width: 640px){[data-menu-visible="1"] .c-site-viewport{-webkit-transform:translateX(290px);-moz-transform:translateX(290px);-ms-transform:translateX(290px);-o-transform:translateX(290px);transform:translateX(290px)}}.c-site-sidebar{width:290px;height:100%;position:absolute;top:0;z-index:1;text-align:center}@media (min-width: 641px){.c-site-sidebar{left:0}}@media (max-width: 640px){.c-site-sidebar{left:-290px}}.c-site-content{min-height:100vh;max-width:1000px;background:#fff;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea}@media (max-width: 640px){.c-site-content{padding:20px}}@media (min-width: 641px){.c-site-content{padding:30px;margin-left:290px}}.c-mobile-header{margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid #eaeaea}@media (min-width: 641px){.c-mobile-header{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;-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px}.c-sidebar-header{height:100px;position:relative;margin-bottom:70px;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;background-position:50% 50%}.c-sidebar-header__link,.c-sidebar-header__image{width:80px;height:80px;display:block}.c-sidebar-header__image{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px;border:2px solid #fff}.c-sidebar-header__link{left:50%;bottom:-40px;z-index:1;position:absolute;margin-left:-40px}.c-sidebar-blog-title{font-size:1.2em;margin-bottom:20px}.c-sidebar-blog-description{font-size:0.8em;font-weight:normal;color:#888;margin-bottom:20px}.c-sidebar-contact-links{font-size:0.8em;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eaeaea}.c-sidebar-contact-links__item{padding:0 5px}.c-sidebar-navigation{font-size:0.9em;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eaeaea}.c-sidebar-navigation__item{padding:5px;font-weight:bold;display:inline-block}.c-sidebar-promotion-links{font-size:0.8em;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eaeaea}.c-sidebar-promotion-links__item{padding:5px 0;display:block}.c-post-list__item{margin-bottom:35px;padding-bottom:20px;border-bottom:1px solid #eaeaea}@media (min-width: 1200px){.c-post-list__item{width:31.33333%;float:left;margin-right:3%}.c-post-list__item:nth-child(3n){margin-right:0}.c-post-list__item:nth-child(3n+1){clear:left}}@media (max-width: 1199px) and (min-width: 880px){.c-post-list__item{width:48%;float:left;margin-right:4%}.c-post-list__item:nth-child(2n){margin-right:0}.c-post-list__item:nth-child(2n+1){clear:left}}.c-post-list__image{display:block;margin-bottom:15px}.c-post-list__image:hover{opacity:0.8}.c-post-list__image__img{width:100%;display:block}.c-post-list__title{font-size:1.1em;line-height:1.4em;margin-bottom:10px}.c-post-list__meta{font-size:0.8em;font-style:italic;color:#888}.c-post-list__meta__tags{text-transform:lowercase}.c-post-pagination__item--older{float:right}.c-post-view--narrow{text-align:center;max-width:610px;margin:0 auto}.c-post-view__header{text-align:center;padding:10px 0 40px 0;margin-bottom:40px;border-bottom:1px solid #eaeaea}.c-post-view__header__title{line-height:1.5em;margin-bottom:20px}.c-post-view__header__title--no-meta{margin-bottom:0}.c-post-view__footer{text-align:center;margin-top:40px;padding:40px 0 10px;border-top:1px solid #eaeaea}.c-post-view-meta{font-size:0.8em;line-height:2em;font-style:italic;color:#888}.c-post-view-meta__tags{text-transform:lowercase}.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}.c-error-message{line-height:2em;text-align:center;color:#888}.clear:after,.c-mobile-header:after,.c-post-list:after,.c-post-pagination:after{content:"";clear:both;display:table}.markdown,.c-post-view__content{line-height:2em}.markdown h1,.c-post-view__content h1,.markdown h2,.c-post-view__content h2,.markdown h3,.c-post-view__content h3,.markdown p,.c-post-view__content p,.markdown ul,.c-post-view__content ul,.markdown blockquote,.c-post-view__content blockquote,.markdown pre,.c-post-view__content pre,.markdown .gist,.c-post-view__content .gist{margin-bottom:30px;word-wrap:break-word}.markdown h1:last-child,.c-post-view__content h1:last-child,.markdown h2:last-child,.c-post-view__content h2:last-child,.markdown h3:last-child,.c-post-view__content h3:last-child,.markdown p:last-child,.c-post-view__content p:last-child,.markdown ul:last-child,.c-post-view__content ul:last-child,.markdown blockquote:last-child,.c-post-view__content blockquote:last-child,.markdown pre:last-child,.c-post-view__content pre:last-child,.markdown .gist:last-child,.c-post-view__content .gist:last-child{margin-bottom:0}.markdown ul,.c-post-view__content ul{padding-left:3em}.markdown a,.c-post-view__content a{text-decoration:underline}.markdown a:hover,.c-post-view__content a:hover{text-decoration:none}.markdown a:hover img,.c-post-view__content a:hover img{opacity:0.8}.markdown img,.c-post-view__content img{width:100%;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}.markdown img.inline,.c-post-view__content img.inline{width:auto;display:inline-block}.markdown blockquote,.c-post-view__content blockquote{padding-left:30px;font-style:italic;border-left:4px solid #eaeaea}.markdown hr,.c-post-view__content hr{border:0;height:1px;margin:30px 0;background:#eaeaea}.markdown pre,.c-post-view__content pre{padding:1em;overflow:auto;font-size:0.9em;line-height:1.5em;background:#f7f7f7}.markdown code,.c-post-view__content code{background:#f7f7f7}.markdown .gist .gist-file,.c-post-view__content .gist .gist-file{margin-bottom:0}
+++ /dev/null
-!function(a){"use strict";a.addEventListener("DOMContentLoaded",function(){var b=a.getElementById("mobile-menu"),c=a.getElementById("wrapper"),d=a.getElementById("content"),e="data-menu-visible";d.addEventListener("click",function(a){c.getAttribute(e)&&(c.removeAttribute(e),a.preventDefault(),a.stopPropagation())}),b.addEventListener("click",function(a){c.getAttribute(e)?c.removeAttribute(e):c.setAttribute(e,"1"),a.preventDefault(),a.stopPropagation()})})}(document);
\ No newline at end of file
--- /dev/null
+!function(a){"use strict";a.addEventListener("DOMContentLoaded",function(){var b=a.getElementById("mobile-menu"),c=a.getElementById("site-wrapper"),d=a.getElementById("site-content"),e="data-menu-visible";b&&c&&d&&(d.addEventListener("click",function(a){c.getAttribute(e)&&(c.removeAttribute(e),a.preventDefault(),a.stopPropagation())}),b.addEventListener("click",function(a){c.getAttribute(e)?c.removeAttribute(e):c.setAttribute(e,"1"),a.preventDefault(),a.stopPropagation()}))})}(document);
\ No newline at end of file
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | 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('wrapper'),
- content = document.getElementById('content'),
- menuVisibilityData = 'data-menu-visible';
-
- /*
- | ---------------------------------------------------------------------
- | 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
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | Helper classes
- | -----------------------------------------------------------------------------
-*/
-.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;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- h1 {
- font-size: 1.4em;
- }
-
- h2 {
- font-size: 1.2em;
- }
-
- h3 {
- font-size: 1em;
- }
-
- ul {
- padding-left: 3em;
- }
-
- a {
- text-decoration: underline;
-
- &:hover {
- text-decoration: none;
-
- img {
- opacity: 0.8;
- }
- }
- }
-
- img {
- width: 100%;
- @include transition();
- }
-
- blockquote {
- padding-left: 30px;
- font-style: italic;
- border-left: 4px solid $c-grayNormal;
- }
-
- hr {
- border: 0;
- height: 1px;
- margin: 30px 0;
- background: $c-grayNormal;
- }
-
- pre {
- padding: 1em;
- font-size: 0.9em;
- line-height: 1.5em;
- background: $c-grayNormal;
- }
-
- code {
- background: $c-grayNormal;
- }
-
- .gist .gist-file {
- margin-bottom: 0;
- }
-}
\ No newline at end of file
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | Breakpoints
- | -----------------------------------------------------------------------------
-*/
-@mixin breakpoint($breakpoint) {
- @if $breakpoint == "mobile" {
- @media (max-width: 640px) {
- @content;
- }
- }
-
- @else if $breakpoint == "desktop" {
- @media (min-width: 641px) {
- @content;
- }
- }
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Useful mixins
- | -----------------------------------------------------------------------------
-*/
-@mixin border-radius($value: 3px) {
- -webkit-border-radius: $value;
- -moz-border-radius : $value;
- -ms-border-radius : $value;
- -o-border-radius : $value;
- border-radius : $value;
-}
-
-@mixin transition($transition : all 150ms ease-in-out) {
- -webkit-transition: $transition;
- -moz-transition : $transition;
- -ms-transition : $transition;
- -o-transition : $transition;
- transition : $transition;
-}
-
-@mixin translateX($value) {
- -webkit-transform: translateX($value);
- -moz-transform: translateX($value);
- -ms-transform: translateX($value);
- -o-transform: translateX($value);
- transform: translateX($value);
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Columns for posts
- | -----------------------------------------------------------------------------
-*/
-@mixin post2Col() {
- width: 48%;
- float: left;
- margin-right: 4%;
-
- &:nth-child(2n) {
- margin-right: 0;
- }
-
- &:nth-child(2n + 1) {
- clear: left;
- }
-}
-
-@mixin post3Col() {
- width: 31.33333%;
- float: left;
- margin-right: 3%;
-
- &:nth-child(3n) {
- margin-right: 0;
- }
-
- &:nth-child(3n + 1) {
- clear: left;
- }
-}
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | Print styles
- | -----------------------------------------------------------------------------
-*/
-.content {
- margin-left: 0 !important;
-}
-
-.sidebar, .mobile-header, .post-image {
- display: none !important;
-}
\ No newline at end of file
+++ /dev/null
-/*
- | -----------------------------------------------------------------------------
- | Variables
- | -----------------------------------------------------------------------------
-*/
-$sidebarWidth : 290px;
-$maxPageWidth : 1000px;
-
-$c-white : #ffffff;
-$c-baseNormal : #555555;
-$c-grayNormal : #f7f7f7;
-
-$c-grayDark : darken($c-grayNormal, 5);
-$c-baseLight : lighten($c-baseNormal, 20);
-
-/*
- | -----------------------------------------------------------------------------
- | Imports
- | -----------------------------------------------------------------------------
-*/
-@import "vendor/normalize";
-@import "helpers/mixins";
-@import "helpers/classes";
-
-/*
- | -----------------------------------------------------------------------------
- | Resets and html + body styles
- | -----------------------------------------------------------------------------
-*/
-* {
- box-sizing: border-box;
-}
-
-h1, h2, h3, p, ul, blockquote, pre {
- margin: 0;
- padding: 0;
-}
-
-html, body {
- height: 100%;
-}
-
-html, body {
- min-width: 320px;
- background: $c-grayNormal;
- font-size: 16px;
- line-height: 1.2em;
- color: $c-baseNormal;
- font-family: 'Merriweather', serif;
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Anchors
- | -----------------------------------------------------------------------------
-*/
-a {
- outline: none;
- color: $c-baseNormal;
- text-decoration: none;
- @include transition();
-
- &:hover {
- color: $c-baseLight;
- }
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Layout
- | -----------------------------------------------------------------------------
-*/
-.wrapper {
- width: 100%;
- height: 100%;
- overflow-x: hidden;
-
- /* Fix iOS Safari scroll bug */
- overflow-y: scroll;
- -webkit-overflow-scrolling: touch;
-}
-
-.viewport {
- width: 100%;
- @include translateX(0);
-
- @include breakpoint(mobile) {
- @include transition(300ms);
- }
-}
-
-@include breakpoint(mobile) {
- .wrapper[data-menu-visible="1"] .viewport {
- @include translateX($sidebarWidth);
- }
-}
-
-.sidebar {
- width: $sidebarWidth;
- position: absolute;
- height: 100%;
- z-index: 1;
- top : 0;
-
- @include breakpoint(desktop) {
- left: 0;
- }
-
- @include breakpoint(mobile) {
- left: -$sidebarWidth;
- }
-}
-
-.content {
- min-height: 100vh;
- max-width: $maxPageWidth;
-
- @include breakpoint(desktop) {
- margin-left: $sidebarWidth;
- }
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Sidebar
- | -----------------------------------------------------------------------------
-*/
-.sidebar {
- text-align: center;
-
- .sidebar-header {
- background-position: 50% 50%;
- background-size: cover;
- margin-bottom: 70px;
- position: relative;
- height: 100px;
-
- a, img {
- width: 80px;
- height: 80px;
- }
-
- a {
- left: 50%;
- bottom: -40px;
- position: absolute;
- margin-left: -40px;
- }
-
- img {
- display: block;
- border: 2px solid $c-white;
- @include border-radius(40px);
- }
- }
-
- h1, h2, .sidebar-menu, .sidebar-links {
- margin: 0 auto 20px;
- max-width: 265px;
- }
-
- h1 {
- font-size: 1.2em;
- }
-
- h2 {
- font-size: 0.8em;
- color: $c-baseLight;
- font-weight: normal;
- }
-
- .sidebar-links {
- font-size: 0.8em;
- padding-bottom: 20px;
- border-bottom: 1px solid $c-grayDark;
-
- a {
- padding: 0 5px;
- }
- }
-
- .sidebar-menu {
- a {
- display: block;
- padding: 5px 0;
- font-size: 0.9em;
- font-weight: bold;
- }
- }
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Mobile header
- | -----------------------------------------------------------------------------
-*/
-.mobile-header {
- margin-bottom: 20px;
-
- .mobile-menu,
- .mobile-logo {
- height: 40px;
- cursor: pointer;
- display: inline-block;
- }
-
- .mobile-menu {
- font-weight: bold;
- line-height: 40px;
- }
-
- .mobile-logo {
- width: 40px;
- float: right;
-
- img {
- max-width: 100%;
- @include border-radius(20px);
- }
- }
-
- @include breakpoint(desktop) {
- display: none;
- }
-}
-
-/*
- | -----------------------------------------------------------------------------
- | 404 page
- | -----------------------------------------------------------------------------
-*/
-.error-page {
- text-align: center;
- color: $c-baseLight;
- line-height: 2em;
-}
-
-/*
- | -----------------------------------------------------------------------------
- | Content
- | -----------------------------------------------------------------------------
-*/
-.content {
- background: $c-white;
- border-left: 1px solid $c-grayDark;
-
- @include breakpoint(mobile) {
- padding: 20px;
- }
-
- @include breakpoint(desktop) {
- padding: 30px;
- border-right: 1px solid $c-grayDark;
- }
-
- /*
- | ---------------------------------------------------------------------------
- | Posts list
- | ---------------------------------------------------------------------------
- */
- .post-listed {
- margin-bottom: 35px;
- padding-bottom: 20px;
- border-bottom: 1px solid $c-grayDark;
-
- h2 {
- font-size: 1.1em;
- line-height: 1.4em;
- margin-bottom: 10px;
- }
-
- @media (min-width: 1200px) {
- @include post3Col();
- }
-
- @media (max-width: 640px) and (min-width: 600px) {
- @include post2Col();
- }
-
- @media (max-width: 1199px) and (min-width: 880px) {
- @include post2Col();
- }
- }
-
- /*
- | ---------------------------------------------------------------------------
- | Single post
- | ---------------------------------------------------------------------------
- */
- .post-single {
- .post-header, .post-footer {
- margin: 50px 0 40px;
- padding: 40px 0;
- text-align: center;
- border-top: 1px solid $c-grayNormal;
- border-bottom: 1px solid $c-grayNormal;
-
- h1 {
- font-size: 1.4em;
- line-height: normal;
- margin-bottom: 20px;
- }
- }
-
- .post-header {
- margin-top: 0;
- }
- }
-
- /*
- | ---------------------------------------------------------------------------
- | Main post image
- | ---------------------------------------------------------------------------
- */
- .post-image {
- display: block;
- margin-bottom: 15px;
-
- &:not(div):hover {
- opacity: 0.8;
- }
-
- img {
- width: 100%;
- display: block;
- }
- }
-
- /*
- | ---------------------------------------------------------------------------
- | Post content - markdown
- | ---------------------------------------------------------------------------
- */
- .post-content {
- @extend .markdown;
- }
-
- /*
- | ---------------------------------------------------------------------------
- | Post meta block - tags, share links, etc.
- | ---------------------------------------------------------------------------
- */
- .post-meta {
- font-size: 0.8em;
- font-style: italic;
- color: $c-baseLight;
-
- .tags {
- a {
- text-transform: lowercase;
- }
- }
-
- .share {
- a {
- font-weight: bold;
- padding: 0 5px 0 0;
- }
-
- .share-twitter {
- color: #4099FF;
- }
-
- .share-facebook {
- color: #3B5998;
- }
-
- .share-google-plus {
- color: #d34836;
- }
-
- .share-twitter,
- .share-facebook,
- .share-google-plus {
- &:hover {
- color: $c-baseLight;
- }
- }
- }
- }
-
- /*
- | ---------------------------------------------------------------------------
- | Posts pagination
- | ---------------------------------------------------------------------------
- */
- .pagination {
- clear: both;
- @extend .clear;
-
- .older-posts {
- float: right;
- }
- }
-}
\ No newline at end of file
+++ /dev/null
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
\ No newline at end of file
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
- {{> "head"}}
+ {{>"head"}}
{{ghost_head}}
</head>
-<body class="{{body_class}}">
- <div id="wrapper" class="wrapper">
- <div id="viewport" class="viewport">
- <div id="sidebar" class="sidebar">
- <div class="sidebar-header" style="background-image: url({{@blog.cover}})">
- <a href="{{@blog.url}}" title="{{@blog.title}}">
- <img src="{{@blog.logo}}" alt="{{@blog.title}}">
- </a>
- </div>
-
- <h1>
- <a href="{{@blog.url}}" title="{{@blog.title}}">
- {{@blog.title}}
- </a>
- </h1>
-
- <h2>
- {{@blog.description}}
- </h2>
- {{> "social-links"}}
- {{navigation}}
- </div>
+<body class="{{body_class}}">
+ <div id="site-wrapper" class="c-site-wrapper">
+ <div id="site-viewport" class="c-site-viewport">
+ {{>"sidebar"}}
- <div class="content" id="content">
+ <div id="site-content" class="c-site-content">
{{> "mobile-header"}}
-
- <div class="main-section">
- {{{body}}}
- </div>
+ {{{body}}}
</div>
</div>
</div>
- <script type="text/javascript" src="{{asset "js/script.js"}}"></script>
+ <script src="{{asset "js/scripts.js"}}"></script>
{{ghost_foot}}
</body>
</html>
\ No newline at end of file
{{!< default}}
-<div class="error-page">
- This page does not exist..
- <br/><a href="{{@blog.url}}" title="Go Home">Click Here To Go Home!</a>
+<div class="c-error-message">
+ This page does not exist..<br/>
+ <a href="{{@blog.url}}" title="Go Home">Click Here To Go Home!</a>
</div>
\ No newline at end of file
{{!< default}}
-<div class="content-page">
- {{> "articles"}}
-</div>
\ No newline at end of file
+<div class="c-post-list">
+ {{#foreach posts}}
+ <article class="c-post-list__item {{post_class}}">
+ <a class="c-post-list__image" href="{{url}}" title="{{title}}">
+ <img class="c-post-list__image__img" src="{{image}}" alt="{{title}}"/>
+ </a>
+
+ <h2 class="c-post-list__title">
+ <a href="{{url}}" title="{{title}}">{{title}}</a>
+ </h2>
+
+ <div class="c-post-list__meta">
+ {{date format="MMMM DD, YYYY"}}
+
+ {{#if tags}}
+ in
+ <span class="c-post-list__meta__tags">
+ {{#foreach tags}}
+ <a href="{{url}}" title="{{name}}">#{{name}}</a>
+ {{/foreach}}
+ </span>
+ {{/if}}
+ </div>
+ </article>
+ {{/foreach}}
+</div>
+
+{{pagination}}
\ No newline at end of file
{
"name": "Willow",
- "version": "0.1.0",
+ "version": "2.0.0",
+ "main": "Gruntfile.js",
"author": {
"name": "Raivis Vitols",
- "url": "http://raivis.com"
+ "url": "https://raivis.com"
},
"devDependencies": {
"grunt": "~1.0.1",
+++ /dev/null
-{{#foreach posts}}
- <article class="post-listed {{post_class}}">
- <a class="post-image" href="{{url}}" title="{{title}}">
- <img src="{{image}}" alt="{{title}}"/>
- </a>
-
- <h2>
- <a href="{{url}}" title="{{title}}">{{title}}</a>
- </h2>
-
- <div class="post-meta">
- <span class="time">
- {{date format="DD MMMM, YYYY"}}
- </span>
-
- {{#if tags}}
- in
- <span class="tags">
- {{#foreach tags}}
- <a href="{{url}}" title="{{name}}">#{{name}}</a>
- {{/foreach}}
- </span>
- {{/if}}
- </div>
- </article>
-{{/foreach}}
-{{pagination}}
\ No newline at end of file
<meta charset="utf-8" />
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}" />
-
-<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+<link rel="shortcut icon" href="{{asset "img/favicon.ico"}}" />
<link rel="apple-touch-icon" href="{{asset "img/favicon.ico"}}" />
-<link rel="icon" href="{{asset "img/favicon.ico"}}" type="image/x-icon" />
-<link rel="shortcut icon" href="{{asset "img/favicon.ico"}}" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="{{asset "css/styles.css"}}" />
-<link rel="stylesheet" type="text/css" href="{{asset "css/print.css"}}" media="print" />
-<link href='https://fonts.googleapis.com/css?family=Merriweather:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
\ No newline at end of file
+<link href="https://fonts.googleapis.com/css?family=Merriweather:400,700,700italic,400italic" rel="stylesheet">
-<div class="mobile-header">
- <a href="#" id="mobile-menu" class="mobile-menu">
+<div class="c-mobile-header">
+ <a href="#" id="mobile-menu" class="c-mobile-header__link" title="Menu">
Menu
</a>
- <a class="mobile-logo" href="{{@blog.url}}" title="{{@blog.title}}">
- <img src="{{@blog.logo}}" alt="{{@blog.title}}">
+ <a class="c-mobile-header__logo" href="{{@blog.url}}" title="{{@blog.title}}">
+ <img class="c-mobile-header__logo__image" src="{{@blog.logo}}" alt="{{@blog.title}}">
</a>
</div>
\ No newline at end of file
-<div class="sidebar-menu">
+<div class="c-sidebar-navigation">
{{#foreach navigation}}
- <a href="{{url absolute="true"}}" title="{{label}}">{{label}}</a>
+ <a class="c-sidebar-navigation__item" href="{{url absolute="true"}}" title="{{label}}">
+ {{label}}
+ </a>
{{/foreach}}
</div>
\ No newline at end of file
-<div class="pagination">
+<div class="c-post-pagination">
{{#if prev}}
- <a class="newer-posts" href="{{page_url prev}}">← Newer</a>
+ <a class="c-post-pagination__item" href="{{page_url prev}}">
+ ← Previous Page
+ </a>
{{/if}}
{{#if next}}
- <a class="older-posts" href="{{page_url next}}">Older →</a>
+ <a class="c-post-pagination__item c-post-pagination__item--older" href="{{page_url next}}">
+ Next Page →
+ </a>
{{/if}}
</div>
\ No newline at end of file
--- /dev/null
+<div class="c-post-view-meta">
+ {{date format="MMMM DD, YYYY"}}
+
+ {{#if tags}}
+ in
+ <span class="c-post-view-meta__tags">
+ {{#foreach tags}}
+ <a href="{{url}}" title="{{name}}">#{{name}}</a>
+ {{/foreach}}
+ </span>
+ {{/if}}
+ |
+ {{> "post-share"}}
+</div>
\ No newline at end of file
--- /dev/null
+<span class="c-post-view-share">
+ <a class="c-post-view-share__item--twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute="true"}}"
+ onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
+ Share on Twitter
+ </a>
+ |
+ <a class="c-post-view-share__item--facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
+ onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
+ Share on Facebook
+ </a>
+ |
+ <a class="c-post-view-share__item--google" href="https://plus.google.com/share?url={{url absolute="true"}}"
+ onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
+ Share on Google+
+ </a>
+</span>
\ No newline at end of file
+++ /dev/null
-<div class="post-meta">
- <span class="time">
- {{date format="DD MMMM, YYYY"}}
- </span>
-
- {{#if tags}}
- in
- <span class="tags">
- {{#foreach tags}}
- <a href="{{url}}" title="{{name}}">#{{name}}</a>
- {{/foreach}}
- </span>
- {{/if}}|
-
- <span class="share">
- {{> "share-links"}}
- </span>
-</div>
\ No newline at end of file
+++ /dev/null
-<a class="share-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute="true"}}"
- onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
- Share on Twitter |
-</a>
-
-<a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
- onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
- Share on Facebook |
-</a>
-
-<a class="share-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
- onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
- Share on Google+
-</a>
\ No newline at end of file
--- /dev/null
+<div id="site-sidebar" class="c-site-sidebar">
+ {{! Sidebar header with blog cover and logo images }}
+ <div class="c-sidebar-header" style="background-image: url({{@blog.cover}})">
+ <a class="c-sidebar-header__link" href="{{@blog.url}}" title="{{@blog.title}}">
+ <img class="c-sidebar-header__image" src="{{@blog.logo}}" alt="{{@blog.title}}">
+ </a>
+ </div>
+
+ {{! Sidebar blog title }}
+ {{#is "home"}}<h1 class="c-sidebar-blog-title">{{else}}<h2 class="c-sidebar-blog-title">{{/is}}
+ <a class="c-sidebar-blog-title__link" href="{{@blog.url}}" title="{{@blog.title}}">
+ {{@blog.title}}
+ </a>
+ {{#is "home"}}</h1>{{else}}</h2>{{/is}}
+
+ {{! Sidebar blog description }}
+ <h2 class="c-sidebar-blog-description">
+ {{@blog.description}}
+ </h2>
+
+ {{! Sidebar contact links }}
+ <div class="c-sidebar-contact-links">
+ <a class="c-sidebar-contact-links__item" href="#" target="_blank">
+ github
+ </a>
+
+ <a class="c-sidebar-contact-links__item" href="#" target="_blank">
+ twitter
+ </a>
+
+ <a class="c-sidebar-contact-links__item" href="#" target="_blank">
+ linkedin
+ </a>
+
+ <a class="c-sidebar-contact-links__item" href="#">
+ email
+ </a>
+ </div>
+
+ {{! Sidebar navigation - Ghost's menu }}
+ {{navigation}}
+
+ {{! Sidebar promotion / additional links }}
+ <div class="c-sidebar-promotion-links">
+ <a class="c-sidebar-promotion-links__item" href="#" target="_blank">
+ • Link
+ </a>
+
+ <a class="c-sidebar-promotion-links__item" href="#" target="_blank">
+ • Link
+ </a>
+ </div>
+</div>
\ No newline at end of file
+++ /dev/null
-<div class="sidebar-links">
- <a href="#" target="_blank">
- github
- </a>
-
- <a href="#" target="_blank">
- twitter
- </a>
-
- <a href="#" target="_blank">
- linkedin
- </a>
-</div>
\ No newline at end of file
{{!< default}}
{{#post}}
- <div class="post-single {{post_class}}">
- <div class="post-header">
- <h1>{{title}}</h1>
- {{> "post-single-meta"}}
+ <div class="c-post-view {{post_class}}">
+ <div class="c-post-view__header">
+ <h1 class="c-post-view__header__title">{{title}}</h1>
+ {{> "post-meta"}}
</div>
- <div class="post-content">
+ <div class="c-post-view__content">
{{content}}
</div>
- <div class="post-footer">
- {{> "post-single-meta"}}
+ <div class="c-post-view__footer">
+ {{> "post-meta"}}
</div>
</div>
-
- <div id="disqus_thread"></div>
- <script async="async">
- /* Paste Your Disqus Embed Code Here */
- </script>
{{/post}}
\ No newline at end of file
--- /dev/null
+/*
+ | -----------------------------------------------------------------------------
+ | 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| Error message - 404 page
+|-------------------------------------------------------------------------------
+*/
+.c-error-message {
+ line-height: 2em;
+ text-align: center;
+ color: $c-grayAccent;
+}
\ No newline at end of file
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| Post pagination
+|-------------------------------------------------------------------------------
+*/
+.c-post-pagination {
+ @extend .clear;
+}
+
+.c-post-pagination__item--older {
+ float: right;
+}
\ No newline at end of file
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| Sidebar blog title
+|-------------------------------------------------------------------------------
+*/
+.c-sidebar-blog-title {
+ font-size: 1.2em;
+ margin-bottom: 20px;
+}
\ No newline at end of file
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*
+|-------------------------------------------------------------------------------
+| 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
--- /dev/null
+/*! 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
projects / ghost-theme-willow.git / commitdiff