Repository navigation
Fix nested grid widths and button styling bleeding into slider controls - #11
Merged
Merged
Conversation
Three related layout bugs, all from markup or selectors that outlived the grid they were written for. Nested columns were numbered against the page grid, not their container. typegrid.css sizes every column as a percentage of its own container, so `.desktop-3` inside a `.desktop-3 .nested` column resolved to a quarter of that column, not a full row. The project sidebars laid their three info blocks out as 75px slivers side by side instead of stacking, the shop grid squeezed four items into three quarters of the row with the first one stranded to the right of the rule above it, and the same slip narrowed the contact map and the shop item's cart summary. Renumbered the children of every affected `.nested` container out of twelve again. Tablet and phone widths are unchanged: those parents are `tablet-12`, so their `tablet-*` and `mobile-*` numbers already resolved against the full row. The button skin was written as a bare element selector, so `button:hover` outranked the `background: none` that the slider arrows, the thumbnail strip and the labelled project nav set for themselves, and filled them with accent as the pointer passed over. Scoped the skin to `.button` / `a.button`; every skinned button in the template already carries the class. Focus rings on those strip controls were drawn 3px outside the control, which spilled past the dark panel onto the page and was clipped away entirely inside the thumbnail strip's scrolling box, in a colour too dark to read against the panel. They now draw a bright accent ring inside the control. Also documented how nesting counts in the README, since nothing said. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019XKBy19ZHfSkcxXMAwiKUP
Contributor
Previewhttps://subwaymatch.github.io/typefolio/pr-11/ Updated for GitHub Pages cannot set response headers, so the Generated by Claude Code |
Contributor
Checks passedMarkup, CSP, accessibility, behaviour and render checks are all green.
Generated by Claude Code |
Typography - Inter, self-hosted as two subset woff2 files, replaces both the Helvetica stack and Roboto Slab. One family sets the whole template, so the --font-serif token is gone and the four display rules that used it now carry tracking instead. Everything is tracked in slightly, Inter being drawn a touch wide at its defaults: --tracking-text on body, --tracking-display on the large 300-weight lines. - Nothing is set below 14px any more. The body clamp now runs 14px to 15px and every declaration under 14px was lifted to it, which made the tablet override on the nav a no-op; it is gone. - Every page preloads Inter, since every page renders it. Roboto Slab's files and its Apache licence are out, Inter's OFL is in. Header - The wordmark is text rather than a 764px PNG: no request, no invert filter to survive dark mode, and sharp at any size. It is sized in cqw against its own column so it fills the header at every width the way the bitmap did, with the ring drawn in CSS. Menu - The 01.-04. numbering is out of the markup and the stylesheet. - Parent items get a Lucide chevron at the right edge of their row, down for a submenu below and right for one that opens sideways, drawn as a masked icon so it takes the link's own colour. The script no longer appends a text arrow, which also means the phone menu is cloned from markup that never had one. - The dropdown has its own surface, --color-menu, a shade off the page rather than the black panel it borrowed: near-white with black text in light mode, one step up from the page in dark mode. The inverted buttons and the skip link keep the dark panel. Buttons - The full-width call to action was 86px tall for a 14px label. Padding is now sized to the label: 47px for the inline button, 56px for the full-width one. Sliders - Drag to navigate with a mouse. Touch and trackpad already pan the track, so this only takes over for a pointer that cannot: snapping is off for the length of the drag, the nearest slide is snapped to on release, and a drag that ends on a link does not follow it. The native image drag is suppressed, without which the browser swallows the gesture. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019XKBy19ZHfSkcxXMAwiKUP
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three layout bugs, all from markup or selectors that outlived the grid they were written for.
Nested columns were numbered against the page grid
typegrid.csssizes every column as a percentage of its own container, so.desktop-3inside a.desktop-3 .nestedcolumn resolved to a quarter of that column rather than a full row.single-illustration-sidebar-left.html(reported) — the three project-info blocks laid out as 75px slivers side by side, so the description wrapped one word per line and the letter-spacedCATEGORYandCLIENTheadings overlapped. They now stack down the 300px sidebar.shop.html(reported) — items were 25% of the 9-column area, and the rule above them was 75% of it, which stranded the first product to the right of that rule and broke the float rows. Now a clean three-up grid that matches the.clear hide-under-tabletrow breaks already in the markup.single-photography-sidebar-left.html,single-photography-sidebar-right.html,single-architecture-sidebar-right.html(identical sidebars to the reported one), pluscontact.html(map squeezed to a quarter width) andshop-item.html(cart summary squeezed, "Add to Cart" wrapping over three lines).Tablet and phone widths are unchanged — those
.nestedparents aretablet-12, so theirtablet-*andmobile-*numbers already resolved against the full row.archive-blog.htmlhas the same off-by-a-grid in its post excerpts, but a 675px measure reads better than the full 900px, so it is left alone.The button skin reached past the slider controls on :hover
The skin was written as a bare element selector, so
button:hover(0,1,1) outranked thebackground: none(0,1,0) that.item-navand.tf-slider__arrowset for themselves: hovering a project nav item filled the whole cell with accent and made its label unreadable, and the slider arrows disappeared into their own fill. Scoped the skin to.button/a.button— every skinned button in the template already carries the class, including the contact form's submit.Focus rings on the strip controls
The shared ring is drawn 3px outside the element. On the labelled nav that spilled past the dark panel onto the page; inside the thumbnail strip it was clipped away by the strip's own scrolling box; and in light mode
--color-accent-textis too dark to read against the panel. Those two controls now draw a 2px--color-accentring inset by 2px.Testing
npm test— 2905 checks pass (markup, headers, a11y, behavior, render).Also added a short note to the README's grid section on how nesting counts, since nothing said.
🤖 Generated with Claude Code
https://claude.ai/code/session_019XKBy19ZHfSkcxXMAwiKUP
Generated by Claude Code