-# Willow Ghost Theme 3.0
+# Willow Ghost Theme 4.0
-Personal, responsive, minimalist and open-source theme for Ghost blogging platform.
-Lightweight - only 2.9KB of CSS and 820B of JavaScript. No jQuery, vanilla JS only.
-Version 2.0 comes with SASS in BEM style using ITCSS (http://itcss.io/) architecture.
+Personal, responsive, minimalist and open-source theme for Ghost blogging platform. Lightweight - only 3KB of CSS and 820B of JavaScript. No jQuery, vanilla JS only. Starting version 2.0 theme is built with SASS in BEM style using ITCSS (http://itcss.io/) architecture.
![Willow Ghost Theme](http://i.imgur.com/a8WfkoS.png)
1. Edit the `content/themes/[theme-folder]/post.hbs` file, uncomment "comments" partial
inclusion.
-2. Replace Disqus embed code with your site code - https://disqus.com/admin/universalcode/
+2. Replace Disqus embed code with your site code - https://disqus.com/admin/universalcode/. Edit `content/themes/[theme-folder]/partials/comments.hbs` file and replace `loadDisqusComments` function body with Disqus embed code function body.
-/*! 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{color:#555;font-size:16px;min-width:320px;line-height:1.5;background:#f7f7f7;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(300px);-moz-transform:translateX(300px);-ms-transform:translateX(300px);-o-transform:translateX(300px);transform:translateX(300px)}}.c-site-sidebar{width:300px;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:-300px}}.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:300px}}.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-error-message{line-height:2;text-align:center;color:#888}.c-sidebar-header{height:100px;position:relative;margin-bottom:65px;-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{padding:0 15px;font-size:1.2em;margin-bottom:20px}.c-sidebar-blog-description{padding:0 20px;font-size:0.8em;color:#888;margin-bottom:20px;font-weight:normal}.c-sidebar-contact-links{font-size:0.8em;margin-bottom:20px;padding:0 15px 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:0 15px 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 15px;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.4;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-view__footer{text-align:center;margin-top:40px;padding:40px 0 10px;border-top:1px solid #eaeaea}.c-post-view--narrow{text-align:center;max-width:610px;margin:0 auto}.c-post-view-meta{line-height:2;font-size:0.8em;font-style:italic;color:#888}.c-post-view-meta__tags{text-transform:lowercase}.c-page-title__heading+.c-post-view-meta{margin-top:20px}.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-post-pagination__item--older{float:right}.c-page-title{text-align:center;margin-bottom:40px;padding:10px 0 40px 0;border-bottom:1px solid #eaeaea}.c-page-title__heading__tag{text-transform:lowercase}.c-author-page{text-align:center;margin-bottom:40px;padding:10px 0 40px;border-bottom:1px solid #eaeaea}.c-author-page__image{margin-bottom:20px}.c-author-page__image__src{width:100px;height:100px;display:block;margin:0 auto;-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px}.c-author-page__bio{max-width:600px;font-size:0.9em;color:#888;font-weight:normal;margin:20px auto 0}.c-author-page__meta{margin-top:20px;font-size:0.9em;color:#888}.c-disqus-comments{margin-top:30px;padding-top:30px;border-top:1px solid #eaeaea}.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:2}.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.5;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}
+/*! 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{color:#555;font-size:14px;min-width:320px;line-height:1.5;background:#f7f7f7;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.25em}h2{margin:0;font-size:1.1em}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: 1024px){.c-site-viewport{-webkit-transition:300ms;-moz-transition:300ms;-ms-transition:300ms;-o-transition:300ms;transition:300ms}}@media (max-width: 1024px){[data-menu-visible="1"] .c-site-viewport{-webkit-transform:translateX(300px);-moz-transform:translateX(300px);-ms-transform:translateX(300px);-o-transform:translateX(300px);transform:translateX(300px)}}.c-site-sidebar{width:300px;height:100%;position:absolute;top:0;z-index:1;text-align:center}@media (min-width: 1025px){.c-site-sidebar{left:0}}@media (max-width: 1024px){.c-site-sidebar{left:-300px}}.c-sidebar-header{height:100px;position:relative;margin-bottom:65px;-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-description{padding:0 20px;font-size:0.9em;color:#888;margin-bottom:20px;font-weight:normal}.c-sidebar-blog-title{padding:0 15px;font-size:1.25em;margin-bottom:20px}.c-sidebar-contact-links{font-size:0.9em;margin-bottom:20px;padding:0 15px 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:0 15px 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.9em;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eaeaea}.c-sidebar-promotion-links__item{padding:5px 15px;display:block}.c-site-content{min-height:100vh;max-width:1000px;background:#fff;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea}@media (max-width: 1024px){.c-site-content{padding:20px}}@media (min-width: 1025px){.c-site-content{padding:30px;margin-left:300px}}.c-mobile-header{margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid #eaeaea}@media (min-width: 1025px){.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-error-message{line-height:2;text-align:center;color:#888}.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.4;margin-bottom:10px}.c-post-list__meta{font-size:0.9em;font-style:italic;color:#888}.c-post-list__meta__tags{text-transform:lowercase}.c-post-view__footer{text-align:center;margin-top:30px;padding:30px 0 10px;border-top:1px solid #eaeaea}.c-post-view-meta{line-height:2;font-size:0.9em;font-style:italic;color:#888}.c-post-view-meta__tags{text-transform:lowercase}.c-page-title__heading+.c-post-view-meta{margin-top:10px}.c-post-view-share__item{float:left;width:100%;padding:10px;margin:1px 0;color:#fff;font-size:0.9em;font-weight:bold}@media (min-width: 550px){.c-post-view-share__item{width:33.333%}}.c-post-view-share__item:hover{opacity:0.9;color:#fff}.c-post-view-share__item--twitter{background:#4099FF}.c-post-view-share__item--facebook{background:#3B5998}.c-post-view-share__item--google{background:#d34836}.c-post-view-prev-next{margin-top:30px;padding-top:30px;border-top:1px solid #eaeaea}@media (min-width: 700px){.c-post-view-prev-next__item{width:48%;float:left;margin-right:4%}.c-post-view-prev-next__item:nth-child(2n){margin-right:0}.c-post-view-prev-next__item:nth-child(2n+1){clear:left}}@media (max-width: 701px){.c-post-view-prev-next__item:first-child{margin-bottom:35px;padding-bottom:20px;border-bottom:1px solid #eaeaea}}.c-post-view-prev-next__image{margin-bottom:15px;position:relative;display:block}.c-post-view-prev-next__image:hover{opacity:0.8}.c-post-view-prev-next__image__img{width:100%;display:block}.c-post-view-prev-next__image--placeholder{opacity:0.8;padding-top:50%;background:#eaeaea}.c-post-view-prev-next__image__label{top:10px;color:#fff;position:absolute;padding:10px 15px;background:rgba(85,85,85,0.5)}.c-post-view-prev-next__image__label--next{left:10px}.c-post-view-prev-next__image__label--previous{right:10px}.c-post-pagination__item--older{float:right}.c-page-title{text-align:center;margin-bottom:40px;padding:10px 0 35px 0;border-bottom:1px solid #eaeaea}.c-page-title__heading__tag{text-transform:lowercase}.c-author-page{text-align:center;margin-bottom:40px;padding:10px 0 40px;border-bottom:1px solid #eaeaea}.c-author-page__image{margin-bottom:20px}.c-author-page__image__src{width:100px;height:100px;display:block;margin:0 auto;-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px;-o-border-radius:50px;border-radius:50px}.c-author-page__bio{max-width:580px;font-size:0.9em;color:#888;font-weight:normal;margin:20px auto 0}.c-author-page__meta{margin-top:20px;font-size:0.9em;color:#888}.c-disqus-comments{margin-top:30px;padding-top:30px;border-top:1px solid #eaeaea}.c-disqus-comments__button{display:block;cursor:pointer;margin-top:10px;padding:20px 25px;background:#eaeaea}.clear:after,.c-mobile-header:after,.c-post-list:after,.c-post-view-share:after,.c-post-view-prev-next:after,.c-post-pagination:after{content:"";clear:both;display:table}.markdown,.c-post-view__content{line-height:2}.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.5;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}
{
"name": "Willow",
- "version": "3.0.0",
+ "version": "4.0.0",
"main": "Gruntfile.js",
"author": {
"name": "Raivis Vitols",
<div class="c-disqus-comments">
- {{! Replace Code From Here }}
- <div id="disqus_thread"></div>
+ <div id="disqus_thread">
+ <a class="c-disqus-comments__button" onclick="WillowGhostTheme.loadDisqusComments();">
+ Load Comments
+ </a>
+ </div>
<script>
- (function() {
- var d = document, s = d.createElement('script');
- s.src = '//yourssite.disqus.com/embed.js';
- s.setAttribute('data-timestamp', +new Date());
- (d.head || d.body).appendChild(s);
- })();
+ var WillowGhostTheme = {
+ loadDisqusComments: function () {
+ {{! Replace Code From Here }}
+
+ var d = document, s = d.createElement('script');
+ s.src = '//yourssite.disqus.com/embed.js';
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+
+ {{! Replace Code Until Here }}
+ }
+ };
</script>
- {{! Replace Code Until Here }}
</div>
\ No newline at end of file
{{/foreach}}
</span>
{{/if}}
- |
- {{> "post-share"}}
</div>
\ No newline at end of file
-<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"}}"
+<div class="c-post-view-share">
+ <a class="c-post-view-share__item 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"}}"
+ <a class="c-post-view-share__item 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"}}"
+ <a class="c-post-view-share__item 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
+</div>
\ No newline at end of file
--- /dev/null
+<div class="c-post-view-prev-next">
+ {{#next_post}}
+ <article class="c-post-view-prev-next__item {{post_class}}">
+ <a class="c-post-view-prev-next__image" href="{{url}}" title="{{title}}">
+ <img class="c-post-view-prev-next__image__img" src="{{image}}" alt="{{title}}"/>
+ <span class="c-post-view-prev-next__image__label c-post-view-prev-next__image__label--next">
+ Next Post
+ </span>
+ </a>
+
+ <h3 class="c-post-view-prev-next__title">
+ <a href="{{url}}" title="{{title}}">{{title}}</a>
+ </h3>
+ </article>
+ {{else}}
+ <article class="c-post-view-prev-next__item">
+ <div class="c-post-view-prev-next__image c-post-view-prev-next__image--placeholder">
+ <span class="c-post-view-prev-next__image__label c-post-view-prev-next__image__label--next">
+ No Newer Posts
+ </span>
+ </div>
+ </article>
+ {{/next_post}}
+
+ {{#prev_post}}
+ <article class="c-post-view-prev-next__item {{post_class}}">
+ <a class="c-post-view-prev-next__image" href="{{url}}" title="{{title}}">
+ <img class="c-post-view-prev-next__image__img" src="{{image}}" alt="{{title}}"/>
+ <span class="c-post-view-prev-next__image__label c-post-view-prev-next__image__label--previous">
+ Previous Post
+ </span>
+ </a>
+
+ <h3 class="c-post-view-prev-next__title">
+ <a href="{{url}}" title="{{title}}">{{title}}</a>
+ </h3>
+ </article>
+ {{else}}
+ <article class="c-post-view-prev-next__item">
+ <div class="c-post-view-prev-next__image c-post-view-prev-next__image--placeholder">
+ <span class="c-post-view-prev-next__image__label c-post-view-prev-next__image__label--previous">
+ No Older Posts
+ </span>
+ </div>
+ </article>
+ {{/prev_post}}
+</div>
\ No newline at end of file
</div>
<div class="c-post-view__footer">
- {{> "post-meta"}}
+ {{> "post-share"}}
+ {{> "prev-next"}}
+ <!--{{> "comments"}}-->
</div>
-
- <!--{{> "comments"}}-->
</div>
{{/post}}
\ No newline at end of file
// Bio
.c-author-page__bio {
- max-width: 600px;
+ max-width: 580px;
font-size: 0.9em;
color: $c-grayDark;
font-weight: normal;
padding-top: 30px;
border-top: 1px solid $c-gray;
}
+
+.c-disqus-comments__button {
+ display: block;
+ cursor: pointer;
+ margin-top: 10px;
+ padding: 20px 25px;
+ background: $c-gray;
+}
.c-page-title {
text-align: center;
margin-bottom: 40px;
- padding: 10px 0 40px 0;
+ padding: 10px 0 35px 0;
border-bottom: 1px solid $c-gray;
}
// Meta info
.c-post-list__meta {
- font-size: 0.8em;
+ font-size: 0.9em;
font-style: italic;
color: $c-grayDark;
}
+++ /dev/null
-/*
-|-------------------------------------------------------------------------------
-| Post view meta - date & tags
-|-------------------------------------------------------------------------------
-*/
-.c-post-view-meta {
- line-height: 2;
- font-size: 0.8em;
- font-style: italic;
- color: $c-grayDark;
-}
-
-.c-post-view-meta__tags {
- text-transform: lowercase;
-}
-
-.c-page-title__heading + .c-post-view-meta {
- margin-top: 20px;
-}
\ 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
// Footer
.c-post-view__footer {
text-align: center;
- margin-top: 40px;
- padding: 40px 0 10px;
+ margin-top: 30px;
+ padding: 30px 0 10px;
border-top: 1px solid $c-gray;
}
-// Narrow post page view
-.c-post-view--narrow {
- text-align: center;
- max-width: 610px;
- margin: 0 auto;
-}
\ No newline at end of file
+/*
+|-------------------------------------------------------------------------------
+| Post view meta - date & tags
+|-------------------------------------------------------------------------------
+*/
+.c-post-view-meta {
+ line-height: 2;
+ font-size: 0.9em;
+ font-style: italic;
+ color: $c-grayDark;
+}
+
+.c-post-view-meta__tags {
+ text-transform: lowercase;
+}
+
+.c-page-title__heading + .c-post-view-meta {
+ margin-top: 10px;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Post view share - share on Twitter, Facebook and Google+
+|-------------------------------------------------------------------------------
+*/
+.c-post-view-share {
+ @extend .clear;
+}
+
+.c-post-view-share__item {
+ float: left;
+ width: 100%;
+ padding: 10px;
+ margin: 1px 0;
+ color: $c-white;
+ font-size: 0.9em;
+ font-weight: bold;
+
+ @media (min-width: 550px) {
+ width: 33.333%;
+ }
+}
+
+.c-post-view-share__item:hover {
+ opacity: 0.9;
+ color: $c-white;
+}
+
+.c-post-view-share__item--twitter {
+ background: #4099FF;
+}
+
+.c-post-view-share__item--facebook {
+ background: #3B5998;
+}
+
+.c-post-view-share__item--google {
+ background: #d34836;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Post view previous / next post
+|-------------------------------------------------------------------------------
+*/
+.c-post-view-prev-next {
+ @extend .clear;
+ margin-top: 30px;
+ padding-top: 30px;
+ border-top: 1px solid $c-gray;
+}
+
+.c-post-view-prev-next__item {
+ @media (min-width: 700px) {
+ @include post2Col();
+ }
+
+ @media (max-width: 701px) {
+ &:first-child {
+ margin-bottom: 35px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid $c-gray;
+ }
+ }
+}
+
+// Image and image link
+.c-post-view-prev-next__image {
+ margin-bottom: 15px;
+ position: relative;
+ display: block;
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+.c-post-view-prev-next__image__img {
+ width: 100%;
+ display: block;
+}
+
+.c-post-view-prev-next__image--placeholder {
+ opacity: 0.8;
+ padding-top: 50%;
+ background: $c-gray;
+}
+
+// Previous and Next labels
+.c-post-view-prev-next__image__label {
+ top: 10px;
+ color: $c-white;
+ position: absolute;
+ padding: 10px 15px;
+ background: rgba($c-black, 0.5);
+}
+
+.c-post-view-prev-next__image__label--next {
+ left: 10px;
+}
+
+.c-post-view-prev-next__image__label--previous {
+ right: 10px;
+}
+++ /dev/null
-/*
-|-------------------------------------------------------------------------------
-| Sidebar blog description
-|-------------------------------------------------------------------------------
-*/
-.c-sidebar-blog-description {
- padding: 0 20px;
- font-size: 0.8em;
- color: $c-grayDark;
- margin-bottom: 20px;
- font-weight: normal;
-}
\ No newline at end of file
+++ /dev/null
-/*
-|-------------------------------------------------------------------------------
-| Sidebar blog title
-|-------------------------------------------------------------------------------
-*/
-.c-sidebar-blog-title {
- padding: 0 15px;
- 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: 0 15px 20px;
- border-bottom: 1px solid $c-gray;
-}
-
-.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: 65px;
- @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: 0 15px 20px;
- border-bottom: 1px solid $c-gray;
-}
-
-.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-gray;
-}
-
-.c-sidebar-promotion-links__item {
- padding: 5px 15px;
- display: block;
-}
\ No newline at end of file
@include breakpoint(mobile) {
left: -$sidebarWidth;
}
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Sidebar header
+|-------------------------------------------------------------------------------
+*/
+// Cover
+.c-sidebar-header {
+ height: 100px;
+ position: relative;
+ margin-bottom: 65px;
+ @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;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Sidebar blog description
+|-------------------------------------------------------------------------------
+*/
+.c-sidebar-blog-description {
+ padding: 0 20px;
+ font-size: 0.9em;
+ color: $c-grayDark;
+ margin-bottom: 20px;
+ font-weight: normal;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Sidebar blog title
+|-------------------------------------------------------------------------------
+*/
+.c-sidebar-blog-title {
+ padding: 0 15px;
+ font-size: 1.25em;
+ margin-bottom: 20px;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Sidebar contact links - github, linkedin, twitter, etc.
+|-------------------------------------------------------------------------------
+*/
+.c-sidebar-contact-links {
+ font-size: 0.9em;
+ margin-bottom: 20px;
+ padding: 0 15px 20px;
+ border-bottom: 1px solid $c-gray;
+}
+
+.c-sidebar-contact-links__item {
+ padding: 0 5px;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Sidebar navigation
+|-------------------------------------------------------------------------------
+*/
+.c-sidebar-navigation {
+ font-size: 0.9em;
+ margin-bottom: 20px;
+ padding: 0 15px 20px;
+ border-bottom: 1px solid $c-gray;
+}
+
+.c-sidebar-navigation__item {
+ padding: 5px;
+ font-weight: bold;
+ display: inline-block;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Sidebar promotion links
+|-------------------------------------------------------------------------------
+*/
+.c-sidebar-promotion-links {
+ font-size: 0.9em;
+ margin-bottom: 20px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid $c-gray;
+}
+
+.c-sidebar-promotion-links__item {
+ padding: 5px 15px;
+ display: block;
}
\ No newline at end of file
// Body
body {
color: $c-black;
- font-size: 16px;
+ font-size: 14px;
min-width: 320px;
line-height: 1.5;
background: $c-background;
// Headings
h1 {
margin: 0;
- font-size: 1.4em;
+ font-size: 1.25em;
}
h2 {
margin: 0;
- font-size: 1.2em;
+ font-size: 1.1em;
}
h3 {
@import "components/mobile-header";
@import "components/error-message";
-@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-view";
-@import "components/post-view-meta";
-@import "components/post-view-share";
@import "components/post-pagination";
@import "components/page-title";
// Shortcuts to breakpoints
@mixin breakpoint($breakpoint) {
@if $breakpoint == "mobile" {
- @media (max-width: 640px) {
+ @media (max-width: 1024px) {
@content;
}
}
@else if $breakpoint == "desktop" {
- @media (min-width: 641px) {
+ @media (min-width: 1025px) {
@content;
}
}