<!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>
/* Same palette and type as skin/css.txt so the hub and the repos read as one site. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
color-scheme: dark;
--bg: #1c1e22;
--surface: #272a30;
--surface2: #31353d;
--border: #41454e;
--text: #e8e9eb;
--muted: #b3b8c0;
--link: #7fb6ef;
--title: #8cbdf0;
--active: #f08a3c;
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.45;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-inline: 16px;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: #a3cbf5; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.wrap { width: 100%; max-width: 820px; margin: 0 auto; }
/* Title bar, same shape as the repo pages */
header.site {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0 10px;
}
.logo-mark { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.site-name { font-size: 1.6rem; font-weight: bold; color: var(--title); line-height: 1.2; }
.site-name span { color: var(--muted); font-weight: normal; }
nav.band {
background: var(--surface) linear-gradient(#2d3037, var(--surface)) repeat-x;
border: 1px solid var(--border);
border-radius: 5px;
padding: 6px;
display: flex;
flex-wrap: wrap;
gap: 2px;
}
nav.band a {
display: inline-block;
padding: 8px 16px;
color: var(--muted);
font-weight: 500;
border-bottom: 2px solid transparent;
}
nav.band a:hover, nav.band a.active { color: var(--text); border-bottom-color: var(--active); text-decoration: none; }
main { padding: 1.5rem 0 2rem; }
.intro { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; }
h1 { font-size: 1.6rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.intro p { color: var(--muted); max-width: 40em; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.6rem; }
.repo-grid { display: grid; gap: 8px; }
.repo-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 5px;
padding: 12px 14px;
color: inherit;
display: flex;
align-items: center;
gap: 12px;
}
.repo-card:hover { border-color: var(--link); text-decoration: none; color: inherit; }
.repo-icon {
width: 40px; height: 40px; flex-shrink: 0;
background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.repo-info { flex: 1; min-width: 0; }
.repo-name { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--link); }
.repo-desc { font-size: 0.95rem; color: var(--muted); margin-top: 2px; }
.repo-arrow { color: var(--muted); flex-shrink: 0; }
.repo-card:hover .repo-arrow { color: var(--link); }
.howto { margin-top: 2rem; display: grid; gap: 8px; }
.box { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 12px 14px; }
.box p { color: var(--muted); font-size: 0.95rem; margin-top: 0.3rem; }
.cmd {
display: block; margin-top: 0.5rem;
font-family: var(--mono); font-size: 0.9rem; color: var(--text);
background: #15171a; border: 1px solid var(--border); border-radius: 4px;
padding: 0.5rem 0.75rem;
overflow-wrap: anywhere;
}
footer {
margin-top: auto;
border-top: 1px solid var(--border);
padding: 10px 0 14px;
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
font-size: 0.85rem; color: var(--muted);
}
.skip-nav {
position: absolute; top: -100%; left: 0; background: var(--link); color: #0b0d10;
padding: 0.5rem 1.25rem; font-weight: 600; z-index: 9999; border-radius: 0 0 5px 0;
}
.skip-nav:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 600px) {
.site-name { font-size: 1.3rem; }
nav.band a { padding: 8px 12px; }
.repo-card { padding: 10px 12px; }
.repo-arrow { display: none; }
}
</style>
</head>
<body>
<a class="skip-nav" href="#main">Skip to content</a>
<div class="wrap">
<header class="site">
<img class="logo-mark" src="/fossil-skin/logo" alt="">
<div class="site-name">fossil<span>.craftdesign.group</span></div>
</header>
<nav class="band" aria-label="Site">
<a class="active" href="/">Repositories</a>
<a href="/fossil-skin/wiki/new-repo">Add a repository</a>
<a href="/zit/forum">zit forum</a>
</nav>
</div>
<main id="main" class="wrap">
<div class="intro">
<h1>Source code, wikis, tickets and forums, hosted with Fossil</h1>
<p>Each repository below is a single Fossil file: version control, wiki, tickets, forum and chat together. Clone any of them with Fossil or zit.</p>
</div>
<h2>Repositories</h2>
<div class="repo-grid">
<!-- REPO-GRID-START -->
<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">Distributed Fossil repository sync over NATS</div>
</div>
<span class="repo-arrow">→</span>
</a>
<!-- REPO-GRID-END -->
</div>
<div class="howto">
<div class="box">
<strong>Clone a repository</strong>
<code class="cmd">fossil clone https://fossil.craftdesign.group/<repo>/ <repo>.fossil</code>
</div>
<div class="box">
<strong>Add a repository</strong>
<p>Init, skin, login group and wiki home page, step by step: <a href="/fossil-skin/wiki/new-repo">fossil-skin › wiki › new-repo</a></p>
</div>
</div>
</main>
<footer class="wrap">
<span>craftdesign.group</span>
<span>fossil 2.28</span>
</footer>
</body>
</html>