refactor(css): move all color-related css to light/dark theme files

This is preparing for the button-toggle of the light/dark theme to override prefers-color-scheme

assets/css/dark.css

@@ -1,3 +1,4 @@
+/* Text elements */
 body {
     @apply bg-gray-800;
 }
@@ -40,7 +41,7 @@ blockquote {
 }
 
 .article-container ul,
-.article-container ol  {
+.article-container ol {
     @apply text-gray-300;
 }
 
@@ -55,14 +56,27 @@ blockquote {
     @apply bg-gray-600;
 }
 
+.article-container figcaption {
+    @apply text-gray-300;
+}
+
+.article-container .alert-warning {
+    @apply text-red-600 bg-red-200;
+}
+
 section.footnotes:before {
     @apply text-gray-500 bg-gray-800;
 }
 
+/* TOC and search screen */
 #toc-list ol {
     @apply text-gray-300 border-gray-300;
 }
 
+#toc-container {
+    @apply bg-gray-800;
+}
+
 #toc-top-divider::after {
     @apply text-gray-500 bg-gray-800;
 }
@@ -72,6 +86,16 @@ section.footnotes:before {
     background-color: rgba(20, 20, 20, 0.6);
 }
 
+#search-wrapper {
+    @apply bg-gray-800;
+}
+#search-input {
+    @apply border-b border-gray-700;
+}
+#search-input input {
+    @apply bg-gray-800 text-gray-300;
+}
+
 ul.search-results {
     @apply text-gray-300;
 }
@@ -96,6 +120,70 @@ ul.search-results li:hover {
     @apply text-gray-300;
 }
 
-.post-feat-card-content * {
-    @apply text-gray-200;
+/* Unified buttons style */
+.round-button {
+    @apply rounded-full shadow-md bg-gray-600 transition-all duration-150 ease-linear;
+}
+
+.round-button button,
+button.round-button {
+    @apply font-bold text-gray-200;
+}
+.round-button button:hover,
+button.round-button:hover {
+    @apply text-gray-700;
+}
+
+/* Site header */
+#site-header {
+    @apply text-gray-300 text-lg;
+}
+
+#nav-homepage:hover {
+    @apply text-gray-400;
+}
+
+.site-header-navlink:hover {
+    @apply bg-gray-400 text-gray-700;
+}
+
+.post-card {
+    @apply border border-gray-700 text-gray-300;
+}
+
+.post-card:hover {
+    @apply transform -translate-y-2;
+}
+
+.gray-tag {
+    @apply text-gray-300 bg-gray-700;
+}
+
+.gray-tag:hover {
+    @apply text-gray-700;
+}
+
+.post-footer {
+    @apply text-gray-300;
+}
+
+a.post-footer:hover {
+    @apply text-gray-700;
+}
+
+.post-footer tr:hover {
+    @apply text-gray-800;
+}
+
+/* Publication related */
+#publication-metadata {
+    @apply text-gray-300;
+}
+
+.listview-wrapper {
+    @apply text-gray-300;
+}
+
+.listview-row:hover {
+    @apply bg-gray-400 text-gray-700;
 }

assets/css/light.css

@@ -1,3 +1,4 @@
+/* Text elements */
 h1,
 h2,
 h3,
@@ -28,7 +29,7 @@ blockquote {
 }
 
 .article-container ul,
-.article-container ol  {
+.article-container ol {
     @apply text-gray-800;
 }
 
@@ -43,14 +44,27 @@ blockquote {
     @apply bg-gray-300;
 }
 
+.article-container figcaption {
+    @apply text-gray-700;
+}
+
+.article-container .alert-warning {
+    @apply text-red-600 bg-red-100;
+}
+
 section.footnotes:before {
     @apply text-gray-500 bg-white;
 }
 
+/* TOC and search screen */
 #toc-list ol {
     @apply text-gray-800 border-gray-300;
 }
 
+#toc-container {
+    @apply bg-white;
+}
+
 #toc-top-divider::after {
     @apply text-gray-500 bg-white;
 }
@@ -60,6 +74,16 @@ section.footnotes:before {
     background-color: rgba(0, 0, 0, 0.6);
 }
 
+#search-wrapper {
+    @apply bg-white shadow-md;
+}
+#search-input {
+    @apply border-b border-gray-300;
+}
+#search-input input {
+    @apply text-gray-700;
+}
+
 ul.search-results {
     @apply text-gray-700;
 }
@@ -84,6 +108,47 @@ ul.search-results li:hover {
     @apply text-gray-700;
 }
 
-.post-feat-card-content * {
-    @apply text-gray-200;
+/* Unified buttons style */
+.round-button {
+    @apply rounded-full shadow-md bg-white transition-all duration-150 ease-linear;
+}
+
+.round-button button,
+button.round-button {
+    @apply font-bold text-gray-800;
+}
+
+/* Site header */
+#site-header {
+    @apply text-gray-700 text-lg;
+}
+
+.site-header-navlink:hover {
+    @apply bg-gray-300;
+}
+
+/* Styling cards and elements */
+.post-card {
+    @apply border border-gray-100 text-gray-700;
+}
+
+.gray-tag {
+    @apply text-gray-700 bg-gray-200;
+}
+
+.post-footer {
+    @apply text-gray-700;
+}
+
+/* Publication related */
+#publication-metadata {
+    @apply text-gray-600;
+}
+
+.listview-wrapper {
+    @apply text-gray-700;
+}
+
+.listview-row:hover {
+    @apply bg-gray-200;
 }

assets/css/site.css

@@ -134,6 +134,10 @@ article {
     @apply py-1 mb-2 text-lg leading-relaxed text-left break-normal;
 }
 
+.article-container figcaption {
+    @apply block mt-3 mb-6 text-base font-serif leading-normal text-center;
+}
+
 /* Tables */
 .article-container table {
     @apply table-auto mx-auto my-4;
@@ -256,12 +260,31 @@ ul.search-results li {
 /* #      Specific elements        # */
 /* ################################# */
 @media (min-width: 768px) {
-.home-post-card {
-    flex-basis: 50%;
-    max-width: 50%;
+    .home-post-card {
+        flex-basis: 50%;
+        max-width: 50%;
+    }
+}
+
+.site-header-navlink {
+    @apply transition-all duration-150 ease-linear;
 }
+
+.post-feat-card-content * {
+    @apply text-gray-200;
+}
+
+.post-card {
+    min-height: 20rem;
+    max-height: 38rem;
+    @apply shadow transition ease-in-out duration-300;
+}
+
+.post-card:hover {
+    @apply shadow-lg;
 }
 
-iframe.instagram-media, .twitter-tweet {
+iframe.instagram-media,
+.twitter-tweet {
     @apply mx-auto !important;
 }

layouts/_default/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <h2 class="text-center text-gray-500">{{if (eq .Type "tags") }}#{{ end }}{{ .Title }}</h2>
-<div class="flex flex-col space-y-1 text-xl text-gray-700 dark:text-gray-300 max-w-4xl mx-auto">
+<div class="listview-wrapper flex flex-col space-y-1 text-xl max-w-4xl mx-auto">
     {{ range .Pages.GroupByDate "2006" }}
     <div class="font-sans text-2xl mt-4 mb-2">{{ .Key }}</div>
     {{ range .Pages.ByPublishDate.Reverse }}
@@ -9,14 +9,14 @@ <h2 class="text-center text-gray-500">{{if (eq .Type "tags") }}#{{ end }}{{ .Tit
         {{ else }}
         <a href="{{ .Permalink }}" class="hover:bg-transparent">
         {{ end }}
-            <div class="flex flex-row items-center justify-between py-1 px-1 hover:bg-gray-200 dark:hover:bg-gray-400">
+            <div class="listview-row flex flex-row items-center justify-between py-1 px-1">
                 <div class="flex flex-row flex-wrap items-center font-serif">
                     {{ if (not .IsPage) }}
                     <i data-feather="folder" class=" inline-block mr-1 w-4 h-4"></i>
                     {{ end }}
                     {{- .Title -}}
                 </div>
-            
+
                 <div class="flex flex-row flex-shrink-0 items-center text-gray-500 font-semibold tracking-tighter text-sm">
                     {{ if .Params.featured }}
                     <i data-feather="star" class="inline-block mr-1 text-sm text-yellow-400 w-4 h-4" fill="#f6e05e"></i>

layouts/index.html

@@ -26,9 +26,9 @@
     </div>
     <div class="mx-auto">
         <a href="/posts"
-            class="block w-8 h-8 rounded-full shadow-md hover:shadow-lg bg-white dark:bg-gray-600 sm:hover:bg-yellow-400">
+            class="round-button hover:bg-yellow-400 block w-8 h-8">
             <button
-                class="w-8 h-8 text-gray-800 dark:text-gray-200 dark:hover:text-gray-700 font-bold focus:outline-none"
+                class="w-8 h-8 focus:outline-none"
                 aria-label="All Posts">
                 <i data-feather="activity" class="mx-auto w-5 h-5"></i>
             </button>

layouts/partials/back-to-top-button.html

@@ -1,7 +1,5 @@
-<a href="#"
-    class="block w-8 h-8 my-2 rounded-full shadow-md bg-white dark:bg-gray-600 sm:hover:bg-yellow-400 transition-none">
-    <button class="w-8 h-8 text-gray-800 dark:text-gray-200 dark:hover:text-gray-700 font-bold focus:outline-none"
-        aria-label="Back to Top">
+<a href="#" class="round-button hover:bg-yellow-400 block w-8 h-8 my-2">
+    <button class="w-8 h-8 focus:outline-none" aria-label="Back to Top">
         <i data-feather="chevron-up" class="mx-auto"></i>
     </button>
 </a>

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="w-full h-32 text-center px-4 pb-4 pt-8 inset-0 text-sm text-gray-200 bg-gray-800 dark:border-t border-gray-400">
+<footer class="w-full h-32 text-center px-4 pb-4 pt-8 inset-0 text-sm text-gray-200 bg-gray-800 border-t border-gray-900">
     {{ partial "social-list" }}
     <p class="text-gray-500">
         {{ with site.Copyright }} {{- replace . "{year}" now.Year | markdownify -}} {{ end }}

layouts/partials/header.html

@@ -7,7 +7,7 @@
             <a
             id="nav-homepage"
             href="{{ .Site.Home.Permalink }}"
-            class="flex items-center m-0 py-3 md:flex-none font-bold font-serif text-lg tracking-tight text-gray-800 dark:text-gray-200 hover:bg-transparent"
+            class="flex items-center m-0 py-3 md:flex-none font-bold font-serif tracking-tight hover:bg-transparent"
             >
             {{/* Show logo if file exists */}}
             {{ $logo := resources.Get "images/logo.png" | default (resources.Get "images/logo.svg") }}
@@ -20,21 +20,21 @@
         </div>
 
         {{/* Navbar menu */}}
-        <div class="flex flex-shrink-0 flex-grow justify-center p-0 md:items-center text-gray-700 dark:text-gray-300 text-lg">
+        <div class="flex flex-shrink-0 flex-grow justify-center p-0 md:items-center">
             {{/* nav links */}}
             <div class="flex justify-start items-center overflow-x-auto p-0 mr-0 md:mr-auto">
             {{ range .Site.Sections.ByWeight }}
                 <a
                     href="{{ .Permalink }}"
-                    class="py-1 px-2 rounded hover:bg-gray-300 dark:hover:text-gray-700"
+                    class="site-header-navlink py-1 px-2 rounded"
                 >
                     {{ .Title }}
                 </a>
             {{ end }}
             {{ with .Site.GetPage "/about" }}
                 <a
                     href="{{ .Permalink }}"
-                    class="py-1 px-2 rounded hover:bg-gray-300 dark:hover:text-gray-700"
+                    class="site-header-navlink py-1 px-2 rounded"
                 >
                     {{ .Title }}
                 </a>
@@ -45,10 +45,10 @@
             <div class="flex justify-start items-center p-0 ml-0 md:ml-auto">
                 {{ if site.Params.minisearch_enabled }}
                 <span id="header-search-button">
-                    <i data-feather="search" class="p-2 rounded hover:bg-gray-300 dark:hover:text-gray-700 w-8 h-8"></i>
+                    <i data-feather="search" class="site-header-navlink p-2 rounded w-8 h-8 cursor-pointer"></i>
                 </span>
                 {{ end }}
-                <i data-feather="sun" class="p-2 rounded hover:bg-gray-300 dark:hover:text-gray-700 w-8 h-8"></i>
+                <i data-feather="sun" class="site-header-navlink p-2 rounded w-8 h-8 cursor-pointer"></i>
             </div>
         </div>
     </div>