Add page-specific CSS support

Add helper function to find page-specific CSS files Add CSS loading to
base template Update rendering functions to include page CSS Update
router to include page CSS for static pages
This commit is contained in:
Ruben 2025-11-03 23:04:16 +01:00
parent 0b84615bf9
commit 6879fad5fb
7 changed files with 110 additions and 0 deletions

View file

@ -0,0 +1,19 @@
/* Page-specific styles for About page */
article {
border-left: 4px solid oklch(0.65 0.15 250);
padding-left: 1.5rem;
}
article h2 {
color: oklch(0.50 0.12 250);
font-size: 1.8rem;
}
aside {
background-color: oklch(0.95 0.02 250);
padding: 1.5rem;
border-radius: 0.5rem;
margin-top: 2rem;
border: 2px solid oklch(0.85 0.05 250);
}

View file

@ -0,0 +1,22 @@
/* Page-specific styles for Articles list */
.list-item {
border: 2px solid oklch(0.85 0.05 250);
transition: border-color 0.3s ease;
}
.list-item:hover {
border-color: oklch(0.65 0.15 250);
}
.list-item h2 a {
color: oklch(0.50 0.12 250);
}
.list-item .date {
background-color: oklch(0.95 0.02 250);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
display: inline-block;
}

View file

@ -0,0 +1,34 @@
/* Page-specific styles for homepage */
.hero {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1rem .4rem;
background-color: oklch(0.85 0.05 250);
min-height: 40vh;
text-align: center;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
margin: 0;
}
.cta-section {
background: linear-gradient(135deg, oklch(0.65 0.15 250), oklch(0.50 0.12 250));
padding: 2rem 1rem;
margin-top: 3rem;
text-align: center;
color: white;
}
.cta-section p {
color: white;
font-size: clamp(1.1rem, 3vw, 1.3rem);
}
.cta-content {
max-width: 42rem;
margin: 0 auto;
}

View file

@ -21,6 +21,9 @@ function getActiveClass($href) { return rtrim(parse_url($_SERVER['REQUEST_URI'],
<meta name="description" content="<?= htmlspecialchars($metaDescription) ?>">
<?php endif; ?>
<link rel="stylesheet" href="<?= $cssUrl ?>?v=<?= $cssHash ?>">
<?php if (!empty($pageCssUrl)): ?>
<link rel="stylesheet" href="<?= $pageCssUrl ?>?v=<?= $pageCssHash ?? '' ?>">
<?php endif; ?>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<title><?= htmlspecialchars($pageTitle ?? 'Site Title') ?></title>