add 404 page and tags page

_includes/navigation.html

@@ -4,6 +4,7 @@
       <h2 class="nav-title">{{ site.title }}</h2>
     </a>
     <ul>
+      <li><a href="{{ '/tags' | prepend: site.baseurl }}">Tags</a></li>
       <li><a href="{{ '/about' | prepend: site.baseurl }}">About</a></li>
       <li><a href="{{ site.baseurl }}/">Posts</a></li>
     </ul>

_pages/404.html

@@ -0,0 +1,15 @@
+---
+layout: default
+permalink: /404.html
+title: "404"
+description: "page not found :("
+---
+<div class="notfound">
+    <div class="notfound-main">
+        <div class="notfound-content">
+            <h3>Oops! Page not found</h3>
+            <h1><span>4</span><span>0</span><span>4</span></h1>
+        </div>
+        <h2>{{page.description}}</h2>
+    </div>
+</div>

_pages/tags.html

@@ -0,0 +1,49 @@
+---
+layout: default
+permalink: /tags.html
+title: "Tags"
+---
+<div class="tags">
+    <div class="tags-header">
+        <div class="tags-header-title">
+            <h2>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h2>
+        </div>
+        <div class="tags-header-line"></div>
+    </div>
+    <div class="tags-content">
+        <div class="tags-content-clouds">
+            {% for tag in site.tags %}
+            <a href="#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">
+                {{ tag[0] }}
+            </a>
+            {% endfor %}
+        </div>
+        <div class="tags-content-list">
+            {% for tag in site.tags %}
+            <div class="tags-content-item">
+                <span class="tags-content-item-seperator" id="{{ tag[0] }}">
+                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                        <path d="M341.333333 375.466667a33.962667 33.962667 0 0 1-24.132266-10.001067l-256-256a34.133333 34.133333 0 1 1 48.264533-48.264533l256 256A34.133333 34.133333 0 0 1 341.333333 375.466667z" fill="#808080"></path>
+                        <path d="M597.333333 955.733333a17.015467 17.015467 0 0 1-12.066133-5.000533l-426.666667-426.666667A17.015467 17.015467 0 0 1 153.6 512V170.666667a17.066667 17.066667 0 0 1 17.066667-17.066667h341.333333c4.522667 0 8.874667 1.792 12.066133 5.000533l426.666667 426.666667a17.0496 17.0496 0 0 1 0 24.132267l-341.333333 341.333333A17.015467 17.015467 0 0 1 597.333333 955.733333zM187.733333 504.9344l409.6 409.6L914.5344 597.333333l-409.6-409.6H187.733333v317.201067zM597.333333 785.066667a17.015467 17.015467 0 0 1-12.066133-5.000534l-213.333333-213.333333a17.0496 17.0496 0 0 1 0-24.132267l170.666666-170.666666a17.0496 17.0496 0 0 1 24.132267 0l213.333333 213.333333a17.0496 17.0496 0 0 1 0 24.132267l-170.666666 170.666666A17.015467 17.015467 0 0 1 597.333333 785.066667zM408.132267 554.666667L597.333333 743.867733 743.867733 597.333333 554.666667 408.132267 408.132267 554.666667z" fill="#808080"></path>
+                        <path d="M401.92 280.746667c16.503467 17.066667 24.746667 37.256533 24.746667 60.586666s-8.2432 43.52-24.746667 60.586667C385.416533 418.423467 365.226667 426.666667 341.333333 426.666667c-23.330133 0-43.229867-8.2432-59.733333-24.746667-17.066667-17.066667-25.6-37.256533-25.6-60.586667s8.533333-43.52 25.6-60.586666c16.503467-16.503467 36.4032-24.746667 59.733333-24.746667 23.893333 0 44.0832 8.2432 60.586667 24.746667z" fill="#808080"></path>
+                    </svg>
+                    <span class="tags-content-item-text">{{ tag[0] }}</span>
+                </span>
+                {% for post in tag[1] %}
+                <div class="tags-content-post">
+                    <a href="{{ post.url}}" title="{{ post.title }}">
+                        <span class="tags-content-post-title">{{ post.title }}</span>
+                    </a>
+                    <span class="tags-content-post-meta">
+                        <time datetime="{{ post.date | date:'%Y-%m-%d' }}">
+                            {{ post.date | date:"%Y-%m-%d" }}
+                        </time>
+                    </span>
+                </div>
+                <!-- <hr> -->
+                {% endfor %}
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>

_posts/2017-03-05-pagination-post.md

@@ -2,6 +2,7 @@
 layout: post
 title: "Pagination Post"
 author: "Chester"
+tags: Tale
 ---
 
 Here we see **Tale's** pagination feature in action. It is set to 5 posts per page by default. Feel free to change this number in the `_config.yml` file!

_posts/2017-03-06-the-mystery-of-the-filler-post.md

@@ -2,6 +2,7 @@
 layout: post
 title: "The Mystery of the Filler Post"
 author: "Chester"
+tags: Tale
 ---
 
 Hornswaggle measured fer yer chains chase run a shot across the bow Chain Shot flogging Pirate Round galleon rope's end aft. Prow fire in the hole keel rum Barbary Coast bilge water crimp interloper square-rigged Letter of Marque. Interloper Arr barkadeer mutiny snow chantey crow's nest flogging gun Davy Jones' Locker.

_posts/2017-03-07-the-case-of-the-missing-post.md

@@ -2,6 +2,7 @@
 layout: post
 title: "The Case of the Missing Post"
 author: "Chester"
+tags: Tale
 ---
 
 Kitty power! and sometimes switches in french and say "miaou" just because well why not man running from cops stops to pet cats, goes to jail, yet licks your face or drink water out of the faucet so jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water yet drink water out of the faucet. Pelt around the house and up and down stairs chasing phantoms.

_posts/2017-03-10-welcome-to-jekyll.md

@@ -2,6 +2,7 @@
 layout: post
 title:  "Welcome to Jekyll!"
 author: "Jekyll"
+tags: Jekyll
 ---
 
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

_posts/2017-03-16-example-content.md

@@ -2,6 +2,7 @@
 layout: post
 title: "Example Content"
 author: "Chester"
+tags: Example
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt ornare nibh, non elementum augue tempus eget. Pellentesque tempus scelerisque iaculis. Nullam interdum ultricies nibh quis sollicitudin. Donec ornare fermentum facilisis. Ut at sem ac sem imperdiet varius a eget tortor. Nam eu augue eget orci semper maximus in eget augue. Mauris ornare, nisl ut suscipit consectetur, mi quam interdum tellus, at rutrum quam eros ultrices mi.

_posts/2017-03-29-introducing-tale.md

@@ -3,6 +3,7 @@ layout: post
 title:  "Introducing Tale"
 author: "Chester"
 comments: true
+tags: Tale
 ---
 
 Tale is a minimal [Jekyll](https://jekyllrb.com/) theme curated for storytellers. It is designed and developed by [myself](https://github.com/chesterhow/) for a friend who writes short stories.

_sass/tale.scss

@@ -6,3 +6,5 @@
 @import 'tale/layout';
 @import 'tale/pagination';
 @import 'tale/catalogue';
+@import 'tale/404';
+@import 'tale/tags';

_sass/tale/_404.scss

@@ -0,0 +1,64 @@
+.notfound {
+    position: relative;
+    height: 100vh;
+
+    &-main {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+
+        width: 100%;
+        line-height: 1.4;
+        text-align: center;
+
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+
+        h2 {
+            font-size: 20px;
+            font-weight: 400;
+            text-transform: uppercase;
+            color: #000;
+            margin-top: 0px;
+            margin-bottom: 25px;
+        }
+    }
+
+    &-content {
+        position: relative;
+        height: 260px;
+
+        h1 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            -webkit-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            font-size: 256px;
+            font-weight: 800;
+            margin: 0px;
+            color: #262626;
+            text-transform: uppercase;
+            letter-spacing: -40px;
+            margin-left: -20px;
+
+            span {
+                text-shadow: -8px 0px 0px #fff;
+            }
+        }
+
+        h3 {
+            position: relative;
+            font-size: 16px;
+            font-weight: 700;
+            text-transform: uppercase;
+            color: #262626;
+            margin: 0px;
+            letter-spacing: 3px;
+            padding-left: 6px;
+        }
+    }
+
+}

_sass/tale/_tags.scss

@@ -0,0 +1,86 @@
+.tags {
+    font-family: $sans-serif;
+
+    &-header {
+        &-title {
+            color: $default-shade;
+            font-size: 2rem;
+            margin: 1rem 0 0 0;
+            text-align: center;
+        }
+
+        &-line {}
+    }
+
+    &-content {
+        &-clouds {
+            margin: 20px 0 15px 0;
+            text-align: center;
+
+            a {
+                font-size: 1rem;
+                background: #C0C0C0;
+                display: inline-block;
+                border: 1px solid rgba(255, 255, 255, 0.8);
+                border-radius: 999em;
+                padding: 0 10px;
+                color: #ffffff;
+                line-height: 24px;
+                text-decoration: none;
+                margin: 0 2px;
+                margin-bottom: 6px;
+
+                &:hover,
+                &:active {
+                    background-color: #DFDFDF !important;
+                    color: white;
+                    border-color: white;
+                    text-decoration: none;
+                }
+            }
+        }
+
+        &-list {}
+
+        &-item {
+            &-seperator {
+                color: #808080;
+                font-size: 1.2rem !important;
+
+                &::before {
+                    margin-right: 5px;
+                }
+            }
+
+            &-text {}
+        }
+
+        &-post {
+            margin: 10px;
+
+            &-title {
+                line-height: 1.3;
+                margin-top: 30px;
+                margin-bottom: 8px;
+            }
+
+            &-meta {
+                color: #CCC;
+                text-align: right;
+                float: right;
+            }
+
+
+            a {
+                color: #404040;
+
+                &:hover,
+                &:focus {
+                    color: #808080;
+                }
+            }
+
+        }
+    }
+
+}