neuwirth/levineuwirth.org
neuwirth
/
levineuwirth.org
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

yum cappuccino yay!

This commit is contained in:
Levi Neuwirth 2026-05-03 21:16:58 -04:00
parent 6286c82389
commit 977c1cecbb
11 changed files with 82 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/css/annotations.css
View File

@ -30,12 +30,18 @@ mark.user-annotation:hover { filter: brightness(0.80); }
[data-theme="dark"] mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); }
[data-theme="dark"] mark.user-annotation.user-annotation--rose { background-color: rgba(200, 116, 116, 0.42); }
/* Cappuccino — dark warm bg, so highlights need dark-mode-level opacity */
[data-theme="cappuccino"] mark.user-annotation.user-annotation--amber { background-color: rgba(245, 180, 70, 0.42); }
[data-theme="cappuccino"] mark.user-annotation.user-annotation--sage { background-color: rgba(130, 175, 140, 0.42); }
[data-theme="cappuccino"] mark.user-annotation.user-annotation--steel { background-color: rgba(140, 170, 200, 0.42); }
[data-theme="cappuccino"] mark.user-annotation.user-annotation--rose { background-color: rgba(220, 140, 140, 0.42); }
/* System dark mode fallback (for prefers-color-scheme without explicit data-theme) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) mark.user-annotation.user-annotation--amber { background-color: rgba(245, 158, 11, 0.40); }
:root:not([data-theme="light"]) mark.user-annotation.user-annotation--sage { background-color: rgba(107, 158, 120, 0.42); }
:root:not([data-theme="light"]) mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); }
:root:not([data-theme="light"]) mark.user-annotation.user-annotation--rose { background-color: rgba(200, 116, 116, 0.42); }
:root:not([data-theme]) mark.user-annotation.user-annotation--amber { background-color: rgba(245, 158, 11, 0.40); }
:root:not([data-theme]) mark.user-annotation.user-annotation--sage { background-color: rgba(107, 158, 120, 0.42); }
:root:not([data-theme]) mark.user-annotation.user-annotation--steel { background-color: rgba(112, 150, 184, 0.42); }
:root:not([data-theme]) mark.user-annotation.user-annotation--rose { background-color: rgba(200, 116, 116, 0.42); }
}
/* ============================================================

35
static/css/base.css
View File

@ -196,9 +196,42 @@
--hm-4: #d4d0c8;
}
/* ============================================================
CAPPUCCINO (warm milky-coffee — opt-in only, no system trigger)
============================================================ */
[data-theme="cappuccino"] {
--bg: #553a28;
--bg-nav: #503626;
--nav-logo-fg: #ead0a0;
--bg-offset: #4a3324;
--text: #ead0a0; /* warm microfoam — golden cream */
--text-muted: #d0b888;
--text-faint: #b09575;
--border: #7a5d44;
--border-muted: #6a4f38;
--link: #ead0a0;
--link-underline: #b09575;
--link-hover: #f5e6c0;
--link-hover-underline: #f5e6c0;
--link-visited: #d0b888;
--selection-bg: #ead0a0;
--selection-text: #3a2418;
--bg-subtle: var(--bg-offset);
--hm-0: #4a3324;
--hm-1: #6a4f38;
--hm-2: #8d6c4e;
--hm-3: #b09575;
--hm-4: #ead0a0;
}
/* System dark mode fallback */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme]) {
--bg: #121212;
--bg-nav: #181818;
--nav-logo-fg: #d4d0c8;

8
static/css/library.css
View File

@ -22,8 +22,14 @@
--library-intro-ink: #c8beac;
}
[data-theme="cappuccino"] {
--library-accent: #d0b888; /* foam — matches text-muted */
--library-accent-muted: #957a5a;
--library-intro-ink: #dcc296;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme]) {
--library-accent: #b5a890;
--library-accent-muted: #897f6e;
--library-intro-ink: #c8beac;

8
static/css/links.css
View File

@ -22,8 +22,14 @@
--links-intro-ink: #bcc3d6;
}
[data-theme="cappuccino"] {
--links-accent: #c0c8e0;
--links-accent-muted: #8e95ad;
--links-intro-ink: #cdd4e8;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme]) {
--links-accent: #a9b3cc;
--links-accent-muted: #7d8499;
--links-intro-ink: #bcc3d6;

3
static/css/print.css
View File

@ -10,7 +10,8 @@
reaching for hardcoded #fff/#000 again.
---------------------------------------------------------------- */
:root,
[data-theme="dark"] {
[data-theme="dark"],
[data-theme="cappuccino"] {
--bg: #ffffff;
--bg-offset: #f5f5f5;
--bg-subtle: #f9f9f9;

7
static/css/reading.css
View File

@ -35,8 +35,13 @@ body.reading-mode {
background-color: var(--bg);
}
[data-theme="cappuccino"] body.reading-mode {
--bg: #634432;
background-color: var(--bg);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) body.reading-mode {
:root:not([data-theme]) body.reading-mode {
--bg: #1c1917;
background-color: var(--bg);
}

11
static/css/typography.css
View File

@ -328,8 +328,17 @@ sub { font-variant-position: sub; line-height: 1; }
rgba(80, 110, 160, 0) 100%
);
}
[data-theme="cappuccino"] #markdownBody mark:not(.user-annotation) {
background-image: linear-gradient(
104deg,
rgba(245, 215, 130, 0) 0%,
rgba(245, 215, 130, 0.45) 2%,
rgba(230, 195, 110, 0.55) 98%,
rgba(230, 195, 110, 0) 100%
);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #markdownBody mark:not(.user-annotation) {
:root:not([data-theme]) #markdownBody mark:not(.user-annotation) {
background-image: linear-gradient(
104deg,
rgba(100, 130, 180, 0) 0%,

5
static/js/settings.js
View File

@ -90,8 +90,9 @@
------------------------------------------------------------------ */
function handle(action) {
if (action === 'theme-light') setTheme('light');
else if (action === 'theme-dark') setTheme('dark');
if (action === 'theme-light') setTheme('light');
else if (action === 'theme-dark') setTheme('dark');
else if (action === 'theme-cappuccino') setTheme('cappuccino');
else if (action === 'text-smaller') shiftSize(-1);
else if (action === 'text-larger') shiftSize(+1);
else if (action === 'focus-mode') toggleDataAttr('focus-mode', 'data-focus-mode');

2
static/js/theme.js
View File

@ -14,7 +14,7 @@
/* Theme */
var storedTheme = safeGet('theme');
if (storedTheme === 'dark' || storedTheme === 'light') {
if (storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'cappuccino') {
document.documentElement.setAttribute('data-theme', storedTheme);
}

1
templates/partials/nav.html
View File

@ -25,6 +25,7 @@
<div class="settings-row">
<button type="button" class="settings-btn" data-action="theme-light">Light</button>
<button type="button" class="settings-btn" data-action="theme-dark">Dark</button>
<button type="button" class="settings-btn" data-action="theme-cappuccino">Cappuccino</button>
</div>
</div>
<div class="settings-section">

1
templates/score-reader.html
View File

@ -18,6 +18,7 @@
<div class="settings-row">
<button class="settings-btn" data-action="theme-light">Light</button>
<button class="settings-btn" data-action="theme-dark">Dark</button>
<button class="settings-btn" data-action="theme-cappuccino">Cappuccino</button>
</div>
</div>
</div>