benny/brookhaven.bennyshouse.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial import of Brookhaven site

Browse Source
This commit is contained in:
benny
2025-11-18 20:28:52 +00:00
parent 7e27f39d01
commit 773a91dd2f
1900 changed files with 700543 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
history/main.html Normal file
View File

@@ -0,0 +1,253 @@
<!doctype html>
<html lang="en" data-theme="win95">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Indie Grid — Chunky Win95 / Aero</title>
<!-- Tailwind CDN (no build step) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { ui: ["Inter", "Tahoma", "ui-sans-serif", "system-ui"] },
boxShadow: {
aero: '0 20px 50px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.25) inset',
glass: '0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px rgba(0,0,0,.12)'
},
borderRadius: {
win: '6px',
}
}
}
}
</script>
<style>
/* THEME TOKENS (swap via data-theme) */
:root {
--bg: #e9eef5;
--ink: #0f172a;
--surface: rgba(255,255,255,0.65);
--border: rgba(0,0,0,.16);
--accent: #1e90ff;
--glass: blur(12px);
--titlebar-grad: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
--meta: rgba(0,0,0,.6);
}
[data-theme="win95"] {
--bg: #c0c0c0;
--ink: #000;
--surface: #dfdfdf;
--border: #808080;
--accent: #008080;
--glass: blur(0px);
--titlebar-grad: linear-gradient(180deg, #0a246a, #a6caf0);
--meta: #000;
}
/* Retro paper texture overlay (very subtle) */
body {
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 3px),
repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px),
var(--bg);
background-blend-mode: overlay;
}
/* Win95 bevel helpers */
.bevel { border-width: 6px; border-style: solid; border-top-color:#fff; border-left-color:#fff; border-bottom-color:#808080; border-right-color:#808080; }
.bevel-inset { border-width: 6px; border-style: solid; border-top-color:#808080; border-left-color:#808080; border-bottom-color:#fff; border-right-color:#fff; }
/* Press/tactile card */
.card-press { transition: transform .06s ease, filter .06s ease; }
.card-press:active { transform: translateY(1px); }
.card-press:hover { filter: brightness(1.02); }
/* Snap-open window animation */
@keyframes pop95 { 0% { transform: scale(.96) translateY(8px); filter: brightness(.96); opacity:0; } 100% { transform: scale(1) translateY(0); filter:none; opacity:1; } }
.win-enter { animation: pop95 .14s ease-out both; }
/* Pixel dotted focus */
.focus-95:focus { outline: 1px dotted #000; outline-offset: 2px; }
/* CRT overlay toggle */
.crt .crt-panel { position: relative; overflow: hidden; }
.crt .crt-panel::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(transparent 50%, rgba(0,0,0,.06) 50%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 60%);
background-size: 100% 2px, 100% 100%;
mix-blend-mode: multiply;
}
</style>
</head>
<body class="min-h-screen font-ui text-[color:var(--ink)]">
<!-- HEADER -->
<header class="max-w-[1120px] mx-auto px-4 py-3">
<div class="flex items-center justify-between gap-4">
<a href="#" class="flex items-center gap-2 focus-95">
<div class="w-8 h-8 bg-[color:var(--accent)] bevel"></div>
<span class="font-extrabold tracking-wider uppercase">Indie Grid</span>
</a>
<div class="flex items-center gap-2">
<button id="btnAero" class="focus-95 px-3 py-2 text-sm font-bold rounded-win border-2 border-[color:var(--border)] bg-white/80 hover:bg-white">Aero</button>
<button id="btn95" class="focus-95 px-3 py-2 text-sm font-bold bevel bg-[color:var(--surface)]">Win95</button>
<button id="btnCRT" class="focus-95 px-3 py-2 text-sm font-bold rounded-win border-2 border-[color:var(--border)] bg-white/80 hover:bg-white">CRT</button>
</div>
</div>
</header>
<!-- MAIN -->
<main class="max-w-[1120px] mx-auto px-4">
<!-- GRID -->
<div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
<!-- PRIMARY FEED -->
<section class="space-y-6">
<!-- Card 1: Aero-ish chrome, becomes 95 via tokens -->
<article class="relative rounded-win border border-[color:var(--border)] backdrop-blur-[var(--glass)] bg-[color:var(--surface)] shadow-glass card-press win-enter crt-panel">
<!-- Title bar -->
<div class="flex items-center justify-between px-3 py-2 border-b border-[color:var(--border)]" style="background: var(--titlebar-grad); color: #0b1220;">
<div class="flex items-center gap-2">
<div class="w-4 h-4 bg-[color:var(--accent)]"></div>
<span class="font-bold tracking-wide uppercase text-xs">Gaming</span>
</div>
<div class="flex gap-1.5">
<span class="w-3.5 h-3.5 rounded-full bg-[#ff5f56]"></span>
<span class="w-3.5 h-3.5 rounded-full bg-[#f6c026]"></span>
<span class="w-3.5 h-3.5 rounded-full bg-[#2ecc71]"></span>
</div>
</div>
<!-- Meta -->
<div class="px-4 py-2 text-sm border-b border-[color:var(--border)]" style="color: var(--meta);">
<time datetime="2020-09-01">9.1.2020</time>
<span class="mx-2">•</span>
<a href="#" class="underline">chess</a>
</div>
<!-- Content -->
<div class="p-4">
<h2 class="text-2xl font-extrabold leading-tight mb-3 tracking-tight">A chunky Aero/95 take on the Indie card.</h2>
<div class="overflow-hidden rounded-[4px] bevel-inset">
<img src="https://picsum.photos/seed/chunky/960/520" class="w-full block" alt="Chunky card image">
</div>
<p class="mt-3">Big borders, beveled edges, and frosted panels bring that throwback desktop feel.</p>
<a href="#" class="mt-2 inline-block font-bold underline focus-95">READ MORE »</a>
</div>
</article>
<!-- Card 2: Strong Win95 chrome -->
<article class="relative bevel bg-[color:var(--surface)] card-press win-enter crt-panel">
<div class="px-3 py-2 flex items-center justify-between border-b-4 border-b-[#808080]" style="background: var(--titlebar-grad); color:#fff;">
<span class="font-bold tracking-wide uppercase text-xs">Code</span>
<div class="flex gap-1.5">
<span class="w-3.5 h-3.5 bg-white"></span>
<span class="w-3.5 h-3.5 bg-white"></span>
<span class="w-3.5 h-3.5 bg-white"></span>
</div>
</div>
<div class="px-4 py-2 text-sm text-black border-b-4 border-b-[#808080]">
<time datetime="2020-08-31">8.31.2020</time>
<span class="mx-2">•</span>
<a href="#" class="underline">resource</a>
</div>
<div class="p-4">
<h2 class="text-2xl font-extrabold mb-3">Tower defense… but Flexbox.</h2>
<div class="bevel-inset overflow-hidden">
<img src="https://picsum.photos/seed/flex/960/520" alt="Flexbox" class="w-full block">
</div>
<p class="mt-3">Train display order, growth, and basis—rendered like a 1995 dialog box.</p>
<a href="#" class="mt-2 inline-block font-bold underline focus-95">START WAVE 1 »</a>
</div>
</article>
</section>
<!-- SECONDARY STACK -->
<aside class="space-y-6">
<article class="rounded-win border border-[color:var(--border)] backdrop-blur-[var(--glass)] bg-[color:var(--surface)] shadow-glass card-press win-enter crt-panel">
<div class="px-3 py-2 border-b border-[color:var(--border)] flex items-center justify-between" style="background: var(--titlebar-grad); color: #0b1220;">
<span class="font-bold uppercase text-xs">Resource</span>
</div>
<div class="px-4 py-2 text-sm border-b border-[color:var(--border)]" style="color: var(--meta);">
<time datetime="2020-07-10">7.10.2020</time> • <a href="#" class="underline">icons</a>
</div>
<div class="p-4">
<h3 class="text-xl font-extrabold mb-2">Icon pack in MS-era chrome</h3>
<div class="bevel-inset overflow-hidden">
<img src="https://picsum.photos/seed/icons/800/480" alt="Icons" class="w-full block">
</div>
<a href="#" class="mt-2 inline-block font-bold underline focus-95">WHO, WHAT, WHERE…</a>
</div>
</article>
<article class="bevel bg-[color:var(--surface)] card-press win-enter crt-panel">
<div class="px-3 py-2 flex items-center justify-between border-b-4 border-b-[#808080]" style="background: var(--titlebar-grad); color:#fff;">
<span class="font-bold uppercase text-xs">Audio</span>
</div>
<div class="px-4 py-2 text-sm text-black border-b-4 border-b-[#808080]">
<time datetime="2020-06-14">6.14.2020</time> • <a href="#" class="underline">git</a>
</div>
<div class="p-4">
<h3 class="text-xl font-extrabold mb-2">Scales around the world</h3>
<div class="bevel-inset overflow-hidden">
<img src="https://picsum.photos/seed/omni/800/480" alt="A Digital Harp" class="w-full block">
</div>
<a href="#" class="mt-2 inline-block font-bold underline focus-95">TELL ME MORE…</a>
</div>
</article>
</aside>
</div>
<!-- Pagination -->
<nav class="py-8 flex justify-end">
<a href="#" class="focus-95 px-4 py-2 font-bold border-2 rounded-win border-[color:var(--border)] bg-white/80 hover:bg-white">MORE >>></a>
</nav>
</main>
<!-- TASKBAR FOOTER -->
<footer class="fixed bottom-0 left-0 right-0 z-50 bevel bg-[color:var(--surface)]">
<div class="max-w-[1120px] mx-auto px-2 py-1 flex items-center justify-between">
<div class="flex items-center gap-2">
<button class="bevel px-3 py-1 font-bold text-sm focus-95">Start</button>
<nav class="hidden sm:flex gap-2 text-sm">
<a class="bevel px-2 py-1 focus-95" href="#">Posts</a>
<a class="bevel px-2 py-1 focus-95" href="#">Tags</a>
<a class="bevel px-2 py-1 focus-95" href="#">About</a>
</nav>
</div>
<span id="clock" class="bevel px-2 py-1 font-mono text-sm">00:00</span>
</div>
</footer>
<script>
// Theme toggles
const html = document.documentElement;
document.getElementById('btnAero').onclick = () => html.setAttribute('data-theme','aero');
document.getElementById('btn95').onclick = () => html.setAttribute('data-theme','win95');
// CRT toggle
document.getElementById('btnCRT').onclick = () => html.classList.toggle('crt');
// Clock
const clk = () => document.getElementById('clock').textContent =
new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
clk(); setInterval(clk, 1000);
// Konami code to flip theme
(() => {
const seq = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
let i = 0;
window.addEventListener('keydown', e => {
i = (e.key === seq[i]) ? i+1 : 0;
if (i === seq.length) {
html.setAttribute('data-theme', html.getAttribute('data-theme') === 'win95' ? 'aero' : 'win95');
i = 0;
}
});
})();
</script>
</body>
</html>