From 18a04f4a3c1a7f702ccd91f7651ba4fbb84c1071 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Wed, 13 Nov 2019 00:51:01 +0700
Subject: [PATCH] Styling changes

---
 assets/css/styles.css    | 54 ++++++++++++++++++++++++++++++++--------
 author.hbs               |  6 ++---
 index.hbs                |  8 +++---
 page.hbs                 |  6 ++---
 partials/site-header.hbs |  2 ++
 post.hbs                 | 40 +++++++++++++++++++++--------
 tag.hbs                  |  6 ++---
 7 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 0cb2254..ec3f495 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -2,12 +2,15 @@
 @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
 
 @tailwind base;
+
+/* 1. Base Styling */
 html {
   @apply font-sans;
 }
+
+/* 2. Site Header */
 header {
-  background-color: #085d93;
-  @apply py-4 px-4;
+  @apply py-4 px-4 bg-yuika-blue-700;
 }
 .index-navbar header {
   background-color: transparent;
@@ -17,6 +20,8 @@ header {
   height: 50vh;
 }
 
+
+/* 3. Content Styling */
 #post p {
   @apply my-3;
 }
@@ -39,7 +44,7 @@ header {
   @apply my-4 text-base font-light;
 }
 #post a {
-  color: #085d93;
+  @apply text-yuika-blue-700;
 }
 
 #post .kg-card {
@@ -121,14 +126,14 @@ header {
   @apply text-sm text-blue-700 truncate;
 }
 footer {
-  background-color: #085d93;
-  @apply py-4 px-4;
+  @apply py-4 px-4 bg-yuika-blue-700;
 }
 
 
+/* 4. Navbar */
+
 .nav {
-  @apply hidden flex-col w-full pl-0 my-0 absolute;
-  background-color: #085d93;
+  @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700;
 }
 .nav li {
   @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
@@ -150,20 +155,47 @@ footer {
     @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
   }
   #menushow:hover .nav {
-    @apply pt-0;
-    right: 0;
+    @apply pt-0 right-0;
     width: initial;
   }
 }
 
 .nav-fixed {
-  background-color: #085d93;
   z-index: 10;
+  @apply bg-yuika-blue-700;
+}
+
+.post-article {
+  @apply pb-32 pt-8;
 }
 
 .content {
-  @apply pb-32;
+  @apply mx-auto;
 }
+.content-full {
+  @apply px-2;
+}
+@screen sm {
+  .content-full {
+    @apply px-8;
+  }
+}
+@screen md {
+  .content-full {
+    @apply px-16;
+  }
+}
+@screen lg {
+  .content-full {
+    @apply px-32;
+  }
+}
+@screen xl {
+  .content-full {
+    @apply px-64;
+  }
+}
+
 @tailwind components;
 
 @tailwind utilities;
diff --git a/author.hbs b/author.hbs
index ee2c207..a68de18 100644
--- a/author.hbs
+++ b/author.hbs
@@ -2,11 +2,11 @@
 {{#author}}
 <div class="relative group index-header">
   {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="h-full opacity-50 bg-black">
+    <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
     </div>
   </div>
   <div class="absolute bottom-0 py-6 h-full left-0 right-0">
-   <div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64 h-full flex flex-col justify-end items-begin">
+   <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>
     </div>
@@ -45,9 +45,7 @@
     </div>
    </div>
   </div>
-  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
   {{> "site-header"}}
-  </div>
 </div>
 {{/author}}
 
diff --git a/index.hbs b/index.hbs
index 934c1fd..05b8f74 100644
--- a/index.hbs
+++ b/index.hbs
@@ -1,12 +1,10 @@
 {{!< default}}
-<div class="h-64 relative index-header">
+<div class="h-64 relative group index-header">
   {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-    <div class="h-full opacity-50 bg-black">
+    <div class="w-full h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
     </div>
   </div>
-  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
-    {{> "site-header"}}
-  </div>
+  {{> "site-header"}}
 </div>
 <div class="flex flex-wrap justify-start post-feed content w-full px-4">
   {{#foreach posts}}
diff --git a/page.hbs b/page.hbs
index e1e10c3..e63e28f 100644
--- a/page.hbs
+++ b/page.hbs
@@ -8,7 +8,7 @@
     </div>
   </div>
   <div class="absolute bottom-0 py-6 left-0 right-0">
-   <div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
+   <div class="container mx-auto content-full">
     {{#if primary_tag}}
     {{#primary_tag}}
     <div>
@@ -21,14 +21,12 @@
     </div>
    </div>
   </div>
-  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
   {{> "site-header"}}
-  </div>
 </div>
 
 <div class="px-4">
 <main class="container mx-auto content" id="post">
-    <div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
+    <div class="content-full">
       {{content}}
     </div>
 </main>
diff --git a/partials/site-header.hbs b/partials/site-header.hbs
index aea4358..b24cf55 100644
--- a/partials/site-header.hbs
+++ b/partials/site-header.hbs
@@ -1,3 +1,4 @@
+  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
     <header class="flex flex-row py-2 flex-wrap w-full">
       {{#if @site.logo}}
       <div class="flex flex-col h-12">
@@ -19,3 +20,4 @@
         {{navigation}}
       </div>
     </header>
+  </div>
diff --git a/post.hbs b/post.hbs
index e0e2e30..f103727 100644
--- a/post.hbs
+++ b/post.hbs
@@ -1,14 +1,13 @@
 {{!< default}}
 
 {{#post}}
-<article>
 <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 group-hover:opacity-75 transition-opacity">
     </div>
   </div>
   <div class="absolute bottom-0 py-6 left-0 right-0">
-   <div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
+   <div class="container mx-auto content-full">
     {{#if primary_tag}}
     {{#primary_tag}}
     <div>
@@ -40,20 +39,21 @@
       </div>
    </div>
   </div>
-  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
   {{> "site-header"}}
-  </div>
 </div>
 
-<div class="px-4">
-<main class="container mx-auto content" id="post">
-  <div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
+<article class="post-article">
+<main class="content container" id="post">
+  <div class="content-full">
     {{content}}
   </div>
-  <div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
+  <div class="content-full">
     <div class="my-4" id="comments">
     </div>
-    <div class="my-4 flex flex-row justify-between">
+  </div>
+</main>
+<div class="my-4 w-full content-full">
+    <div class="flex flex-row justify-between">
       {{#prev_post}}
       <div class="w-1/3">
         <a href="{{url}}">
@@ -64,6 +64,7 @@
         </a>
       </div>
       {{/prev_post}}
+      <div class="flex flex-grow"></div>
       {{#next_post}}
       <div class="w-1/3">
         <a href="{{url}}">
@@ -75,8 +76,25 @@
       </div>
       {{/next_post}}
     </div>
-  </div>
-</main>
+</div>
+<div class="mx-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>
+                  {{/../primary_tag}}
+                  <div class="flex flex-wrap justify-start w-full">
+                  {{#foreach related_posts}}
+                    {{> post-card}}
+                  {{/foreach}}
+                  </div>
+                {{/if}}
+              {{/get}}
+            {{/if}}
+</div>
 {{/post}}
 </article>
 
diff --git a/tag.hbs b/tag.hbs
index f6eb5a7..97bb290 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -3,11 +3,11 @@
 {{#tag}}
 <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 class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
     </div>
   </div>
   <div class="absolute bottom-0 py-6 h-full left-0 right-0">
-   <div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64 h-full flex flex-col justify-end items-begin">
+   <div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
     <div>
       <p class="bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm">Tag</p>
     </div>
@@ -23,9 +23,7 @@
     </div>
    </div>
   </div>
-  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
   {{> "site-header"}}
-  </div>
 </div>
 {{/tag}}