Remove member pages

- Upgrade Tailwind to 1.4, integrating CSS grid and transition utilities
- Upgrade other dependencies
- Change design

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Ryo Kenrie Wongso
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,20 +1,21 @@
 # Yuika, nanao.moe's blog theme
 
-This is the theme for [blog.nanao.moe](blog.nanao.moe), which runs on Ghost.
+This is the theme for [blog.nanao.moe](https://blog.nanao.moe), which runs on Ghost.
 
 This theme is under heavy development as tweaks are made.
 
 ## Screenshots
+![index-1](https://i.imgur.com/SoN1Ain.png)
 
-![index](https://i.imgur.com/VX5GDDL.png)
+![index-2](https://i.imgur.com/xi9WXXZ.png)
 
-![post-1](https://i.imgur.com/ewJ3d8q.png)
+![post-1](https://i.imgur.com/UR6BoDQ.png)
 
-![post-2](https://i.imgur.com/5qYy5Zb.png)
+![post-2](https://i.imgur.com/E7w0P6b.png)
 
-![tag](https://i.imgur.com/r5mlo9U.png)
+![tag](https://i.imgur.com/9LyJfN2.png)
 
-![author](https://i.imgur.com/SuTXYYZ.png)
+![author](https://i.imgur.com/czw5ucg.png)
 
 ## Credits
 

assets/css/styles.css

@@ -1,6 +1,8 @@
 
 @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
 
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
 @tailwind base;
 
 /* 1. Base Styling */
@@ -8,28 +10,75 @@ html {
   @apply font-sans;
 }
 header {
-  @apply py-4 px-4;
-}
-/* 2. Site Header */
-.index-navbar {
-  z-index: 10;
-  @apply transition-bg;
-}
-.index-navbar header {
-  background-color: transparent;
-}
-.index-header {
-  min-height: 300px;
-  height: 50vh;
+  @apply py-4;
 }
 
+/* 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 py-2 items-center transition duration-300 ease-in-out pl-4 h-16;
+}
+.site-head: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-3;
+  @apply my-4;
 }
 #post h1 {
   @apply my-4 text-4xl font-light;
@@ -52,6 +101,9 @@ header {
 #post a {
   @apply text-yuika-blue-700;
 }
+#post a:hover {
+  @apply underline;
+}
 #post ul {
   @apply list-disc;
 }
@@ -59,16 +111,16 @@ header {
   @apply list-decimal;
 }
 #post code {
-  @apply bg-gray-200 text-yuika-blue-700;
+  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
 }
 #post blockquote {
-  @apply border-l-4 border-yuika-blue-700 pl-8;
+  @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 border border-yuika-blue-500;
+  @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-4 mx-0;
+  @apply py-4 flex flex-col items-center object-contain my-8 mx-0;
 }
 #post .kg-card .kg-image {
   @apply w-full;
@@ -100,13 +152,30 @@ header {
 }
 
 #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 {
@@ -114,19 +183,20 @@ header {
 }
 
 #post .kg-bookmark-container {
-  @apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
+  @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-bg;
+  @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 {
-  @apply w-1/3 h-full;
+  min-width: 33.3333%;
+  @apply max-h-full relative;
 }
 #post .kg-bookmark-thumbnail img {
-  @apply w-full h-full object-cover;
+  @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;
@@ -153,36 +223,41 @@ footer {
 
 /* 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 {
-  @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700 left-0 right-0;
+  background: transparent;
+  @apply flex-col w-full pl-0 my-0;
   top: 100%;
 }
 .nav li {
-  @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4 transition-bg;
+  @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;
 }
 .nav li a {
-  @apply align-middle w-full table-cell;
-  line-height: 2rem;
+  @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
 }
 .nav li:hover {
-  @apply bg-yuika-blue-700 transition-bg;
+  @apply bg-yuika-blue-500 transition duration-300 ease-in-out;
 }
-
 @screen md {
   .nav {
-    @apply block static w-auto flex-row h-12 bg-transparent;
+    @apply pl-16;
   }
-  .nav li {
-    @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
-  }
-}
-
-.nav-fixed {
-  @apply bg-yuika-blue-700;
 }
 
 .post-article {
-  @apply pb-32;
+  @apply pb-32 pt-4;
 }
 
 .content {
@@ -213,22 +288,93 @@ footer {
 }
 
 /* 5. Post Card */
-.post-background {
-  height: 18rem;
+.post-card {
+
 }
-.post-card .excerpt {
-  max-height: 5.5rem;
+.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;
 }
 
-.primary-tag-header {
-  @apply bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm;
+.tag-accent-color {
+  @apply inline-block rounded-full align-text-bottom h-12 w-12;
 }
-.tag-header {
-  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
+.tag-accent-color.small {
+  @apply h-4 w-4;
 }
-.author-header {
-  @apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
+.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;

assets/js/nav-collapse.js

@@ -1,4 +1,12 @@
-    $(document).ready(function () {
+$("#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');
@@ -32,9 +40,9 @@
 
             // show/hide nav
             if (lastScrollY >= nav.getBoundingClientRect().bottom) {
-                nav.classList.add('nav-fixed');
+                nav.classList.add('detached');
             } else {
-                nav.classList.remove('nav-fixed');
+                nav.classList.remove('detached');
             }
 
             ticking = false;

assets/js/nav-menu.js

@@ -1,17 +0,0 @@
-
-$("#menushow").click(function() {
-  if($('.nav').css('display') == 'none') {
-    $(".nav").show();
-  } else {
-    $(".nav").hide();
-  }
-});
-
-$(window).resize(function() {
-  var wi = $(window).width();
-  if(wi >= 768) {
-    $(".nav").show();
-  } else {
-    $(".nav").hide();
-  }
-});

author.hbs

@@ -1,6 +1,5 @@
 {{!< default}}
 {{#author}}
-{{> "site-header"}}
 <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">
@@ -8,20 +7,16 @@
   </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 class="my-2">
-        <span class="author-header">Author</span>
+    <div>
+        <span class="text-white text-sm">Author</span>
     </div>
     <div class="flex flex-row">
-      <div class="flex flex-col items-begin mr-4">
-        {{#if profile_image}}
-        <div class="my-2">
-          <img class="rounded-full h-16" src="{{profile_image}}" alt="{{name}}" />
-        </div>
-        {{/if}}
-      </div>
       <div class="flex flex-col items-begin my-2">
-        <div>
-          <h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>
+        <div class="flex flex-row items-center mb-2">
+          {{#if profile_image}} 
+          <img class="author-image" src="{{profile_image}}" alt="{{name}}" />
+          {{/if}}
+          <h1 class="text-white text-2xl md:text-4xl ml-4">{{name}}</h1>
         </div>
         <div class="text-white">
           {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
@@ -49,7 +44,7 @@
 </div>
 {{/author}}
 
-<div class="flex flex-wrap justify-start post-feed content w-full px-2">
+<div class="post-feed content w-full px-2">
   {{#foreach posts}}
     {{> "post-card"}}
   {{/foreach}}

default.hbs

@@ -8,38 +8,23 @@
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="stylesheet" type="text/css" href="{{asset "built/styles.css"}}" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
 
+    <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"}}" />
+   
     {{ghost_head}}    
   </head>
   <body class="{{body_class}}">
-    <div class="w-full min-h-screen">
+    {{> "site-header"}}
+    <div class="main-container">
       {{{body}}}
+      {{> footer}}
     </div>
-    <footer class="md:h-16">
-      <div class="flex flex-col md:flex-row justify-end md:items-center h-full mb-4 md:mb-0">
-        <div class="text-white md:flex-grow text-sm mx py-4">
-          <p><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</p>
-        </div>
-        <div class="flex flex-col md:flex-row text-white text-sm items-end text-right">
-          <div class="px-4 py-4">
-            <a href="{{@site.url}}">Latest Posts</a>
-          </div>
-          <div class="px-4 py-4">
-            {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
-          </div>
-          <div class="px-4 py-4">
-            {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
-          </div>
-          <div class="px-4 py-4">
-            Powered by <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
-          </div>
-          <div class="px-4 py-4">
-            <a href="https://github.com/Damillora/Yuika">Yuika</a> Theme by <a href="https://nanao.moe" target="_blank" rel="noopener">Damillora</a>
-          </div>
-        </div>
-      </div>
-    </footer>
     <script
         src="https://code.jquery.com/jquery-3.4.1.min.js"
         integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

error-404.hbs

@@ -1,5 +1,4 @@
 {{!< default}}
-{{> "site-header"}}
 <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">

error.hbs

@@ -0,0 +1,50 @@
+<!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" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+
+    <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="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>
+    </div>
+  </body>
+</html>

gulpfile.js

@@ -7,20 +7,6 @@ const concat = require('gulp-concat');
 const uglify = require('gulp-uglify');
 const cleancss = require('gulp-clean-css');
 
-const purgecss = require('@fullhuman/postcss-purgecss')({
-
-  // Specify the paths to all of the template files in your project 
-  content: [
-    './**/*.hbs',
-    './assets/**/*.js',
-    './assets/css/styles.css', // This file defines required styles for the Ghost editor
-    // etc.
-  ],
-
-  // Include any special characters you're using in this regular expression
-  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
-})
-
 function serve(done) {
     livereload.listen();
     done();
@@ -38,7 +24,6 @@ function css () {
       // ...
       require('tailwindcss'),
       require('autoprefixer'),
-      ...process.env.NODE_ENV === 'production' ? [purgecss] : []
       // ...
     ]))
     // ...

index.hbs

@@ -1,12 +1,29 @@
 {{!< default}}
-{{> "site-header"}}
 <div class="relative group index-header">
-  {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+  {{> 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>
-<div class="flex flex-wrap justify-start post-feed content w-full px-2">
+
+<div class="post-feed content w-full px-2">
   {{#foreach posts}}
     {{> "post-card"}}
   {{/foreach}}

package.json

@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "0.6.0",
+    "version": "2.8.0",
     "engines": {
         "ghost-api": "v3"
     },
@@ -9,8 +9,12 @@
     "author": {
         "email": "developer@damillora.com"
     },
+    "scripts": {
+        "dev": "gulp dev",
+        "zip": "gulp zip"
+    },
     "config": {
-        "posts_per_page": 10,
+        "posts_per_page": 12,
         "image_sizes": {
             "xxs": {
                 "width": 30
@@ -28,7 +32,10 @@
                 "width": 1000
             },
             "xl": {
-                "width": 2000
+                "width": 1600
+            },
+            "xxl": {
+                "width": 1920
             }
         }
     },
@@ -37,15 +44,16 @@
         "yuika"
     ],
     "dependencies": {
+        "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": "^8.0.0",
+        "gulp-postcss": "^9.0.0",
         "gulp-uglify": "^3.0.2",
         "gulp-zip": "^5.0.1",
-        "tailwindcss": "^1.1.3",
-        "tailwindcss-transitions": "^2.1.0",
+        "postcss": "^8.2.3",
+        "tailwindcss": "^2.0.2",
         "typeface-exo-2": "^0.0.72"
     },
     "devDependencies": {

page.hbs

@@ -1,7 +1,6 @@
 {{!< default}}
 
 {{#post}}
-{{> "site-header"}}
 <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">

partials/footer.hbs

@@ -0,0 +1,25 @@
+
+      <footer class="md:h-16">
+        <div class="flex flex-col md:flex-row justify-end md:items-center h-full mb-4 md:mb-0">
+          <div class="text-white md:flex-grow text-sm mx py-4">
+            <p><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</p>
+          </div>
+          <div class="flex flex-col md:flex-row text-white text-sm items-end text-right">
+            <div class="px-4 py-4">
+              <a href="{{@site.url}}">Latest Posts</a>
+            </div>
+            <div class="px-4 py-4">
+              {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
+            </div>
+            <div class="px-4 py-4">
+              {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
+            </div>
+            <div class="px-4 py-4">
+              Powered by <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+            </div>
+            <div class="px-4 py-4">
+              <a href="https://github.com/Damillora/Yuika">Yuika</a> Theme by <a href="https://nanao.moe" target="_blank" rel="noopener">Damillora</a>
+            </div>
+          </div>
+        </div>
+      </footer>

partials/post-background.hbs

@@ -10,24 +10,12 @@ If the template in question has a background image, then we render responsive im
 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.
 --}}
-
-{{#if feature_image}}
-
-<style type="text/css">
-    .responsive-{{slug}}-img {
-        background-image: url({{img_url feature_image size='m'}});
-    }
-
-    @media(max-width: 767px) {
-        .responsive-{{slug}}-img {
-            background-image: url({{img_url feature_image size='m'}});
-        }
-    }
-</style>
-<div class="post-background responsive-{{slug}}-img bg-cover bg-center bg-yuika-blue-500">
-
-{{else}}
-
-<div class="post-background no-image">
-
-{{/if}}
+<div>
+    <div class="post-image-box">
+        {{#if feature_image}}
+        <img class="post-image" src="{{img_url feature_image size='m'}}">
+        {{else}}
+        <img class="post-image" src="{{img_url @site.cover_image size='m'}}">
+        {{/if}}
+    </div>
+</div>

partials/post-card.hbs

@@ -1,47 +1,54 @@
-<div class="post-card w-full md:w-1/2 xl:w-1/3 px-3 py-6 ">
-<article class="relative group w-full">
-  {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="h-full bg-black opacity-50 group-hover:opacity-75 transition-opacity">
-    </div>
-    <div class="absolute bottom-0 px-6 py-2 mt-4 mt-0 w-full">
-    <div class="py-1">
-    {{#if primary_tag}}
-    {{#primary_tag}}
+<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">
+      {{#if primary_tag}}
+      {{#primary_tag}}
+      <p>
         <a href="{{url}}">
-          <span class="primary-tag-header">{{name}}</span>
-        </a>
-    {{/primary_tag}}
-    {{/if}}
-    </div>
-    <div class="mt-0 text-xl text-white group-hover:text-gray-300">
-      <a href="{{url}}"><h1 class="font-light">{{title}}</h1></a>
-    </div>
-    <div class="mt-0 text-xs text-white group-hover:text-gray-300">
-          <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>
-    <div class="flex flex-row items-center my-2">
-      <div class="flex flex-row">
-        {{#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 accent_color}} 
+          <span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
+          {{else}}
+          <span class="tag-accent-color small"></span>{{name}}
           {{/if}}
-        {{/foreach}}
+          <span class="text-sm hover:underline">{{name}}</span>
+        </a>
+      </p>
+      {{/primary_tag}}
+      {{/if}}
       </div>
-      <div class="flex-grow flex flex-col text-xs text-white">
-        <div>
-          <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
+      <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>
-      </div> 
+        <div class="author-names">
+          <div>
+            <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
+          </div>
+        </div> 
+      </div>
+      {{/if}}
+      <div class="block mt-2 mb-4 text-sm excerpt overflow-hidden">
+        <p>{{excerpt words="30"}}</p>
+      </div>
     </div>
-    <div class="block mt-2 mb-4 text-sm text-white excerpt overflow-hidden">
-       <p>{{excerpt words="30"}}</p>
-    </div>
-
-   </div>
-  </div>
-</article>
+  </article>
 </div>

partials/primary-tag.hbs

@@ -0,0 +1,15 @@
+
+{{#if primary_tag}}
+{{#primary_tag}}
+      <p>
+        <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>{{name}}
+          {{/if}}
+          <span class="text-base text-white hover:underline">{{name}}</span>
+        </a>
+      </p>
+{{/primary_tag}}
+{{/if}}

partials/site-background.hbs

@@ -0,0 +1,49 @@
+{{!--
+Wow what the hell is going on in here even?
+
+Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
+have a heavy impact on performance, so it's a good idea to make them responsive. Because we
+can only get the image dynamically using Handlebars, and we can only set the image to properly
+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.
+--}}
+
+{{#if @site.cover_image}}
+
+<style type="text/css">
+    .responsive-site-header-img {
+        background-image: url({{img_url @site.cover_image size='xl'}});
+    }
+
+    @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: 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">
+
+{{else}}
+
+<div class="h-full w-full no-image">
+
+{{/if}}

partials/site-header.hbs

@@ -1,23 +1,24 @@
-  <div class="w-full flex flex-row justify-begin items-center fixed index-navbar">
-    <header class="flex flex-row py-2 w-full relative">
-      {{#if @site.logo}}
-      <div class="w-12 h-12">
-        <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
+  <div class="index-navbar">
+    <div class="site-background">
+      {{> site-background }}
       </div>
-      {{/if}}
-      <div class="flex flex-col pl-4 flex-grow">
-        <div class="">
-         <a href="{{@site.url}}">
-          <h1 class="text-lg text-white">{{@site.title}}</h1>
-         </a>
+    </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>
         </div>
-        <div class="">
-          <p class="text-sm text-white">{{@site.description}}</p>
+        <div class="site-head">
+          <a href="{{@site.url}}" class="block flex flex-col flex-grow">
+            <div class="">
+              <h1 class="text-lg text-white">{{@site.title}}</h1>
+            </div>
+          </a>
         </div>
       </div>
-      <div id="menushow" class="cursor-pointer relative">
-        <img src="{{asset "images/menu.svg"}}" class="h-12 w-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/>
+      <div class="nav-group">
+        {{navigation}}
       </div>
-     {{navigation}}
     </header>
   </div>
+</div>

post.hbs

@@ -1,44 +1,41 @@
 {{!< default}}
 
 {{#post}}
-{{> "site-header"}}
 <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-6 left-0 right-0">
-   <div class="container mx-auto content-full">
-    {{#if primary_tag}}
-    {{#primary_tag}}
-    <div>
-        <a href="{{url}}"><span class="primary-tag-header">{{name}}</span></a>
-    </div>
-    {{/primary_tag}}
-    {{/if}}
-    <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="flex flex-row">
-        {{#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>
-          {{else}}
-            <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
-          {{/if}}   
-        {{/foreach}}
-        <div class="text-white">
-          <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
+  <div class="absolute bottom-0 py-4 left-0 right-0">
+    <div class="container mx-auto content-full">
+      <div>
+        {{> 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>
+              </div>
+            {{/if}}
+          {{/foreach}}
+        </div>
+        <div class="author-names">
+          <div>
+            <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
+          </div>
         </div>
       </div>
-   </div>
+    </div>
   </div>
 </div>
 
@@ -47,46 +44,60 @@
   <div class="content-full">
     {{content}}
   </div>
-  <div class="content-full">
-    <div class="my-4" id="comments">
-    </div>
-  </div>
 </main>
 <div class="my-4 w-full content-full">
-    <div class="flex flex-row justify-between">
+    <div class="flex flex-col md:flex-row justify-between">
       {{#prev_post}}
-      <div class="w-1/3">
-        <a href="{{url}}">
-          <div class="flex flex-col items-end">
-            <p class="text-xl text-blue-700">Previous post</p>
-            <p>{{title}}</p>
-          </div>
-        </a>
-      </div>
+      <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">
+        <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}}
-      <div class="w-1/3">
-        <a href="{{url}}">
-          <div class="flex flex-col items-begin">
-            <p class="text-xl text-blue-700">Next post</p>
-            <p>{{title}}</p>
-          </div>
-        </a>
-      </div>
+      <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">
+        <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  --}}
+        
+      {{/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}}" class="bg-green-700 w-auto inline px-2 py-1 text-white text-2xl">{{name}}</a> </p>
-                    </div>
+                      <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="flex flex-wrap justify-start w-full">
+                  <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
                   {{#foreach related_posts}}
                     {{> post-card}}
                   {{/foreach}}

tag.hbs

@@ -1,7 +1,6 @@
 {{!< default}}
 
 {{#tag}}
-{{> "site-header"}}
 <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">
@@ -9,25 +8,33 @@
   </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 class="my-2">
-      <span class="tag-header">Tag</span>
-    </div>
     <div>
-      <h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>
+      <span class="text-white text-sm">Tag</span>
     </div>
-    <div class="text-white">
-      {{#if description}}
-      <p>{{description}}</p>
+    <div class="flex flex-row items-center py-2">
+      {{#if accent_color}}
+        <span class="tag-accent-color" style="background-color: {{accent_color}};"></span>
       {{else}}
-      <p>A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}</p>
+        <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}}
 
-<div class="flex flex-wrap justify-start post-feed content w-full px-2">
+<div class="post-feed content w-full px-2">
   {{#foreach posts}}
     {{> "post-card"}}
   {{/foreach}}

tailwind.config.js

@@ -1,15 +1,11 @@
 module.exports = {
+  purge: [
+    './**/*.hbs',
+    './assets/**/*.js',
+    './assets/css/styles.css', // This file defines required styles for the Ghost editor
+      // etc.
+  ],
   theme: {
-    transitionProperty: {
-      'none': 'none',
-      'all': 'all',
-      'color': 'color',
-      'bg': 'background-color',
-      'border': 'border-color',
-      'colors': ['color', 'background-color', 'border-color'],
-      'opacity': 'opacity',
-      'transform': 'transform',
-    },
     extend: {
       colors: {
         'yuika-blue': {
@@ -36,8 +32,10 @@ module.exports = {
       'body': ['"Exo 2"',' -apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
     }
   },
-  variants: ['responsive', 'group-hover', 'hover', 'active' ],
+  variants: ['responsive', 'group-hover', 'hover', 'active','focus' ],
   plugins: [
-    require('tailwindcss-transitions')(),
   ],
+  future: {
+    purgeLayersByDefault: true
+  },
 }