Updating theme - version 4.0.0 - fonts, conditional comments, prev & …

…next posts, share buttons
raivis-vitols · Dec 29, 2016 · c2c7aa7 · c2c7aa7
1 parent dd5a6c2
commit c2c7aa7
Show file tree

Hide file tree

Showing 25 changed files with 331 additions and 198 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,6 @@
-# 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)
 
@@ -27,4 +25,4 @@ Edit the `content/themes/[theme-folder]/partials/sidebar.hbs` file.
 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.
diff --git a/assets/css/styles.css b/assets/css/styles.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Willow",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "main": "Gruntfile.js",
   "author": {
     "name": "Raivis Vitols",

diff --git a/partials/comments.hbs b/partials/comments.hbs
@@ -1,13 +1,21 @@
 <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>
diff --git a/partials/post-meta.hbs b/partials/post-meta.hbs
@@ -9,6 +9,4 @@
             {{/foreach}}
         </span>
     {{/if}}
-    |
-    {{> "post-share"}}
 </div>
diff --git a/partials/post-share.hbs b/partials/post-share.hbs
@@ -1,16 +1,14 @@
-<span class="c-post-view-share">
-    <a class="c-post-view-share__item--twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&amp;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}}&amp;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>
+</div>
diff --git a/partials/prev-next.hbs b/partials/prev-next.hbs
@@ -0,0 +1,47 @@
+<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>
diff --git a/post.hbs b/post.hbs
@@ -14,9 +14,9 @@
         </div>
 
         <div class="c-post-view__footer">
-            {{> "post-meta"}}
+            {{> "post-share"}}
+            {{> "prev-next"}}
+            <!--{{> "comments"}}-->
         </div>
-
-        <!--{{> "comments"}}-->
     </div>
 {{/post}}
diff --git a/source/sass/components/_author-page.scss b/source/sass/components/_author-page.scss
@@ -25,7 +25,7 @@
 
 // Bio
 .c-author-page__bio {
-  max-width: 600px;
+  max-width: 580px;
   font-size: 0.9em;
   color: $c-grayDark;
   font-weight: normal;

diff --git a/source/sass/components/_disqus-comments.scss b/source/sass/components/_disqus-comments.scss
@@ -8,3 +8,11 @@
   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;
+}
diff --git a/source/sass/components/_page-title.scss b/source/sass/components/_page-title.scss
@@ -6,7 +6,7 @@
 .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;
 }
 

diff --git a/source/sass/components/_post-list.scss b/source/sass/components/_post-list.scss
@@ -47,7 +47,7 @@
 
 // Meta info
 .c-post-list__meta {
-  font-size: 0.8em;
+  font-size: 0.9em;
   font-style: italic;
   color: $c-grayDark;
 }

diff --git a/source/sass/components/_post-view-meta.scss b/source/sass/components/_post-view-meta.scss
diff --git a/source/sass/components/_post-view-share.scss b/source/sass/components/_post-view-share.scss
diff --git a/source/sass/components/_post-view.scss b/source/sass/components/_post-view.scss
@@ -11,14 +11,132 @@
 // 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;
-}
+/*
+|-------------------------------------------------------------------------------
+| 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;
+}
diff --git a/source/sass/components/_sidebar-blog-description.scss b/source/sass/components/_sidebar-blog-description.scss