Update design for tags and authors

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 {

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">
+    <div>
-        <span class="author-header">Author</span>
+        <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>
+        <div class="flex flex-row items-center mb-2">
-          <h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>
+          {{#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'}}

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>

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"
     },

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">
+  <article class="relative md:flex md:flex-row w-full h-full transition duration-500 ease-in-out py-4 px-4">
-    {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <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">

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}}

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}}
+      <div>
-        {{#primary_tag}}
+        {{> primary-tag}}
-        <div>
+      </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>
@@ -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">
+                      <div class="px-3 w-full">
-                      <p class="text-2xl">More in <a href="{{url}}" class="primary-tag-header text-2xl">{{name}}</a> </p>
+                        <p class="text-2xl">More in 
-                    </div>
+                          {{#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}}

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">
+    <div class="flex flex-row items-center py-2">
-      {{#if description}}
+      {{#if accent_color}}
-      <p>{{description}}</p>
+        <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>