✨feature: First working version with dummy content

assets/css/components.css

@@ -0,0 +1,124 @@
+.sidebar-head h2 { margin: 0 0 .25rem; font-size: 1.125rem; }
+
+.sidebar-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.sidebar-links a {
+  border-radius: 0.625rem;
+  border: 0.0625rem solid transparent;
+  color: var(--muted);
+  display: block;
+  font-size: clamp(1rem, 1vw, 1.125rem);
+  line-height: 1.15;
+  padding: 0.5rem 0.625rem;
+  text-decoration: none;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.sidebar-links a:hover,
+.sidebar-links a.is-active {
+  color: var(--text);
+  background: rgba(56, 189, 248, 0.1);
+  border-color: rgba(56, 189, 248, 0.25);
+}
+
+.note-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+.note-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  padding: 0;
+  list-style: none;
+}
+
+.note-list a {
+  text-decoration: none;
+  color: var(--text);
+}
+
+.search {
+  position: relative;
+  min-width: 13.75rem;
+}
+
+#search-input {
+  width: 100%;
+  padding: 0.5625rem 0.75rem;
+  border-radius: 0.625rem;
+  border: 0.0625rem solid var(--border);
+  background: rgba(22, 25, 33, 0.9);
+  color: var(--text);
+}
+
+#search-input:focus { outline: 0.125rem solid rgba(56, 189, 248, 0.4); }
+
+.search-results {
+  position: absolute;
+  top: 2.75rem;
+  right: 0;
+  width: 20rem;
+  max-height: 26.25rem;
+  overflow: auto;
+  background: var(--panel);
+  border: 0.0625rem solid var(--border);
+  border-radius: 0.75rem;
+  padding: 0.625rem;
+  box-shadow: var(--shadow);
+  display: none;
+  z-index: 30;
+}
+
+.search-results.active { display: block; }
+
+.search-results ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.search-results li a { color: var(--text); text-decoration: none; }
+.search-results .result-section { color: var(--muted); font-size: 0.75rem; }
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin-bottom: 1rem;
+}
+
+.hero h1 { margin: 0; }
+
+.hero p { margin: 0; color: var(--muted); }
+
+.section-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: var(--gap);
+}
+
+.section-card h3 { margin: 0; }
+
+.section-card .meta { color: var(--muted); font-size: 0.875rem; }
+
+.tag { font-size: 0.8125rem; color: var(--muted); }
+
+.table { width: 100%; border-collapse: collapse; }
+.table th, .table td { padding: 0.625rem; border-bottom: 0.0625rem solid var(--border); text-align: left; }

assets/css/layout.css

@@ -0,0 +1,174 @@
+:root {
+  --bg: #0f1115;
+  --bg-elevated: #161921;
+  --panel: #1c202a;
+  --border: #262a33;
+  --accent: #7dd3fc;
+  --accent-strong: #38bdf8;
+  --text: #e5e7eb;
+  --muted: #9ca3af;
+  --shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.35);
+  --radius: 0.75rem;
+  --gap: clamp(1rem, 2vw, 2rem);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.08), transparent 25%),
+              radial-gradient(circle at 80% 0%, rgba(186, 230, 253, 0.06), transparent 30%),
+              var(--bg);
+  color: var(--text);
+  font-family: 'General Sans', system-ui, -apple-system, sans-serif;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--gap);
+  padding: 1.125rem var(--gap);
+  background: rgba(15, 17, 21, 0.9);
+  backdrop-filter: blur(0.75rem);
+  border-bottom: 0.0625rem solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.brand a {
+  color: var(--text);
+  font-family: 'Raleway', 'General Sans', sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.025rem;
+  text-decoration: none;
+}
+
+.nav {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.nav a {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  color: var(--muted);
+  text-decoration: none;
+  border: 0.0625rem solid transparent;
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+
+.nav a:hover,
+.nav a.is-active {
+  color: var(--text);
+  border-color: var(--border);
+  background: rgba(56, 189, 248, 0.12);
+}
+
+.page-body {
+  display: grid;
+  grid-template-columns: minmax(16.25rem, 17.5rem) 1fr;
+  gap: var(--gap);
+  width: calc(100vw - 20%);
+  margin: var(--gap) auto var(--gap);
+}
+
+.sidebar {
+  padding: 1.25rem;
+  background: var(--panel);
+  border: 0.0625rem solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  height: fit-content;
+  position: sticky;
+  top: 5.375rem;
+}
+
+.content {
+  background: var(--bg-elevated);
+  border: 0.0625rem solid var(--border);
+  border-radius: var(--radius);
+  padding: clamp(1.25rem, 3vw, 2rem);
+  box-shadow: var(--shadow);
+}
+
+.site-footer {
+  margin-top: auto;
+  padding: 1rem var(--gap) 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--muted);
+  border-top: 0.0625rem solid var(--border);
+  background: rgba(15, 17, 21, 0.9);
+}
+
+.site-footer a {
+  color: var(--accent);
+  text-decoration: none;
+
+  &:hover {
+    border: none;
+    color: var(--accent-strong);
+    text-decoration: none;
+  }
+}
+
+.footer-links {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
+  gap: var(--gap);
+}
+
+.card {
+  background: var(--panel);
+  border: 0.0625rem solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.125rem;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  text-decoration: none;
+  color: var(--text);
+  transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.card:hover {
+  border-color: rgba(125, 211, 252, 0.7);
+  text-decoration: none;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  background: rgba(56, 189, 248, 0.12);
+  color: var(--accent);
+  border-radius: 62.4375rem;
+  border: 0.0625rem solid rgba(56, 189, 248, 0.24);
+  font-size: 0.8125rem;
+}
+
+.divider {
+  height: 0.0625rem;
+  width: 100%;
+  background: var(--border);
+  margin: 1.125rem 0;
+}

assets/css/responsive.css

@@ -0,0 +1,31 @@
+@media (max-width: 60rem) {
+  .page-body {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    position: relative;
+    top: 0;
+    order: 2;
+  }
+}
+
+@media (max-width: 45rem) {
+  .site-header {
+    grid-template-columns: 1fr;
+    gap: 0.625rem;
+    position: sticky;
+  }
+
+  .nav { order: 3; }
+  .search { order: 2; }
+
+  .site-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  #search-input { width: 100%; }
+  .search-results { width: 100%; right: auto; }
+}

assets/css/typography.css

@@ -0,0 +1,87 @@
+:root {
+  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;
+  --font-heading: 'Raleway', var(--font-body);
+  --text-size: clamp(1.125rem, 1.2vw, 1.25rem);
+  --line-height: 1.25;
+}
+
+body {
+  font-size: var(--text-size);
+  line-height: var(--line-height);
+  color: var(--text);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  line-height: 1.25;
+  margin: 0 0 0.75rem;
+  color: #f9fafb;
+}
+
+h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
+h2 { font-size: clamp(1.625rem, 2.4vw, 2rem); }
+h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); }
+h4 { font-size: clamp(1.25rem, 1.8vw, 1.375rem); }
+
+p { margin: 0 0 0.875rem; color: var(--text); }
+
+ul, ol { margin: 0 0 1rem 1.25rem; padding: 0; }
+
+code {
+  font-family: 'SFMono-Regular', Consolas, Monaco, monospace;
+  background: rgba(38, 42, 51, 0.7);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.375rem;
+  border: 0.0625rem solid var(--border);
+}
+
+pre {
+  margin: 0 0 1.125rem;
+  padding: 0.875rem;
+  background: #0b0d11;
+  border-radius: var(--radius);
+  border: 0.0625rem solid var(--border);
+  overflow-x: auto;
+}
+
+pre code { background: transparent; border: none; padding: 0; }
+
+a { color: var(--accent-strong); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+blockquote {
+  margin: 0 0 1rem;
+  padding: 0.75rem 1rem;
+  border-left: 0.1875rem solid var(--accent-strong);
+  background: rgba(56, 189, 248, 0.08);
+  border-radius: 0.625rem;
+  color: var(--text);
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.muted { color: var(--muted); }
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.0625rem;
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin: 0 0 0.375rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

assets/js/search.js

@@ -0,0 +1,72 @@
+(() => {
+  const input = document.getElementById('search-input');
+  const resultsBox = document.getElementById('search-results');
+  if (!input || !resultsBox) return;
+
+  let index = [];
+  let loaded = false;
+
+  const render = (items) => {
+    if (!items.length) {
+      resultsBox.innerHTML = '<p class="muted">No matches.</p>';
+      resultsBox.classList.add('active');
+      return;
+    }
+
+    const list = items
+      .slice(0, 12)
+      .map(item => `
+        <li>
+          <a href="${item.url}">
+            <div class="result-title">${item.title}</div>
+            <div class="result-section">${item.section}</div>
+            <div class="muted">${item.summary}</div>
+          </a>
+        </li>
+      `).join('');
+
+    resultsBox.innerHTML = `<ul>${list}</ul>`;
+    resultsBox.classList.add('active');
+  };
+
+  const filter = (query) => {
+    if (!query.trim()) {
+      resultsBox.classList.remove('active');
+      return;
+    }
+
+    const q = query.toLowerCase();
+    const items = index.filter(item => {
+      return (
+        item.title.toLowerCase().includes(q) ||
+        item.section.toLowerCase().includes(q) ||
+        item.summary.toLowerCase().includes(q) ||
+        item.tags.some(tag => tag.toLowerCase().includes(q))
+      );
+    });
+    render(items);
+  };
+
+  const loadIndex = async () => {
+    if (loaded) return index;
+    try {
+      const res = await fetch('/search-index.json');
+      index = await res.json();
+      loaded = true;
+    } catch (err) {
+      console.error('Search index failed to load', err);
+    }
+    return index;
+  };
+
+  input.addEventListener('input', async (e) => {
+    await loadIndex();
+    filter(e.target.value);
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!resultsBox.contains(e.target) && e.target !== input) {
+      resultsBox.classList.remove('active');
+    }
+  });
+})();