Chris Olson
b69e0baaa0
Performance / self-hosting - Remove the render-blocking Bootstrap 4 CDN stylesheet (~160 KB + extra DNS/TLS to a third party) and replace it with ~60 lines of self-hosted grid/utility CSS covering the small subset actually used (container, row, col-lg-5/6/7, order-lg, align-items-center, text-center, table-responsive, spacing, and the button base). Verified across desktop/tablet/mobile. - Add a Cloudflare Pages `_headers` file: 30-day cache for static media and icons, 1-day for css/js, plus baseline security headers (X-Content-Type-Options, Referrer-Policy). - Add decoding="async" to all lazily-loaded images. The site now loads no third-party CSS; only Google Fonts remain external. SCSS source kept in sync (new components/_grid partial; button base + reset mirrored in main.scss). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
50 lines
1.2 KiB
SCSS
50 lines
1.2 KiB
SCSS
// Minimal grid & utilities — self-hosted replacement for the small subset of
|
|
// Bootstrap 4 this site used. Removes a render-blocking ~160 KB external
|
|
// stylesheet. Breakpoint lg = 992px (one past $m-break: 991px).
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1140px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
|
|
> [class*="col-"] {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
|
|
// mobile-first: columns are full width until the lg breakpoint
|
|
[class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
|
|
|
|
.align-items-center { align-items: center; }
|
|
.text-center { text-align: center; }
|
|
.mb-4 { margin-bottom: 1.5rem; }
|
|
|
|
.table-responsive {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
|
|
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
|
|
.col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
|
|
.order-lg-1 { order: 1; }
|
|
.order-lg-2 { order: 2; }
|
|
.mb-lg-0 { margin-bottom: 0; }
|
|
}
|