Skip to content

Commit 0a8107d

Browse files
mheaddmheadd
committed
Reorg CSS and add build scripts
1 parent b7f6fa3 commit 0a8107d

File tree

8 files changed

+186
-262
lines changed

8 files changed

+186
-262
lines changed

‎WEBSITE.md‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Running the build script produces the following PNG files:
3030
- Node.js 16+ (includes npm)
3131
- The `sharp` library (installed automatically via `npm install`)
3232

33-
## Building Assets
33+
## Building Assets & Styles
3434

3535
### First-time setup
3636

@@ -57,6 +57,42 @@ This executes `scripts/gen-assets.js`, which:
5757
- When deploying the website to production
5858
- Before committing changes that affect branding
5959

60+
### Minify CSS
61+
62+
The website's shared stylesheet lives at `docs/styles.css`. A minified version (`docs/styles.min.css`) is produced for production using [csso](https://github.com/css/csso).
63+
64+
Run:
65+
66+
```bash
67+
npm run build:css
68+
```
69+
70+
This executes `scripts/minify-css.js`, which:
71+
1. Reads `docs/styles.css`
72+
2. Minifies it with structural optimizations
73+
3. Writes `docs/styles.min.css`
74+
4. Reports original vs minified size
75+
76+
Both `docs/index.html` and `docs/faq.html` reference the minified file:
77+
78+
```html
79+
<link rel="stylesheet" href="./styles.min.css">
80+
```
81+
82+
### Combined Build
83+
84+
You can run both asset generation and CSS minification with a single command:
85+
86+
```bash
87+
npm run build
88+
```
89+
90+
This sequentially runs:
91+
1. `build:assets` – raster icons & OG image
92+
2. `build:css` – stylesheet minification
93+
94+
Include this in deployment workflows to ensure fresh artifacts.
95+
6096
## The Build Script
6197

6298
`scripts/gen-assets.js` uses the [sharp](https://sharp.pixelplumbing.com/) library to convert SVGs to PNGs. Key implementation details:
@@ -66,7 +102,7 @@ This executes `scripts/gen-assets.js`, which:
66102
- **Automated directory creation** — Creates output directories if missing
67103
- **Error handling** — Exits with code 1 on failure for CI/CD compatibility
68104

69-
## Integration with HTML
105+
## Integration with HTML & CSS
70106

71107
The generated PNG assets are referenced in `docs/index.html`:
72108

@@ -108,7 +144,8 @@ Potential improvements to the asset pipeline:
108144
- **Dark mode variant** — Generate alternate OG image for `prefers-color-scheme: dark`
109145
- **ICO bundle** — Create multi-resolution `.ico` file for maximum legacy support
110146
- **Automated optimization** — Add `oxipng` or `pngquant` for further size reduction
111-
- **CI integration** — Run asset generation automatically on pre-commit hooks
147+
- **CI integration** — Run asset generation and CSS minification automatically on pre-commit / CI
148+
- **CSS splitting** — Separate critical CSS, inline above-the-fold styles
112149
- **PWA manifest** — Generate `manifest.json` with icon references for installability
113150

114151
## Related Documentation

‎docs/faq.html‎

Lines changed: 29 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -16,69 +16,41 @@
1616
<meta name="twitter:title" content="SpecOps FAQ" />
1717
<meta name="twitter:description" content="Answers to common questions about Specification-Driven Legacy Modernization." />
1818
<meta name="twitter:image" content="./og-image.png" />
19+
<link rel="stylesheet" href="./styles.min.css">
1920
<style>
20-
html { scroll-behavior: smooth; }
21-
* { box-sizing: border-box; }
22-
:root {
23-
--primary: #2563eb; --primary-dark: #1e40af; --secondary: #10b981;
24-
--text: #1f2937; --text-light: #6b7280; --bg: #ffffff; --bg-alt: #f9fafb;
25-
--border: #e5e7eb; --accent: #8b5cf6; --glass-bg: rgba(255,255,255,0.7);
26-
--glass-border: rgba(255,255,255,0.35); --glow: 0 10px 30px rgba(37,99,235,.25);
27-
}
28-
body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
29-
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
30-
31-
header {
32-
background: radial-gradient(1200px 500px at 20% -10%, rgba(255,255,255,0.15), transparent 60%),
33-
linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);
34-
color: #fff; padding: 3.5rem 0 3rem; position: relative; overflow: hidden;
35-
}
36-
header h1 { font-size: 2.25rem; margin: 0 0 .5rem; letter-spacing: -0.02em; }
37-
header p { font-size: 1.125rem; opacity: .95; margin: 0; }
38-
39-
.toolbar { background: var(--bg); border-bottom: 1px solid var(--border); }
40-
.toolbar .container { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; }
41-
.btn-link { color: var(--primary); text-decoration: none; font-weight: 600; border: 2px solid var(--primary); padding: .4rem .8rem; border-radius: .5rem; }
42-
.btn-link:hover { background: var(--primary); color: #fff; }
43-
44-
main { padding: 2rem 0 4rem; background: var(--bg-alt); }
45-
.content {
46-
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 1rem;
47-
box-shadow: 0 8px 30px rgba(0,0,0,0.08), var(--glow);
48-
backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
49-
padding: 2rem; overflow: hidden;
50-
}
51-
52-
/* Markdown typography */
53-
.md h1 { font-size: 2rem; margin: 1.5rem 0 .75rem; }
54-
.md h2 { font-size: 1.6rem; margin: 1.25rem 0 .5rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
55-
.md h3 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
56-
.md p { margin: .75rem 0; color: var(--text); }
57-
.md ul { margin: .5rem 0 .75rem 1.25rem; }
58-
.md li { margin: .35rem 0; }
59-
.md code { background: #1118270d; padding: .15rem .35rem; border-radius: .25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .95em; }
60-
.md pre { background: #0b1020; color: #e5e7eb; padding: 1rem; border-radius: .5rem; overflow: auto; }
61-
.md a { color: var(--primary-dark); text-decoration: none; }
62-
.md a:hover { text-decoration: underline; }
63-
.md hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
64-
.md table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
65-
.md th, .md td { border: 1px solid var(--border); padding: .5rem .6rem; text-align: left; }
66-
67-
footer { background: var(--text); color: #fff; padding: 1.5rem 0; text-align: center; }
68-
footer a { color: var(--secondary); text-decoration: none; }
69-
footer a:hover { text-decoration: underline; }
70-
71-
@media (max-width: 768px) {
72-
header h1 { font-size: 1.75rem; }
73-
header p { font-size: 1rem; }
74-
.content { padding: 1.25rem; }
75-
}
21+
/* Page-specific overrides & FAQ layout */
22+
header { padding:3.5rem 0 3rem; }
23+
header h1 { font-size:2.25rem; margin:0 0 .5rem; letter-spacing:-0.02em; }
24+
header p { font-size:1.125rem; opacity:.95; margin:0; }
25+
.container { max-width:1100px; padding:0 1.25rem; }
26+
main { padding:2rem 0 4rem; background:var(--bg-alt); }
27+
.content { background: var(--glass-bg); border:1px solid var(--glass-border); border-radius:1rem; box-shadow:0 8px 30px rgba(0,0,0,0.08), var(--glow); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); padding:2rem; overflow:hidden; }
28+
.toolbar { background: var(--bg); border-bottom:1px solid var(--border); }
29+
.toolbar .container { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; }
30+
.btn-link { color:var(--primary); text-decoration:none; font-weight:600; border:2px solid var(--primary); padding:.4rem .8rem; border-radius:.5rem; }
31+
.btn-link:hover { background:var(--primary); color:#fff; }
32+
/* Markdown typography within FAQ */
33+
.md h1 { font-size:2rem; margin:1.5rem 0 .75rem; }
34+
.md h2 { font-size:1.6rem; margin:1.25rem 0 .5rem; border-bottom:1px solid var(--border); padding-bottom:.25rem; }
35+
.md h3 { font-size:1.25rem; margin:1rem 0 .5rem; }
36+
.md p { margin:.75rem 0; color:var(--text); }
37+
.md ul { margin:.5rem 0 .75rem 1.25rem; }
38+
.md li { margin:.35rem 0; }
39+
.md code { background:#1118270d; padding:.15rem .35rem; border-radius:.25rem; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; font-size:.95em; }
40+
.md pre { background:#0b1020; color:#e5e7eb; padding:1rem; border-radius:.5rem; overflow:auto; }
41+
.md a { color:var(--primary-dark); text-decoration:none; }
42+
.md a:hover { text-decoration:underline; }
43+
.md hr { border:0; border-top:1px solid var(--border); margin:1.5rem 0; }
44+
.md table { width:100%; border-collapse:collapse; margin:1rem 0; }
45+
.md th, .md td { border:1px solid var(--border); padding:.5rem .6rem; text-align:left; }
46+
footer { padding:1.5rem 0; }
47+
@media (max-width:768px){ header h1{font-size:1.75rem;} header p{font-size:1rem;} .content{padding:1.25rem;} }
7648
</style>
7749
</head>
7850
<body>
7951
<header>
8052
<div class="container">
81-
<h1>❓ SpecOps FAQ</h1>
53+
<h1 class="logo-gradient">⚡ SpecOps FAQ</h1>
8254
<p>Frequently Asked Questions about Specification-Driven Legacy Modernization</p>
8355
</div>
8456
</header>

0 commit comments

Comments
 (0)