feat: initial support for custom accent colors

.prettierrc

@@ -1,40 +1,40 @@
 {
-    "plugins": [
-        "prettier-plugin-sh",
-        "prettier-plugin-pkg",
-        "prettier-plugin-go-template",
-        "prettier-plugin-css-order",
-        "prettier-plugin-toml",
-        "prettier-plugin-tailwindcss"
-    ],
-    "overrides": [
-        {
-            "files": ["*.html"],
-            "options": {
-                "parser": "go-template",
-                "goTemplateBracketSpacing": true,
-                "bracketSameLine": true,
-                "embeddedLanguageFormatting": "off",
-                "htmlWhitespaceSensitivity": "strict"
-            }
-        },
-        {
-            "files": ["*.md"],
-            "options": {
-                "embeddedLanguageFormatting": "off"
-            }
-        },
-        {
-            "files": ["*.toml"],
-            "options": {
-                "indentTables": true,
-                "indentEntries": true,
-                "alignEntries": true
-            }
-        }
-    ],
-    "tailwindStylesheet": "./assets/css/main.css",
-    "tailwindConfig": "./tailwind.config.js",
-    "tailwindFunctions": ["tw"],
-    "cssDeclarationSorterOrder": "smacss"
+  "plugins": [
+    "prettier-plugin-sh",
+    "prettier-plugin-pkg",
+    "prettier-plugin-go-template",
+    "prettier-plugin-css-order",
+    "prettier-plugin-toml",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "go-template",
+        "goTemplateBracketSpacing": true,
+        "bracketSameLine": true,
+        "embeddedLanguageFormatting": "off",
+        "htmlWhitespaceSensitivity": "css"
+      }
+    },
+    {
+      "files": ["*.md"],
+      "options": {
+        "embeddedLanguageFormatting": "off"
+      }
+    },
+    {
+      "files": ["*.toml"],
+      "options": {
+        "indentTables": true,
+        "indentEntries": true,
+        "alignEntries": true
+      }
+    }
+  ],
+  "tailwindStylesheet": "./assets/css/*.css",
+  "tailwindConfig": "./tailwind.config.js",
+  "tailwindFunctions": ["tw"],
+  "cssDeclarationSorterOrder": "smacss"
 }

assets/css/main.css

@@ -1,6 +1,10 @@
 @import "tailwindcss";
 @source "hugo_stats.json";
 
+:root {
+  --accent-color: var(--color-amber-500);
+}
+
 @layer components {
   html {
     width: 100%;
@@ -49,15 +53,25 @@
   }
 
   p {
-    @apply block text-sm/tight font-medium;
+    @apply block text-base/normal font-medium;
     margin-block: unset;
     @apply py-2;
   }
 }
 
+header,
+main {
+  border-color: var(--accent-color);
+}
+
 a :is(h1, h2, h3, h4, h5, h6) {
   @apply no-underline;
 }
+
+.anchor {
+  @apply no-underline;
+}
+
 a .anchor-icon {
   visibility: hidden;
 }
@@ -72,6 +86,7 @@ a:hover .anchor-icon {
 
 code {
   display: inline-block;
+  margin: 0.125em;
   padding: 0.0625rem 0.25rem;
   font-size: 85%;
   @apply rounded-sm no-underline;
@@ -123,7 +138,11 @@ nav label {
 }
 
 .post-preview > span > p {
-  @apply mt-5;
+  @apply mt-2;
+}
+
+.post-metadata p {
+  text-decoration-color: var(--accent-color);
 }
 
 .main :is(ul, ol) {
@@ -260,10 +279,9 @@ article h2 {
 }
 
 .tags {
-  @apply ml-2 p-1 font-mono;
+  @apply ml-2 p-1;
 }
 
-p + p,
 p + a + h1,
 p + a + h2,
 p + a + h3,
@@ -296,35 +314,35 @@ h2 + h3 {
 }
 
 .alert-note {
-  @apply bg-blue-100 text-blue-700;
+  @apply bg-blue-50 text-blue-700;
   code {
     @apply border-blue-700;
   }
 }
 
 .alert-tip {
-  @apply bg-orange-100 text-orange-700;
+  @apply bg-amber-50 text-amber-700;
   code {
-    @apply border-orange-700;
+    @apply border-amber-700;
   }
 }
 
 .alert-important {
-  @apply bg-lime-100 text-lime-700;
+  @apply bg-lime-50 text-lime-700;
   code {
     @apply border-lime-700;
   }
 }
 
 .alert-caution {
-  @apply bg-yellow-100 text-yellow-700;
+  @apply bg-yellow-50 text-yellow-700;
   code {
     @apply border-yellow-700;
   }
 }
 
 .alert-warning {
-  @apply bg-red-100 text-red-700;
+  @apply bg-red-50 text-red-700;
   code {
     @apply border-red-700;
   }
@@ -357,6 +375,7 @@ hr {
   }
   code {
     @apply border-1;
+    margin: 0;
   }
 }
 
@@ -381,53 +400,61 @@ Dark Mode
 
 @media (prefers-color-scheme: dark) {
   code {
-    @apply border-neutral-600 font-mono text-amber-500;
+    border-color: var(--accent-color);
+    color: var(--accent-color);
   }
 
   img {
     @apply brightness-[.9] contrast-[1.1];
   }
 
   tr {
-    @apply border-t-1 border-neutral-600;
+    @apply border-t-1;
+    border-color: var(--accent-color);
   }
 
   th {
-    @apply border-1 border-neutral-600;
+    @apply border-1;
+    border-color: var(--accent-color);
   }
 
   td {
-    @apply border-1 border-neutral-600;
+    @apply border-1;
+    border-color: var(--accent-color);
     code {
-      @apply border-1 border-neutral-600;
+      @apply border-1;
     }
   }
 
   li,
   p,
   blockquote {
     code {
-      @apply border-1 border-neutral-600;
+      @apply border-1;
+      border-color: var(--accent-color);
     }
   }
 
   .labeled-highlight__label {
     translate: 0% -50%;
     code {
-      @apply border-neutral-600 bg-zinc-800;
+      /* @apply border-neutral-600 bg-zinc-800; */
+      @apply bg-zinc-800;
+      border-color: var(--accent-color);
     }
   }
 
   .highlight {
-    @apply border-1 rounded-sm border-neutral-600;
+    @apply border-1 rounded-sm;
+    border-color: var(--accent-color);
   }
 
   .tags {
     @apply bg-zinc-800;
   }
 
   :is(.read-more, .pager) a {
-    @apply text-amber-500;
+    color: var(--accent-color);
   }
 
   nav a {
@@ -444,22 +471,29 @@ Light Mode
 */
 
 @media (prefers-color-scheme: light) {
+  :root {
+    --accent-color: var(--color-orange-700);
+  }
   code {
-    @apply font-mono text-orange-700;
+    color: var(--accent-color);
   }
 
   tr {
-    @apply border-t-1 border-neutral-600;
+    @apply border-t-1;
+    border-color: var(--accent-color);
   }
 
   th {
-    @apply border-1 border-neutral-600;
+    @apply border-1;
+    border-color: var(--accent-color);
   }
 
   td {
-    @apply border-1 border-neutral-600;
+    @apply border-1;
+    border-color: var(--accent-color);
     code {
-      @apply border-1 border-orange-700;
+      @apply border-1;
+      border-color: var(--accent-color);
     }
   }
 
@@ -471,14 +505,16 @@ Light Mode
   p,
   blockquote {
     code {
-      @apply border-1 border-orange-700;
+      @apply border-1;
+      border-color: var(--accent-color);
     }
   }
 
   .labeled-highlight__label {
     translate: 0;
     code {
-      @apply border-orange-500 bg-neutral-100;
+      @apply bg-neutral-100;
+      border-color: var(--accent-color);
     }
   }
 
@@ -491,6 +527,6 @@ Light Mode
   }
 
   :is(.read-more, .pager) a {
-    @apply text-orange-700;
+    color: var(--accent-color);
   }
 }

layouts/404.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <h2>{{ ":question: HTTP 404 Page not found :question:" | .RenderString }}</h2>
-  <p>{{ "The page you requested cannot be found. Don't know what you're looking for but it's not here." | .RenderString }}</p>
-  <p><a href="{{ .Site.Home.RelPermalink }}">Return to the home page.</a></p>
+<h2>{{ ":question: HTTP 404 Page not found :question:" | .RenderString }}</h2>
+<p>{{ "The page you requested cannot be found. Don't know what you're looking for but it's not here." | .RenderString }}</p>
+<p><a href="{{ .Site.Home.RelPermalink }}">Return to the home page.</a></p>
 {{ end }}

layouts/_default/_markup/render-blockquote-alert.html

@@ -1,25 +1,26 @@
 {{- $svgs := dict
-"caution" "fas fa-circle-exclamation"
-"important" "fas fa-star"
-"note" "fas fa-note-sticky"
-"tip" "fas fa-lightbulb"
-"warning" "fas fa-triangle-exclamation"
+    "caution" "fas fa-circle-exclamation"
+    "important" "fas fa-star"
+    "note" "fas fa-note-sticky"
+    "tip" "fas fa-lightbulb"
+    "warning" "fas fa-triangle-exclamation"
 }}
+
 {{- if eq .Type "alert" }}
-    <blockquote class="alert alert-{{- .AlertType }} flex flex-col border-l-8 border-2 rounded-sm">
-        <div class="inline-flex items-center">
-            <span class="fa-stack fa-lg m-2">
-                <i class="fas fa-square fa-stack-2x"></i>
-                <i class="{{- index $svgs .AlertType }} fa-stack-1x fa-inverse"></i>
-            </span>
-            {{- with .AlertTitle }}
-                <h3>{{- . }}</h3>
-            {{- else }}
-                <h3>{{- or (i18n .AlertType) (title .AlertType) }}</h3>
-            {{- end }}
-        </div>
-        <div class="flex flex-col m-0 p-2">
-            {{- .Text | emojify }}
-        </div>
-    </blockquote>
+<blockquote class="alert alert-{{ .AlertType }} flex flex-col border-l-8 border-2 rounded-sm">
+    <div class="tight inline-flex items-center">
+        <span class="fa-stack fa-lg m-2">
+            <i class="fas fa-square fa-stack-2x"></i>
+            <i class="{{ index $svgs .AlertType }} fa-stack-1x fa-inverse"></i>
+        </span>
+        {{- with .AlertTitle }}
+            <h3 class="tight">{{ . }}</h3>
+        {{- else }}
+            <h3 class="tight">{{ or (i18n .AlertType) (title .AlertType) }}</h3>
+        {{- end }}
+    </div>
+    <div class="tight flex flex-col m-0 p-2">
+        {{ .Text | emojify }}
+    </div>
+</blockquote>
 {{- end }}

layouts/_default/_markup/render-heading.html

@@ -2,4 +2,5 @@
 <h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
   {{ .Text }}
   <i class="anchor-icon fas fa-link fa-2xs"></i>
-</h{{ .Level }}></a>
+</h{{ .Level }}>
+</a>