💄 Style updates to enhance design consistency

CHANGELOG.md

@@ -2,8 +2,7 @@
 
 All notable changes to Congo will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
@@ -13,10 +12,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Breadcrumbs
 - i18n support
+- CSS transitions
 
 ### Changed
 
 - Consolidated author configuration parameters into `config.toml`
+- General style tweaks to enhance design consistency
 
 ### Fixed
 

assets/css/main.css

@@ -1,6 +1,11 @@
 @tailwind base;
 @tailwind components;
 
+body a,
+body button {
+  @apply transition;
+}
+
 /* Scale SVG icons to text size */
 .icon svg {
   height: 1em;
@@ -29,6 +34,15 @@
   @apply mt-0 last:mb-0;
 }
 
+/* Article pagination */
+.article-pagination a:hover .article-pagination-title {
+  @apply underline underline-primary-500;
+}
+
+.article-pagination a:hover .article-pagination-direction {
+  @apply text-primary-700 dark:text-primary-400;
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {

exampleSite/content/_index.md

@@ -7,6 +7,21 @@ description: "This is a demo of the Congo theme for Hugo."
 A simple, lightweight theme for Hugo built with Tailwind CSS.
 {{< /lead >}}
 
+<div class="flex px-4 py-1 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
+  <span class="flex items-center pr-3 text-primary-400">
+    {{< icon "exclamation-triangle" >}}
+  </span>
+  <span class="flex items-center justify-between flex-grow dark:text-gray-300">
+    <span class="prose">This is a demo of the <code id="layout">page</code> layout.</span>
+    <button
+      class="px-4 py-1 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+      onclick="switchLayout()"
+    >
+      Switch layout &orarr;
+    </button>
+  </span>
+</div>
+
 This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation](/docs/). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
 
 Explore the [sample pages](/samples/) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/Congo) or read the [Installation guide](/docs/installation/) to get started.

exampleSite/layouts/partials/home/custom.html

@@ -1,38 +1,27 @@
+<div id="page">
+  {{ partial "partials/home/page.html" . }}
+</div>
+<div id="profile" class="hidden">
+  {{ partial "partials/home/profile.html" . }}
+</div>
+
 <script type="text/javascript">
   function switchLayout() {
-    var pageDiv = document.getElementById("page");
-    var profileDiv = document.getElementById("profile");
-    var layoutSpan = document.getElementById("layout");
+    const pageDiv = document.getElementById("page");
+    const profileDiv = document.getElementById("profile");
+    const layoutCode = document.querySelectorAll("code[id=layout]");
     if (pageDiv.style.display === "none") {
       pageDiv.style.display = "block";
       profileDiv.style.display = "none";
-      layoutSpan.innerHTML = "page";
+      layoutCode.forEach(function (el) {
+        el.innerText = "page";
+      });
     } else {
       pageDiv.style.display = "none";
       profileDiv.style.display = "block";
-      layoutSpan.innerHTML = "profile";
+      layoutCode.forEach(function (el) {
+        el.innerText = "profile";
+      });
     }
   }
 </script>
-
-<div class="flex px-4 py-3 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
-  <span class="flex items-center pr-3 text-primary-400">
-    {{ partial "icon.html" "exclamation-triangle" }}
-  </span>
-  <span class="flex items-center justify-between flex-grow no-prose dark:text-gray-300">
-    <span>This is a demo of the `<code id="layout" class="">page</code>` layout.</span>
-    <button
-      class="font-bold px-4 py-2 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
-      onclick="switchLayout()"
-    >
-      Switch layout &orarr;
-    </button>
-  </span>
-</div>
-
-<div id="page">
-  {{ partial "partials/home/page.html" . }}
-</div>
-<div id="profile" style="display: none">
-  {{ partial "partials/home/profile.html" . }}
-</div>

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  {{ partial "section-heading.html" . }}
+  {{ partial "section-header.html" . }}
   {{ if gt .Pages 0 }}
     <section>
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}

layouts/_default/single.html

@@ -8,11 +8,7 @@ <h1 class="mt-0 text-4xl font-extrabold">{{ .Title | emojify }}</h1>
       <div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
         {{ partial "article-meta.html" . }}
         {{ if and .Draft .Site.Params.article.showDraftLabel }}
-          <span
-            class="ml-2 px-1 py-[2px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 inline-block align-middle mb-1"
-          >
-            {{ i18n "article.draft" | emojify }}
-          </span>
+          <span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
         {{ end }}
       </div>
     </header>

layouts/_default/taxonomy.html

@@ -1,15 +1,17 @@
 {{ define "main" }}
-  {{ partial "section-heading.html" . }}
+  {{ partial "section-header.html" . }}
   <section class="flex flex-wrap -mx-2 overflow-hidden">
     {{ range .Data.Terms }}
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
         <h2>
-          <a class="text-xl font-medium hover:underline" href="{{ .Page.Permalink }}"
+          <a
+            class="text-xl font-medium hover:underline underline-primary-500"
+            href="{{ .Page.Permalink }}"
             >{{ .Page.Title }}</a
           >
           {{ if $.Site.Params.taxonomy.showTermCount | default true }}
             <span class="text-base text-gray-400">
-              <span class="px-1">&middot;</span>
+              <span class="px-1 text-primary-500">&middot;</span>
               {{ .Count }}
             </span>
           {{ end }}

layouts/_default/term.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  {{ partial "section-heading.html" . }}
+  {{ partial "section-header.html" . }}
   <section>
     {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
       <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>

layouts/partials/article-link.html

@@ -11,7 +11,7 @@ <h3 class="mt-6 text-xl font-semibold">
         >&#8599;</span
       >
     {{ else }}
-      <a class="hover:underline" href="{{ .Permalink }}">{{ .Title }}</a>
+      <a class="hover:underline underline-primary-500" href="{{ .Permalink }}">{{ .Title }}</a>
     {{ end }}
     {{ if and .Draft .Site.Params.article.showDraftLabel }}
       {{ partial "badge.html" "Draft" }}

layouts/partials/article-meta.html

@@ -8,7 +8,7 @@
   (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true))
   (ne .ReadingTime 0)
 }}
-  <span class="px-1">&middot;</span>
+  <span class="px-1 text-primary-500">&middot;</span>
 {{ end }}
 {{ if and (.Params.showReadingTime | default (.Site.Params.article.showReadingTime | default true)) (ne .ReadingTime 0) }}
   <span title="{{ i18n "article.reading_time_title" }}">

layouts/partials/article-pagination.html

@@ -1,14 +1,14 @@
 {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
   {{ if or .NextInSection .PrevInSection }}
-    <div class="pt-8">
+    <div class="pt-8 article-pagination">
       <hr class="border-gray-300 border-dotted dark:border-gray-600" />
       <div class="flex justify-between pt-3">
         <span>
           {{ if .NextInSection }}
             <a class="flex" href="{{ .NextInSection.Permalink }}">
-              <span class="mr-3">&larr;</span>
+              <span class="mr-3 article-pagination-direction">&larr;</span>
               <span class="flex flex-col">
-                <span class="button__text">{{ .NextInSection.Title }}</span>
+                <span class="article-pagination-title">{{ .NextInSection.Title }}</span>
                 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                   <time
                     class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
@@ -25,7 +25,7 @@
           {{ if .PrevInSection }}
             <a class="flex text-right" href="{{ .PrevInSection.Permalink }}">
               <span class="flex flex-col">
-                <span>{{ .PrevInSection.Title }}</span>
+                <span class="article-pagination-title">{{ .PrevInSection.Title }}</span>
                 {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
                   <time
                     class="-mt-1 text-xs text-gray-400 dark:text-gray-500"
@@ -35,7 +35,7 @@
                   </time>
                 {{ end }}
               </span>
-              <span class="ml-3">&rarr;</span>
+              <span class="ml-3 article-pagination-direction">&rarr;</span>
             </a>
           {{ end }}
         </span>

layouts/partials/badge.html

@@ -1,5 +1,5 @@
 <span
-  class="ml-1 px-1 py-[2px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 inline-block align-middle mb-1"
+  class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600 inline-block align-middle mb-1"
 >
   {{ . }}
 </span>

layouts/partials/breadcrumbs.html

@@ -1,4 +1,4 @@
-<ol class="text-sm text-gray-400 dark:text-gray-600">
+<ol class="text-sm text-gray-400 dark:text-gray-500">
   {{ template "crumb" (dict "p1" . "p2" .) }}
 </ol>
 {{ define "crumb" }}
@@ -8,6 +8,8 @@
     {{ template "crumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
   {{ end }}
   <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
-    <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a><span class="px-1 text-primary-500">/</span>
+    <a class="hover:underline underline-gray-300 dark:underline-gray-600" href="{{ .p1.Permalink }}"
+      >{{ .p1.Title }}</a
+    ><span class="px-1 text-primary-500">/</span>
   </li>
 {{ end }}

layouts/partials/footer.html

@@ -13,9 +13,19 @@
   {{ if .Site.Params.attribution | default true }}
     <p class="text-xs text-gray-300 dark:text-gray-600">
       {{ i18n "footer.powered_by" }}
-      <a class="hover:underline" href="https://gohugo.io/" target="_blank">Hugo</a>
+      <a
+        class="hover:underline underline-primary-300 hover:text-primary-400"
+        href="https://gohugo.io/"
+        target="_blank"
+        >Hugo</a
+      >
       &amp;
-      <a class="hover:underline" href="https://git.io/hugo-congo" target="_blank">Congo</a>
+      <a
+        class="hover:underline underline-primary-300 hover:text-primary-400"
+        href="https://git.io/hugo-congo"
+        target="_blank"
+        >Congo</a
+      >
     </p>
   {{ end }}
   {{/* Extend footer - eg. for extra scripts, etc. */}}

layouts/partials/header.html

@@ -1,12 +1,22 @@
 <header class="flex justify-between py-6 font-semibold sm:py-10">
   <div>
-    <a class="hover:underline" rel="me" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+    <a
+      class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small"
+      rel="me"
+      href="{{ .Site.BaseURL }}"
+      >{{ .Site.Title }}</a
+    >
   </div>
   <nav>
     <ul class="flex flex-col list-none sm:flex-row">
       {{ range .Site.Menus.main }}
         <li class="text-right sm:mr-7 sm:last:mr-0">
-          <a class="hover:underline" href="{{ .URL | absURL }}" title="{{ .Title }}">{{ .Name }}</a>
+          <a
+            class="hover:underline underline-primary-500 underline-thickness-bold underline-offset-small"
+            href="{{ .URL | absURL }}"
+            title="{{ .Title }}"
+            >{{ .Name }}</a
+          >
         </li>
       {{ end }}
     </ul>

layouts/partials/section-header.html

@@ -0,0 +1,9 @@
+<header>
+  {{ if .Site.Params.list.showBreadcrumbs | default false }}
+    {{ partial "breadcrumbs.html" . }}
+  {{ end }}
+  <section class="prose dark:prose-light">
+    <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
+    <section>{{ .Content }}</section>
+  </section>
+</header>

layouts/shortcodes/button.html

@@ -1,7 +1,8 @@
-<a
-  class="px-4 py-2 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+<button
+  class="px-4 py-1 !text-white !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
   {{ with .Get "href" }}href="{{ . }}"{{ end }}
   {{ with .Get "target" }}target="{{ . }}"{{ end }}
   role="button"
-  >{{ .Inner }}
-</a>
+>
+  {{ .Inner }}
+</button>

tailwind.config.js

@@ -19,6 +19,12 @@ module.exports = {
       primary: colors.violet,
       secondary: colors.fuchsia,
     },
+    underlineOffset: {
+      small: "2px",
+    },
+    underlineThickness: {
+      bold: "2px",
+    },
     extend: {
       typography: (theme) => ({
         DEFAULT: {
@@ -27,13 +33,18 @@ module.exports = {
               a: {
                 color: theme("colors.primary.700"),
                 textDecoration: "underline",
+                textDecorationColor: theme("colors.primary.300"),
                 fontWeight: "500",
                 "&:hover": {
                   backgroundColor: theme("colors.primary.600"),
+                  borderRadius: "0.09rem",
                   color: theme("colors.white"),
                   textDecoration: "none",
                 },
               },
+              blockquote: {
+                borderLeftColor: theme("colors.primary.200"),
+              },
               h2: {
                 position: "relative",
               },
@@ -73,6 +84,7 @@ module.exports = {
               color: theme("colors.gray.400"),
               a: {
                 color: theme("colors.primary.400"),
+                textDecorationColor: theme("colors.gray.500"),
               },
               strong: {
                 color: theme("colors.white"),
@@ -88,7 +100,7 @@ module.exports = {
               },
               blockquote: {
                 color: theme("colors.gray.200"),
-                borderLeftColor: theme("colors.gray.600"),
+                borderLeftColor: theme("colors.primary.900"),
               },
               h1: {
                 color: theme("colors.white"),