feat(theme): add dark mode

With version 3, Yuika now uses Shian as a basis of styling. Since
Shian was written with both light and dark themes in mind, this
means that the theme now is able to support switching between them.

This commit implements a dark theme toggle that will switch the
site between light and dark themes.

.github/workflows/workflow.yml

@@ -0,0 +1,17 @@
+name: CI
+on: push
+jobs:
+  release:
+    runs-on: ubuntu-16.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14'
+      - run: yarn install
+      - run: yarn build
+      - name: Release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: npx semantic-release

.releaserc.json

@@ -0,0 +1,27 @@
+{
+    "branches": [
+        "master"
+    ],
+    "plugins": [
+        "@semantic-release/commit-analyzer",
+        "@semantic-release/release-notes-generator",
+        "@semantic-release/npm",
+        [
+            "@semantic-release/github",
+            {
+                "assets": [
+                    {
+                        "path": "dist/yuika.zip",
+                        "label": "Theme zip"
+                    }
+                ]
+            }
+        ],
+        [
+            "@semantic-release/exec",
+            {
+                "prepareCmd": "yarn zip"
+            }
+        ]
+    ]
+}

assets/css/styles.css

@@ -3,390 +3,5 @@
 
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
-@tailwind base;
-
-/* 1. Base Styling */
-html {
-  @apply font-sans;
-}
-header {
-  @apply py-4;
-}
-header a:hover {
-  @apply no-underline;
-}
-a:hover {
-  @apply underline;
-}
-/* 2. Site Header */
-.index-navbar {
-  top: 0;
-  z-index: 10;
-  width: 100vw;
-  height: 4rem;
-  overflow: hidden;
-  @apply fixed transition-all duration-300 ease-in-out;
-}
-.index-navbar.enabled {
-  height: 100vh;
-}
-.index-navbar header {
-  z-index: 12;
-  @apply transition duration-300 ease-in-out h-full;
-}
-.index-navbar.enabled header {
-  background-color: rgba(0,0,0,0.5);
-}
-.index-navbar.detached header {
-  background-color: rgba(0,0,0,0.5);
-}
-.index-header {
-  min-height: 200px;
-  height: 70vh;
-}
-@screen md {
-  .index-header {
-    min-height: 300px;
-    height: 70vh;
-  }
-}
-.index-header.large {
-  height: 90vh;
-}
-.no-image {
-  @apply bg-yuika-blue-500
-}
-
-.site-title {
-  @apply flex flex-row transition duration-300 ease-in-out;
-}
-.site-head {
-  @apply flex flex-row flex-grow transition duration-300 ease-in-out;
-}
-.site-head a {
-  @apply flex flex-row py-2 items-center transition duration-300 ease-in-out h-16 inline-block px-4;
-}
-.site-head a:hover {
-  @apply bg-yuika-blue-500;
-}
-.site-background {
-  position: absolute;
-  opacity: 0%;
-  top: -23vh;
-  width: 100vw;
-  height: 100vh;
-  @apply transition-all duration-300 ease-in-out;
-}
-.index-navbar.enabled .site-background {
-  opacity: 100%;
-  top: 0;
-}
-.main-container {
-  @apply relative;
-}
-/* 3. Content Styling */
-#post p {
-  @apply my-4;
-}
-#post h1 {
-  @apply my-4 text-4xl font-light;
-}
-#post h2 {
-  @apply my-4 text-3xl font-light;
-}
-#post h3 {
-  @apply my-4 text-2xl font-light;
-}
-#post h4 {
-  @apply my-4 text-xl font-light;
-}
-#post h5 {
-  @apply my-4 text-lg font-light;
-}
-#post h6 {
-  @apply my-4 text-base font-light;
-}
-#post a {
-  @apply text-yuika-blue-700;
-}
-#post a:hover {
-  @apply underline;
-}
-#post ul {
-  @apply list-disc;
-}
-#post ol {
-  @apply list-decimal;
-}
-#post code {
-  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
-}
-#post blockquote {
-  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
-}
-#post pre {
-  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
-}
-#post .kg-card {
-  @apply py-4 flex flex-col items-center object-contain my-8 mx-0;
-}
-#post .kg-card .kg-image {
-  @apply w-full;
-}
-#post .kg-width-wide .kg-image {
-  min-width: 100vw;
-}
-@screen md {
-  #post .kg-width-wide .kg-image {
-    min-width: 115%;
-  }
-}
-@screen lg {
-  #post .kg-width-wide .kg-image {
-    min-width: 125%;
-  }
-}
-@screen xl {
-  #post .kg-width-wide .kg-image {
-    min-width: 140%;
-  }
-}
-
-#post .kg-width-full .kg-image {
-  min-width: 100vw;
-}
-#post .kg-card figcaption {
-  @apply text-sm text-gray-800 mt-2;
-}
-
-#post .kg-gallery-container {
-  min-width: 100vw;
-}
-@screen md {
-  #post .kg-gallery-container {
-    min-width: 115%;
-  }
-}
-@screen lg {
-  #post .kg-gallery-container {
-    min-width: 125%;
-  }
-}
-@screen xl {
-  #post .kg-gallery-container {
-    min-width: 140%;
-  }
-}
-
-#post .kg-gallery-row {
-  @apply flex flex-row;
-}
-#post .kg-gallery-image {
-  @apply mx-1;
-  flex: 1 1 0%;
-}
-
-#post .kg-bookmark-card {
-  @apply text-black;
-}
-
-#post .kg-bookmark-container {
-  @apply flex flex-row justify-between text-black border-l-4 border-yuika-blue-700 bg-white transition duration-300 ease-in-out;
-}
-#post .kg-bookmark-container:hover {
-  @apply bg-gray-400 transition duration-300 ease-in-out;
-}
-#post .kg-bookmark-content {
-  @apply w-2/3 py-4 px-4;
-}
-#post .kg-bookmark-thumbnail {
-  min-width: 33.3333%;
-  @apply max-h-full relative;
-}
-#post .kg-bookmark-thumbnail img {
-  @apply absolute top-0 left-0 h-full w-full object-cover;
-}
-#post .kg-bookmark-title {
-  @apply font-medium text-xl no-underline mb-1;
-}
-#post .kg-bookmark-description {
-  @apply font-light text-sm my-2;
-}
-#post .kg-bookmark-metadata {
-  @apply flex flex-row items-start justify-end h-6 my-4;
-}
-#post .kg-bookmark-icon {
-  @apply h-full mx-2;
-}
-#post .kg-bookmark-author {
-  @apply text-sm text-blue-700 truncate;
-}
-#post .kg-bookmark-publisher {
-  @apply text-sm text-blue-700 truncate;
-}
-footer {
-  @apply py-4 px-4 bg-yuika-blue-700;
-}
-
-
-/* 4. Navbar */
-
-.nav-group {
-  @apply flex flex-col h-full;
-}
-#menushow {
-  @apply cursor-pointer w-16 h-16 relative px-2 py-2 transition duration-300 ease-in-out text-center whitespace-nowrap;
-}
-#menushow:hover {
-  @apply bg-yuika-blue-500
-}
-.nav {
-  background: transparent;
-  @apply flex-col w-full pl-0 my-0;
-  top: 100%;
-}
-.nav li {
-  @apply w-full flex flex-row justify-start items-center my-0 text-white text-base h-12 transition duration-300 ease-in-out;
-}
-.nav li.separator {
-  height: 0;
-  @apply border border-white border-t opacity-75;
-}
-.nav li a {
-  @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
-}
-.nav li a:hover {
-  @apply no-underline;
-}
-.nav li:hover {
-  @apply bg-yuika-blue-500 transition duration-300 ease-in-out;
-}
-@screen md {
-  .nav {
-    @apply pl-16;
-  }
-}
-
-.post-article {
-  @apply pb-32 pt-4;
-}
-
-.content {
-  @apply mx-auto;
-}
-.content-full {
-  @apply px-4;
-}
-@screen sm {
-  .content-full {
-    @apply px-8;
-  }
-}
-@screen md {
-  .content-full {
-    @apply px-16;
-  }
-}
-@screen lg {
-  .content-full {
-    @apply px-32;
-  }
-}
-@screen xl {
-  .content-full {
-    @apply px-64;
-  }
-}
-
-/* 5. Post Card */
-.post-card {
-
-}
-.post-image-box {
-  @apply relative;
-  width: 100%;
-  overflow: hidden;
-}
-@screen md {
-  .post-image-box {
-    width: 35vw;
-    min-width: 300px;
-    max-width: 450px;
-  }
-}
-.post-image-box::after {
-  @apply block;
-  content: '';
-  padding-bottom: 56.25%;
-}
-.post-image {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-.primary-tag-header {
-  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
-}
-.primary-tag-header:hover {
-  @apply transition-all duration-300 ease-in-out underline;
-}
-
-.tag-accent-color {
-  @apply inline-block rounded-full align-text-bottom h-12 w-12;
-}
-.tag-accent-color.small {
-  @apply h-4 w-4;
-}
-.tag-accent-color.medium {
-  @apply h-6 w-6;
-}
-.author-image {
-  @apply inline-block rounded-full align-text-bottom h-12 w-12;
-}
-@screen md {
-  .tag-accent-color {
-    @apply h-16 w-16;
-  }
-  .author-image {
-    @apply h-16 w-16;
-  }
-}
-.author-list {
-  @apply flex flex-row items-center my-2 py-2;
-}
-.author-images {
-  @apply flex flex-row;
-}
-.author-names {
-  @apply flex-grow flex flex-col;
-}
-.author-names a:hover {
-  @apply underline;
-}
-
-/* 6. Post feed */
-.post-feed {
-  @apply grid grid-cols-1 gap-y-4 my-8;
-}
-
-/* 7. Subscribe form */
-#subscribe-form .message-success {
-  @apply hidden;
-}
-#subscribe-form.success .message-success {
-  @apply block;
-}
-#subscribe-form .message-error {
-  @apply hidden;
-}
-#subscribe-form.error .message-error {
-  @apply block;
-}
-
-/* 8. Default transitions */
-@tailwind components;
-
-@tailwind utilities;
-
+@import '../../node_modules/@damillora/shian/dist/app.css';
+@import '../../node_modules/@damillora/shian/dist/ghost.css';

assets/js/dark-mode.js

@@ -0,0 +1,14 @@
+
+$(document).ready(function () {
+    $("#darkMode").click(function () {
+        if (window.document.body.getAttribute("data-theme") != "dark") {
+            window.document.body.setAttribute("data-theme", "dark");
+            $("#darkMode i").text("brightness_high");
+            $("#darkMode p").text("Light Mode");
+        } else {
+            window.document.body.setAttribute("data-theme", "light");
+            $("#darkMode i").text("brightness_low");
+            $("#darkMode p").text("Dark Mode");
+        }
+    })
+});

assets/js/infinite-scroll.js

@@ -21,7 +21,7 @@
     }
 
     // post feed element
-    var feedElement = document.querySelector('.post-feed');
+    var feedElement = document.querySelector('.post-list');
     if (!feedElement) {
         return;
     }

assets/js/nav-collapse.js

@@ -1,57 +1,62 @@
-$("#menushow").click(function(){
-    $(".index-navbar").toggleClass('enabled');
-})
-$(".nav li").click(function(){
-    $(".index-navbar").toggleClass('enabled');
-})
 
-    
+
+
 $(document).ready(function () {
-        
-        var nav = document.querySelector('.index-navbar');
-        var feed = document.querySelector('.content');
+    $("#menushow").click(function () {
+        $(".site-header").toggleClass('enabled');
+        $(".site-header__background").toggleClass('site-header__background--enabled');
+        $(".menu").toggleClass('enabled');
+    })
+    $(".menu__item").click(function () {
+        $(".site-header").toggleClass('enabled');
+        $(".site-header__background").toggleClass('site-header__background--enabled');
+        $(".menu").toggleClass('enabled');
+    })
 
-        var lastScrollY = window.scrollY;
-        var lastWindowHeight = window.innerHeight;
-        var lastDocumentHeight = $(document).height();
-        var ticking = false;
+    var nav = document.querySelector('.site-header');
+    var feed = document.querySelector('main');
 
-        function onScroll() {
-            lastScrollY = window.scrollY;
-            requestTick();
+    var lastScrollY = window.scrollY;
+    var lastWindowHeight = window.innerHeight;
+    var lastDocumentHeight = $(document).height();
+    var ticking = false;
+
+    function onScroll() {
+        lastScrollY = window.scrollY;
+        requestTick();
+    }
+
+    function onResize() {
+        lastWindowHeight = window.innerHeight;
+        lastDocumentHeight = $(document).height();
+        requestTick();
+    }
+
+    function requestTick() {
+        if (!ticking) {
+            requestAnimationFrame(update);
+        }
+        ticking = true;
+    }
+
+    function update() {
+        var trigger = feed.getBoundingClientRect().top + window.scrollY;
+        var progressMax = lastDocumentHeight - lastWindowHeight;
+
+        // show/hide nav
+        if (lastScrollY >= nav.getBoundingClientRect().bottom) {
+            nav.classList.add('detached');
+        } else {
+            nav.classList.remove('detached');
         }
 
-        function onResize() {
-            lastWindowHeight = window.innerHeight;
-            lastDocumentHeight = $(document).height();
-            requestTick();
-        }
+        ticking = false;
+    }
 
-        function requestTick() {
-            if (!ticking) {
-                requestAnimationFrame(update);
-            }
-            ticking = true;
-        }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onResize, false);
 
-        function update() {
-            var trigger = feed.getBoundingClientRect().top + window.scrollY;
-            var progressMax = lastDocumentHeight - lastWindowHeight;
+    update();
 
-            // show/hide nav
-            if (lastScrollY >= nav.getBoundingClientRect().bottom) {
-                nav.classList.add('detached');
-            } else {
-                nav.classList.remove('detached');
-            }
-
-            ticking = false;
-        }
-
-        window.addEventListener('scroll', onScroll, { passive: true });
-        window.addEventListener('resize', onResize, false);
-
-        update();
-
-    });
+});
 

author.hbs

@@ -1,27 +1,33 @@
-{{!< default}}
-{{#author}}
-<div class="relative group index-header">
-  {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="w-full h-full opacity-50 bg-black">
+{{!< default}} {{#author}} {{> header-background background=cover_image}} <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
     </div>
-  </div>
-  <div class="absolute bottom-0 py-6 h-full left-0 right-0">
-   <div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
-    <div>
-        <span class="text-white text-sm">Author</span>
-    </div>
-    <div class="flex flex-row">
-      <div class="flex flex-col items-begin my-2">
-        <div class="flex flex-row items-center mb-2">
-          {{#if profile_image}} 
-          <img class="author-image" src="{{profile_image}}" alt="{{name}}" />
+    <div class="page-header__contents">
+      <div class="post-header container mx-auto main">
+        <p>
+          <span class="post-header__tag-name">Author</span>
+        </p>
+        <div class="post-header__tag-heading">
+          {{#if profile_image}}
+          <style>
+            .author-image {
+              background-image: url('{{profile_image}}');
+              background-size: cover;
+              background-position: center;
+            }
+          </style>
+          <span class="post-header__tag-heading-color author-image"></span>
+          {{else}}
+          <span class="post-header__tag-heading-color"></span>
           {{/if}}
-          <h1 class="text-white text-2xl md:text-4xl ml-4">{{name}}</h1>
+          <h1>
+            {{name}}
+          </h1>
         </div>
-        <div class="text-white">
+        <p>
           {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
-        </div>
-        <div class="text-white">
+        </p>
+        <p>
           {{#if website}}
           <span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
           {{/if}}
@@ -31,21 +37,18 @@
           {{#if facebook}}
           <span class=""><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
           {{/if}}
-         </div>
-       </div>
+        </p>
+        {{#if bio}}
+        <p>{{bio}}</p>
+        {{/if}}
+      </div>
     </div>
-    <div class="text-white">
-      {{#if bio}}
-      <p>{{bio}}</p>
-      {{/if}}
-    </div>
-   </div>
   </div>
-</div>
-{{/author}}
-
-<div class="post-feed content w-full px-2">
-  {{#foreach posts}}
+  {{/author}}
+  <main class="post-list container mx-auto">
+    {{#foreach posts}}
     {{> "post-card"}}
-  {{/foreach}}
-</div>
+    {{/foreach}}
+  </main>
+  {{#contentFor "scripts"}}
+  {{/contentFor}}

default.hbs

@@ -21,9 +21,8 @@
   </head>
   <body class="{{body_class}}">
     {{> "site-header"}}
-    <div class="main-container">
+    <div>
       {{{body}}}
-      {{> footer}}
     </div>
     <script
         src="https://code.jquery.com/jquery-3.4.1.min.js"

error-404.hbs

@@ -1,13 +1,13 @@
-{{!< default}}
-<div class="h-screen relative">
-  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="h-full opacity-50 bg-black">
-    </div>
-  </div>
-  <div class="h-full flex flex-col justify-center items-begin absolute top-0 mx-12">
-    <h1 class="text-white text-6xl">{{statusCode}}</h1>
-    <p class="text-white text-xl">{{message}}</p>
-    <a class="text-white text-base" href="{{@site.url}}">Go to the front page →</a>
-  </div>
-</div>
+{{!< default}} {{> header-background background=@site.cover_image}}
 
+  <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
+    </div>
+    <div class="page-header__contents">
+      <div class="container mx-auto main">
+        <h1>{{statusCode}}</h1>
+        <p>{{message}}</p>
+      </div>
+    </div>
+  </div>

error.hbs

@@ -1,50 +1,38 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <title>{{statusCode}} - {{message}}</title>
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+  <title>{{statusCode}} - {{message}}</title>
+  <meta name="HandheldFriendly" content="True" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
-    <link rel="preload" as="style" href="{{asset "built/styles.css"}}" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
 
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <link rel="stylesheet" type="text/css" href="{{asset "built/styles.css"}}" />
-   
-  </head>
-  <body>
-    <div class="w-full h-full">
-      <div class="h-screen relative">
-        <div class="h-full no-image"></div>
-          <div class="h-full opacity-50 bg-black">
-          </div>
-        </div>
-        <div class="h-full flex flex-col justify-center items-begin absolute top-0 mx-12">
-          <h1 class="text-white text-6xl">{{statusCode}}</h1>
-          <p class="text-white text-xl">{{message}}</p>
-          <div>
-          {{#if errorDetails}}
-            <ul class="error-stack-list">
-            {{#foreach errorDetails}}
-              <li>
-                <em class="error-stack-function">{{{rule}}}</em>
-                {{#foreach failures}}
-                  <p><span class="error-stack-file">Ref: {{ref}}</span></p>
-                  <p><span class="error-stack-file">Message: {{message}}</span></p>
-                {{/foreach}}
-              </li>
-            {{/foreach}}
-            </ul>
-          {{/if}}
-          </div>
-        </div>
-     </div>
+  <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
+  <link rel="preload" as="style" href="{{asset " built/styles.css"}}" />
+
+  <link rel="stylesheet" type="text/css"
+    href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" type="text/css" href="{{asset " built/styles.css"}}" />
+
+</head>
+
+<body>
+  <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
     </div>
-  </body>
-</html>
+    <div class="page-header__contents">
+      <div class="container mx-auto main">
+        <h1>{{statusCode}}</h1>
+        <p>{{message}}</p>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

gulpfile.js

@@ -19,14 +19,6 @@ function hbs() {
 function css () {
 
   return src('assets/css/styles.css')
-    // ...
-    .pipe(postcss([
-      // ...
-      require('tailwindcss'),
-      require('autoprefixer'),
-      // ...
-    ]))
-    // ...
     .pipe(cleancss({compatibility: 'ie8'}))
     .pipe(dest('assets/built/'))
     .pipe(livereload())

index.hbs

@@ -1,32 +1,24 @@
-{{!< default}}
-<div class="relative group index-header">
-  {{> header-background background=@site.cover_image}}
-    <div class="w-full h-full opacity-50 bg-black">
-    </div>
-  </div>
-  <div class="absolute bottom-0 py-4 left-0 right-0">
-    <div class="container mx-auto content-full flex flex-col py-4">
-      {{#if @site.logo}}
-      <div class="w-24 h-24 py-4">
-        <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
-      </div>
-      {{/if}}
-      <div class="block flex flex-col pl-4 flex-grow">
-        <div class="">
-          <h1 class="text-2xl md:text-4xl font-light text-white">{{@site.title}}</h1>
-        </div>
-        <div class="">
-          <p class="text-lg md:text-xl font-light text-white">{{@site.description}}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+{{!< default}} {{> header-background background=@site.cover_image}}
 
-<div class="post-feed content w-full px-2">
-  {{#foreach posts}}
+  <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
+    </div>
+    <div class="page-header__contents">
+      <div class="container mx-auto main">
+        {{#if @site.logo}}
+        <img src="{{img_url @site.logo size=" l"}}" alt="{{@site.title}}" class="page-header__icon">
+        {{/if}}
+        <h1>{{@site.title}}</h1>
+        <p>{{@site.description}}</p>
+      </div>
+    </div>
+  </div>
+
+  <main class="post-list container mx-auto">
+    {{#foreach posts}}
     {{> "post-card"}}
-  {{/foreach}}
-</div>
-{{#contentFor "scripts"}}
-{{/contentFor}}
+    {{/foreach}}
+  </main>
+  {{#contentFor "scripts"}}
+  {{/contentFor}}

package.json

@@ -1,63 +1,70 @@
 {
-    "name": "yuika",
-    "description": "nanao.moe's blog theme",
-    "version": "2.9.2",
-    "engines": {
-        "ghost-api": "v3"
-    },
-    "license": "MIT",
-    "author": {
-        "email": "developer@damillora.com"
-    },
-    "scripts": {
-        "dev": "gulp dev",
-        "zip": "gulp zip"
-    },
-    "config": {
-        "posts_per_page": 12,
-        "image_sizes": {
-            "xxs": {
-                "width": 30
-            },
-            "xs": {
-                "width": 100
-            },
-            "s": {
-                "width": 300
-            },
-            "m": {
-                "width": 600
-            },
-            "l": {
-                "width": 1000
-            },
-            "xl": {
-                "width": 1600
-            },
-            "xxl": {
-                "width": 1920
-            }
-        }
-    },
-    "keywords": [
-        "ghost-theme",
-        "yuika"
-    ],
-    "dependencies": {
-        "@damillora/shian": "^0.1.2",
-        "autoprefixer": "^10.2.1",
-        "gulp": "^4.0.2",
-        "gulp-clean-css": "^4.2.0",
-        "gulp-concat": "^2.6.1",
-        "gulp-livereload": "^4.0.2",
-        "gulp-postcss": "^9.0.0",
-        "gulp-uglify": "^3.0.2",
-        "gulp-zip": "^5.0.1",
-        "postcss": "^8.2.3",
-        "tailwindcss": "^2.0.2",
-        "typeface-exo-2": "^0.0.72"
-    },
-    "devDependencies": {
-        "@fullhuman/postcss-purgecss": "^1.3.0"
+  "name": "yuika",
+  "description": "nanao.moe's blog theme",
+  "version": "3.0.4",
+  "engines": {
+    "ghost-api": "v3"
+  },
+  "license": "MIT",
+  "author": {
+    "email": "developer@damillora.com"
+  },
+  "scripts": {
+    "dev": "gulp dev",
+    "build": "gulp build",
+    "zip": "gulp zip",
+    "semantic-release": "semantic-release"
+  },
+  "config": {
+    "posts_per_page": 12,
+    "image_sizes": {
+      "xxs": {
+        "width": 30
+      },
+      "xs": {
+        "width": 100
+      },
+      "s": {
+        "width": 300
+      },
+      "m": {
+        "width": 600
+      },
+      "l": {
+        "width": 1000
+      },
+      "xl": {
+        "width": 1600
+      },
+      "xxl": {
+        "width": 1920
+      }
     }
+  },
+  "keywords": [
+    "ghost-theme",
+    "yuika"
+  ],
+  "dependencies": {
+    "@damillora/shian": "^1.0.2",
+    "autoprefixer": "^10.2.1",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.2.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-livereload": "^4.0.2",
+    "gulp-postcss": "^9.0.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-zip": "^5.0.1",
+    "postcss": "^8.2.3",
+    "typeface-exo-2": "^0.0.72"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Damillora/Yuika.git"
+  },
+  "devDependencies": {
+    "@semantic-release/exec": "^5.0.0",
+    "semantic-release": "^17.4.2"
+  },
+  "private": true
 }

page.hbs

@@ -1,36 +1,29 @@
-{{!< default}}
+{{!< default}} {{#post}} <div class="relative group index-header">
 
-{{#post}}
-<div class="relative group index-header">
-  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="w-full h-full opacity-50 bg-black">
+  {{> header-background background=feature_image}}
+  <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
+    </div>
+    <div class="page-header__contents">
+      <div class="post-header container mx-auto main">
+        <h1>{{title}}</h1>
+      </div>
     </div>
   </div>
-  <div class="absolute bottom-0 py-6 left-0 right-0">
-   <div class="container mx-auto content-full">
-    <div>
-      <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
-    </div>
-   </div>
-  </div>
-</div>
 
-<article class="post-article">
-<main class="content container" id="post">
-  <div class="content-full">
+  <main id="post" class="container mx-auto main">
     {{content}}
-  </div>
-</main>
-{{/post}}
-</article>
+  </main>
 
-{{#contentFor "scripts"}}
-<script>
-$(document).ready(function () {
-        // FitVids - start
-        var $postContent = $("#post");
-        $postContent.fitVids();
-        // FitVids - end
-});
-</script>
-{{/contentFor}}
+  {{/post}}
+  {{#contentFor "scripts"}}
+  <script>
+    $(document).ready(function () {
+      // FitVids - start
+      var $postContent = $("#post");
+      $postContent.fitVids();
+      // FitVids - end
+    });
+  </script>
+  {{/contentFor}}

partials/header-background.hbs

@@ -8,40 +8,33 @@ be a background image using CSS, we end up with a handful of inline styles.
 
 If the template in question has a background image, then we render responsive image styles
 for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
-with a `no-image` class so we can style it accordingly.
---}}
+        with a `no-image` class so we can style it accordingly.
+        --}}
 
-{{#if background}}
+        {{#if background}}
 
-<style type="text/css">
-    .responsive-header-img {
-        background-image: url({{img_url background size='xl'}});
-    }
+        <style type="text/css">
+            .responsive-header-img {
+                background-image: url({{img_url background size='xl'}});
+                background-size: cover;
+            }
 
-    @media(max-width: 1000px) {
-        .responsive-header-img {
-            background-image: url({{img_url background size='l'}});
-            background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
-                url({{img_url background size='xl'}}) 2x);
-            background-image: image-set(url({{img_url background size='l'}}) 1x,
-                url({{img_url background size='xl'}}) 2x);
-        }
-    }
+            @media(max-width: 1000px) {
+                .responsive-header-img {
+                    background-image: url({{img_url background size='l'}});
+                    background-position: center;
+                }
+            }
 
-    @media(max-width: 600px) {
-        .responsive-header-img {
-            background-image: url({{img_url background size='m'}});
-            background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
-                url({{img_url background size='l'}}) 2x);
-            background-image: image-set(url({{img_url background size='m'}}) 1x,
-                url({{img_url background size='l'}}) 2x);
-        }
-    }
-</style>
-<div class="h-full responsive-header-img bg-cover bg-center bg-yuika-blue-500">
+            @media(max-width: 600px) {
+                .responsive-header-img {
+                    background-image: url({{img_url background size='m'}});
+                    background-position: center;
+                }
+            }
+        </style>
 
-{{else}}
+        {{else}}
 
-<div class="h-full no-image">
 
-{{/if}}
+        {{/if}}

partials/navigation.hbs

@@ -0,0 +1,14 @@
+<div class="menu">
+    {{#foreach navigation}}
+    <div class="menu__item">
+        <a href={{url absolute="true" }}>
+            <p class="menu__text">{{label}}</p>
+        </a>
+    </div>
+    {{/foreach}}
+
+    <div class="menu__item" id="darkMode">
+        <i class="material-icons md-24">brightness_low</i>
+        <p class="menu__text">Dark Mode</p>
+    </div>
+</div>

partials/post-background.hbs

@@ -11,11 +11,11 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
 with a `no-image` class so we can style it accordingly.
 --}}
 <div>
-    <div class="post-image-box">
+    <div class="post-card__image">
         {{#if feature_image}}
-        <img class="post-image" src="{{img_url feature_image size='m'}}">
+        <img src="{{img_url feature_image size='m'}}">
         {{else}}
-        <img class="post-image" src="{{img_url @site.cover_image size='m'}}">
+        <img src="{{img_url @site.cover_image size='m'}}">
         {{/if}}
     </div>
 </div>

partials/post-card.hbs

@@ -1,68 +1,64 @@
-<div class="post-card">
-  <article class="relative md:flex md:flex-row w-full h-full transition duration-500 ease-in-out py-4 px-4">
-    <a href="{{url}}">
-      {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
-    </a>
-    <div class="md:pl-4">
-      <div class="pt-4 md:pt-0 flex flex-row">
+<article class="post-card">
+  <a href="{{url}}">
+    {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
+  </a>
+  <div class="post-card__info">
+    <div class="post-card__tag-row">
       {{#if primary_tag}}
       {{#primary_tag}}
-      <div class="pr-2">
-        <a href="{{url}}">
-          {{#if accent_color}} 
-          <span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
-          {{else}}
-          <span class="tag-accent-color small"></span>
-          {{/if}}
-          <span class="text-sm hover:underline">{{name}}</span>
-        </a>
-      </div>
+      <a href="{{url}}">
+        {{#if accent_color}}
+        <span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
+        {{else}}
+        <span class="post-card__tag-color"></span>
+        {{/if}}
+        <span class="post-card__tag-name">{{name}}</span>
+      </a>
       {{/primary_tag}}
       {{/if}}
       {{#has visibility="paid"}}
-      <div class="pr-2">
-        <a href="/subscribe">
-          <span class="text-sm text-red-700 hover:underline">Paid content</span>
-        </a>
-      </div>
+      <a href="/subscribe">
+        <span class="post-card__paywall">Paid content</span>
+      </a>
       {{/has}}
       {{#has visibility="members"}}
-      <div class="pr-2">
-        <a href="/subscribe">
-          <span class="text-sm text-yuika-blue-700 hover:underline">Member-exclusive</span>
-        </a>
-      </div>
+      <a href="/subscribe">
+        <span class="post-card__paywall">Member-exclusive</span>
+      </a>
       {{/has}}
-      </div>
-      <div class="mt-0 text-yuika-blue-700 hover:underline transition duration-500 ease-in-out">
-        <a href="{{url}}"><h1 class="text-xl md:text-2xl font-light">{{title}}</h1></a>
-      </div>
-      <div class="mt-0 text-xs">
-            <p><span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
-      </div>
-      {{#if authors}}
-      <div class="author-list text-xs ">
-        <div class="author-images">
-          {{#foreach authors}}
-            {{#if profile_image}}
-              <div class="h-8 ml-1 mr-3">
-                <a href="{{url}}">
-                  <img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
-                </a>
-              </div>
-            {{/if}}
-          {{/foreach}}
+    </div>
+    <a href="{{url}}">
+      <h1 class="post-card__title">{{title}}</h1>
+    </a>
+    <p class="post-card__time">
+      <span>
+        <time datetime="{{date format=" YYYY-MM-DD"}}">
+          {{date format="D MMM YYYY"}}
+        </time>
+        <span class="bull">&bull;</span>
+        {{reading_time}}
+      </span>
+    </p>
+    {{#if authors}}
+    <div class="post-card__author-list">
+      <div class="post-card__author-images">
+        {{#foreach authors}}
+        {{#if profile_image}}
+        <div class="post-card__author-image">
+          <a href="{{url}}">
+            <img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
+          </a>
         </div>
-        <div class="author-names">
-          <div>
-            <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
-          </div>
-        </div> 
+        {{/if}}
+        {{/foreach}}
       </div>
-      {{/if}}
-      <div class="block mt-2 mb-4 text-sm excerpt overflow-hidden">
-        <p>{{excerpt words="30"}}</p>
+      <div class="post-card__author-names">
+        <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
       </div>
     </div>
-  </article>
-</div>
+    {{/if}}
+    <div class="post-card__excerpt">
+      <p>{{excerpt words="30"}}</p>
+    </div>
+  </div>
+</article>

partials/primary-tag.hbs

@@ -1,28 +1,24 @@
-{{#if primary_tag}}
-{{#primary_tag}}
-<div class="pr-2">
+<div class="post-header__tag-row">
+  {{#if primary_tag}}
+  {{#primary_tag}}
   <a href="{{url}}">
     {{#if accent_color}}
-    <span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
+    <span class="post-header__tag-color" style="background-color: {{accent_color}};"></span>
     {{else}}
-    <span class="tag-accent-color small"></span>{{name}}
+    <span class="post-header__tag-color"></span>
     {{/if}}
-    <span class="text-base text-white hover:underline">{{name}}</span>
+    <span class="post-header__tag-name">{{name}}</span>
   </a>
-</div>
-{{/primary_tag}}
-{{/if}}
-{{#has visibility="paid"}}
-<div class="pr-2">
+  {{/primary_tag}}
+  {{/if}}
+  {{#has visibility="paid"}}
   <a href="/subscribe">
-    <span class="text-sm text-red-200 hover:underline">Paid content</span>
+    <span class="post-header__paywall">Paid content</span>
   </a>
-</div>
-{{/has}}
-{{#has visibility="members"}}
-<div class="pr-2">
+  {{/has}}
+  {{#has visibility="members"}}
   <a href="/subscribe">
-    <span class="text-sm text-yuika-blue-200 hover:underline">Member-exclusive</span>
+    <span class="post-header__paywall">Member-exclusive</span>
   </a>
-</div>
-{{/has}}
+  {{/has}}
+</div>

partials/site-background.hbs

@@ -8,42 +8,32 @@ be a background image using CSS, we end up with a handful of inline styles.
 
 If the template in question has a background image, then we render responsive image styles
 for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
-with a `no-image` class so we can style it accordingly.
---}}
+        with a `no-image` class so we can style it accordingly.
+        --}}
 
-{{#if @site.cover_image}}
+        {{#if @site.cover_image}}
 
-<style type="text/css">
-    .responsive-site-header-img {
-        background-image: url({{img_url @site.cover_image size='xl'}});
-    }
+        <style type="text/css">
+            .responsive-site-header-img {
+                background-image: url({{img_url @site.cover_image size='xl'}});
+                background-size: cover;
+            }
 
-    @media(max-width: 1000px) {
-        .responsive-site-header-img {
-            background-image: url({{img_url @site.cover_image size='l'}});
-            background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x,
-                url({{img_url @site.cover_image size='xl'}}) 2x);
-            background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x,
-                url({{img_url @site.cover_image size='xl'}}) 2x);
-            background-position: right 25% top 20%;
-        }
-    }
+            @media(max-width: 1000px) {
+                .responsive-site-header-img {
+                    background-image: url({{img_url @site.cover_image size='l'}});
+                    background-position: right 25% top 20%;
+                }
+            }
 
-    @media(max-width: 600px) {
-        .responsive-site-header-img {
-            background-image: url({{img_url @site.cover_image size='m'}});
-            background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x,
-                url({{img_url @site.cover_image size='l'}}) 2x);
-            background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x,
-                url({{img_url @site.cover_image size='l'}}) 2x);
-            background-position: right 25% top 20%;
-        }
-    }
-</style>
-<div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
+            @media(max-width: 600px) {
+                .responsive-site-header-img {
+                    background-image: url({{img_url @site.cover_image size='m'}});
+                    background-position: right 25% top 20%;
+                }
+            }
+        </style>
 
-{{else}}
+        {{else}}
 
-<div class="h-full w-full no-image">
-
-{{/if}}
+        {{/if}}

partials/site-header.hbs

@@ -1,22 +1,20 @@
-  <div class="index-navbar">
-    <div class="site-background">
-      {{> site-background }}
-      </div>
-    </div>
-    <header class="flex flex-col w-full relative py-0">
-      <div class="site-title">
-        <div id="menushow" class="py-2">
-          <span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span>
+{{> "site-background"}}
+<div class="site-header">
+  <div class="site-header__background responsive-site-header-img">
+  </div>
+  <div class="site-header__inner">
+    <header class="header">
+      <div class="header__top">
+        <div class="header__nav-button">
+          <span class="header__icon material-icons" alt="menu" id="menushow">menu</span>
         </div>
-        <div class="site-head">
-          <a href="{{@site.url}}" class="block flex flex-col flex-grow site-title">
-            <h1 class="text-lg text-white">{{@site.title}}</h1>
+        <div class="header__title">
+          <a href="/">
+            <h1>{{@site.title}}</h1>
           </a>
         </div>
       </div>
-      <div class="nav-group">
-        {{navigation}}
-      </div>
+      {{navigation}}
     </header>
   </div>
-</div>
+</div>

post.hbs

@@ -1,141 +1,111 @@
 {{!< default}} {{#post}} <div class="relative group index-header">
-  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background
-  image--}}
-  <div class="h-full opacity-50 bg-black">
-  </div>
-  </div>
-  <div class="absolute bottom-0 py-4 left-0 right-0">
-    <div class="container mx-auto content-full">
-      <div class="flex">
+
+  {{> header-background background=feature_image}}
+  <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
+    </div>
+    <div class="page-header__contents">
+      <div class="post-header container mx-auto main">
         {{> primary-tag}}
-      </div>
-      <div>
-        <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
-      </div>
-      <div class="mb-4">
-        <p><span class="text-white text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
-              YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
-      </div>
-      <div class="author-list text-base text-white">
-        <div class="author-images">
-          {{#foreach authors}}
-          {{#if profile_image}}
-          <div class="h-8 ml-1 mr-3">
-            <a href="{{url}}">
-              <img class="h-full rounded-full" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
-            </a>
+        <h1>{{title}}</h1>
+        <p class="post-header__time">
+          <span>
+            <time datetime="{{date format=" YYYY-MM-DD"}}">
+              {{date format="D MMM YYYY"}}
+            </time>
+            <span class="bull">&bull;</span>
+            {{reading_time}}
+          </span>
+        </p>
+        {{#if authors}}
+        <div class="post-header__author-list">
+          <div class="post-header__author-images">
+            {{#foreach authors}}
+            {{#if profile_image}}
+            <div class="post-header__author-image">
+              <a href="{{url}}">
+                <img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
+              </a>
+            </div>
+            {{/if}}
+            {{/foreach}}
           </div>
-          {{/if}}
-          {{/foreach}}
-        </div>
-        <div class="author-names">
-          <div>
+          <div class="post-header__author-names">
             <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-  </div>
-
-  <article class="post-article">
-    <main class="content container" id="post">
-      <div class="content-full">
-        {{#if access}}
-        {{content}}
-        {{else}}
-        <div class="w-full py-8 text-center bg-yuika-blue-700 text-white md:px-8">
-          <h1>Access level insufficient</h1>
-          {{#has visibility="paid"}}
-          <h2>Access level: Autonomous System</h2>
-          <p>By subscribing as an Autonomous System, you can unlock access to the contents of this post, get additional benefits and support me at the same time!</p>
-          <div class="flex justify-center">
-            <a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
-              href="/subscribe">
-              Become a member now
-            </a>
-          </div>
-          {{/has}}
-          {{#has visibility="members"}}
-          <h2>Access level: Subscriber</h2>
-          <p>Subscribing gives you access to the contents of this post, and get notified on subsequent posts!</p>
-          <div class="flex justify-center">
-            <a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
-              href="/subscribe">
-              Subscribe now 
-            </a>
-          </div>
-          {{/has}}
-        </div>
         {{/if}}
       </div>
-    </main>
-    <div class="my-4 w-full content-full">
-      <div class="flex flex-col md:flex-row justify-between">
-        {{#prev_post}}
-        <a href="{{url}}"
-          class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
-          <span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
-          <div class="flex flex-col items-start md:items-end ">
-            <p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
-            <p>{{title}}</p>
-          </div>
-        </a>
-        {{/prev_post}}
-        <div class="flex flex-grow"></div>
-        {{#next_post}}
-        <a href="{{url}}"
-          class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
-          <div class="flex flex-col items-end md:items-start">
-            <p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
-            <p>{{title}}</p>
-          </div>
-          <span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
-        </a>
-        {{/next_post}}
-      </div>
     </div>
-    <div class="my-4 w-full content-full">
-      <div class="my-4" id="comments">
-        {{#is "preview"}}
-        <p>Comments are disabled for post previews</p>
-        {{else}}
-        {{!-- Comments --}}
+  </div>
 
-        {{/is}}
-      </div>
-    </div>
-    <div class="mx-auto px-4 my-4 w-full">
-      {{#if primary_tag}}
-      {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
-      {{#if related_posts}}
-      {{#../primary_tag}}
-      <div class="px-3 w-full">
-        <p class="text-2xl">
-          More in
-          <a href="{{url}}">
-            {{#if accent_color}}
-            <span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
-            {{else}}
-            <span class="tag-accent-color medium"></span>{{name}}
-            {{/if}}
-            <span class="hover:underline">{{name}}</span>
-          </a>
-        </p>
-      </div>
-      {{/../primary_tag}}
-      <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
-        {{#foreach related_posts}}
-        {{> post-card}}
-        {{/foreach}}
-      </div>
-      {{/if}}
-      {{/get}}
-      {{/if}}
-    </div>
-    {{/post}}
-  </article>
+  <main id="post" class="container mx-auto main">
+    {{content}}
+  </main>
 
+  <div class="container mx-auto main">
+    <div class="post-navigator">
+      {{#prev_post}}
+      <a href="{{url}}" class="post-navigator__nav post-navigator__nav--previous-post">
+        <span class="material-icons post-navigator__icon">arrow_back</span>
+        <div class="post-navigator__nav-content post-navigator__nav-content--previous-post">
+          <p class="post-navigator__nav-title">Previous post</p>
+          <p>{{title}}</p>
+        </div>
+      </a>
+      {{/prev_post}}
+      <div class="flex flex-grow"></div>
+      {{#next_post}}
+      <a href="{{url}}" class="post-navigator__nav post-navigator__nav--next-post">
+        <div class="post-navigator__nav-content post-navigator__nav-content--next-post">
+          <p class="post-navigator__nav-title">Next post</p>
+          <p>{{title}}</p>
+        </div>
+        <span class="material-icons post-navigator__icon">arrow_forward</span>
+      </a>
+      {{/next_post}}
+    </div>
+  </div>
+  <div id="comments" class="container mx-auto main">
+    {{#is "preview"}}
+    <p>Comments are disabled for post previews</p>
+    {{else}}
+    {{!-- Comments --}}
+
+    {{/is}}
+  </div>
+  <div class="container mx-auto">
+    {{#if primary_tag}}
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+    {{#if related_posts}}
+    {{#../primary_tag}}
+    <div class="px-3 w-full">
+      <p class="text-2xl">
+        More in
+        <a href="{{url}}">
+          {{#if accent_color}}
+          <span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
+          {{else}}
+          <span class="tag-accent-color medium"></span>{{name}}
+          {{/if}}
+          <span class="hover:underline">{{name}}</span>
+        </a>
+      </p>
+    </div>
+    {{/../primary_tag}}
+    <div class="post-list">
+      {{#foreach related_posts}}
+      {{> post-card}}
+      {{/foreach}}
+    </div>
+    {{/if}}
+    {{/get}}
+    {{/if}}
+  </div>
+
+
+  {{/post}}
   {{#contentFor "scripts"}}
   <script>
     $(document).ready(function () {

tag.hbs

@@ -1,41 +1,34 @@
-{{!< default}}
-
-{{#tag}}
-<div class="relative group index-header">
-  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="w-full h-full opacity-50 bg-black">
+{{!< default}} {{#tag}} {{> header-background background=feature_image}}
+  <div class="page-header">
+    <div class="page-header__background responsive-header-img">
+      <div class="page-header__overlay"></div>
+    </div>
+    <div class="page-header__contents">
+      <div class="post-header container mx-auto main">
+        <p>
+          <span class="post-header__tag-name">Tag</span>
+        </p>
+        <div class="post-header__tag-heading">
+          {{#if accent_color}}
+          <span class="post-header__tag-heading-color" style="background-color: {{accent_color}};"></span>
+          {{else}}
+          <span class="post-header__tag-heading-color"></span>
+          {{/if}}
+          <h1>
+            {{name}}
+          </h1>
+        </div>
+        <p>{{description}}</p>
+      </div>
     </div>
   </div>
-  <div class="absolute bottom-0 py-6 h-full left-0 right-0">
-   <div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
-    <div>
-      <span class="text-white text-sm">Tag</span>
-    </div>
-    <div class="flex flex-row items-center py-2">
-      {{#if accent_color}}
-        <span class="tag-accent-color" style="background-color: {{accent_color}};"></span>
-      {{else}}
-        <span class="tag-accent-color bg-blue-700"></span>
-      {{/if}}
-      <h1 class="text-white text-2xl md:text-4xl ml-4">
-        {{name}}
-      </h1>
-    </div>
-    <div class="text-white text-sm">
-      {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
-    </div>
-    {{#if description}}
-    <div class="text-white pt-4">
-      <p>{{description}}</p>
-    </div>
-    {{/if}}
-   </div>
-  </div>
-</div>
-{{/tag}}
+  {{/tag}}
 
-<div class="post-feed content w-full px-2">
-  {{#foreach posts}}
+  <main class="post-list container mx-auto">
+    {{#foreach posts}}
     {{> "post-card"}}
-  {{/foreach}}
-</div>
+    {{/foreach}}
+  </main>
+
+  {{#contentFor "scripts"}}
+  {{/contentFor}}