be consistent

assets/css/styles.css

@@ -23,6 +23,9 @@ header {
   height: 50vh;
 }
 
+.no-image {
+  @apply bg-yuika-blue-500
+}
 
 /* 3. Content Styling */
 #post p {
@@ -49,7 +52,21 @@ header {
 #post a {
   @apply text-yuika-blue-700;
 }
-
+#post ul {
+  @apply list-disc;
+}
+#post ol {
+  @apply list-decimal;
+}
+#post code {
+  @apply bg-gray-200 text-yuika-blue-700;
+}
+#post blockquote {
+  @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;
+}
 #post .kg-card {
   @apply py-4 flex flex-col items-center object-contain my-4 mx-0;
 }
@@ -95,6 +112,7 @@ header {
 #post .kg-bookmark-card {
   @apply text-black;
 }
+
 #post .kg-bookmark-container {
   @apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
 }
@@ -140,12 +158,15 @@ footer {
   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;
+  @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4 transition-bg;
 }
 .nav li a {
   @apply align-middle w-full table-cell;
   line-height: 2rem;
 }
+.nav li:hover {
+  @apply bg-yuika-blue-700 transition-bg;
+}
 
 @screen md {
   .nav {
@@ -191,6 +212,20 @@ footer {
   }
 }
 
+/* 5. Post Card */
+.post-card .excerpt {
+  max-height: 3.75rem;
+}
+
+.primary-tag-header {
+  @apply bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm;
+}
+.tag-header {
+  @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm;
+}
+.author-header {
+  @apply bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm;
+}
 @tailwind components;
 
 @tailwind utilities;

author.hbs

@@ -9,7 +9,7 @@
   <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">
-      <p class="bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm">Author</p>
+        <span class="author-header">Author</span>
     </div>
     <div class="flex flex-row">
       <div class="flex flex-col items-begin mr-4">

partials/post-background.hbs

@@ -28,6 +28,6 @@ with a `no-image` class so we can style it accordingly.
 
 {{else}}
 
-<div class="h-64 bg-gray-500">
+<div class="h-64 no-image">
 
 {{/if}}

partials/post-card.hbs

@@ -4,18 +4,20 @@
     <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="py-1">
+        <a href="{{url}}">
-      <a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
+          <span class="primary-tag-header">{{name}}</span>
-    </div>
+        </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="block mt-2 mb-4 text-sm text-white max-h-24 overflow-hidden">
+    <div class="mt-0 text-xs text-white group-hover:text-gray-300">
-       <p>{{excerpt words="30"}}</p>
+          <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">
@@ -32,10 +34,13 @@
       <div class="flex-grow flex flex-col text-xs text-white">
         <div>
           <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
-          <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> 
     </div>
+    <div class="block mt-2 mb-4 text-sm text-white excerpt overflow-hidden">
+       <p>{{excerpt words="30"}}</p>
+    </div>
+
    </div>
   </div>
 </article>

post.hbs

@@ -12,7 +12,7 @@
     {{#if primary_tag}}
     {{#primary_tag}}
     <div>
-      <a href="{{url}}"><p class="bg-green-700 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
+        <a href="{{url}}"><span class="primary-tag-header">{{name}}</span></a>
     </div>
     {{/primary_tag}}
     {{/if}}

tag.hbs

@@ -9,8 +9,8 @@
   </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>
+    <div class="my-2">
-      <p class="bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm">Tag</p>
+      <span class="tag-header">Tag</span>
     </div>
     <div>
       <h1 class="text-white text-2xl md:text-4xl">{{name}}</h1>