feature/site-header (#1)

Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
2026-01-15 07:49:01 +00:00
parent 6816650ea5
commit 49d22484c0
17 changed files with 625 additions and 59 deletions

View File

@@ -1,3 +1,25 @@
/* ==========================================================================
Font Definitions
========================================================================== */
@font-face {
font-family: "Outline";
src: url("../fonts/Outline-Regular.woff2") format("woff2"),
url("../fonts/Outline-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Outline";
src: url("../fonts/Outline-Light.woff2") format("woff2"),
url("../fonts/Outline-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
CSS Reset & Normalize (Modern Best Practices)
Based on normalize.css v8.0.1 + modern resets
@@ -175,15 +197,19 @@ table {
--color-border: #e2e8f0;
--color-border-light: #f1f5f9;
--color-push-box-bg: #EBEEF4;
--color-success: #22c55e;
--color-error: #ef4444;
--color-warning: #f59e0b;
/* Typography */
--font-family-base: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
--font-family-base: "Outline", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
--font-family-heading: var(--font-family-base);
--font-family-outfit: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
@@ -193,14 +219,16 @@ table {
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-normal: 1.5; /* 24px at 16px base */
--line-height-relaxed: 1.75;
--line-height-24: 24px;
/* Spacing */
--spacing-xs: 0.25rem; /* 4px */
@@ -268,8 +296,8 @@ top-bar .icon-button svg {
top-bar .logo {
font-family: var(--font-family-base);
font-size: 1.25rem;
font-weight: 700;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: #ffffff;
text-decoration: none;
}
@@ -277,6 +305,7 @@ top-bar .logo {
top-bar .actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
/* ==========================================================================