Add dots effects; improve single post page

5 files changed, 46 insertions, 16 deletions

diff --git a/assets/css/site.css b/assets/css/site.css
index 5f8fdcb..c5772e8 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -312,10 +312,23 @@ html {
   @apply my-6;
 }
 
+.dots {
+  background-color: transparent; 
+  background-image: radial-gradient(#2C5282 1px, transparent 1px); 
+  background-size: 20px 20px; 
+  width: 140px;
+  height: 80px;
+  z-index: -1;
+  transform: translate(-70px, -50%);
+  position: absolute;
+  opacity: 0.3;
+}
+
 .intro p,
 .article__content > p:first-of-type {
   @apply tracking-tight;
   @apply text-xl;
+  @apply text-gray-800;
 }
 
 /* .pagination is created by Hugo */
diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html
index 9b8182d..a2fb85e 100644
--- a/layouts/_default/archives.html
+++ b/layouts/_default/archives.html
@@ -6,7 +6,9 @@
     <main class="flex-1 max-w-3xl mt-32 mx-auto text-gray-700 w-full">
       <div id="reading-progress-bar" role="presentation" class="fixed z-10 top-0 left-0 h-1 bg-gray-700"></div>
       <article class="article">
-        <h1><a href="{{.Permalink}}" class="no-underline">{{ .Title }}</a></h1>
+        <h1 class="leading-9">
+          <a href="{{.Permalink}}" class="no-underline">{{ .Title }}</a>
+        </h1>
 
         <p class="intro">
           I like to talk about: 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 20e0de5..b68facf 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,20 +2,32 @@
 <div id="reading-progress-bar" role="presentation" class="fixed z-10 top-0 left-0 h-1 bg-gray-700"></div>
 
 <article class="article">
-    <h1 class="leading-9">
-      <a href="{{.Permalink}}" class="no-underline text-black">{{ .Title }}</a>
-    </h1>
-
     {{if not .Params.hideMetadata }}
-      <header class="text-right pb-6">
-        {{ $readTime := cond (gt .ReadingTime 1) "minutes" "minute" }}
-        <span class="">
-          Read in {{ .ReadingTime }} {{ $readTime }} &middot;
-          <time datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}">
+      <header class="text-center pt-10 pb-6">
+        <small class="text-center text-sm">
+          <time class="text-gray-500" datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}">
             {{ dateFormat "January 2, 2006" (default .Date (.PublishDate)) }}
           </time>
-        </span>
+  
+          {{ range (.GetTerms "tags") }}
+            <a href="{{ .Permalink }}" class="inline-flex items-center px-4 py-1 rounded-full no-underline bg-orange-100 text-orange-800 hover:bg-orange-300 ml-4">
+              {{ .LinkTitle }}
+            </a>
+          {{ end }}
+        </small>
+
+        <h1 class="leading-9 text-center">
+          <a href="{{.Permalink}}" class="no-underline inline-block text-black relative">
+            <div class="dots"></div>
+            {{ .Title }}
+          </a>
+        </h1>
       </header>
+
+    {{ else }}
+
+    <h1 class="leading-9"><a href="{{.Permalink}}" class="no-underline text-black">{{ .Title }}</a></h1>
+
     {{ end }}
 
     <div class="article__content">
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
index 3330400..b024ba0 100644
--- a/layouts/partials/intro.html
+++ b/layouts/partials/intro.html
@@ -1,6 +1,9 @@
 {{ if .Site.Params.intro }}
   <div class="intro">
-    <h1>{{ .Site.Params.headline }}</h1>
+    <h1 class="relative">
+      <div class="dots" aria-hidden="aria-hidden"></div>
+      {{ .Site.Params.headline }}
+    </h1>
     <p>{{ .Site.Params.description }}</p>
   </div>
 {{ end }}
diff --git a/layouts/partials/post-summary.html b/layouts/partials/post-summary.html
index 3d96551..0ec77d0 100644
--- a/layouts/partials/post-summary.html
+++ b/layouts/partials/post-summary.html
@@ -1,14 +1,14 @@
 <div class="flex flex-col md:flex-row border-b border-gray-400">
   <h2 class="text-3xl font-bold mb-2 md:w-32 flex-shrink-0 flex-grow-0">{{ .Key }}</h2>
   
-  <ol class="md:pt-3 mb-4 list-none">
+  <ol class="md:pt-3 mb-4 list-none w-full">
     {{ range where .Pages "Type" "ne" "page" -}}
-    <li class="mb-8 flex flex-wrap">
-      <a href="{{ .RelPermalink }}" class="tracking-tight no-underline flex-grow w-full text-blue-600">
+    <li class="mb-8 flex flex-col px-4 no-underline rounded-md hover:bg-white transition duration-300 ease-in-out">
+      <a href="{{ .RelPermalink }}" class="tracking-tight no-underline text-blue-600">
         {{ .Title }}
       </a>
 
-      <small class="mt-2 text-sm">
+      <small class="my-2 text-sm">
         <time class="text-gray-500" datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" (default .Date (.PublishDate)) }}">
           {{ dateFormat "January 2" (default .Date (.PublishDate)) }}
         </time>