Läuft

internal/web/static/main.css

@@ -0,0 +1,133 @@
+/* ---------- Farbpalette (Feel‑free to tune) ---------- */
+:root {
+    --bg:          #0d1117;
+    --bg‑alt:      #161b22;
+    --text:        #c9d1d9;
+    --text‑muted:  #8b949e;
+    --accent:      #3b82f6;   /* Blau */
+    --accent‑light:#60a5fa;
+    --code‑bg:     #1e242c;
+    --code‑border: #30363d;
+    --radius:      0.6rem;
+    --gap:         1.5rem;
+    font‑size:     16px;
+    font‑family:   system‑ui, "Segoe UI", Roboto, sans‑serif;
+    color‑scheme:  dark;
+  }
+  
+  /* ---------- Globale Elemente ---------- */
+  * { box‑sizing: border‑box; }
+  body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    line‑height: 1.6;
+  }
+  a {
+    color: var(--accent);
+    text‑decoration: none;
+  }
+  a:hover { text‑decoration: underline; }
+  
+  /* ---------- Layout ---------- */
+  .wrapper {
+    max‑width: 768px;
+    margin: 0 auto;
+    padding: var(--gap);
+  }
+  header, footer {
+    display: flex;
+    align‑items: center;
+    justify‑content: space-between;
+    background: var(--bg‑alt);
+    padding: 1rem var(--gap);
+    border‑bottom: 1px solid var(--code‑border);
+  }
+  header h1 {
+    margin: 0;
+    font‑size: 1.4rem;
+    letter‑spacing: 0.5px;
+  }
+  header a { color: var(--text); }
+  
+  footer {
+    border‑top: 1px solid var(--code‑border);
+    font‑size: 0.9rem;
+    color: var(--text‑muted);
+  }
+  
+  /* ---------- Artikelliste ---------- */
+  .post‑list li {
+    margin: 0;
+    padding: 1rem 0;
+    border‑bottom: 1px solid var(--code‑border);
+  }
+  .post‑list li:last‑child { border‑bottom: none; }
+  .post‑list time { color: var(--text‑muted); font‑size: 0.9rem; }
+  
+  /* ---------- Einzelartikel ---------- */
+  article h1 { margin‑top: 0; font‑size: 2rem; }
+  article time { color: var(--text‑muted); font‑size: 0.9rem; }
+  article img, article video {
+    max‑width: 100%; height: auto; border‑radius: var(--radius);
+  }
+  article pre, article code {
+    font‑family: "Fira Code", Consolas, monospace;
+  }
+  article pre {
+    background: var(--code‑bg);
+    border: 1px solid var(--code‑border);
+    padding: 1rem;
+    border‑radius: var(--radius);
+    overflow: auto;
+  }
+  article blockquote {
+    margin: 1rem 0;
+    padding: 0.5rem 1rem;
+    border‑left: 4px solid var(--accent‑light);
+    background: var(--bg‑alt);
+    color: var(--text‑muted);
+  }
+  /* ---------- Karten‑Layout für Artikelliste ---------- */
+.card {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--code-border);
+  border-radius: var(--radius);
+  background: var(--bg-alt);
+  transition: transform .15s ease, border-color .15s ease;
+}
+.card:hover {
+  transform: translateY(-4px);
+  border-color: var(--accent);
+}
+.card img {
+  width: 160px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: var(--radius);
+}
+.card h2 {
+  margin: 0 0 .4rem;
+  font-size: 1.2rem;
+}
+.card time { color: var(--text-muted); font-size: .9rem; }
+
+/* ---------- Hero‑Bild im Artikel ---------- */
+.hero {
+  width: 100%;
+  max-height: 340px;
+  object-fit: cover;
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+
+  
+  /* ---------- Responsive ---------- */
+  @media (max‑width: 600px) {
+    :root { font‑size: 15px; }
+    header, footer { flex‑direction: column; gap: 0.5rem; }
+  }
+