pvrz/site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated the website with new features and improvements

Browse Source
This commit is contained in:
Christian
2026-02-12 17:28:25 -05:00
parent b26ebb6d6e
commit 36f7d0ed8b
5 changed files with 383 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
404.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404 · pvrz</title>
<meta name="description" content="Page not found." />
<meta name="robots" content="noindex, follow" />
<meta name="theme-color" content="#C96442" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,0..40,300&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="icon" type="image/x-icon" href="media/favicon.ico" />
<link rel="icon" type="image/png" href="media/favicon.png" />
<link rel="apple-touch-icon" href="media/favicon.png" />
<link rel="stylesheet" href="styles.css" />
</head>
<body class="inner-page not-found">
<div class="grain"></div>
<nav class="nav">
<a href="index.html" class="nav-logo">pvrz</a>
<div class="nav-actions">
<div class="nav-links">
<a href="links.html">Links</a>
</div>
<div class="theme-menu">
<button class="theme-toggle" type="button" aria-label="Theme: Auto" aria-expanded="false">
<i class="fa-solid fa-circle-half-stroke"></i>
<span class="theme-caret"><i class="fa-solid fa-chevron-down"></i></span>
</button>
<div class="theme-dropdown" role="menu" aria-label="Theme">
<button class="theme-option" type="button" data-theme-choice="auto" role="menuitem">Auto</button>
<button class="theme-option" type="button" data-theme-choice="light" role="menuitem">Light</button>
<button class="theme-option" type="button" data-theme-choice="dark" role="menuitem">Dark</button>
</div>
</div>
</div>
</nav>
<main class="notfound">
<div class="notfound-sheen"></div>
<div class="notfound-card">
<p class="notfound-label">Lost in the feed</p>
<h1 class="notfound-code">404</h1>
<p class="notfound-title">This page slipped the map.</p>
<p class="notfound-copy">Double-check the link, or head back to the main hub.</p>
<div class="notfound-actions">
<a href="index.html" class="btn btn-primary">
<i class="fa-solid fa-house"></i>
<span>Back home</span>
</a>
<a href="links.html" class="btn btn-secondary">
<i class="fa-solid fa-link"></i>
<span>Open links</span>
</a>
</div>
</div>
<div class="notfound-orbit" aria-hidden="true">
<span></span>
<span></span>
<span></span>
</div>
</main>
<script src="main.js"></script>
</body>
</html>

14
index.html
View File

@@ -34,9 +34,17 @@
<div class="nav-links"> <div class="nav-links">
<a href="links.html" class="active">Links</a> <a href="links.html" class="active">Links</a>
</div> </div>
<button class="theme-toggle" type="button" aria-label="Toggle dark mode" aria-pressed="false"> <div class="theme-menu">
<i class="fa-solid fa-moon"></i> <button class="theme-toggle" type="button" aria-label="Theme: Auto" aria-expanded="false">
</button> <i class="fa-solid fa-circle-half-stroke"></i>
<span class="theme-caret"><i class="fa-solid fa-chevron-down"></i></span>
</button>
<div class="theme-dropdown" role="menu" aria-label="Theme">
<button class="theme-option" type="button" data-theme-choice="auto" role="menuitem">Auto</button>
<button class="theme-option" type="button" data-theme-choice="light" role="menuitem">Light</button>
<button class="theme-option" type="button" data-theme-choice="dark" role="menuitem">Dark</button>
</div>
</div>
</div> </div>
</nav> </nav>

14
links.html
View File

@@ -34,9 +34,17 @@
<div class="nav-links"> <div class="nav-links">
<a href="links.html" class="active">Links</a> <a href="links.html" class="active">Links</a>
</div> </div>
<button class="theme-toggle" type="button" aria-label="Toggle dark mode" aria-pressed="false"> <div class="theme-menu">
<i class="fa-solid fa-moon"></i> <button class="theme-toggle" type="button" aria-label="Theme: Auto" aria-expanded="false">
</button> <i class="fa-solid fa-circle-half-stroke"></i>
<span class="theme-caret"><i class="fa-solid fa-chevron-down"></i></span>
</button>
<div class="theme-dropdown" role="menu" aria-label="Theme">
<button class="theme-option" type="button" data-theme-choice="auto" role="menuitem">Auto</button>
<button class="theme-option" type="button" data-theme-choice="light" role="menuitem">Light</button>
<button class="theme-option" type="button" data-theme-choice="dark" role="menuitem">Dark</button>
</div>
</div>
</div> </div>
</nav> </nav>

122
main.js
View File

@@ -13,37 +13,115 @@ if (wordmark) {
} }
const THEME_KEY = 'theme'; const THEME_KEY = 'theme';
const themeToggle = document.querySelector('.theme-toggle'); const themeMenu = document.querySelector('.theme-menu');
const themeToggle = themeMenu ? themeMenu.querySelector('.theme-toggle') : null;
const themeDropdown = themeMenu ? themeMenu.querySelector('.theme-dropdown') : null;
const themeOptions = themeMenu ? themeMenu.querySelectorAll('[data-theme-choice]') : [];
const themeQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
function setTheme(theme) { function getEffectiveTheme(mode) {
document.documentElement.setAttribute('data-theme', theme); if (mode === 'auto') {
if (themeToggle) { return themeQuery && themeQuery.matches ? 'dark' : 'light';
themeToggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false'); }
themeToggle.innerHTML = theme === 'dark' return mode;
? '<i class="fa-solid fa-sun"></i>' }
: '<i class="fa-solid fa-moon"></i>';
function updateToggle(mode, effectiveTheme) {
if (!themeToggle) {
return;
}
let iconClass = 'fa-circle-half-stroke';
if (mode === 'dark') {
iconClass = 'fa-sun';
} else if (mode === 'light') {
iconClass = 'fa-moon';
}
themeToggle.innerHTML = `
<i class="fa-solid ${iconClass}"></i>
<span class="theme-caret"><i class="fa-solid fa-chevron-down"></i></span>
`;
themeToggle.setAttribute('aria-label', `Theme: ${mode.charAt(0).toUpperCase() + mode.slice(1)}`);
themeToggle.setAttribute('data-effective-theme', effectiveTheme);
}
function updateActiveOption(mode) {
themeOptions.forEach((option) => {
const isActive = option.dataset.themeChoice === mode;
option.classList.toggle('is-active', isActive);
option.setAttribute('aria-checked', isActive ? 'true' : 'false');
});
}
function setThemeMode(mode, persist = true) {
const effectiveTheme = getEffectiveTheme(mode);
document.documentElement.setAttribute('data-theme', effectiveTheme);
updateToggle(mode, effectiveTheme);
updateActiveOption(mode);
if (persist) {
localStorage.setItem(THEME_KEY, mode);
} }
} }
function initTheme() { function initTheme() {
const savedTheme = localStorage.getItem(THEME_KEY); const savedMode = localStorage.getItem(THEME_KEY);
if (savedTheme) { const mode = savedMode || 'auto';
setTheme(savedTheme); setThemeMode(mode, Boolean(savedMode));
return;
}
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(prefersDark ? 'dark' : 'light');
} }
if (themeToggle) { function openThemeMenu() {
if (!themeMenu || !themeToggle) {
return;
}
themeMenu.classList.add('is-open');
themeToggle.setAttribute('aria-expanded', 'true');
}
function closeThemeMenu() {
if (!themeMenu || !themeToggle) {
return;
}
themeMenu.classList.remove('is-open');
themeToggle.setAttribute('aria-expanded', 'false');
}
if (themeMenu && themeToggle && themeDropdown) {
initTheme(); initTheme();
themeToggle.addEventListener('click', () => {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; themeToggle.addEventListener('click', (event) => {
const nextTheme = isDark ? 'light' : 'dark'; event.stopPropagation();
setTheme(nextTheme); themeMenu.classList.contains('is-open') ? closeThemeMenu() : openThemeMenu();
localStorage.setItem(THEME_KEY, nextTheme); });
themeOptions.forEach((option) => {
option.addEventListener('click', () => {
const mode = option.dataset.themeChoice || 'auto';
setThemeMode(mode);
closeThemeMenu();
});
});
document.addEventListener('click', (event) => {
if (!themeMenu.contains(event.target)) {
closeThemeMenu();
}
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeThemeMenu();
}
}); });
} else { } else {
initTheme(); initTheme();
} }
if (themeQuery) {
themeQuery.addEventListener('change', () => {
const mode = localStorage.getItem(THEME_KEY) || 'auto';
if (mode === 'auto') {
setThemeMode('auto', false);
}
});
}

202
styles.css
View File

@@ -1,45 +1,36 @@
:root { :root {
/* Backgrounds */
--bg: #F7F4EE; --bg: #F7F4EE;
--bg-alt: #F0EBE3; --bg-alt: #F0EBE3;
--surface: #FFFCF8; --surface: #FFFCF8;
--surface-alt: #F5F0E8; --surface-alt: #F5F0E8;
/* Text */
--text-primary: #1C1714; --text-primary: #1C1714;
--text-secondary: #6B5F56; --text-secondary: #6B5F56;
--text-muted: #A09488; --text-muted: #A09488;
/* Accent — Claude's warm coral/orange */
--accent: #C96442; --accent: #C96442;
--accent-hover: #B5512E; --accent-hover: #B5512E;
--accent-light: rgba(201, 100, 66, 0.10); --accent-light: rgba(201, 100, 66, 0.10);
--accent-glow: rgba(201, 100, 66, 0.18); --accent-glow: rgba(201, 100, 66, 0.18);
/* Borders */
--border: #E8E2D8; --border: #E8E2D8;
--border-dark: #D4CEC5; --border-dark: #D4CEC5;
/* Nav */
--nav-bg: rgba(247, 244, 238, 0.85); --nav-bg: rgba(247, 244, 238, 0.85);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(28,23,20,0.07), 0 1px 2px rgba(28,23,20,0.05); --shadow-sm: 0 1px 3px rgba(28,23,20,0.07), 0 1px 2px rgba(28,23,20,0.05);
--shadow-md: 0 4px 12px rgba(28,23,20,0.08), 0 2px 4px rgba(28,23,20,0.05); --shadow-md: 0 4px 12px rgba(28,23,20,0.08), 0 2px 4px rgba(28,23,20,0.05);
--shadow-lg: 0 16px 40px rgba(28,23,20,0.10), 0 4px 12px rgba(28,23,20,0.06); --shadow-lg: 0 16px 40px rgba(28,23,20,0.10), 0 4px 12px rgba(28,23,20,0.06);
--shadow-card: 0 2px 8px rgba(28,23,20,0.06), 0 1px 2px rgba(28,23,20,0.04); --shadow-card: 0 2px 8px rgba(28,23,20,0.06), 0 1px 2px rgba(28,23,20,0.04);
/* Typography */
--font-serif: 'Instrument Serif', Georgia, serif; --font-serif: 'Instrument Serif', Georgia, serif;
--font-sans: 'DM Sans', system-ui, sans-serif; --font-sans: 'DM Sans', system-ui, sans-serif;
/* Layout */
--nav-h: 64px; --nav-h: 64px;
--radius: 14px; --radius: 14px;
--radius-sm: 9px; --radius-sm: 9px;
--radius-pill: 100px; --radius-pill: 100px;
/* Transitions */
--ease: cubic-bezier(0.22, 1, 0.36, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
} }
@@ -151,13 +142,15 @@ img { display: block; max-width: 100%; }
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 38px; gap: 0.35rem;
width: auto;
height: 38px; height: 38px;
border-radius: 50%; border-radius: var(--radius-pill);
border: 1.5px solid var(--border); border: 1.5px solid var(--border);
background: var(--surface); background: var(--surface);
color: var(--text-secondary); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
padding: 0 0.7rem;
transition: all 0.18s var(--ease); transition: all 0.18s var(--ease);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
@@ -168,6 +161,62 @@ img { display: block; max-width: 100%; }
} }
.theme-toggle:active { transform: translateY(1px); } .theme-toggle:active { transform: translateY(1px); }
.theme-caret {
font-size: 0.6rem;
opacity: 0.7;
}
.theme-menu {
position: relative;
}
.theme-dropdown {
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
min-width: 160px;
padding: 0.35rem;
border-radius: 12px;
border: 1.5px solid var(--border);
background: var(--surface);
box-shadow: var(--shadow-md);
display: none;
z-index: 10;
}
.theme-menu.is-open .theme-dropdown {
display: block;
animation: dropdown-in 0.2s var(--ease) both;
}
.theme-option {
width: 100%;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 0.85rem;
text-align: left;
padding: 0.55rem 0.7rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.18s var(--ease);
}
.theme-option:hover {
color: var(--text-primary);
background: var(--bg-alt);
}
.theme-option.is-active {
color: var(--text-primary);
background: var(--accent-light);
}
@keyframes dropdown-in {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -499,6 +548,131 @@ body.inner-page {
transform: translate(0, 0); transform: translate(0, 0);
} }
body.not-found {
background: radial-gradient(1200px 600px at 20% -10%, rgba(201,100,66,0.12), transparent 60%),
radial-gradient(900px 500px at 90% 0%, rgba(201,100,66,0.08), transparent 55%),
var(--bg);
}
.notfound {
flex: 1;
display: grid;
place-items: center;
padding: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem)) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
position: relative;
overflow: hidden;
}
.notfound-sheen {
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 45%, transparent 70%);
opacity: 0.7;
pointer-events: none;
animation: sheen-sweep 2.6s var(--ease) 1 both;
}
.notfound-card {
position: relative;
z-index: 2;
width: min(720px, 92vw);
padding: clamp(2rem, 5vw, 3.25rem);
border-radius: clamp(18px, 2.5vw, 28px);
border: 1px solid var(--border);
background: linear-gradient(145deg, var(--surface), var(--surface-alt));
box-shadow: var(--shadow-lg);
text-align: center;
animation: fade-in 0.7s var(--ease) both;
}
.notfound-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.notfound-code {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(4.5rem, 18vw, 9rem);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 0.9;
margin-bottom: 0.75rem;
background: linear-gradient(140deg, var(--text-primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.notfound-title {
font-size: clamp(1.4rem, 3.5vw, 2rem);
font-weight: 500;
color: var(--text-primary);
margin-bottom: 0.4rem;
}
.notfound-copy {
color: var(--text-secondary);
max-width: 44ch;
margin: 0 auto 1.6rem;
}
.notfound-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.notfound-orbit {
position: absolute;
width: min(720px, 90vw);
height: min(720px, 90vw);
border-radius: 50%;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 0.8;
}
.notfound-orbit span {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px dashed rgba(201,100,66,0.25);
animation: orbit-spin 18s linear infinite;
}
.notfound-orbit span:nth-child(2) {
inset: 12%;
border-style: solid;
border-color: rgba(201,100,66,0.18);
animation-duration: 26s;
}
.notfound-orbit span:nth-child(3) {
inset: 24%;
border-style: dotted;
border-color: rgba(201,100,66,0.22);
animation-duration: 34s;
animation-direction: reverse;
}
@keyframes orbit-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes sheen-sweep {
0% { transform: translateX(-40%); }
70% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}
@media (max-width: 640px) { @media (max-width: 640px) {
.nav { padding: 0 1.25rem; } .nav { padding: 0 1.25rem; }
@@ -509,10 +683,16 @@ body.inner-page {
.page-main { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.25rem; } .page-main { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.25rem; }
.link-grid { grid-template-columns: 1fr; } .link-grid { grid-template-columns: 1fr; }
.notfound-card { padding: 2rem 1.5rem; }
.notfound-actions { gap: 0.6rem; }
.footer { flex-direction: column; gap: 0.75rem; text-align: center; } .footer { flex-direction: column; gap: 0.75rem; text-align: center; }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.hero-buttons { flex-direction: column; width: 100%; } .hero-buttons { flex-direction: column; width: 100%; }
.btn { width: 100%; } .btn { width: 100%; }
.notfound-actions { width: 100%; }
.notfound-actions .btn { width: 100%; }
} }