From 8b1a30e65954ddd84fe4129d48dfa49dea72a3e6 Mon Sep 17 00:00:00 2001 From: DJBsec <77978186+DJBsec@users.noreply.github.com> Date: Sat, 9 May 2026 23:28:41 -0500 Subject: [PATCH] Bump type scale, widen page container, fix tiny font sizes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two-part legibility pass after user feedback: Type scale — bumped --text-2xs from 0.625rem to 0.78rem (was ~10px, now ~12.5px) and --text-xs from 0.75 to 0.88rem. Replaced hardcoded 0.58/0.6/0.62/0.68/0.75/0.8/0.82rem literals in _cards.scss and _home.scss with the tokens. CVE rows on home page jump from 0.6rem meta / 0.8rem body to var(--text-xs) / 1rem with 1.45 line-height — the explicit case the user called unreadable. Width — _config.yml max_width 1200px → 1500px. Converted col-lg-10/11 wrappers on grid pages (tools, start-here, templates, blue-team, calendar) to col-12 so cards/tables fill the page. Added .post > article > p,ul,ol max-width: 78ch in _page.scss to keep long-form prose readable at the new width; .row, grids, .table-responsive, table opt out. Build clean. Co-Authored-By: Claude Opus 4.7 (1M context) --- _config.yml | 2 +- _pages/blue-team.md | 4 ++-- _pages/cybersecurity-calendar.md | 4 ++-- _pages/start-here.md | 4 ++-- _pages/templates.md | 4 ++-- _pages/tools.md | 4 ++-- _sass/_cards.scss | 37 +++++++++++++++++--------------- _sass/_home.scss | 22 +++++++++---------- _sass/_page.scss | 32 ++++++++++++++++++++++++--- _sass/_tokens.scss | 11 +++++----- 10 files changed, 77 insertions(+), 47 deletions(-) diff --git a/_config.yml b/_config.yml index ff5a42b5a..fd199779b 100644 --- a/_config.yml +++ b/_config.yml @@ -50,7 +50,7 @@ socials_in_search: true bib_search: true # Dimensions -max_width: 1200px +max_width: 1500px # TODO: add layout settings (single page vs. multi-page) diff --git a/_pages/blue-team.md b/_pages/blue-team.md index 5c107dd5a..f961f58f9 100644 --- a/_pages/blue-team.md +++ b/_pages/blue-team.md @@ -6,8 +6,8 @@ permalink: /blue-team/ nav: false --- -
-
+
+

Overview

diff --git a/_pages/cybersecurity-calendar.md b/_pages/cybersecurity-calendar.md index af39c7f84..648c1627a 100644 --- a/_pages/cybersecurity-calendar.md +++ b/_pages/cybersecurity-calendar.md @@ -7,8 +7,8 @@ nav: true nav_order: 6 --- -
-
+
+
diff --git a/_pages/start-here.md b/_pages/start-here.md index c9acd76d5..91ce0c1e2 100644 --- a/_pages/start-here.md +++ b/_pages/start-here.md @@ -7,8 +7,8 @@ nav: true nav_order: 2 --- -
-
+
+

Guided

diff --git a/_pages/templates.md b/_pages/templates.md index a6ea80d16..4c71dd12d 100644 --- a/_pages/templates.md +++ b/_pages/templates.md @@ -6,8 +6,8 @@ description: Practical security artifacts — incident response, vulnerability t nav: false --- -
-
+
+

Downloads

diff --git a/_pages/tools.md b/_pages/tools.md index 1192f3762..a52a29c80 100644 --- a/_pages/tools.md +++ b/_pages/tools.md @@ -19,8 +19,8 @@ children: permalink: /ai-tools-prompts/ --- -
-
+
+

Toolkit

diff --git a/_sass/_cards.scss b/_sass/_cards.scss index 430a3cc8c..16c0486a3 100644 --- a/_sass/_cards.scss +++ b/_sass/_cards.scss @@ -21,21 +21,21 @@ } &__date { font-family: $font-mono; - font-size: 0.6rem; + font-size: var(--text-2xs); color: var(--color-ink-muted); margin-bottom: 6px; } &__title { font-family: $font-display; - font-size: 1.05rem; + font-size: 1.2rem; font-weight: 700; color: var(--color-ink); margin-bottom: 6px; - line-height: 1.25; + line-height: 1.3; letter-spacing: -0.01em; } &__desc { - font-size: 0.82rem; + font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.65; } @@ -47,7 +47,7 @@ border-color: rgba(0, 87, 255, 0.2); .djb-card__title { - font-size: 1.35rem; + font-size: 1.55rem; } } @@ -70,13 +70,15 @@ // Mini CVE headline row (inside featured card right column) .cve-row { - font-size: 0.8rem; + font-size: 1rem; + font-weight: 500; color: var(--color-ink); - padding: 8px 10px; + padding: 10px 12px; border-left: var(--accent-stripe-width) solid var(--color-accent); - background: rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.6); border-radius: 0 3px 3px 0; - margin-bottom: 6px; + margin-bottom: 8px; + line-height: 1.45; html[data-theme="dark"] & { background: rgba(255, 255, 255, 0.05); @@ -84,9 +86,10 @@ &__meta { font-family: $font-mono; - font-size: 0.6rem; + font-size: var(--text-xs); color: var(--color-ink-muted); - margin-top: 2px; + margin-top: 4px; + letter-spacing: 0.02em; } } @@ -99,31 +102,31 @@ &__badge { font-family: $font-mono; - font-size: 0.62rem; + font-size: var(--text-2xs); color: var(--color-accent); border: 1px solid rgba(0, 87, 255, 0.3); - padding: 2px 7px; + padding: 3px 8px; border-radius: 2px; display: inline-block; - margin-bottom: 8px; + margin-bottom: 10px; letter-spacing: 0.06em; } &__name { font-family: $font-display; - font-size: 0.9rem; + font-size: var(--text-base); font-weight: 700; color: var(--color-ink); margin-bottom: 4px; } &__location { - font-size: 0.75rem; + font-size: var(--text-sm); color: var(--color-ink-muted); margin-bottom: 8px; } &__cost { font-family: $font-mono; - font-size: 0.68rem; + font-size: var(--text-xs); color: var(--color-ink-muted); border-top: 1px solid var(--color-surface-border); padding-top: 8px; diff --git a/_sass/_home.scss b/_sass/_home.scss index db7c5aa65..121d6f9a0 100644 --- a/_sass/_home.scss +++ b/_sass/_home.scss @@ -54,7 +54,7 @@ &__label { font-family: $font-mono; - font-size: 0.62rem; + font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); @@ -64,7 +64,7 @@ } &__text { - font-size: 0.85rem; + font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.8; margin-bottom: 16px; @@ -85,15 +85,15 @@ &__label { font-family: $font-mono; - font-size: 0.58rem; + font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-muted); - margin-bottom: 2px; + margin-bottom: 4px; } &__value { font-family: $font-display; - font-size: 0.95rem; + font-size: var(--text-base); font-weight: 700; color: var(--color-ink); } @@ -222,8 +222,8 @@ &__tagline { font-family: $font-mono; - font-size: 0.62rem; - color: rgba(255, 255, 255, 0.35); + font-size: var(--text-xs); + color: rgba(255, 255, 255, 0.4); margin-top: 2px; } @@ -235,8 +235,8 @@ margin: 0; a { - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.5); + font-size: var(--text-sm); + color: rgba(255, 255, 255, 0.55); text-decoration: none; &:hover { color: #fff; @@ -246,8 +246,8 @@ &__meta { font-family: $font-mono; - font-size: 0.62rem; - color: rgba(255, 255, 255, 0.3); + font-size: var(--text-xs); + color: rgba(255, 255, 255, 0.35); text-align: right; } } diff --git a/_sass/_page.scss b/_sass/_page.scss index c130f3e58..eac380ef6 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -11,7 +11,7 @@ .page-eyebrow { font-family: $font-mono; - font-size: 0.68rem; + font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); @@ -21,8 +21,9 @@ .page-description { color: var(--color-ink-muted); - font-size: 0.95rem; + font-size: 1.05rem; line-height: 1.6; + max-width: 70ch; } .page-divider { @@ -67,12 +68,37 @@ .badge { font-family: $font-mono; - font-size: 0.6rem; + font-size: var(--text-2xs); letter-spacing: 0.06em; font-weight: 600; } } +// Constrain long-form prose to a comfortable reading width inside wide pages. +// Grid/table/card markup escapes via its own width. Anchor: .post > article > p,ul,ol. +.post > article > p, +.post > article > ul, +.post > article > ol, +.post > article > blockquote, +.post > article > h1, +.post > article > h2, +.post > article > h3, +.post > article > h4 { + max-width: 78ch; +} + +// Opt-out: anything inside an explicit row/grid/card escapes the prose width. +.post > article .row, +.post > article .tools-grid, +.post > article .learn-grid, +.post > article .tools-toc, +.post > article .tpl-toc, +.post > article .news-grid, +.post > article .table-responsive, +.post > article table { + max-width: none; +} + // ── Chip secondary (neutral, for Learn sub-pages) ──────────────────────────── // Used on Books, Podcasts, Maps, Platforms, Search Engines pages. .chip--secondary { diff --git a/_sass/_tokens.scss b/_sass/_tokens.scss index 043073680..09b38d959 100644 --- a/_sass/_tokens.scss +++ b/_sass/_tokens.scss @@ -16,12 +16,13 @@ --color-warning: #d97706; --accent-stripe-width: 2px; - // Type scale — modular 1.25 ratio. Cap long-form body at 70ch. - --text-2xs: 0.625rem; - --text-xs: 0.75rem; - --text-sm: 0.875rem; + // Type scale — modular 1.2 ratio. Cap long-form body at 70ch. + // Bumped 2026-05-09: previous 0.625/0.75 felt unreadable on dense UI. + --text-2xs: 0.78rem; + --text-xs: 0.88rem; + --text-sm: 0.95rem; --text-base: 1rem; - --text-lg: 1.125rem; + --text-lg: 1.15rem; } html[data-theme="dark"] {