From 46b7373f6026178adcf50dff59303f5b55c7b4e1 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 17 Sep 2026 01:32:25 +0000 Subject: [PATCH 1/2] Fix nested grid widths and button styling bleeding into slider controls 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 Claude-Session: https://claude.ai/code/session_019XKBy19ZHfSkcxXMAwiKUP --- README.md | 14 +++++++ contact.html | 12 +++--- css/style.css | 33 +++++++++++---- shop-item.html | 8 ++-- shop.html | 58 +++++++++++++------------- single-architecture-sidebar-right.html | 14 +++---- single-illustration-sidebar-left.html | 12 +++--- single-photography-sidebar-left.html | 12 +++--- single-photography-sidebar-right.html | 14 +++---- 9 files changed, 105 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index e9a160c..748944a 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,20 @@ The dark palette is a second `:root` block under Columns are full width below 768px unless a `.mobile-*` class says otherwise. +Every width is a percentage of the element's own container, so a grid nested +in a column counts against that column rather than the page. Mark the outer +column `.nested` to drop its padding, then number the columns inside it out of +twelve again: three equal cells inside a `.desktop-9` column are `.desktop-4`, +not `.desktop-3`. + +```html +
+
...
+
...
+
...
+
+``` + ### Sliders ```html diff --git a/contact.html b/contact.html index 76b9540..c8b6faa 100644 --- a/contact.html +++ b/contact.html @@ -219,7 +219,7 @@

Contact

-
+

Location

At the heart of Chicago

@@ -243,11 +243,11 @@

Location

Open a larger map

-
+
-
+

Address

@@ -259,9 +259,9 @@

Address

-
+
-
+

Email

@@ -271,7 +271,7 @@

Email

-
+
diff --git a/css/style.css b/css/style.css index 47183d8..54a3ce6 100644 --- a/css/style.css +++ b/css/style.css @@ -354,8 +354,15 @@ b, strong { font-weight: bold; } .post img.featured { margin-bottom: 50px; } - /* Buttons */ - button, + /* + Buttons + + Scoped to the .button class rather than the bare
diff --git a/shop.html b/shop.html index eb44f04..02750da 100644 --- a/shop.html +++ b/shop.html @@ -164,13 +164,13 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -276,7 +276,7 @@

Synth Black Label

-
+
-
+
-
+
-
+
-
+
-
+
@@ -385,7 +385,7 @@

Small Ben

-
+
-
+
-
+
-
+
-
+
-
+
@@ -491,7 +491,7 @@

Kudos Silverware

-
+
-
+
-
+
-
+
-
+
-
+
@@ -600,7 +600,7 @@

Scandinavian Series VI

-
+
@@ -618,8 +618,8 @@

Scandinavian Series VI

-
-
+
+
diff --git a/single-architecture-sidebar-right.html b/single-architecture-sidebar-right.html index b1e65df..2d5a37b 100644 --- a/single-architecture-sidebar-right.html +++ b/single-architecture-sidebar-right.html @@ -166,7 +166,7 @@
-
+

Urbana

@@ -175,11 +175,11 @@

Urbana

The various forms of elements from different places expose the essence or identity of a subject through eliminating all non-essential forms, features, or concepts.

-
+
-
+

Category

@@ -188,24 +188,24 @@

Category

-
+
-
+

Client

West Village

-
+
-
+
diff --git a/single-illustration-sidebar-left.html b/single-illustration-sidebar-left.html index 32cef62..97bde54 100644 --- a/single-illustration-sidebar-left.html +++ b/single-illustration-sidebar-left.html @@ -166,7 +166,7 @@
-
+

Encyclopedia

@@ -175,9 +175,9 @@

Encyclopedia

The various forms of elements from different places expose the essence or identity of a subject through eliminating all non-essential forms, features, or concepts.

-
+
-
+

Category

@@ -186,16 +186,16 @@

Category

-
+
-
+

Client

Ameritanica

-
+
diff --git a/single-photography-sidebar-left.html b/single-photography-sidebar-left.html index 9c770ad..cfe03b7 100644 --- a/single-photography-sidebar-left.html +++ b/single-photography-sidebar-left.html @@ -166,7 +166,7 @@
-
+

Symbols

@@ -175,9 +175,9 @@

Symbols

The various forms of elements from different places expose the essence or identity of a subject through eliminating all non-essential forms, features, or concepts.

-
+
-
+

Category

@@ -187,16 +187,16 @@

Category

-
+
-
+

Client

Barneys

-
+
diff --git a/single-photography-sidebar-right.html b/single-photography-sidebar-right.html index 75d1ca7..af88b6f 100644 --- a/single-photography-sidebar-right.html +++ b/single-photography-sidebar-right.html @@ -166,7 +166,7 @@
-
+

Symbols

@@ -175,11 +175,11 @@

Symbols

The various forms of elements from different places expose the essence or identity of a subject through eliminating all non-essential forms, features, or concepts.

-
+
-
+

Category

@@ -189,24 +189,24 @@

Category

-
+
-
+

Client

Barneys

-
+
-
+
From b95617c2ccaca74757d56d7e1330083f4d676b67 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 17 Sep 2026 10:35:19 +0000 Subject: [PATCH 2/2] Set the template in Inter, rework the menu, and add drag to the sliders 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 Claude-Session: https://claude.ai/code/session_019XKBy19ZHfSkcxXMAwiKUP --- README.md | 31 ++- about.html | 41 ++-- archive-blog.html | 41 ++-- contact.html | 39 ++-- css/style.css | 249 ++++++++++++++------- fonts/LICENSE.txt | 294 ++++++++----------------- fonts/inter-latin-ext.woff2 | Bin 0 -> 85068 bytes fonts/inter-latin.woff2 | Bin 0 -> 48256 bytes fonts/roboto-slab-latin-ext.woff2 | Bin 21188 -> 0 bytes fonts/roboto-slab-latin.woff2 | Bin 34236 -> 0 bytes images/logo_text_half.avif | Bin 3079 -> 0 bytes images/logo_text_half.png | Bin 12352 -> 0 bytes images/logo_text_half.webp | Bin 3194 -> 0 bytes index-with-flexslider.html | 41 ++-- index-with-iosslider.html | 41 ++-- index.html | 39 ++-- js/typefolio.js | 114 +++++++--- shop-item.html | 39 ++-- shop.html | 39 ++-- single-architecture-sidebar-right.html | 39 ++-- single-blog.html | 41 ++-- single-illustration-sidebar-left.html | 39 ++-- single-photography-full-width.html | 39 ++-- single-photography-sidebar-left.html | 39 ++-- single-photography-sidebar-right.html | 39 ++-- tests/headers.mjs | 2 +- works-architecture-three-columns.html | 39 ++-- works-architecture-two-columns.html | 39 ++-- works-stackgrid-images.html | 39 ++-- works-stackgrid-with-title.html | 39 ++-- 30 files changed, 650 insertions(+), 752 deletions(-) create mode 100644 fonts/inter-latin-ext.woff2 create mode 100644 fonts/inter-latin.woff2 delete mode 100644 fonts/roboto-slab-latin-ext.woff2 delete mode 100644 fonts/roboto-slab-latin.woff2 delete mode 100644 images/logo_text_half.avif delete mode 100644 images/logo_text_half.png delete mode 100644 images/logo_text_half.webp diff --git a/README.md b/README.md index 748944a..42fbe04 100644 --- a/README.md +++ b/README.md @@ -148,7 +148,7 @@ css/ style.css design tokens, components, page styles js/ typefolio.js menu and slider -fonts/ self-hosted Roboto Slab (Apache 2.0) +fonts/ self-hosted Inter (SIL Open Font License 1.1) images/ placeholder artwork, each in AVIF, WebP and the original _headers cache and security headers for Cloudflare Pages / Netlify tests/ development only, see tests/README.md @@ -169,8 +169,8 @@ Everything is a custom property at the top of `css/style.css`: --color-accent: #22eedd; --color-accent-text: #097b72; /* darkened, for small text on white */ --color-text: #111; - --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; - --font-serif: "Roboto Slab", Georgia, "Times New Roman", serif; + --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; + --tracking-text: -0.011em; } ``` @@ -182,6 +182,21 @@ and is unreadable at body size. If you change one, change both. The dark palette is a second `:root` block under `@media (prefers-color-scheme: dark)`. To ship light-only, delete that block. +### The wordmark + +The header logo is text, not an image: + +```html +

+ Bernd +

+``` + +Put your own name in, and drop the `` if you do not want the ring. It is +set in the page typeface at `--tracking-wordmark` and sized in `cqw` against +the column it sits in, so it fills the header at every width without a +breakpoint. + ### The grid ```html @@ -234,7 +249,9 @@ not `.desktop-3`. ``` The track is a CSS scroll-snap container, so swipe, trackpad and arrow keys -work with no script at all. `js/typefolio.js` only keeps the buttons in step. +work with no script at all. `js/typefolio.js` keeps the buttons in step and +adds mouse drag, which is the one gesture a scroll container does not give +you for free. - Drop `data-slider-autoplay` to leave it still. - Add `.is-peeking` to let neighbouring slides show at the edges. @@ -249,6 +266,10 @@ Write the navigation once, as `