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:
parent
0b84615bf9
commit
6879fad5fb
7 changed files with 110 additions and 0 deletions
19
app/default/content/about/styles.css
Normal file
19
app/default/content/about/styles.css
Normal 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);
|
||||
}
|
||||
22
app/default/content/articles/styles.css
Normal file
22
app/default/content/articles/styles.css
Normal 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;
|
||||
}
|
||||
34
app/default/content/styles.css
Normal file
34
app/default/content/styles.css
Normal 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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue