michael_dileo/Keyboard-Vagabond-Web
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

swap to jade theme, fix missing anchor tags

Browse Source
This commit is contained in:
Michael DiLeo
2025-08-14 09:11:44 -05:00
parent f23531dd70
commit f739f87ce4
2 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
minify-build.js
View File

@@ -35,12 +35,11 @@ async function createOptimizedBuild() {
const purgeResults = await new PurgeCSS().purge({
content: [
'public/index.html',
'public/about.html',
'index.html'
'public/about.html'
],
css: [
'public/css/pico.green.min.css',
'public/css/pico.colors.min.css'
'public/css/pico.jade.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,

12
public/site-styles/style.css
View File

@@ -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"]) {