dhorn/Protocol-oral-history-project
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

adds dark mode

Browse Source
This commit is contained in:
Drew
2025-04-26 14:45:42 -06:00
parent e0546c0e2e
commit bd702f8f51
11 changed files with 87 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/article.css
View File

@ -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;
}

12
assets/css/components/wompum.css
View File

@ -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,

32
assets/css/main.css
View File

@ -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;
}

5
assets/css/styles.css
View File

@ -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";

19
assets/js/darkmode.js Normal file
View File

@ -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";
}

2
layouts/_default/single.html
View File

@ -4,7 +4,7 @@
<div class="wompum-grid" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
</header>
<div class="prose lg:prose-xl p-4 mx-auto mt-8">
<div class="prose lg:prose-xl dark:prose-invert p-4 mx-auto mt-8">
<p class="font-bold text-6xl">{{ .Title }}</p>
{{ .Content }}

2
layouts/articles/single.html
View File

@ -19,7 +19,7 @@
{{ end }}
<div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>
</aside>
<div class="prose lg:prose-xl lg:w-2/3 p-4 mx-auto md:mx-0">
<div class="prose lg:prose-xl dark:prose-invert lg:w-2/3 p-4 mx-auto md:mx-0">
<p class="font-bold text-4xl article-title article-title--single">{{ partial "article-title" . }}</p>
{{ .Content }}
</div>

6
layouts/partials/article-list.html
View File

@ -7,16 +7,16 @@
<li class="group flex md:flex-row flex-col md:gap-4 gap-2 md:items-center">
<div class="flex-1 min-w-0 flex gap-2 items-center h-full">
<a class="wompum-container h-full aspect-7/2 md:aspect-auto" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
<time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
<time class="text-gray-800 dark:text-sand-500 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
<p>{{ $page.Date.Format "Jan" }}</p>
<p>{{ $page.Date.Format "02" }}</p>
<p>{{ $page.Date.Format "2006" }}</p>
</time>
</div>
<div class="flex flex-col gap-2 md:w-3/5 flex-shrink-0 md:py-8">
<a class="article-title article-title--list text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
<a class="article-title article-title--list" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
{{ if $page.Params.location }}
<p class="text-gray-800 italic">{{ $page.Params.location }}</p>
<p class="light:text-gray-800 dark:text-sand-100 italic">{{ $page.Params.location }}</p>
{{ end }}
<p class="max-w-prose">{{ $page.Params.summary }}</p>
{{ partial "topics.html" $page }}

2
layouts/partials/footer.html
View File

@ -1,4 +1,4 @@
<footer class="bg-sand-500 text-amber-900 mt-16">
<footer class="bg-sand-500 text-amber-900 mt-16 dark:bg-gray-800 dark:text-sand-500">
<div class="wompum-container wompum-container--no-gap h-1">
<div class="wompum-grid" data-text="{{ .Site.Title }}" data-columns="7" data-rows="1">
</div>

19
layouts/partials/header.html
View File

@ -5,13 +5,30 @@
<a href="/">{{ .Site.Title }}</a>
</h1>
<nav class="font-iosevka">
<ul class="flex gap-4">
<ul class="flex flex-col flex-wrap relative sm:flex-row sm:gap-4 justify-center pr-8 sm:pr-0">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li class="sm:relative absolute -right-1 top-1/2 sm:right-[unset] sm:top-[unset] transform -translate-y-1/2 sm:transform-none sm:translate-y-0">
<button id="darkmode-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode"
class="flex group p-1 relative -mt-1 cursor-pointer hover:bg-gray-950 hover:text-gray-100 dark:hover:bg-sand-100 dark:hover:text-gray-900 rounded-full">
<!-- Lightbulb SVG icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 dark:inline hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z">
</path>
</svg>
<p class="tooltip transition-opacity duration-500 absolute mr-5 -bottom-5 right-0 w-sm text-sm text-right hidden group-hover:block opacity-0 group-hover:opacity-100 group-hover:text-gray-600 dark:group-hover:text-gray-400">Turn on <span id="darkmode-label"></span> Mode</p>
</button>
</li>
</ul>
</nav>
</div>

2
layouts/partials/wompum-demo.html
View File

@ -6,7 +6,7 @@
<div class="mb-8">
<label class="block mb-2">Enter text to generate a grid:</label>
<input type="text"
class="w-full p-2 border rounded font-iosevka bg-sand-100"
class="w-full p-2 border rounded font-iosevka bg-sand-100 dark:bg-gray-800"
placeholder="Type something..."
value="{{ .Site.Title}}"
oninput="updateWompumDemoGrid(this.value)">