From 80a1d7ef6f01f607fbe5403a6a87289d6c79f4f6 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Tue, 16 Jun 2020 17:47:02 +0700
Subject: [PATCH] Theme tweaks

---
 assets/css/styles.css  | 35 +++++++++++++++++++++---
 partials/post-card.hbs |  6 ++---
 post.hbs               | 60 ++++++++++++++++++++++--------------------
 3 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 5bcb28d..153b644 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -16,13 +16,23 @@ header {
   @apply transition-bg;
 }
 .index-navbar header {
+  @apply transition-bg;
   background-color: transparent;
 }
+.index-navbar:hover header {
+  @apply bg-yuika-blue-700 transition-bg;
+}
 .index-header {
   min-height: 300px;
   height: 50vh;
 }
 
+@screen md {
+  .index-header {
+    height: 70vh;
+  }
+}
+
 .no-image {
   @apply bg-yuika-blue-500
 }
@@ -65,7 +75,7 @@ header {
   @apply border-l-4 border-yuika-blue-700 pl-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;
 }
 #post .kg-card {
   @apply py-4 flex flex-col items-center object-contain my-4 mx-0;
@@ -165,7 +175,7 @@ footer {
   line-height: 2rem;
 }
 .nav li:hover {
-  @apply bg-yuika-blue-700 transition-bg;
+  @apply bg-yuika-blue-500 transition-bg;
 }
 
 @screen md {
@@ -182,7 +192,7 @@ footer {
 }
 
 .post-article {
-  @apply pb-32;
+  @apply pb-32 pt-8;
 }
 
 .content {
@@ -221,7 +231,10 @@ footer {
 }
 
 .primary-tag-header {
-  @apply bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm;
+  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition-bg;
+}
+.primary-tag-header:hover {
+  @apply bg-blue-900 transition-bg;
 }
 .tag-header {
   @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
@@ -229,6 +242,20 @@ footer {
 .author-header {
   @apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
 }
+
+.author-list {
+  @apply flex flex-row items-center my-2 py-2 transition-bg;
+}
+.author-list:hover {
+  @apply bg-red-700 transition-bg;
+}
+.author-images {
+  @apply flex flex-row;
+}
+.author-names {
+  @apply flex-grow flex flex-col;
+}
+
 @tailwind components;
 
 @tailwind utilities;
diff --git a/partials/post-card.hbs b/partials/post-card.hbs
index 18fa42d..3469b87 100644
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@@ -19,8 +19,8 @@
     <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">
+    <div class="author-list text-xs text-white">
+      <div class="author-images">
         {{#foreach authors}}
           {{#if profile_image}}
             <div class="h-8 ml-1 mr-3">
@@ -31,7 +31,7 @@
           {{/if}}
         {{/foreach}}
       </div>
-      <div class="flex-grow flex flex-col text-xs text-white">
+      <div class="author-names">
         <div>
           <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
         </div>
diff --git a/post.hbs b/post.hbs
index 77494ed..e63c5d4 100644
--- a/post.hbs
+++ b/post.hbs
@@ -8,37 +8,39 @@
     </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="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="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>