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-last: justify;
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 {
flex: 0 0 45%;
padding-inline-end: 0.4em;
color: rgba(var(--quaUser), 0.75);
}
> span:last-child {
flex: 0 0 55%;
padding-inline-start: 0.4em;
}
}
}
@@ -355,24 +362,20 @@ body {
left: var(--sidebar-w);
width: var(--h2-col-w);
top: 50%;
height: 80vh; // explicit height so the flex 45/55 % basis resolves
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
display: block; // override portrait flex
writing-mode: vertical-rl; // inline axis becomes top-to-bottom; flex stacks on it
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;
}
// Inherits display: flex + the per-span flex 45/55 + padding-inline
// boundary from the portrait base. With writing-mode: vertical-rl the
// flex axis runs vertically, so first-span (BILL) takes 45% of the
// height (becomes bottom 45% after rotate(180deg)) and second-span
// (POST) takes the upper 55%. padding-inline-end resolves to the
// bottom edge of the first span — natural break between words.
}
// Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)