jan-leila/volpe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: supported dark mode

Browse source
This commit is contained in:
Leyla Becker 2026-02-19 11:44:11 -06:00
parent 46c631ba65
commit 3701dbe3db
9 changed files with 314 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

113
_includes/base.njk
View file

@ -8,36 +8,105 @@
<meta name="description" content="{{ description }}">
{% endif %}
{# Critical CSS inlined for faster initial render #}
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--text-color: #333;
--background-color: #fff;
--border-color: #ddd;
--code-background: #f5f5f5;
/* Text hierarchy */
--color-text-primary: #333;
--color-text-heading: #2c3e50;
--color-text-muted: #666;
--color-text-link: #3498db;
/* Backgrounds */
--color-bg-page: #fff;
--color-bg-surface: #f5f5f5;
--color-bg-warning: #fff3cd;
/* Borders & Dividers */
--color-border-default: #ddd;
--color-border-warning: #ffc107;
--color-border-focus: #3498db;
/* Feedback */
--color-warning-text: #856404;
/* Effects */
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
/* Spacing */
--space-section: 2rem;
--space-block: 1.5rem;
--space-element: 1rem;
--space-tight: 0.5rem;
--space-micro: 0.25rem;
/* Typography - Sizes */
--font-size-page-title: 2rem;
--font-size-section-title: 1.5rem;
--font-size-subsection-title: 1.25rem;
--font-size-nav: 1.2rem;
--font-size-body: 1rem;
--font-size-small: 0.9rem;
/* Typography - Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* Typography - Line heights */
--line-height-body: 1.6;
/* Border Radius */
--radius-card: 8px;
--radius-block: 5px;
--radius-inline: 3px;
/* Legend/Diagram Colors */
--color-legend-1: #db2777;
--color-legend-2: #2563eb;
--color-legend-3: #0891b2;
--color-legend-4: #16a34a;
--color-legend-5: #dc2626;
--color-legend-6: #9333ea;
--color-legend-7: #ca8a04;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text-primary: #e0e0e0;
--color-text-heading: #f0f0f0;
--color-text-muted: #a0a0a0;
--color-text-link: #5dade2;
--color-bg-page: #1a1a1a;
--color-bg-surface: #2d2d2d;
--color-bg-warning: #3d3520;
--color-border-default: #404040;
--color-border-warning: #ffc107;
--color-border-focus: #5dade2;
--color-warning-text: #ffd966;
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
--color-legend-1: #f472b6;
--color-legend-2: #60a5fa;
--color-legend-3: #22d3ee;
--color-legend-4: #4ade80;
--color-legend-5: #f87171;
--color-legend-6: #c084fc;
--color-legend-7: #fbbf24;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
line-height: var(--line-height-body);
color: var(--color-text-primary);
background-color: var(--color-bg-page);
max-width: 800px;
margin: 0 auto;
padding: 2rem;
padding: var(--space-section);
}
header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
header nav a { color: var(--primary-color); text-decoration: none; font-weight: bold; font-size: 1.2rem; }
header { margin-bottom: var(--space-section); padding-bottom: var(--space-element); border-bottom: 1px solid var(--color-border-default); }
header nav a { color: var(--color-text-heading); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-nav); }
main { min-height: calc(100vh - 200px); }
h1, h2, h3 { color: var(--primary-color); margin: 1.5rem 0 1rem; }
h1 { font-size: 2rem; }
footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); text-align: center; color: #666; font-size: 0.9rem; }
h1, h2, h3 { color: var(--color-text-heading); margin: 1.5rem 0 1rem; }
h1 { font-size: var(--font-size-page-title); }
footer { margin-top: var(--space-section); padding-top: var(--space-element); border-top: 1px solid var(--color-border-default); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-small); }
footer > div {
display: flex;
justify-content: space-evenly;
}
footer a { color: var(--color-text-link); }
.icon-invertible { transition: filter 0.2s; }
@media (prefers-color-scheme: dark) {
.icon-invertible { filter: invert(1) brightness(0.9); }
}
</style>
{# Preload full stylesheet with cache-busted filename #}
@ -72,13 +141,13 @@
<!-- Social Things -->
<span>
<a href="https://matrix.to/#/@jan-leila:cyberia.club" title="Matrix" style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
<img src="{{ 'matrix-icon.svg' | fileHash('assets') }}" alt="Matrix Logo" style="width: 100%; height: 100%;">
<img src="{{ 'matrix-icon-dark.svg' | fileHash('assets') }}" alt="Matrix Logo" class="icon-invertible" style="width: 100%; height: 100%;">
</a>
<a href="https://git.jan-leila.com/jan-leila" title="Forgejo" style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
<img src="{{ 'forgejo-icon.svg' | fileHash('assets') }}" alt="Forgejo Logo" style="width: 100%; height: 100%;">
<img src="{{ 'forgejo-icon-dark.svg' | fileHash('assets') }}" alt="Forgejo Logo" class="icon-invertible" style="width: 100%; height: 100%;">
</a>
<a href="https://mspsocial.net/@jan_leila" title="Mastodon" style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
<img src="{{ 'mastodon-icon.svg' | fileHash('assets') }}" alt="Mastodon Logo" style="width: 100%; height: 100%;">
<img src="{{ 'mastodon-icon-dark.svg' | fileHash('assets') }}" alt="Mastodon Logo" class="icon-invertible" style="width: 100%; height: 100%;">
</a>
</span>
<span>
@ -91,19 +160,19 @@
<div>
<a href="https://git.jan-leila.com/jan-leila/volpe" style="display: flex;">
<span style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
<img src="{{ 'git-icon.svg' | fileHash('assets') }}" alt="Git Logo" style="width: 100%; height: 100%;">
<img src="{{ 'git-icon-dark.svg' | fileHash('assets') }}" alt="Git Logo" class="icon-invertible" style="width: 100%; height: 100%;">
</span>
source
</a>
<a href="/feed.xml" style="display: flex;">
<span style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
<img src="{{ 'rss-icon.svg' | fileHash('assets') }}" alt="Tor Onion Logo" style="width: 100%; height: 100%;">
<img src="{{ 'rss-icon-dark.svg' | fileHash('assets') }}" alt="RSS Logo" class="icon-invertible" style="width: 100%; height: 100%;">
</span>
rss
</a>
<a href="http://2ggpzgonqsll5gi56u47aywu4qyl37eiu5jjrq7ma43z77ekkwuqxmid.onion" style="display: flex;">
<span style="display: inline-block; width: 24px; height: 24px; margin: 0 8px;">
<img src="{{ 'onion-icon.svg' | fileHash('assets') }}" alt="Tor Onion Logo" style="width: 100%; height: 100%;">
<img src="{{ 'onion-icon-dark.svg' | fileHash('assets') }}" alt="Tor Onion Logo" class="icon-invertible" style="width: 100%; height: 100%;">
</span>
onion mirror
</a>