From 517ff2509b004ee462aac4ec97eaa4c2d90b29ac Mon Sep 17 00:00:00 2001 From: Raivis Vitols Date: Mon, 4 Jul 2016 21:44:46 +0300 Subject: [PATCH] Refactoring code, cleaning up some SASS, styling author and tag page, adding optional Disqus comments --- README.md | 11 ++++- assets/css/styles.css | 2 +- author.hbs | 41 +++++++++++++++++++ error.hbs | 6 +++ index.hbs | 28 +------------ package.json | 2 +- partials/comments.hbs | 13 ++++++ partials/post-list.hbs | 26 ++++++++++++ post.hbs | 9 +++- source/sass/components/_author-page.scss | 40 ++++++++++++++++++ source/sass/components/_disqus-comments.scss | 10 +++++ source/sass/components/_error-message.scss | 4 +- source/sass/components/_mobile-header.scss | 2 +- source/sass/components/_page-title.scss | 15 +++++++ source/sass/components/_post-list.scss | 6 +-- source/sass/components/_post-view-meta.scss | 8 +++- source/sass/components/_post-view.scss | 34 ++++----------- .../components/_sidebar-blog-description.scss | 5 ++- .../sass/components/_sidebar-blog-title.scss | 1 + .../components/_sidebar-contact-links.scss | 4 +- source/sass/components/_sidebar-header.scss | 2 +- .../sass/components/_sidebar-navigation.scss | 4 +- .../components/_sidebar-promotion-links.scss | 4 +- source/sass/components/_site-content.scss | 4 +- source/sass/elements/_elements.scss | 12 +++--- source/sass/helpers/_classes.scss | 12 +++--- source/sass/styles.scss | 24 +++++++---- tag.hbs | 11 +++++ 28 files changed, 242 insertions(+), 98 deletions(-) create mode 100644 author.hbs create mode 100644 partials/comments.hbs create mode 100644 partials/post-list.hbs create mode 100644 source/sass/components/_author-page.scss create mode 100644 source/sass/components/_disqus-comments.scss create mode 100644 source/sass/components/_page-title.scss create mode 100644 tag.hbs diff --git a/README.md b/README.md index 4238a39..4750ff9 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# Willow Ghost Theme 2.0 +# Willow Ghost Theme 3.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. +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. ![Willow Ghost Theme](http://i.imgur.com/a8WfkoS.png) @@ -21,3 +21,10 @@ Requires Grunt task runner & NPM to be installed. ## Editing Social Links and Promo Links Edit the `content/themes/[theme-folder]/partials/sidebar.hbs` file. + +## Enabling Disqus (https://disqus.com/) Comments + +1. Edit the `content/themes/[theme-folder]/post.hbs` file, uncomment "comments" partial +block inclusion: turn `` into `{{> "comments"}}`. + +2. Replace Disqus embed code with your site code - https://disqus.com/admin/universalcode/ diff --git a/assets/css/styles.css b/assets/css/styles.css index 9639b17..1dbfc8a 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1 +1 @@ -/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,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} +/*! 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} diff --git a/author.hbs b/author.hbs new file mode 100644 index 0000000..23094b9 --- /dev/null +++ b/author.hbs @@ -0,0 +1,41 @@ +{{!< default}} +{{#author}} +
+ {{#if image}} +
+ {{name}}'s Picture +
+ {{/if}} + +

+ {{name}} +

+ + {{#if bio}} +

+ {{bio}} +

+ {{/if}} + +
+ {{#if location}} + {{location}} + {{/if}} + + {{#if location}} + {{#if website}} + - + {{/if}} + {{/if}} + + {{#if website}} + + {{website}} + + {{/if}} +
+
+{{/author}} + +{{> "post-list"}} +{{pagination}} diff --git a/error.hbs b/error.hbs index ddf14c1..5fa3eee 100644 --- a/error.hbs +++ b/error.hbs @@ -1,4 +1,10 @@ {{!< default}} +
+

+ Error +

+
+
This page does not exist..
Click Here To Go Home! diff --git a/index.hbs b/index.hbs index c3c3a0b..a11bbc4 100644 --- a/index.hbs +++ b/index.hbs @@ -1,29 +1,3 @@ {{!< default}} -
- {{#foreach posts}} -
- - {{title}} - - -

- {{title}} -

- -
- {{date format="MMMM DD, YYYY"}} - - {{#if tags}} - in - - {{#foreach tags}} - #{{name}} - {{/foreach}} - - {{/if}} -
-
- {{/foreach}} -
- +{{> "post-list"}} {{pagination}} \ No newline at end of file diff --git a/package.json b/package.json index e194526..bd29151 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Willow", - "version": "2.0.0", + "version": "3.0.0", "main": "Gruntfile.js", "author": { "name": "Raivis Vitols", diff --git a/partials/comments.hbs b/partials/comments.hbs new file mode 100644 index 0000000..5ef5e24 --- /dev/null +++ b/partials/comments.hbs @@ -0,0 +1,13 @@ +
+ {{! Replace Code From Here }} +
+ + {{! Replace Code Until Here }} +
\ No newline at end of file diff --git a/partials/post-list.hbs b/partials/post-list.hbs new file mode 100644 index 0000000..d37bb83 --- /dev/null +++ b/partials/post-list.hbs @@ -0,0 +1,26 @@ +
+ {{#foreach posts}} +
+ + {{title}} + + +

+ {{title}} +

+ +
+ {{date format="MMMM DD, YYYY"}} + + {{#if tags}} + in + + {{#foreach tags}} + #{{name}} + {{/foreach}} + + {{/if}} +
+
+ {{/foreach}} +
\ No newline at end of file diff --git a/post.hbs b/post.hbs index 0568f82..776f000 100644 --- a/post.hbs +++ b/post.hbs @@ -1,8 +1,11 @@ {{!< default}} {{#post}}
-
-

{{title}}

+
+

+ {{title}} +

+ {{> "post-meta"}}
@@ -13,5 +16,7 @@
{{> "post-meta"}}
+ +
{{/post}} \ No newline at end of file diff --git a/source/sass/components/_author-page.scss b/source/sass/components/_author-page.scss new file mode 100644 index 0000000..8bbb176 --- /dev/null +++ b/source/sass/components/_author-page.scss @@ -0,0 +1,40 @@ +/* +|------------------------------------------------------------------------------- +| Author page +|------------------------------------------------------------------------------- +*/ +.c-author-page { + text-align: center; + margin-bottom: 40px; + padding: 10px 0 40px; + border-bottom: 1px solid $c-gray; +} + +// Image +.c-author-page__image { + margin-bottom: 20px; +} + +.c-author-page__image__src { + width: 100px; + height: 100px; + display: block; + margin: 0 auto; + @include border-radius(50px); +} + +// Bio +.c-author-page__bio { + max-width: 600px; + font-size: 0.9em; + color: $c-grayDark; + font-weight: normal; + margin: 20px auto 0; +} + +// Meta +.c-author-page__meta { + margin-top: 20px; + font-size: 0.9em; + color: $c-grayDark; +} \ No newline at end of file diff --git a/source/sass/components/_disqus-comments.scss b/source/sass/components/_disqus-comments.scss new file mode 100644 index 0000000..6cc1abf --- /dev/null +++ b/source/sass/components/_disqus-comments.scss @@ -0,0 +1,10 @@ +/* +|------------------------------------------------------------------------------- +| Disqus comments +|------------------------------------------------------------------------------- +*/ +.c-disqus-comments { + margin-top: 30px; + padding-top: 30px; + border-top: 1px solid $c-gray; +} diff --git a/source/sass/components/_error-message.scss b/source/sass/components/_error-message.scss index 085c33b..158eaa5 100644 --- a/source/sass/components/_error-message.scss +++ b/source/sass/components/_error-message.scss @@ -4,7 +4,7 @@ |------------------------------------------------------------------------------- */ .c-error-message { - line-height: 2em; + line-height: 2; text-align: center; - color: $c-grayAccent; + color: $c-grayDark; } \ No newline at end of file diff --git a/source/sass/components/_mobile-header.scss b/source/sass/components/_mobile-header.scss index 8c1b5e0..e71ddd9 100644 --- a/source/sass/components/_mobile-header.scss +++ b/source/sass/components/_mobile-header.scss @@ -7,7 +7,7 @@ @extend .clear; margin-bottom: 30px; padding-bottom: 25px; - border-bottom: 1px solid $c-grayMedium; + border-bottom: 1px solid $c-gray; // Not visible for desktop @include breakpoint(desktop) { diff --git a/source/sass/components/_page-title.scss b/source/sass/components/_page-title.scss new file mode 100644 index 0000000..6d5f8f4 --- /dev/null +++ b/source/sass/components/_page-title.scss @@ -0,0 +1,15 @@ +/* +|------------------------------------------------------------------------------- +| Page title +|------------------------------------------------------------------------------- +*/ +.c-page-title { + text-align: center; + margin-bottom: 40px; + padding: 10px 0 40px 0; + border-bottom: 1px solid $c-gray; +} + +.c-page-title__heading__tag { + text-transform: lowercase; +} \ No newline at end of file diff --git a/source/sass/components/_post-list.scss b/source/sass/components/_post-list.scss index 3220b4b..6aa8f94 100644 --- a/source/sass/components/_post-list.scss +++ b/source/sass/components/_post-list.scss @@ -12,7 +12,7 @@ .c-post-list__item { margin-bottom: 35px; padding-bottom: 20px; - border-bottom: 1px solid $c-grayMedium; + border-bottom: 1px solid $c-gray; @media (min-width: 1200px) { @include post3Col(); @@ -41,7 +41,7 @@ // Title .c-post-list__title { font-size: 1.1em; - line-height: 1.4em; + line-height: 1.4; margin-bottom: 10px; } @@ -49,7 +49,7 @@ .c-post-list__meta { font-size: 0.8em; font-style: italic; - color: $c-grayAccent; + color: $c-grayDark; } .c-post-list__meta__tags { diff --git a/source/sass/components/_post-view-meta.scss b/source/sass/components/_post-view-meta.scss index 4d322b5..12ec7d3 100644 --- a/source/sass/components/_post-view-meta.scss +++ b/source/sass/components/_post-view-meta.scss @@ -4,12 +4,16 @@ |------------------------------------------------------------------------------- */ .c-post-view-meta { + line-height: 2; font-size: 0.8em; - line-height: 2em; font-style: italic; - color: $c-grayAccent; + 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 diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss index 913cf12..7fab01d 100644 --- a/source/sass/components/_post-view.scss +++ b/source/sass/components/_post-view.scss @@ -3,30 +3,7 @@ | 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 +// Content .c-post-view__content { @extend .markdown; } @@ -36,5 +13,12 @@ text-align: center; margin-top: 40px; padding: 40px 0 10px; - border-top: 1px solid $c-grayMedium; + 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 diff --git a/source/sass/components/_sidebar-blog-description.scss b/source/sass/components/_sidebar-blog-description.scss index f1c312b..a7166fc 100644 --- a/source/sass/components/_sidebar-blog-description.scss +++ b/source/sass/components/_sidebar-blog-description.scss @@ -4,8 +4,9 @@ |------------------------------------------------------------------------------- */ .c-sidebar-blog-description { + padding: 0 20px; font-size: 0.8em; - font-weight: normal; - color: $c-grayAccent; + color: $c-grayDark; margin-bottom: 20px; + font-weight: normal; } \ No newline at end of file diff --git a/source/sass/components/_sidebar-blog-title.scss b/source/sass/components/_sidebar-blog-title.scss index 9fe343b..a828cb7 100644 --- a/source/sass/components/_sidebar-blog-title.scss +++ b/source/sass/components/_sidebar-blog-title.scss @@ -4,6 +4,7 @@ |------------------------------------------------------------------------------- */ .c-sidebar-blog-title { + padding: 0 15px; font-size: 1.2em; margin-bottom: 20px; } \ No newline at end of file diff --git a/source/sass/components/_sidebar-contact-links.scss b/source/sass/components/_sidebar-contact-links.scss index ebb644a..7e435b1 100644 --- a/source/sass/components/_sidebar-contact-links.scss +++ b/source/sass/components/_sidebar-contact-links.scss @@ -6,8 +6,8 @@ .c-sidebar-contact-links { font-size: 0.8em; margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid $c-grayMedium; + padding: 0 15px 20px; + border-bottom: 1px solid $c-gray; } .c-sidebar-contact-links__item { diff --git a/source/sass/components/_sidebar-header.scss b/source/sass/components/_sidebar-header.scss index 0c24f16..2c4320e 100644 --- a/source/sass/components/_sidebar-header.scss +++ b/source/sass/components/_sidebar-header.scss @@ -7,7 +7,7 @@ .c-sidebar-header { height: 100px; position: relative; - margin-bottom: 70px; + margin-bottom: 65px; @include bg-size(cover); background-position: 50% 50%; } diff --git a/source/sass/components/_sidebar-navigation.scss b/source/sass/components/_sidebar-navigation.scss index 17efed3..22e8235 100644 --- a/source/sass/components/_sidebar-navigation.scss +++ b/source/sass/components/_sidebar-navigation.scss @@ -6,8 +6,8 @@ .c-sidebar-navigation { font-size: 0.9em; margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid $c-grayMedium; + padding: 0 15px 20px; + border-bottom: 1px solid $c-gray; } .c-sidebar-navigation__item { diff --git a/source/sass/components/_sidebar-promotion-links.scss b/source/sass/components/_sidebar-promotion-links.scss index 751c5bc..7fa8416 100644 --- a/source/sass/components/_sidebar-promotion-links.scss +++ b/source/sass/components/_sidebar-promotion-links.scss @@ -7,10 +7,10 @@ font-size: 0.8em; margin-bottom: 20px; padding-bottom: 20px; - border-bottom: 1px solid $c-grayMedium; + border-bottom: 1px solid $c-gray; } .c-sidebar-promotion-links__item { - padding: 5px 0; + padding: 5px 15px; display: block; } \ No newline at end of file diff --git a/source/sass/components/_site-content.scss b/source/sass/components/_site-content.scss index d81bc32..8a1dbb0 100644 --- a/source/sass/components/_site-content.scss +++ b/source/sass/components/_site-content.scss @@ -8,8 +8,8 @@ max-width: $maxPageWidth; background: $c-white; - border-left: 1px solid $c-grayMedium; - border-right: 1px solid $c-grayMedium; + border-left: 1px solid $c-gray; + border-right: 1px solid $c-gray; // Less padding for mobile devices @include breakpoint(mobile) { diff --git a/source/sass/elements/_elements.scss b/source/sass/elements/_elements.scss index 1f6eb2f..95dbe27 100644 --- a/source/sass/elements/_elements.scss +++ b/source/sass/elements/_elements.scss @@ -15,23 +15,23 @@ body, html { // Body body { - min-width: 320px; - background: $c-grayLight; - color: $c-grayDark; + color: $c-black; font-size: 16px; - line-height: 1.2em; + min-width: 320px; + line-height: 1.5; + background: $c-background; font-family: 'Merriweather', serif; } // Anchors a { outline: none; - color: $c-grayDark; + color: $c-black; @include transition(); text-decoration: none; &:hover { - color: $c-grayAccent; + color: $c-grayDark; } } diff --git a/source/sass/helpers/_classes.scss b/source/sass/helpers/_classes.scss index ad05498..f80157e 100644 --- a/source/sass/helpers/_classes.scss +++ b/source/sass/helpers/_classes.scss @@ -15,7 +15,7 @@ | ----------------------------------------------------------------------------- */ .markdown { - line-height: 2em; + line-height: 2; h1, h2, h3, p, ul, blockquote, pre, .gist { @@ -56,26 +56,26 @@ blockquote { padding-left: 30px; font-style: italic; - border-left: 4px solid $c-grayMedium; + border-left: 4px solid $c-gray; } hr { border: 0; height: 1px; margin: 30px 0; - background: $c-grayMedium; + background: $c-gray; } pre { padding: 1em; overflow: auto; font-size: 0.9em; - line-height: 1.5em; - background: $c-grayLight; + line-height: 1.5; + background: $c-background; } code { - background: $c-grayLight; + background: $c-background; } .gist .gist-file { diff --git a/source/sass/styles.scss b/source/sass/styles.scss index 834b281..c0a9343 100644 --- a/source/sass/styles.scss +++ b/source/sass/styles.scss @@ -3,14 +3,13 @@ | Configuration |------------------------------------------------------------------------------- */ -$c-white: #ffffff; +$c-white : #ffffff; +$c-black : #555555; +$c-gray : #eaeaea; +$c-grayDark : #888888; +$c-background: #f7f7f7; -$c-grayDark: #555555; -$c-grayLight: #f7f7f7; -$c-grayMedium: #eaeaea; -$c-grayAccent: #888888; - -$sidebarWidth: 290px; +$sidebarWidth: 300px; $maxPageWidth: 1000px; /* @@ -43,19 +42,26 @@ $maxPageWidth: 1000px; @import "components/site-viewport"; @import "components/site-sidebar"; @import "components/site-content"; + @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-pagination"; @import "components/post-view"; @import "components/post-view-meta"; @import "components/post-view-share"; -@import "components/error-message"; +@import "components/post-pagination"; + +@import "components/page-title"; +@import "components/author-page"; +@import "components/disqus-comments"; /* |------------------------------------------------------------------------------- diff --git a/tag.hbs b/tag.hbs new file mode 100644 index 0000000..fd2b6f2 --- /dev/null +++ b/tag.hbs @@ -0,0 +1,11 @@ +{{!< default}} +{{#tag}} +
+

+ All Posts Tagged As #{{name}} +

+
+{{/tag}} + +{{> "post-list"}} +{{pagination}} -- 2.34.1