From 4f438b295a2a94587188c2546bc48e31f2e3a883 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Thu, 12 Nov 2020 02:54:23 +0700
Subject: [PATCH] Update design for tags and authors

---
 assets/css/styles.css    | 13 +++++++++++--
 author.hbs               | 18 +++++++-----------
 index.hbs                |  6 +++---
 package.json             |  2 +-
 partials/post-card.hbs   | 14 +++++++++++---
 partials/primary-tag.hbs | 14 ++++++++++++++
 post.hbs                 | 26 ++++++++++++++++----------
 tag.hbs                  | 24 ++++++++++++++++--------
 8 files changed, 79 insertions(+), 38 deletions(-)
 create mode 100644 partials/primary-tag.hbs

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 28b105a..3663819 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -329,15 +329,21 @@ footer {
   @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 bg-blue-900 transition duration-300 ease-in-out;
+  @apply transition-all duration-300 ease-in-out underline;
 }
 .tag-header {
   @apply bg-blue-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-16 w-16;
+
+}
 .author-header {
   @apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
 }
-
+.author-image {
+  @apply inline-block rounded-full align-text-bottom h-16 w-16;
+}
 .author-list {
   @apply flex flex-row items-center my-2 py-2;
 }
@@ -347,6 +353,9 @@ footer {
 .author-names {
   @apply flex-grow flex flex-col;
 }
+.author-names a:hover {
+  @apply underline;
+}
 
 /* 6. Post feed */
 .post-feed {
diff --git a/author.hbs b/author.hbs
index 5ffcd88..0c72348 100644
--- a/author.hbs
+++ b/author.hbs
@@ -7,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'}}
diff --git a/index.hbs b/index.hbs
index 1360861..87b33c1 100644
--- a/index.hbs
+++ b/index.hbs
@@ -5,20 +5,20 @@
     </div>
   </div>
   <div class="absolute bottom-0 py-4 left-0 right-0">
-    <div class="container mx-auto content-full flex flex-col">
+    <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}}
-      <a href="{{@site.url}}" class="block flex flex-col pl-4 flex-grow">
+      <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>
-      </a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/package.json b/package.json
index f9e79a7..52e0239 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "2.1.3",
+    "version": "2.2.0",
     "engines": {
         "ghost-api": "v3"
     },
diff --git a/partials/post-card.hbs b/partials/post-card.hbs
index 6888fc3..caa1e65 100644
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@@ -1,17 +1,25 @@
 <div class="post-card">
-  <article class="relative md:flex md:flex-row w-full h-full hover:bg-gray-400 transition duration-500 ease-in-out py-4 px-4">
-    {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
+  <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 py-1">
       {{#if primary_tag}}
       {{#primary_tag}}
+          {{#if accent_color}}
+          <a href="{{url}}">
+            <span class="primary-tag-header" style="background-color: {{accent_color}};">{{name}}</span>
+          </a>
+          {{else}}
           <a href="{{url}}">
             <span class="primary-tag-header">{{name}}</span>
           </a>
+          {{/if}}
       {{/primary_tag}}
       {{/if}}
       </div>
-      <div class="mt-0 text-xl hover:text-yuika-blue-700 transition duration-500 ease-in-out">
+      <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">
diff --git a/partials/primary-tag.hbs b/partials/primary-tag.hbs
new file mode 100644
index 0000000..51e7b58
--- /dev/null
+++ b/partials/primary-tag.hbs
@@ -0,0 +1,14 @@
+
+{{#if primary_tag}}
+{{#primary_tag}}
+    {{#if accent_color}}
+    <a href="{{url}}">
+    <span class="primary-tag-header" style="background-color: {{accent_color}};">{{name}}</span>
+    </a>
+    {{else}}
+    <a href="{{url}}">
+    <span class="primary-tag-header">{{name}}</span>
+    </a>
+    {{/if}}
+{{/primary_tag}}
+{{/if}}
\ No newline at end of file
diff --git a/post.hbs b/post.hbs
index 8681e38..60767a5 100644
--- a/post.hbs
+++ b/post.hbs
@@ -8,13 +8,9 @@
   </div>
   <div class="absolute bottom-0 py-4 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>
+        {{> primary-tag}}
+      </div>
       <div>
         <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
       </div>
@@ -81,9 +77,19 @@
               {{#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="primary-tag-header text-2xl">{{name}}</a> </p>
-                    </div>
+                      <div class="px-3 w-full">
+                        <p class="text-2xl">More in 
+                          {{#if accent_color}}
+                          <a href="{{url}}">
+                           <span class="primary-tag-header text-2xl" style="background-color: {{accent_color}};">{{name}}</span>
+                          </a>
+                          {{else}}
+                          <a href="{{url}}">
+                           <span class="primary-tag-header text-2xl">{{name}}</span>
+                          </a>
+                          {{/if}}
+                        </p>
+                      </div>
                   {{/../primary_tag}}
                   <div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
                   {{#foreach related_posts}}
diff --git a/tag.hbs b/tag.hbs
index 3934a35..b52c39c 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -8,19 +8,27 @@
   </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>