discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fluid root rem + landscape aperture: html font-size = clamp(14px, 2.4vmin, 22px) so 1rem scales w. viewport (rotation-invariant via vmin); --sidebar-w + --h2-col-w CSS vars unify navbar/footer/h2 sizing; container margin-left = sidebar + h2-col-w in landscape so applets clip cleanly under the rotated wordmark; h2 markup splits into two spans (45/55 horizontal title); drop the disparate min-height font-size jumps + 1800px sidebar-doubling overrides

Browse Source 
- html { font-size: clamp(14px, 2.4vmin, 22px) } — single sliding scale; everything in rem (sidebar widths, h2 font-size, paddings) scales together. Phone rotation swaps width/height but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold their size between portrait + landscape.
  - :root --sidebar-w: 5rem (replaces the locally-scoped $sidebar-w SCSS var that lived inside @media blocks); --h2-col-w: 3rem for the rotated wordmark column in landscape. var(--sidebar-w) + var(--h2-col-w) are the only knobs that move the layout.
  - Landscape container: margin-left = calc(var(--sidebar-w) + var(--h2-col-w)); margin-right = var(--sidebar-w). Applets are now clipped INSIDE the h2 column, so the rotated "BILLPOST" / "DASHBOARD" wordmark never has content bleeding behind it (the original complaint).
  - h2 markup refactor across 13 templates: <span>BILL</span><span>POST</span> instead of <span>BILL</span>POST. Portrait styling: display: flex; first span flex 0 0 45% + --quaUser colour; second span flex 0 0 55% + --secUser inherited. Per-span text-align: justify + text-justify: inter-character keeps the inter-letter spacing within each span. Landscape resets the flex (single rotated wordmark, not split).
  - Drop the four h2 font-size jumps (min-height: 400/500/800px) — single font-size: 3rem now scales fluidly via root rem. Drop the @media (orientation: landscape) and (max-width: 1100px) h1 override (rem-fluid handles cramped widths). Drop the entire @media (orientation: landscape) and (min-width: 1800px) sidebar-doubling block in _base.scss / _applets.scss / _bud.scss — the rem clamp ceiling already caps the size.
  - _bud.scss + _applets.scss: bud-btn / bud-panel / bud-suggestions / gear-btn / applet menus all switch to var(--sidebar-w)-based positioning; landscape rules are single (no per-breakpoint duplication).
  - Per-spec tradeoff: non-.btn-primary buttons (BYE / NVM / OK / kit-btn / etc.) inherit rem-fluid like everything else and will scale slightly w. viewport. User explicitly OK'd this — they don't need to stay px-fixed.
  - 852 ITs + 24 layout/navbar/bud FTs green; existing geometry assertions are relative or categorical (not exact-px) so the rem clamp doesn't surface failures at the 800x1200 FT viewport.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-09 00:14:14 -04:00
parent c426ca69fa
commit 3ab60c67b6
16 changed files with 107 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/static_src/scss/_base.scss
View File

@@ -1,3 +1,23 @@
// ── Fluid root rem: 1rem scales with viewport ─────────────────────────────
// All sidebar/h2/font sizes downstream are in rem, so redefining root
// font-size against `vmin` (smaller of vh/vw) gives us a single sliding
// scale that's invariant under phone rotation: rotating swaps width/height
// but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold
// their size. Floor 14px on cramped viewports, ceiling 22px on huge ones.
// 2.4vmin hits 16px (browser default) at vmin=667 (iPhone SE landscape).
html {
font-size: clamp(14px, 2.4vmin, 22px);
}
// Layout custom properties — single source of truth for the landscape
// sidebar width (navbar/footer) + the rotated-h2 column slot to the right
// of the navbar. Container margin-left in landscape adds these so applets
// can't bleed under the wordmark.
:root {
--sidebar-w: 5rem;
--h2-col-w: 3rem;
}
body {
display: flex;
flex-direction: column;
@@ -172,23 +192,36 @@ body {
.col-lg-6 {
max-width: inherit;
margin: 0 1rem;
// Two-span title: <span>BILL</span><span>POST</span>. First
// word (always 4 letters: BILL/DASH/GAME/etc.) gets 45% of
// the title width; the variable second word fills the
// remaining 55%. Letters within each span spread via
// text-align: justify + text-justify: inter-character. The
// first-span colour shifts to --quaUser so the two-tone
// heading reads "Bill | Post" / "Dash | Sky".
h2 {
display: flex;
font-size: 3rem;
color: rgba(var(--secUser), 0.75);
margin-bottom: 1rem;
text-align: justify;
text-align-last: justify;
text-justify: inter-character;
text-transform: uppercase;
text-shadow:
// 1px 1px 0 rgba(255, 255, 255, 0.125), // highlight (up-left)
var(--title-shadow-offset) var(--title-shadow-offset) 0 rgba(0, 0, 0, 0.8) // shadow (down-right)
var(--title-shadow-offset) var(--title-shadow-offset) 0 rgba(0, 0, 0, 0.8)
;
span {
> span {
text-align: justify;
text-align-last: justify;
text-justify: inter-character;
}
> span:first-child {
flex: 0 0 45%;
color: rgba(var(--quaUser), 0.75);
}
> span:last-child {
flex: 0 0 55%;
}
}
}
}
@@ -201,31 +234,20 @@ body {
}
}
@media (orientation: landscape) and (max-width: 1100px) {
body .container {
.navbar {
h1 {
font-size: 1rem !important;
}
}
}
}
@media (orientation: landscape) {
$sidebar-w: 5rem;
// ── Sidebar layout: navbar ← left, footer → right ────────────────────────────
body {
flex-direction: row;
}
// Navbar → fixed left sidebar
// Navbar → fixed left sidebar (width derives from --sidebar-w which is
// fluid via the rem-redefine above; no per-breakpoint width jumps).
body .container .navbar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: $sidebar-w;
width: var(--sidebar-w);
padding: 0.5rem 0;
border-bottom: none;
border-right: 0.1rem solid rgba(var(--secUser), 0.4);
@@ -292,8 +314,8 @@ body {
// Login form: offset from fixed sidebars in landscape
.input-group {
left: $sidebar-w;
right: $sidebar-w;
left: var(--sidebar-w);
right: var(--sidebar-w);
.navbar-text {
writing-mode: horizontal-tb;
@@ -306,35 +328,51 @@ body {
}
}
// Container: fill center, compensate for fixed sidebars on both sides.
// max-width: none overrides the @media (min-width: 1200px) rule above so the
// container fills all available space between the two sidebars on wide screens.
// Container: fill center, compensate for fixed sidebars on both sides
// AND for the rotated-h2 column on the left (so applets can't bleed
// under the wordmark — true aperture clipping).
// max-width: none overrides the @media (min-width: 1200px) rule above
// so the container fills all available space between the sidebars.
body .container {
flex: 1;
min-width: 0;
max-width: none;
margin-left: $sidebar-w;
margin-right: $sidebar-w;
margin-left: calc(var(--sidebar-w) + var(--h2-col-w));
margin-right: var(--sidebar-w);
padding: 0 0.5rem;
}
// Header row: h2 rotates into the left gutter (just right of the navbar border).
// position:fixed takes h2 out of flow; .row collapses to zero height automatically.
// Header row: h2 rotates into the dedicated --h2-col-w slot just right
// of the navbar. position:fixed takes h2 out of flow; .row collapses
// to zero height automatically. Resets portrait flex so the rotated
// wordmark renders as one continuous title (not split 45/55 here).
body .container .row {
padding: 0;
margin: 0;
}
body .container .row .col-lg-6 h2 {
position: fixed;
left: 5rem; // $sidebar-w — flush with the navbar right border
left: var(--sidebar-w);
width: var(--h2-col-w);
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
font-size: 1.5rem;
display: block; // override portrait flex
font-size: 3rem; // rem-fluid → no min-height jumps
letter-spacing: 0.4em;
margin: 0;
z-index: 85;
pointer-events: none;
> span {
// Reset portrait justify; the rotated wordmark is one continuous
// line, not a two-column split.
text-align: initial;
text-align-last: initial;
text-justify: initial;
flex: initial;
display: inline;
}
}
// Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)
@@ -344,7 +382,7 @@ body {
position: fixed;
right: 0;
top: 0;
width: $sidebar-w;
width: var(--sidebar-w);
height: 100vh;
flex-direction: column;
justify-content: center;
@@ -387,16 +425,11 @@ body {
}
}
// Footer typography refinements that only kick in once the viewport is
// wide enough to clear the cramped phone-landscape regime. Sidebar
// dimensions themselves are now fluid via rem and don't need a per-
// breakpoint width override (the old ≥1800px doubling block is gone).
@media (orientation: landscape) and (min-width: 700px) {
body .container .row .col-lg-6 h2 {
@media (min-height: 400px) {
font-size: 2.5rem;
}
@media (min-height: 500px) {
font-size: 3rem;
}
}
body #id_footer {
#id_footer_nav {
gap: 3rem !important;
@@ -420,61 +453,6 @@ body {
}
}
// ── XL landscape (≥1800px): double sidebar widths and scale content ────────────
@media (orientation: landscape) and (min-width: 1800px) {
$sidebar-xl: 8rem;
body .container .navbar {
width: $sidebar-xl;
.container-fluid {
gap: 2rem;
padding: 0 0.5rem;
}
.navbar-brand h1 { font-size: 2.4rem; }
.navbar-text { font-size: 0.78rem; } // 0.65rem × 1.2
// .btn-primary { width: 4rem; height: 4rem; font-size: 0.875rem; }
.input-group {
left: $sidebar-xl;
right: $sidebar-xl;
}
}
body .container {
margin-left: $sidebar-xl;
margin-right: $sidebar-xl;
}
// h2 page title: keep vertical rotation; shift left to clear the wider XL navbar.
body .container .row .col-lg-6 h2 {
left: 8rem; // $sidebar-xl
@media (min-height: 800px) {
font-size: 4.5rem;
}
}
body #id_footer {
width: $sidebar-xl;
#id_footer_nav {
gap: 8rem !important;
a { font-size: 3rem; }
}
.footer-container {
font-size: 0.85rem;
margin-top: 1rem;
small {
font-size: 1.2rem;
}
}
}
}
@media (orientation: portrait) and (max-width: 500px) {
body .container {
.navbar {