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

app/default/content/about/styles.css

@@ -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);
+}

app/default/content/articles/styles.css

@@ -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;
+}

app/default/content/styles.css

@@ -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;
+}

app/default/templates/base.php

@@ -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>

app/helpers.php

@@ -65,6 +65,23 @@ function findPdfFile(string $dirPath): ?string {
     return $pdfs ? basename($pdfs[0]) : null;
 }
 
+function findPageCss(string $dirPath, string $contentDir): ?array {
+    $cssFile = "$dirPath/styles.css";
+    if (!file_exists($cssFile) || !is_file($cssFile)) {
+        return null;
+    }
+    
+    // Generate URL path relative to content directory
+    $relativePath = str_replace($contentDir, '', $dirPath);
+    $relativePath = trim($relativePath, '/');
+    $cssUrl = '/' . ($relativePath ? $relativePath . '/' : '') . 'styles.css';
+    
+    return [
+        'url' => $cssUrl,
+        'hash' => hash_file('md5', $cssFile)
+    ];
+}
+
 function extractMetaDescription(string $dirPath, ?array $metadata, string $lang, string $defaultLang): ?string {
     // 1. Check for search_description in metadata
     if ($metadata && isset($metadata['search_description'])) {

app/rendering.php

@@ -59,6 +59,11 @@ function renderFile(Context $ctx, string $filePath): void {
         $pageTitle = $pageMetadata['title'] ?? null;
         $metaDescription = extractMetaDescription($pageDir, $pageMetadata, $ctx->currentLang, $ctx->defaultLang);
         
+        // Check for page-specific CSS
+        $pageCss = findPageCss($pageDir, $ctx->contentDir);
+        $pageCssUrl = $pageCss['url'] ?? null;
+        $pageCssHash = $pageCss['hash'] ?? null;
+
         // Wrap content with page template
         ob_start();
         include $ctx->templates->page;
@@ -97,6 +102,11 @@ function renderMultipleFiles(Context $ctx, array $filePaths, string $pageDir): v
     $pageTitle = $pageMetadata['title'] ?? null;
     $metaDescription = extractMetaDescription($pageDir, $pageMetadata, $ctx->currentLang, $ctx->defaultLang);
     
+    // Check for page-specific CSS
+    $pageCss = findPageCss($pageDir, $ctx->contentDir);
+    $pageCssUrl = $pageCss['url'] ?? null;
+    $pageCssHash = $pageCss['hash'] ?? null;
+
     // Wrap content with page template
     ob_start();
     include $ctx->templates->page;

app/router.php

@@ -137,6 +137,11 @@ switch ($parsedPath['type']) {
         $pageTitle = $metadata['title'] ?? null;
         $metaDescription = extractMetaDescription($dir, $metadata, $ctx->currentLang, $ctx->defaultLang);
         
+        // Check for page-specific CSS
+        $pageCss = findPageCss($dir, $ctx->contentDir);
+        $pageCssUrl = $pageCss['url'] ?? null;
+        $pageCssHash = $pageCss['hash'] ?? null;
+
         include $ctx->templates->base;
         exit;