minify-build.js

@@ -35,12 +35,11 @@ async function createOptimizedBuild() {
         const purgeResults = await new PurgeCSS().purge({
             content: [
                 'public/index.html',
-                'public/about.html',
+                'public/about.html'
-                'index.html'
             ],
             css: [
-                'public/css/pico.green.min.css',
+                'public/css/pico.jade.css'
-                'public/css/pico.colors.min.css'
+                // 'public/css/pico.colors.min.css'
             ],
             safelist: {
                 standard: [
@@ -51,7 +50,8 @@ async function createOptimizedBuild() {
                     'banner-subtitle',
                     'video-container',
                     'photo-gallery',
-                    'photo-item'
+                    'photo-item',
+                    'dark'
                 ],
                 deep: [
                     /^--pico-/,
@@ -75,19 +75,25 @@ async function createOptimizedBuild() {
                     /^ul$/,
                     /^li$/,
                     /^strong$/,
-                    /^a$/
+                    /^a$/,
+                    /^a:/,  // Add anchor pseudo-classes like a:hover, a:focus
+                    /^a\./,  // Add anchor with classes like a.secondary
+                    /^a\[/   // Add anchor with attributes like a[role=button]
                 ]
             },
             variables: true,
             keyframes: true
         });
 
-        // Step 1.5: Add essential font rule that PurgeCSS removes too aggressively
+        // Step 1.5: Add essential rules that PurgeCSS removes too aggressively
         const fontRule = `:where(:host),:where(:root){background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family);}`;
+        
+        // Add missing anchor tag primary color rule
+        const anchorRule = `a:not([role=button]){--pico-color:var(--pico-primary);--pico-underline:var(--pico-primary-underline);background-color:transparent;color:var(--pico-color);text-decoration:var(--pico-text-decoration);text-decoration-color:var(--pico-underline);text-underline-offset:.125em;transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition);}a:not([role=button]):is(:hover,:active,:focus){--pico-color:var(--pico-primary-hover);--pico-underline:var(--pico-primary-hover-underline);text-decoration:underline;}`;
 
         // Step 2: CSS Minification with cssnano
         console.log('🗜️  Step 2: Minifying CSS with cssnano...');
-        const combinedCSS = purgeResults.map(result => result.css).join('\n\n') + '\n' + fontRule;
+        const combinedCSS = purgeResults.map(result => result.css).join('\n\n') + '\n' + fontRule + '\n' + anchorRule;
         
         const minifiedCSS = await postcss([
             cssnano({
@@ -156,7 +162,7 @@ async function createOptimizedBuild() {
         // Calculate JavaScript size if bundled
         let jsInfo = '';
         try {
-            const bundledJSSize = (await fs.stat('dist/scripts/scripts.js')).size;
+            const bundledJSSize = (await fs.stat('dist/scripts/bundle.js')).size;
             jsInfo = `\n   JavaScript: Bundled into ${(bundledJSSize / 1024).toFixed(1)}KB`;
         } catch (err) {
             // No JavaScript files were bundled
@@ -269,7 +275,7 @@ async function minifyHTMLFile(inputPath, outputPath) {
         .replace(/<link rel="stylesheet" href="css\/pico\.colors\.min\.css">/g, '')
         .replace(/<link rel="stylesheet" href="site-styles\/style\.css">/g, 
                 '<link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="site-styles/style.css">')
-        .replace(/<\/body>/g, '<script src="scripts/scripts.js"></script></body>');
+        .replace(/<\/body>/g, '<script src="scripts/bundle.js"></script></body>');
 
     const minified = await htmlMinify(updatedHTML, {
         collapseWhitespace: true,

public/site-styles/style.css

@@ -188,7 +188,7 @@
     }
 }
 
-/* Make headers use primary green color - only for light theme and default */
+/* Make headers use primary green color for both themes */
 :root:not([data-theme="dark"]) {
     --pico-h1-color: var(--pico-primary);
     --pico-h2-color: var(--pico-primary);
@@ -198,6 +198,16 @@
     --pico-h6-color: var(--pico-primary);
 }
 
+/* Make headers use primary color in dark theme too */
+[data-theme="dark"] {
+    --pico-h1-color: var(--pico-primary);
+    --pico-h2-color: var(--pico-primary);
+    --pico-h3-color: var(--pico-primary);
+    --pico-h4-color: var(--pico-primary);
+    --pico-h5-color: var(--pico-primary);
+    --pico-h6-color: var(--pico-primary);
+}
+
 /* Custom header colors for green theme - light mode */
 /* [data-theme="light"],
 :root:not([data-theme="dark"]) {