new css

AGENTS.md

@@ -34,6 +34,8 @@ HTML plus CSS, JavaScript, images, PDFs, and other static assets.
 | `src/components/` | Astro components for shared layout migration |
 | `dist/` | Generated static output from `npm run build` |
 | `css/` | Site-level stylesheets |
+| `css/theme.css` | Extracted Parabola inline theme settings |
+| `css/site.css` | Extracted site fixes and homepage/frontpage rules |
 | `js/` | Site-level scripts |
 | `assets/` | Images, PDFs, fonts, theme files, uploads, and static vendor files |
 | `docs/` | Maintainer notes and site-structure documentation |

README.md

@@ -18,6 +18,8 @@ Local static website files built with Astro.
 - `website/speeches/` - speech archive indexes and speech category pages
 - `website/PAGES.md` - map from the old folder URLs to the current HTML paths
 - `css/` - site-level stylesheets
+- `css/theme.css` - extracted Parabola inline theme settings
+- `css/site.css` - extracted site fixes and homepage/frontpage rules
 - `js/` - site-level scripts
 - `assets/` - images, PDFs, fonts, theme files, uploads, and vendor files
 - `docs/` - maintainer notes
@@ -25,6 +27,7 @@ Local static website files built with Astro.
 - `scripts/render-shared-layout.mjs` - updates repeated layout across HTML files
 - `scripts/organize-content.mjs` - organizes exported blog and speech pages
 - `scripts/extract-content.mjs` - extracts posts into `content/`
+- `scripts/extract-theme-css.mjs` - extracts repeated inline theme CSS into files
 
 ## Maintenance
 
@@ -40,6 +43,10 @@ Regenerate Markdown content from the exported post HTML:
 npm run extract:content
 ```
 
+The repeated exported inline styles have been moved into `css/theme.css` and
+`css/site.css`. Tiny one-page WordPress block-support styles may still remain
+inline when they only apply to a single page.
+
 After changing shared navigation, sidebar, or footer markup in
 `scripts/components.mjs`, run:
 

css/site.css

@@ -0,0 +1,24 @@
+/* Shared site fixes extracted from repeated inline styles. */
+body.custom-background { background-color: #ffffff; }
+/* General fix for the header image */
+#bg_image {
+    width: 100%; /* Scale the image to fit the container */
+    height: auto; /* Maintain aspect ratio to avoid stretching */
+    max-width: 100%; /* Prevent the image from exceeding container width */
+}
+
+/* Mobile-specific fix for the header image */
+@media (max-width: 768px) {
+    #bg_image {
+				
+        object-fit: contain; /* Ensure the entire image is visible */
+        width: 100%; /* Let the image adjust to screen width */
+        height: auto; /* Maintain aspect ratio */
+    }
+}
+/* Shortcodes Ultimate column rule used by exported content. */
+.su-column-size-1-4{
+  width:18%;
+}
+/* Homepage slider/frontpage settings from the original export. */
+#colophon {display: none;} .slider-wrapper { max-width: 1200px; } #slider{ max-width: 1200px; max-height: 350px; border:0px solid #ffffff; } #front-text1, #front-text2 { color: #212121; } #front-columns > div { width: 32%; } #front-columns > div.ppcolumn:nth-child(3n) { margin-right: 0; } #front-columns > div.ppcolumn:nth-child(3n+1) { clear: left; } .column-image { padding: 0px; } .column-image h3 {margin-bottom: 0px; } .column-image img { max-height:201px;} .nivo-caption { background-color: rgb(252,250,250); background-color: rgba(252,250,250,0.7); } .nivo-caption, .nivo-caption a { color: #0e2012; } .theme-default .nivoSlider { background-color: #ffffff; } .theme-default .nivo-controlNav:before, .theme-default .nivo-controlNav:after { border-top-color:#ffffff; } .theme-default .nivo-controlNav { background-color:#ffffff; } .slider-bullets .nivo-controlNav a { background-color: #fdf7f7; } .slider-bullets .nivo-controlNav a:hover { background-color: #fdfcfc; } .slider-bullets .nivo-controlNav a.active {background-color: #ffffff; } .slider-numbers .nivo-controlNav a { color:#fdf7f7; background-color:#F7F7F2;} .slider-numbers .nivo-controlNav a:hover { color: #fdfcfc; background-color:#FFFFFF } .slider-numbers .nivo-controlNav a.active { color:#ffffff;} .column-image h3{ color: #333333; background-color: rgb(255,255,255); } .columnmore { background-color: #F7F7F2; } .columnmore:before { border-bottom-color: #F7F7F2; } #front-columns h3.column-header-noimage { background: #FFFFFF; }

docs/SITE-STRUCTURE.md

@@ -26,6 +26,8 @@ is kept in `website/`, while Astro emits the served site into `dist/`.
 - `src/components/` - Astro shared layout components for ongoing migration
 - `dist/` - generated site output, ignored by git
 - `css/` - site-level stylesheets
+- `css/theme.css` - extracted Parabola inline theme settings
+- `css/site.css` - extracted shared site fixes and homepage/frontpage rules
 - `js/` - site-level scripts
 - `assets/` - images, PDFs, fonts, theme files, uploads, and vendor files
 - `docs/` - maintainer documentation
@@ -34,6 +36,7 @@ is kept in `website/`, while Astro emits the served site into `dist/`.
 - `scripts/organize-content.mjs` - organizes exported blog and speech pages
 - `scripts/copy-static-assets.mjs` - copies `assets/`, `css/`, and `js/` into `dist/`
 - `scripts/extract-content.mjs` - extracts dated post pages into `content/`
+- `scripts/extract-theme-css.mjs` - extracts repeated inline CSS into `css/theme.css` and `css/site.css`
 - `docker/` and `compose.yaml` - local static server preview
 - `.forgejo/` - deployment automation
 
@@ -56,6 +59,8 @@ the file so formatting is preserved while metadata becomes frontmatter.
 ## Asset Layout
 
 - `css/block-library.css` - WordPress block styles used by the pages
+- `css/theme.css` - CSS extracted from the repeated Parabola inline export
+- `css/site.css` - shared site fixes, shortcode rule, and homepage slider/frontpage CSS
 - `js/jquery.min.js` - shared jQuery dependency used by the pages
 - `assets/theme/` - exported theme styles, scripts, fonts, and images
 - `assets/vendor/` - exported third-party plugin/vendor assets

package.json

@@ -3,6 +3,7 @@
     "organize": "node scripts/organize-content.mjs",
     "render:layout": "node scripts/render-shared-layout.mjs",
     "extract:content": "node scripts/extract-content.mjs",
+    "extract:theme": "node scripts/extract-theme-css.mjs",
     "prepare:source": "npm run organize && npm run render:layout",
     "dev": "npm run prepare:source && astro dev --host 0.0.0.0",
     "build": "npm run prepare:source && astro build && node scripts/copy-static-assets.mjs",

scripts/extract-theme-css.mjs

@@ -0,0 +1,134 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const repoRoot = process.cwd();
+const websiteRoot = path.join(repoRoot, "website");
+const cssRoot = path.join(repoRoot, "css");
+
+const themeCssPath = path.join(cssRoot, "theme.css");
+const siteCssPath = path.join(cssRoot, "site.css");
+
+function read(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+function write(filePath, value) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, value);
+}
+
+function walkHtml(dir) {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      return walkHtml(fullPath);
+    }
+    return entry.isFile() && entry.name.endsWith(".html") ? [fullPath] : [];
+  });
+}
+
+function extractStyle(html, id) {
+  return html.match(new RegExp(`<style\\b[^>]*id=["']${id}["'][^>]*>([\\s\\S]*?)<\\/style>`))?.[1].trim() ?? "";
+}
+
+function extractAnonymousShortcodeCss(html) {
+  return (
+    Array.from(html.matchAll(/<style\s+type=["']text\/css["']>([\s\S]*?)<\/style>/g))
+      .map((match) => match[1].trim())
+      .find((body) => body.includes(".su-column-size-1-4")) ?? ""
+  );
+}
+
+function buildCssFiles() {
+  const aboutHtml = read(path.join(websiteRoot, "about.html"));
+  const indexHtml = read(path.join(websiteRoot, "index.html"));
+
+  const aboutTheme = extractStyle(aboutHtml, "parabola-style-inline-css");
+  const indexTheme = extractStyle(indexHtml, "parabola-style-inline-css");
+  if (!aboutTheme || !indexTheme) {
+    return false;
+  }
+  const marker = "/* Parabola Custom CSS */";
+  const indexExtra = indexTheme.includes(marker)
+    ? indexTheme.slice(0, indexTheme.indexOf(marker)).replace(aboutTheme.slice(0, aboutTheme.indexOf(marker)), "").trim()
+    : "";
+
+  const customBackground = extractStyle(aboutHtml, "custom-background-css");
+  const headerFix = extractStyle(aboutHtml, "site-custom-css");
+  const shortcodeCss = extractAnonymousShortcodeCss(aboutHtml);
+
+  write(
+    themeCssPath,
+    [
+      "/* Extracted from the exported Parabola inline theme settings. */",
+      aboutTheme,
+      "",
+    ].join("\n")
+  );
+
+  write(
+    siteCssPath,
+    [
+      "/* Shared site fixes extracted from repeated inline styles. */",
+      customBackground,
+      "",
+      headerFix,
+      "",
+      "/* Shortcodes Ultimate column rule used by exported content. */",
+      shortcodeCss,
+      "",
+      "/* Homepage slider/frontpage settings from the original export. */",
+      indexExtra,
+      "",
+    ]
+      .filter((section) => section !== "")
+      .join("\n")
+  );
+
+  return true;
+}
+
+function ensureThemeLinks(html) {
+  if (html.includes("href='/css/theme.css'") || html.includes('href="/css/theme.css"')) {
+    return html;
+  }
+
+  const links = [
+    "<link rel='stylesheet' id='familyfedie-theme-css' href='/css/theme.css' type='text/css' media='all' />",
+    "<link rel='stylesheet' id='familyfedie-site-css' href='/css/site.css' type='text/css' media='all' />",
+  ].join("\n");
+
+  return html.replace(
+    /(<link rel=['"]stylesheet['"] id=['"]parabola-style-css['"][^>]*>\s*)/,
+    `$1${links}\n`
+  );
+}
+
+function removeExtractedInlineStyles(html) {
+  return html
+    .replace(/\n?<style\b[^>]*id=["']parabola-style-inline-css["'][^>]*>[\s\S]*?<\/style>\s*/g, "\n")
+    .replace(/\n?<style\b[^>]*id=["']custom-background-css["'][^>]*>[\s\S]*?<\/style>\s*/g, "\n")
+    .replace(/\n?<style\b[^>]*id=["']site-custom-css["'][^>]*>[\s\S]*?<\/style>\s*/g, "\n")
+    .replace(/\n?<style\s+type=["']text\/css["']>\s*\.su-column-size-1-4\{[\s\S]*?<\/style>\s*/g, "\n");
+}
+
+const wroteCssFiles = buildCssFiles();
+
+let updated = 0;
+
+for (const filePath of walkHtml(websiteRoot)) {
+  const original = read(filePath);
+  const next = removeExtractedInlineStyles(ensureThemeLinks(original));
+
+  if (next !== original) {
+    write(filePath, next);
+    updated += 1;
+  }
+}
+
+console.log(
+  wroteCssFiles
+    ? "Extracted repeated inline CSS to css/theme.css and css/site.css."
+    : "Inline theme CSS was already extracted; kept existing css/theme.css and css/site.css."
+);
+console.log(`Updated ${updated} HTML files.`);