add series support

deepu105 · Jul 17, 2019 · 1afe488 · 1afe488
1 parent d345e5d
commit 1afe488
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 11 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -60,15 +60,35 @@ <h1 class="posttitle">{{ page.title }}</h1>
             <!-- Post Featured Image -->
             {% if page.cover_image %}
 
-            {% if site.lazyimages == "enabled" %}
-            <img class="featured-image img-fluid lazyimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if page.cover_image contains "://" %}{{ page.cover_image }}{% else %}{{ site.baseurl }}/{{ page.cover_image }}{% endif %}" alt="{{ page.title }}">
-            {% else %}
-            <img class="featured-image img-fluid" src="{% if page.cover_image contains "://" %}{{ page.cover_image }}{% else %}{{ site.baseurl }}/{{ page.cover_image }}{% endif %}" alt="{{ page.title }}">
-            {% endif %}
+                {% if site.lazyimages == "enabled" %}
+                    <img class="featured-image img-fluid lazyimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if page.cover_image contains "://" %}{{ page.cover_image }}{% else %}{{ site.baseurl }}/{{ page.cover_image }}{% endif %}" alt="{{ page.title }}">
+                {% else %}
+                    <img class="featured-image img-fluid" src="{% if page.cover_image contains "://" %}{{ page.cover_image }}{% else %}{{ site.baseurl }}/{{ page.cover_image }}{% endif %}" alt="{{ page.title }}">
+                {% endif %}
 
             {% endif %}
             <!-- End Featured Image -->
 
+            <!-- Post series -->
+            {% if page.series %}
+            <div class="panel series-wrapper">
+                <p>
+                    <strong>Part of "{{page.series}}" series</strong>
+                </p>
+                <div class="article-collection">
+                {% assign count = '0' %}
+                {% for post in site.posts reversed %}
+                {% if post.series == page.series %}
+                    {% capture count %}{{ count | plus: '1' }}{% endcapture %}
+                    <a href="{{post.url}}" title="Part {{count}}: {{post.title}}" {% if page.url == post.url %}class="current-article"{% endif %}></a>
+                    </a>
+                {% endif %}
+                {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+            <!-- End series -->
+
             <!-- Post Content -->
             <div class="article-post">
                 <!-- Toc if any -->

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -5,15 +5,11 @@
 
 /* We need to add display:inline in order to align the '>>' of the 'read more' link */
 .post-excerpt p {
-	display:inline;
+    display: inline;
 }
 
 // Import partials from `sass_dir` (defaults to `_sass`)
-@import
-	"syntax",
-    "starsnonscss"
-;
-
+@import "syntax", "starsnonscss";
 
 .profile-pic {
     border-radius: 50%;
@@ -33,3 +29,38 @@
         border: 0;
     }
 }
+
+.container .series-wrapper {
+    text-align: center;
+    > .article-collection {
+        display: inline-block;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        font-size: 16px;
+        overflow: hidden;
+        width: 92%;
+        max-width: 718px;
+        margin-bottom: 1.1vw;
+        position: relative;
+        z-index: 8;
+        > a {
+            color: #0a0a0a;
+            padding: calc(0.3vw + 14px);
+            background: #d8d8de;
+            display: inline-block;
+            position: relative;
+            z-index: 4;
+            max-width: 260px;
+            margin: 0.2vw;
+            border-radius: 100px;
+            &:hover {
+                background: lighten(#00ab6b, 20%)
+            }
+            &.current-article {
+                background: #00ab6b;
+            }
+        }
+    }
+}