diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 1cdb97a..658bd54 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -6,7 +6,7 @@ {% if title and page.url != "/" %}{{ title }} ยท {% endif %}{{ site.title }} - + {% include "partials/header.njk" %} diff --git a/src/assets/css/,gitkeep b/src/assets/css/.gitkeep similarity index 100% rename from src/assets/css/,gitkeep rename to src/assets/css/.gitkeep diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..8f0b504 --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,44 @@ +:root { + --fg: #1d1d1f; + --bg: #fdfdfc; + --muted: #6b6b70; + --accent: #2456a6; + --measure: 42rem; + color-scheme: light dark; +} + +@media (prefers-color-scheme: dark) { + :root { --fg: #e8e8ea; --bg: #141416; --muted: #9a9aa2; --accent: #8fb3ff; } +} + +*, *::before, *::after { box-sizing: border-box; } + +body { + margin: 0 auto; + padding: 1.5rem 1rem 3rem; + max-width: var(--measure); + font: 1.0625rem/1.6 system-ui, sans-serif; + color: var(--fg); + background: var(--bg); +} + +a { color: var(--accent); } + +.site-header { + display: flex; flex-wrap: wrap; gap: 1rem; + align-items: baseline; justify-content: space-between; + margin-bottom: 2rem; +} +.site-title { font-weight: 700; text-decoration: none; color: inherit; } +.site-header ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; } +.site-header [aria-current="page"] { font-weight: 600; text-decoration: none; } + +.meta { color: var(--muted); font-size: 0.9em; margin-top: -0.5rem; } + +.post-list { list-style: none; padding: 0; } +.post-list li { margin: 0.5rem 0; } +.post-list time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 0.75rem; } + +pre { overflow-x: auto; padding: 0.75rem; background: color-mix(in srgb, var(--fg) 6%, transparent); } + +.site-footer { margin-top: 3rem; color: var(--muted); font-size: 0.9em; }