@senior: Build the homepage: project cards from my GitHub #6
@@ -0,0 +1,8 @@
|
|||||||
|
.git
|
||||||
|
.gitea
|
||||||
|
.agents-workflow
|
||||||
|
Dockerfile
|
||||||
|
.dockerignore
|
||||||
|
AGENTS.md
|
||||||
|
README.md
|
||||||
|
*.md
|
||||||
+1
-1
@@ -3,7 +3,7 @@ FROM nginx:1.27-alpine
|
|||||||
LABEL org.opencontainers.image.title="ffaerber/homepage" \
|
LABEL org.opencontainers.image.title="ffaerber/homepage" \
|
||||||
org.opencontainers.image.source="https://git.ffaerber.duckdns.org/ffaerber/homepage"
|
org.opencontainers.image.source="https://git.ffaerber.duckdns.org/ffaerber/homepage"
|
||||||
|
|
||||||
COPY index.html /usr/share/nginx/html/index.html
|
COPY index.html styles.css /usr/share/nginx/html/
|
||||||
|
|
||||||
EXPOSE 80
|
EXPOSE 80
|
||||||
|
|
||||||
|
|||||||
+219
-89
@@ -3,97 +3,227 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>ffaerber</title>
|
<meta name="description" content="ffaerber — personal projects: CipherDolls, decentralized apps on Gnosis/Ethereum Swarm, self-hosted speech AI, and Ethereum infrastructure.">
|
||||||
<style>
|
<title>ffaerber — projects</title>
|
||||||
:root {
|
<link rel="stylesheet" href="styles.css">
|
||||||
--fg: #1f2328;
|
|
||||||
--muted: #57606a;
|
|
||||||
--bg: #ffffff;
|
|
||||||
--accent: #0969da;
|
|
||||||
--border: #d0d7de;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--fg: #e6edf3;
|
|
||||||
--muted: #9198a1;
|
|
||||||
--bg: #0d1117;
|
|
||||||
--accent: #58a6ff;
|
|
||||||
--border: #30363d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
* { box-sizing: border-box; }
|
|
||||||
html, body { margin: 0; padding: 0; }
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
color: var(--fg);
|
|
||||||
background: var(--bg);
|
|
||||||
display: flex;
|
|
||||||
min-height: 100vh;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
max-width: 38rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: clamp(2rem, 5vw, 3rem);
|
|
||||||
margin: 0 0 0.5rem;
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
.tagline {
|
|
||||||
color: var(--accent);
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0 0 1.5rem;
|
|
||||||
}
|
|
||||||
p { color: var(--muted); margin: 0 0 1rem; }
|
|
||||||
.links {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
.links a {
|
|
||||||
color: var(--fg);
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
transition: border-color 0.15s, color 0.15s;
|
|
||||||
}
|
|
||||||
.links a:hover { border-color: var(--accent); color: var(--accent); }
|
|
||||||
footer {
|
|
||||||
margin-top: 3rem;
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--muted);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<header class="site-header">
|
||||||
<h1>ffaerber</h1>
|
<div class="container">
|
||||||
<p class="tagline">Homelab & self-hosting enthusiast</p>
|
<h1 class="site-title">ffaerber</h1>
|
||||||
<p>
|
<p class="site-tagline">Personal projects — AI companions, decentralized apps, GPU speech services, Ethereum infra.</p>
|
||||||
Hi, I'm ffaerber. This is my corner of the internet — a self-hosted homepage
|
</div>
|
||||||
running on my homelab. I tinker with containers, Gitea, and anything that runs
|
</header>
|
||||||
on a quiet box in the corner.
|
|
||||||
</p>
|
<main class="container">
|
||||||
<p>
|
|
||||||
More coming soon. In the meantime, you can find my code over on Gitea.
|
<!-- Section: CipherDolls -->
|
||||||
</p>
|
<section class="section" id="cipherdolls">
|
||||||
<nav class="links">
|
<div class="section-head">
|
||||||
<a href="https://git.ffaerber.duckdns.org/ffaerber">Gitea</a>
|
<h2 class="section-title">CipherDolls — AI companion platform</h2>
|
||||||
<a href="https://homepage.ffaerber.duckdns.org">Homepage</a>
|
<p class="section-desc">An AI companion platform spanning cloud, web, and physical IoT devices.</p>
|
||||||
</nav>
|
<a class="section-link" href="https://github.com/cipherdolls" rel="noopener" target="_blank">github.com/cipherdolls ↗</a>
|
||||||
<footer>
|
</div>
|
||||||
Served from a container built in
|
<div class="cards">
|
||||||
<a href="https://git.ffaerber.duckdns.org/ffaerber/homepage">ffaerber/homepage</a>.
|
|
||||||
</footer>
|
<article class="card">
|
||||||
|
<h3 class="card-name">core</h3>
|
||||||
|
<p class="card-desc">Backend API for the CipherDolls platform: wallet-signature auth, AI chat completions, TTS/STT, embeddings (pgvector), USDC payments on Base, and IoT device management over MQTT.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li><li>Redis</li><li>MQTT</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/core" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">server</h3>
|
||||||
|
<p class="card-desc">Minimal chat backend derived from core, stripped to the essentials: chat with a Character, optional TTS/STT — same architecture, no payments or IoT.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Bun</li><li>Elysia</li><li>Prisma</li><li>PostgreSQL</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/server" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">webapp</h3>
|
||||||
|
<p class="card-desc">Web frontend for the platform.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>React Router</li><li>TypeScript</li><li>Tailwind</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/webapp" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">stream-player</h3>
|
||||||
|
<p class="card-desc">TTS audio streaming proxy — subscribes to Redis Pub/Sub and forwards audio chunks to WebSocket clients with a compact binary protocol.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>TypeScript</li><li>Redis</li><li>WebSocket</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/stream-player" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">stream-recorder</h3>
|
||||||
|
<p class="card-desc">WebSocket audio ingestion microservice — accepts raw WAV streams, converts to MP3 in-memory via ffmpeg, forwards to the backend.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>TypeScript</li><li>WebSocket</li><li>ffmpeg</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/stream-recorder" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">firmware-watcher</h3>
|
||||||
|
<p class="card-desc">ESP-IDF firmware for the SenseCAP Watcher companion device: BLE WiFi provisioning, MQTT events, MP3 playback through the onboard codec, LVGL UI on a 412×412 display, deep sleep.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>C</li><li>ESP-IDF</li><li>ESP32-S3</li><li>LVGL</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/firmware-watcher" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">firmware-m5sticks3</h3>
|
||||||
|
<p class="card-desc">ESP-IDF firmware for the M5StickS3 (ESP32-S3) pocket companion device with display, audio codec, and IMU.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>C</li><li>ESP-IDF</li><li>ESP32-S3</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/cipherdolls/firmware-m5sticks3" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section: Decentralized apps -->
|
||||||
|
<section class="section" id="dapps">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">Decentralized apps — Gnosis Chain + Ethereum Swarm</h2>
|
||||||
|
<p class="section-desc">dApps with on-chain logic and censorship-resistant Swarm storage/hosting.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">SwarmChat</h3>
|
||||||
|
<p class="card-desc">Decentralized 1:1 messenger and WebRTC video calling: wallet identity, on-chain contact registry, encrypted messages over Swarm PSS with feeds as offline outbox. Live at swarmchat.eth.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Solidity</li><li>React</li><li>Swarm PSS</li><li>WebRTC</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/SwarmChat" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">Pink Chainsaw</h3>
|
||||||
|
<p class="card-desc">Decentralized imageboard: post images, comment, and vote with xBZZ; fees auto-top-up the poster's Swarm postage stamp so good content stays alive. A social-score system prices posting by reputation.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Solidity</li><li>Foundry</li><li>React</li><li>Swarm</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/pinkchainsaw" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">FreeeMarket</h3>
|
||||||
|
<p class="card-desc">Multi-vendor marketplace where anyone runs their own shop and gets paid in stablecoins through on-chain escrow — deliberately fee-free and VAT-free.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Solidity</li><li>Gnosis Chain</li><li>Swarm</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/freeemarket" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">WalletMatrix</h3>
|
||||||
|
<p class="card-desc">Pivot-table view of a crypto wallet across every EVM chain — tokens as rows, chains as columns; drag one cell onto another to bridge or cross-chain swap. Static SPA deployable to Swarm.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>React</li><li>TypeScript</li><li>Vite</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/walletmatrix" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">swarm-connect</h3>
|
||||||
|
<p class="card-desc">React connect-button + wizard for Swarm on Gnosis: wallet → network → balances → Bee node → postage stamp, in one modal. Published on npm; demo hosted on Swarm itself.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>React</li><li>wagmi</li><li>npm package</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/swarm-connect" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">opentab</h3>
|
||||||
|
<p class="card-desc">Onchain app bootstrapped with create-onchain (Base).</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Next.js</li><li>TypeScript</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/opentab" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section: AI on GPU -->
|
||||||
|
<section class="section" id="ai-gpu">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">AI on GPU — self-hosted speech services</h2>
|
||||||
|
<p class="section-desc">Dockerized speech AI for NVIDIA GPUs, tuned for the RTX 5090 / Blackwell generation.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">whisper-cuda</h3>
|
||||||
|
<p class="card-desc">OpenAI-Whisper-compatible ASR web service built for RTX 5090 (sm_120) — faster-whisper on CTranslate2/CUDA 12.8, no PyTorch.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Python</li><li>FastAPI</li><li>CUDA</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/whisper-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">kokoro-cuda</h3>
|
||||||
|
<p class="card-desc">Minimal Kokoro TTS API with CUDA: 49 voices in 9 languages, streaming WAV/PCM plus MP3/Opus/FLAC, web UI included.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Python</li><li>FastAPI</li><li>CUDA</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/kokoro-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">voxtral-cuda</h3>
|
||||||
|
<p class="card-desc">Text-to-speech service running Mistral's Voxtral-4B-TTS with CUDA acceleration via vLLM-Omni.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>Python</li><li>vLLM</li><li>CUDA</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/voxtral-cuda" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section: Ethereum infrastructure -->
|
||||||
|
<section class="section" id="eth-infra">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2 class="section-title">Ethereum infrastructure</h2>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<h3 class="card-name">stakingtracker</h3>
|
||||||
|
<p class="card-desc">Self-hosted ETH staking rewards tracker and tax-report generator — reads from your own beacon node, persists daily history to SQLite, no external APIs or keys.</p>
|
||||||
|
<ul class="tags">
|
||||||
|
<li>TypeScript</li><li>Fastify</li><li>SQLite</li>
|
||||||
|
</ul>
|
||||||
|
<a class="card-link" href="https://github.com/ffaerber/stakingtracker" rel="noopener" target="_blank">View on GitHub ↗</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="footer-links">
|
||||||
|
<a href="https://github.com/ffaerber" rel="noopener" target="_blank">github.com/ffaerber ↗</a>
|
||||||
|
<a href="https://github.com/cipherdolls" rel="noopener" target="_blank">github.com/cipherdolls ↗</a>
|
||||||
|
</nav>
|
||||||
|
<p class="footer-meta">Served from a container built in <a href="https://git.ffaerber.duckdns.org/ffaerber/homepage" rel="noopener">ffaerber/homepage</a>.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+190
@@ -0,0 +1,190 @@
|
|||||||
|
:root {
|
||||||
|
--fg: #e6edf3;
|
||||||
|
--muted: #9198a1;
|
||||||
|
--bg: #0d1117;
|
||||||
|
--bg-elev: #161b22;
|
||||||
|
--accent: #58a6ff;
|
||||||
|
--border: #30363d;
|
||||||
|
--tag-bg: #1f2630;
|
||||||
|
--radius: 10px;
|
||||||
|
--maxw: 64rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--fg: #1f2328;
|
||||||
|
--muted: #57606a;
|
||||||
|
--bg: #ffffff;
|
||||||
|
--bg-elev: #f6f8fa;
|
||||||
|
--accent: #0969da;
|
||||||
|
--border: #d0d7de;
|
||||||
|
--tag-bg: #eaeef2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html, body { margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
color: var(--fg);
|
||||||
|
background: var(--bg);
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.site-header {
|
||||||
|
padding: 2.5rem 0 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.site-title {
|
||||||
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.site-tagline {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1rem;
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
.section {
|
||||||
|
padding: 2rem 0 0.5rem;
|
||||||
|
scroll-margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.section-head { margin-bottom: 1.25rem; }
|
||||||
|
.section-title {
|
||||||
|
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
|
||||||
|
margin: 0 0 0.35rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.section-desc {
|
||||||
|
margin: 0 0 0.4rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
.section-link {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.section-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Cards grid */
|
||||||
|
.cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: var(--bg-elev);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.1rem 1.15rem 1.15rem;
|
||||||
|
transition: border-color 0.15s ease, transform 0.15s ease;
|
||||||
|
}
|
||||||
|
.card:hover { border-color: var(--accent); }
|
||||||
|
.card:focus-within { border-color: var(--accent); }
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.card-desc {
|
||||||
|
margin: 0 0 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tags */
|
||||||
|
.tags {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 0 0.9rem;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
.tags li {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--tag-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.12rem 0.55rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card link */
|
||||||
|
.card-link {
|
||||||
|
align-self: flex-start;
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.card-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.site-footer {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
padding: 1.5rem 0 2rem;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.footer-links a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.footer-links a:hover { text-decoration: underline; }
|
||||||
|
.footer-meta {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.footer-meta a { color: var(--muted); text-decoration: underline; }
|
||||||
|
|
||||||
|
/* Focus visibility */
|
||||||
|
a:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive tightening on small screens */
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.cards {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.site-header { padding: 1.75rem 0 1rem; }
|
||||||
|
.section { padding: 1.5rem 0 0.25rem; }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user