@senior: Build the homepage: project cards from my GitHub (#6)

Co-authored-by: senior <senior@ffaerber.duckdns.org>

styles.css

@@ -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; }
+}