💄 Style updates to enhance design consistency

2021-08-18 12:54:18 +10:00 · 2021-08-18 12:54:18 +10:00 · 7030022620
parent 7f59d04d39
commit 7030022620
20 changed files with 126 additions and 72 deletions
--- a/CHANGELOG.md
+++ b/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

--- a/assets/css/main.css
+++ b/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 {
--- a/exampleSite/content/_index.md
+++ b/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.
--- a/exampleSite/layouts/partials/home/custom.html
+++ b/exampleSite/layouts/partials/home/custom.html
@ -1,38 +1,27 @@
-<script type="text/javascript">
-  function switchLayout() {
-    var pageDiv = document.getElementById("page");
-    var profileDiv = document.getElementById("profile");
-    var layoutSpan = document.getElementById("layout");
-    if (pageDiv.style.display === "none") {
-      pageDiv.style.display = "block";
-      profileDiv.style.display = "none";
-      layoutSpan.innerHTML = "page";
-    } else {
-      pageDiv.style.display = "none";
-      profileDiv.style.display = "block";
-      layoutSpan.innerHTML = "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">
+<div id="profile" class="hidden">
  {{ partial "partials/home/profile.html" . }}
 </div>
+
+<script type="text/javascript">
+  function switchLayout() {
+    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";
+      layoutCode.forEach(function (el) {
+        el.innerText = "page";
+      });
+    } else {
+      pageDiv.style.display = "none";
+      profileDiv.style.display = "block";
+      layoutCode.forEach(function (el) {
+        el.innerText = "profile";
+      });
+    }
+  }
+</script>
--- a/layouts/_default/list.html
+++ b/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 }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -8,11 +8,7 @@
      <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>
--- a/layouts/_default/taxonomy.html
+++ b/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 }}
--- a/layouts/_default/term.html
+++ b/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>
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@ -11,7 +11,7 @@
        >&#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" }}
--- a/layouts/partials/article-meta.html
+++ b/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" }}">
--- a/layouts/partials/article-pagination.html
+++ b/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>
--- a/layouts/partials/badge.html
+++ b/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>
--- a/layouts/partials/breadcrumbs.html
+++ b/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 }}
--- a/layouts/partials/footer.html
+++ b/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. */}}
--- a/layouts/partials/header.html
+++ b/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>
--- a/layouts/partials/section-header.html
+++ b/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>
--- a/layouts/partials/section-heading.html
+++ b/layouts/partials/section-heading.html
@ -1,7 +0,0 @@
-{{ 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>
--- a/layouts/shortcodes/button.html
+++ b/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>
--- a/static/css/main.css
+++ b/static/css/main.css
--- a/tailwind.config.js
+++ b/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"),