swap to jade theme, fix missing anchor tags
This commit is contained in:
@@ -35,12 +35,11 @@ async function createOptimizedBuild() {
|
|||||||
const purgeResults = await new PurgeCSS().purge({
|
const purgeResults = await new PurgeCSS().purge({
|
||||||
content: [
|
content: [
|
||||||
'public/index.html',
|
'public/index.html',
|
||||||
'public/about.html',
|
'public/about.html'
|
||||||
'index.html'
|
|
||||||
],
|
],
|
||||||
css: [
|
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: {
|
safelist: {
|
||||||
standard: [
|
standard: [
|
||||||
@@ -51,7 +50,8 @@ async function createOptimizedBuild() {
|
|||||||
'banner-subtitle',
|
'banner-subtitle',
|
||||||
'video-container',
|
'video-container',
|
||||||
'photo-gallery',
|
'photo-gallery',
|
||||||
'photo-item'
|
'photo-item',
|
||||||
|
'dark'
|
||||||
],
|
],
|
||||||
deep: [
|
deep: [
|
||||||
/^--pico-/,
|
/^--pico-/,
|
||||||
@@ -75,19 +75,25 @@ async function createOptimizedBuild() {
|
|||||||
/^ul$/,
|
/^ul$/,
|
||||||
/^li$/,
|
/^li$/,
|
||||||
/^strong$/,
|
/^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,
|
variables: true,
|
||||||
keyframes: 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);}`;
|
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
|
// Step 2: CSS Minification with cssnano
|
||||||
console.log('🗜️ Step 2: Minifying CSS 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([
|
const minifiedCSS = await postcss([
|
||||||
cssnano({
|
cssnano({
|
||||||
@@ -156,7 +162,7 @@ async function createOptimizedBuild() {
|
|||||||
// Calculate JavaScript size if bundled
|
// Calculate JavaScript size if bundled
|
||||||
let jsInfo = '';
|
let jsInfo = '';
|
||||||
try {
|
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`;
|
jsInfo = `\n JavaScript: Bundled into ${(bundledJSSize / 1024).toFixed(1)}KB`;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// No JavaScript files were bundled
|
// 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="css\/pico\.colors\.min\.css">/g, '')
|
||||||
.replace(/<link rel="stylesheet" href="site-styles\/style\.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">')
|
'<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, {
|
const minified = await htmlMinify(updatedHTML, {
|
||||||
collapseWhitespace: true,
|
collapseWhitespace: true,
|
||||||
|
|||||||
@@ -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"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
--pico-h1-color: var(--pico-primary);
|
--pico-h1-color: var(--pico-primary);
|
||||||
--pico-h2-color: var(--pico-primary);
|
--pico-h2-color: var(--pico-primary);
|
||||||
@@ -198,6 +198,16 @@
|
|||||||
--pico-h6-color: var(--pico-primary);
|
--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 */
|
/* Custom header colors for green theme - light mode */
|
||||||
/* [data-theme="light"],
|
/* [data-theme="light"],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
|
|||||||
Reference in New Issue
Block a user