From bd702f8f51bb417cb7ee530cccd4a456a3bedd59 Mon Sep 17 00:00:00 2001 From: Drew Date: Sat, 26 Apr 2025 14:45:42 -0600 Subject: [PATCH] adds dark mode --- assets/css/article.css | 10 ++++++++-- assets/css/components/wompum.css | 12 ++++++++++- assets/css/main.css | 32 +++++++++++++++++++----------- assets/css/styles.css | 5 ++++- assets/js/darkmode.js | 19 ++++++++++++++++++ layouts/_default/single.html | 2 +- layouts/articles/single.html | 2 +- layouts/partials/article-list.html | 6 +++--- layouts/partials/footer.html | 2 +- layouts/partials/header.html | 19 +++++++++++++++++- layouts/partials/wompum-demo.html | 2 +- 11 files changed, 87 insertions(+), 24 deletions(-) create mode 100644 assets/js/darkmode.js diff --git a/assets/css/article.css b/assets/css/article.css index 3f36ffe..e688bf2 100644 --- a/assets/css/article.css +++ b/assets/css/article.css @@ -12,6 +12,10 @@ font-size: 1.5em; } +.article-title--list { + @apply text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900 + dark:text-sand-100 dark:group-hover:text-sand-500 dark:decoration-sand-900 dark:hover:decoration-sand-500; +} .article-title--list .article-title__narrator::after { content: ":"; } @@ -27,7 +31,8 @@ /* Narrator headshot */ .narrator__container { - @apply relative w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white; + @apply relative w-48 mb-2 mx-auto md:mx-0 rounded-full border-4 bg-white border-white + dark:bg-gray-950 dark:border-gray-950; } .narrator__frame { @@ -35,7 +40,8 @@ } .narrator__frame img { - @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center; + @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center + dark:bg-gray-950 dark:border-gray-950; aspect-ratio: 1; } diff --git a/assets/css/components/wompum.css b/assets/css/components/wompum.css index 4f62263..f98d490 100644 --- a/assets/css/components/wompum.css +++ b/assets/css/components/wompum.css @@ -28,9 +28,19 @@ } .wompum-cell { + @apply dark:opacity-70 brightness-100; width: 100%; height: 100%; - transition: background-color 0.3s ease; + transition: all 3s ease-in; +} + +.wompum-cell:hover { + @apply dark:opacity-100 brightness-125; + transition: all .3s ease; +} + +.wompum-cell[class*="900"]:hover { + @apply brightness-200; } .wompum-cell--narrator, diff --git a/assets/css/main.css b/assets/css/main.css index 5660e75..3865c9f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -3,49 +3,57 @@ body { } a:hover { - @apply text-pine-900; + @apply text-pine-900 dark:text-pine-100; } .tag { - @apply p-2 bg-sand-100 border border-transparent hover:border-sand-500 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100 no-underline; + @apply p-2 bg-sand-100 border border-transparent rounded-lg whitespace-nowrap no-underline + hover:border-sand-500 hover:text-gray-900 hover:opacity-100 + dark:bg-gray-900 dark:text-sand-100 dark:border-gray-800 dark:hover:text-sand-100 + transition-all duration-200 ease-in-out; + transition: border 2s ease-in; +} + +.tag:hover { + transition: border 0.1s ease-out; } .tag-cloud .tag:nth-child(10n+1):hover { - @apply border-blue-500; + @apply border-blue-500 dark:border-blue-900; } .tag-cloud .tag:nth-child(10n+2):hover { - @apply border-clay-500; + @apply border-clay-500 dark:border-clay-900; } .tag-cloud .tag:nth-child(10n+3):hover { - @apply border-cyan-500; + @apply border-cyan-500 dark:border-cyan-900; } .tag-cloud .tag:nth-child(10n+4):hover { - @apply border-gold-500; + @apply border-gold-500 dark:border-gold-900; } .tag-cloud .tag:nth-child(10n+5):hover { - @apply border-red-500; + @apply border-red-500 dark:border-red-900; } .tag-cloud .tag:nth-child(10n+6):hover { - @apply border-pine-500; + @apply border-pine-500 dark:border-pine-900; } .tag-cloud .tag:nth-child(10n+7):hover { - @apply border-pink-500; + @apply border-pink-500 dark:border-pink-900; } .tag-cloud .tag:nth-child(10n+8):hover { - @apply border-moss-500; + @apply border-moss-500 dark:border-moss-900; } .tag-cloud .tag:nth-child(10n+9):hover { - @apply border-rust-500; + @apply border-rust-500 dark:border-rust-900; } .tag-cloud .tag:nth-child(10n):hover { - @apply border-sand-500; + @apply border-sand-500 dark:border-sand-900; } \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index ec2dcd7..5557156 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,6 +1,9 @@ @import "tailwindcss"; @plugin "@tailwindcss/typography"; +/* allows for toggling dark mode */ +@custom-variant dark (&:where(.dark, .dark *)); + /* Add safelist for all color variations */ /* Wompum.js constructs class names dynamically and tailwind misses them */ @source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}"); @@ -41,7 +44,7 @@ } body { - @apply antialiased bg-sand-100/50; + @apply antialiased bg-sand-100/50 dark:bg-gray-950 dark:text-gray-200 transition-colors duration-200; } @import "components/wompum.css"; diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js new file mode 100644 index 0000000..4fcb045 --- /dev/null +++ b/assets/js/darkmode.js @@ -0,0 +1,19 @@ +// Set initial theme on page load +(function() { + const isDark = localStorage.theme === "dark" || + (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches); + document.documentElement.classList.toggle("dark", isDark); + + // Update label on load + const label = document.getElementById("darkmode-label"); + if (label) label.textContent = !isDark ? "Dark" : "Light"; +})(); + +// Toggle dark mode and update label/localStorage +function toggleDarkMode() { + const html = document.documentElement; + const isDark = html.classList.toggle("dark"); + localStorage.theme = isDark ? "dark" : "light"; + const label = document.getElementById("darkmode-label"); + if (label) label.textContent = !isDark ? "Dark" : "Light"; +} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index f9dd86b..f019ae0 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,7 +4,7 @@
-
+

{{ .Title }}

{{ .Content }} diff --git a/layouts/articles/single.html b/layouts/articles/single.html index 637eefe..acc0458 100644 --- a/layouts/articles/single.html +++ b/layouts/articles/single.html @@ -19,7 +19,7 @@ {{ end }} -
+

{{ partial "article-title" . }}

{{ .Content }}
diff --git a/layouts/partials/article-list.html b/layouts/partials/article-list.html index f19169d..ddee408 100644 --- a/layouts/partials/article-list.html +++ b/layouts/partials/article-list.html @@ -7,16 +7,16 @@
  • {{ partial "article-wompum.html" $page }} -
    - {{ partial "article-title" $page }} + {{ partial "article-title" $page }} {{ if $page.Params.location }} -

    {{ $page.Params.location }}

    +

    {{ $page.Params.location }}

    {{ end }}

    {{ $page.Params.summary }}

    {{ partial "topics.html" $page }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8ac2314..833ce34 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,4 +1,4 @@ -