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

30
src/static_src/scss/_bud.scss
View File

@@ -12,16 +12,16 @@
bottom: 0.5rem;
left: 0.5rem;
// In landscape, centre the btn within the navbar sidebar — the sidebar
// is `var(--sidebar-w)` wide and the btn is 3rem, so left = (sidebar-w
// − 3rem) / 2. The clamp on the root font-size means that calc resolves
// to a sane value across viewport sizes; no per-breakpoint override.
@media (orientation: landscape) {
left: 1rem;
left: calc((var(--sidebar-w) - 3rem) / 2);
bottom: 0.5rem;
top: auto;
}
@media (orientation: landscape) and (min-width: 1800px) {
left: 2.5rem; // mirror the doubled 8rem sidebar centring
}
z-index: 318;
font-size: 1.75rem;
cursor: pointer;
@@ -63,13 +63,10 @@
opacity: 0;
@media (orientation: landscape) {
left: calc(4rem + 0.5rem); // clear the navbar sidebar
right: calc(4rem + 0.5rem); // clear the footer sidebar
}
@media (orientation: landscape) and (min-width: 1800px) {
left: calc(8rem + 0.5rem);
right: calc(8rem + 0.5rem);
// Clear both fixed sidebars; --sidebar-w scales fluidly via the
// root rem clamp, so this is the only landscape rule needed.
left: calc(var(--sidebar-w) + 0.5rem);
right: calc(var(--sidebar-w) + 0.5rem);
}
#id_recipient {
@@ -138,13 +135,8 @@ html:has(#id_kit_bag_dialog[open]) #id_bud_btn {
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
@media (orientation: landscape) {
left: calc(4rem + 0.5rem);
right: calc(4rem + 0.5rem);
}
@media (orientation: landscape) and (min-width: 1800px) {
left: calc(8rem + 0.5rem);
right: calc(8rem + 0.5rem);
left: calc(var(--sidebar-w) + 0.5rem);
right: calc(var(--sidebar-w) + 0.5rem);
}
}