<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fossil.craftdesign.group</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
color-scheme: dark;
--bg: #0f1117;
--surface: #1a1d27;
--border: #2a2d3e;
--accent: #6c8ebf;
--accent2: #4a7c9e;
--text: #e2e8f0;
--muted: #8892a4;
--green: #4ade80;
--radius: 8px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
--mono: 'JetBrains Mono', 'Fira Code', monospace;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ── Header ── */
header {
border-bottom: 1px solid var(--border);
padding: 1.25rem 2rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-mark {
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.logo-text {
font-size: 0.95rem;
font-family: var(--mono);
color: var(--muted);
}
.logo-text span { color: var(--text); font-weight: 500; }
/* ── Hero ── */
.hero {
padding: 4rem 2rem 3rem;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(74, 222, 128, 0.08);
border: 1px solid rgba(74, 222, 128, 0.2);
color: var(--green);
font-size: 0.75rem;
font-family: var(--mono);
padding: 0.3rem 0.75rem;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.status-dot {
width: 6px; height: 6px;
background: var(--green);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
h1 em { font-style: normal; color: var(--accent); }
.hero p {
color: var(--muted);
line-height: 1.7;
font-size: 1.05rem;
max-width: 560px;
}
/* ── Repos ── */
.section {
max-width: 720px;
margin: 0 auto;
padding: 0 2rem 2rem;
width: 100%;
}
.section-label {
font-size: 0.7rem;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 1rem;
}
.repo-grid {
display: grid;
gap: 0.75rem;
}
.repo-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: 1rem;
transition: border-color 0.15s, transform 0.1s;
}
.repo-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.repo-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.repo-icon {
width: 36px; height: 36px;
background: rgba(108, 142, 191, 0.1);
border: 1px solid rgba(108, 142, 191, 0.2);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 1rem;
}
.repo-info { flex: 1; min-width: 0; }
.repo-name {
font-family: var(--mono);
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
margin-bottom: 0.2rem;
}
.repo-desc {
font-size: 0.8rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.repo-arrow {
color: var(--muted);
font-size: 1rem;
flex-shrink: 0;
transition: color 0.15s, transform 0.15s;
}
.repo-card:hover .repo-arrow {
color: var(--accent);
transform: translateX(3px);
}
/* ── Clone hint ── */
.clone-box {
margin-top: 2.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
}
.clone-box .section-label { margin-bottom: 0.75rem; }
.clone-cmd {
font-family: var(--mono);
font-size: 0.82rem;
color: var(--accent);
background: rgba(108, 142, 191, 0.06);
border: 1px solid rgba(108, 142, 191, 0.12);
border-radius: 4px;
padding: 0.6rem 0.9rem;
display: block;
margin-top: 0.4rem;
word-break: break-all;
}
/* ── Footer ── */
footer {
margin-top: auto;
border-top: 1px solid var(--border);
padding: 1.25rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.78rem;
color: var(--muted);
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }
.fossil-ver { font-family: var(--mono); }
/* Skip navigation */
.skip-nav {
position: absolute;
top: -100%;
left: 0;
background: var(--accent);
color: #fff;
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
z-index: 9999;
border-radius: 0 0 var(--radius) 0;
text-decoration: none;
transition: top 0.1s;
}
.skip-nav:focus {
top: 0;
outline: 2px solid #fff;
outline-offset: -4px;
}
</style>
</head>
<body>
<a class="skip-nav" href="#main">Skip to content</a>
<header>
<div class="logo-mark">F</div>
<div class="logo-text"><span>fossil</span>.craftdesign.group</div>
</header>
<main id="main">
<div class="hero">
<div class="status-pill">
<span class="status-dot"></span>
server online
</div>
<h1>Code hosting<br>built on <em>Fossil</em></h1>
<p>A self-hosted source control hub powered by Fossil SCM. Integrated version control, issue tracking, wiki, and forum — in a single artifact.</p>
</div>
<div class="section">
<div class="section-label">Repositories</div>
<div class="repo-grid">
<a class="repo-card" href="/edgesync/">
<div class="repo-icon">⚡</div>
<div class="repo-info">
<div class="repo-name">edgesync</div>
<div class="repo-desc">EdgeSync project repository</div>
</div>
<span class="repo-arrow">→</span>
</a>
<a class="repo-card" href="/go-libfossil/">
<div class="repo-icon">🔬</div>
<div class="repo-info">
<div class="repo-name">go-libfossil</div>
<div class="repo-desc">Go bindings for libfossil</div>
</div>
<span class="repo-arrow">→</span>
</a>
<a class="repo-card" href="/fossil-skin/">
<div class="repo-icon">🎨</div>
<div class="repo-info">
<div class="repo-name">fossil-skin</div>
<div class="repo-desc">Dark skin, landing page, and accessibility layer for this server</div>
</div>
<span class="repo-arrow">→</span>
</a>
</div>
<div class="clone-box">
<div class="section-label">Clone a repository</div>
<code class="clone-cmd">fossil clone https://fossil.craftdesign.group/<repo>/ <repo>.fossil</code>
</div>
</div>
</main>
<footer>
<span>craftdesign.group</span>
<span class="fossil-ver">fossil 2.28</span>
</footer>
</body>
</html>