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

h2 padding-inline boundary between the two spans (BILL | BOARD natural gap) + landscape inherits portrait flex split (45/55 vertical, with padding-inline-end on first span = visual break between rotated words)

Browse Source 
- portrait h2 spans get padding-inline-end / padding-inline-start (0.4em each) at the 45/55 boundary; box-sizing: border-box keeps the flex basis honest. Solves the "B I L L B O A R D" run-together where the L of BILL touches the B of BOARD.
  - landscape h2 drops the `display: block` override + the > span resets that nuked text-align: justify and flex. Now inherits the portrait flex 45/55 + per-span justify + padding-inline. With writing-mode: vertical-rl, the flex axis runs vertically (45% bottom for BILL post-rotate, 55% top for POST/BOARD/etc.); padding-inline-end resolves to the bottom edge of the first span = natural gap between the two rotated words.
  - Explicit h2 height: 80vh in landscape so the flex 45/55 percentages have a defined basis to resolve against (block height isn't auto-derived in writing-mode: vertical-rl).
  - 8 layout/navbar FTs still green; assertions are categorical (position: fixed, etc.) not exact-px.

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:18:57 -04:00
parent 3ab60c67b6
commit ad9f7b43ed
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -214,13 +214,20 @@ body {
text-align: justify; text-align: justify;
text-align-last: justify; text-align-last: justify;
text-justify: inter-character; text-justify: inter-character;
box-sizing: border-box;
} }
// Padding-inline (logical) creates the natural visual gap
// between the two words at the 45/55 boundary — works for
// both portrait (horizontal) AND the landscape rotated
// wordmark (vertical-rl writing mode).
> span:first-child { > span:first-child {
flex: 0 0 45%; flex: 0 0 45%;
padding-inline-end: 0.4em;
color: rgba(var(--quaUser), 0.75); color: rgba(var(--quaUser), 0.75);
} }
> span:last-child { > span:last-child {
flex: 0 0 55%; flex: 0 0 55%;
padding-inline-start: 0.4em;
} }
} }
} }
@@ -355,24 +362,20 @@ body {
left: var(--sidebar-w); left: var(--sidebar-w);
width: var(--h2-col-w); width: var(--h2-col-w);
top: 50%; top: 50%;
height: 80vh; // explicit height so the flex 45/55 % basis resolves
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl; writing-mode: vertical-rl; // inline axis becomes top-to-bottom; flex stacks on it
display: block; // override portrait flex
font-size: 3rem; // rem-fluid → no min-height jumps font-size: 3rem; // rem-fluid → no min-height jumps
letter-spacing: 0.4em; letter-spacing: 0.4em;
margin: 0; margin: 0;
z-index: 85; z-index: 85;
pointer-events: none; pointer-events: none;
// Inherits display: flex + the per-span flex 45/55 + padding-inline
> span { // boundary from the portrait base. With writing-mode: vertical-rl the
// Reset portrait justify; the rotated wordmark is one continuous // flex axis runs vertically, so first-span (BILL) takes 45% of the
// line, not a two-column split. // height (becomes bottom 45% after rotate(180deg)) and second-span
text-align: initial; // (POST) takes the upper 55%. padding-inline-end resolves to the
text-align-last: initial; // bottom edge of the first span — natural break between words.
text-justify: initial;
flex: initial;
display: inline;
}
} }
// Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary) // Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)