Skip to content

Fix nested grid widths and button styling bleeding into slider controls #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
subwaymatch merged 2 commits into from
Sep 17, 2026
Merged

Fix nested grid widths and button styling bleeding into slider controls #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46b7373
Fix nested grid widths and button styling bleeding into slider controls
claude Sep 17, 2026
b95617c
Set the template in Inter, rework the menu, and add drag to the sliders
claude Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 40 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}
```

Expand All @@ -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
<h1 class="site-title">
<a href="index.html">Bernd<span class="wordmark-ring" aria-hidden="true"></span></a>
</h1>
```

Put your own name in, and drop the `<span>` 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
Expand All @@ -203,6 +218,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
<div class="desktop-9 tablet-12 nested columns">
<div class="desktop-4 tablet-4 mobile-half columns"> ... </div>
<div class="desktop-4 tablet-4 mobile-half columns"> ... </div>
<div class="desktop-4 tablet-4 mobile-half columns"> ... </div>
</div>
```

### Sliders

```html
Expand All @@ -220,7 +249,9 @@ Columns are full width below 768px unless a `.mobile-*` class says otherwise.
```

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.
Expand All @@ -235,6 +266,10 @@ Write the navigation once, as `<ul id="nav">`. Below 768px the script copies
it into a collapsible menu, so there is no second list to keep in sync. Add
`.hide-on-mobile` to an `<li>` to drop it from the narrow bar.

An item with a nested `<ul>` gets a chevron at the right of its row, drawn in
CSS from `--icon-chevron-down` and `--icon-chevron-right`, so the markup stays
a plain list. The dropdown surface is `--color-menu` / `--color-on-menu`.

### Sticky sidebars

Add `.sticky` to a `.sidebar` inside a grid column. It holds position while
Expand Down Expand Up @@ -340,7 +375,7 @@ Converting the artwork cut what a visitor downloads by a further two thirds:
- **The placeholder images are not yours to use.** They were bought from stock
libraries (mostly Shutterstock) without extended licences. Replace every
image in `images/` before you publish.
- Roboto Slab in `fonts/` is Apache 2.0. See `fonts/LICENSE.txt`.
- Inter in `fonts/` is under the SIL Open Font License 1.1. See `fonts/LICENSE.txt`.

## Author

Expand Down
41 changes: 13 additions & 28 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,10 @@
<link rel="stylesheet" href="css/style.css">

<!-- Fonts
Self-hosted, so there is no third-party request on page load.
Preloaded here because this page renders Roboto Slab. Pages that
do not use it must not preload it: the browser would fetch 33 KB
and never draw a glyph with it.
Self-hosted, so there is no third-party request on page load. Inter
sets every page, so every page preloads it.
================================================== -->
<link rel="preload" href="fonts/roboto-slab-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>

<!-- Favicons
================================================== -->
Expand Down Expand Up @@ -79,21 +77,15 @@
<nav aria-label="Main">
<ul id="nav" class="full">
<li>
<a href="about.html">
<span class="count hide-on-mobile">01.</span>
About
</a>
<a href="about.html">About</a>
<ul>
<li><a href="index-with-iosslider.html">Home w/ Slider</a></li>
<li><a href="index-with-flexslider.html">Home w/ Slider 2</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</li>
<li>
<a href="works-stackgrid-with-title.html">
<span class="count hide-on-mobile">02.</span>
Works
</a>
<a href="works-stackgrid-with-title.html">Works</a>
<ul>
<li><a href="works-stackgrid-images.html">Images Only</a></li>
<li><a href="works-architecture-three-columns.html">Architecture</a></li>
Expand All @@ -109,20 +101,14 @@
</li>

<li>
<a href="shop.html">
<span class="count hide-on-mobile">03.</span>
Shop
</a>
<a href="shop.html">Shop</a>
<ul>
<li><a href="shop-item.html">Single Item</a></li>
</ul>
</li>

<li>
<a href="archive-blog.html">
<span class="count hide-on-mobile">04.</span>
Blog
</a>
<a href="archive-blog.html">Blog</a>
<ul>
<li><a href="single-blog.html">Single Page</a></li>
</ul>
Expand All @@ -136,14 +122,13 @@
<div class="logo-wrap">
<div class="container">
<div class="desktop-6 columns">
<!--
The wordmark is text, not a bitmap: it stays sharp at any
size, inherits the text colour in both themes, and costs no
request. The ring is drawn in CSS by .wordmark-ring.
-->
<h1 class="site-title">
<a href="index.html">
<picture>
<source srcset="images/logo_text_half.avif" type="image/avif">
<source srcset="images/logo_text_half.webp" type="image/webp">
<img src="images/logo_text_half.png" alt="Bernd" width="764" height="157" loading="eager" decoding="async" fetchpriority="high" class="invert-on-dark">
</picture>
</a>
<a href="index.html">Bernd<span class="wordmark-ring" aria-hidden="true"></span></a>
</h1>
</div><!-- // .desktop-6 -->

Expand Down
41 changes: 13 additions & 28 deletions archive-blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,10 @@
<link rel="stylesheet" href="css/style.css">

<!-- Fonts
Self-hosted, so there is no third-party request on page load.
Preloaded here because this page renders Roboto Slab. Pages that
do not use it must not preload it: the browser would fetch 33 KB
and never draw a glyph with it.
Self-hosted, so there is no third-party request on page load. Inter
sets every page, so every page preloads it.
================================================== -->
<link rel="preload" href="fonts/roboto-slab-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>

<!-- Favicons
================================================== -->
Expand Down Expand Up @@ -79,21 +77,15 @@
<nav aria-label="Main">
<ul id="nav" class="full">
<li>
<a href="about.html">
<span class="count hide-on-mobile">01.</span>
About
</a>
<a href="about.html">About</a>
<ul>
<li><a href="index-with-iosslider.html">Home w/ Slider</a></li>
<li><a href="index-with-flexslider.html">Home w/ Slider 2</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</li>
<li>
<a href="works-stackgrid-with-title.html">
<span class="count hide-on-mobile">02.</span>
Works
</a>
<a href="works-stackgrid-with-title.html">Works</a>
<ul>
<li><a href="works-stackgrid-images.html">Images Only</a></li>
<li><a href="works-architecture-three-columns.html">Architecture</a></li>
Expand All @@ -109,20 +101,14 @@
</li>

<li>
<a href="shop.html">
<span class="count hide-on-mobile">03.</span>
Shop
</a>
<a href="shop.html">Shop</a>
<ul>
<li><a href="shop-item.html">Single Item</a></li>
</ul>
</li>

<li>
<a href="archive-blog.html">
<span class="count hide-on-mobile">04.</span>
Blog
</a>
<a href="archive-blog.html">Blog</a>
<ul>
<li><a href="single-blog.html">Single Page</a></li>
</ul>
Expand All @@ -136,14 +122,13 @@
<div class="logo-wrap">
<div class="container">
<div class="desktop-6 columns">
<!--
The wordmark is text, not a bitmap: it stays sharp at any
size, inherits the text colour in both themes, and costs no
request. The ring is drawn in CSS by .wordmark-ring.
-->
<h1 class="site-title">
<a href="index.html">
<picture>
<source srcset="images/logo_text_half.avif" type="image/avif">
<source srcset="images/logo_text_half.webp" type="image/webp">
<img src="images/logo_text_half.png" alt="Bernd" width="764" height="157" loading="eager" decoding="async" fetchpriority="high" class="invert-on-dark">
</picture>
</a>
<a href="index.html">Bernd<span class="wordmark-ring" aria-hidden="true"></span></a>
</h1>
</div><!-- // .desktop-6 -->

Expand Down
51 changes: 22 additions & 29 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@
<link rel="stylesheet" href="css/typegrid.css">
<link rel="stylesheet" href="css/style.css">

<!-- Fonts
Self-hosted, so there is no third-party request on page load. Inter
sets every page, so every page preloads it.
================================================== -->
<link rel="preload" href="fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>

<!-- Favicons
================================================== -->
<link rel="icon" href="images/favicon.ico" sizes="32x32">
Expand Down Expand Up @@ -71,21 +77,15 @@
<nav aria-label="Main">
<ul id="nav" class="full">
<li>
<a href="about.html">
<span class="count hide-on-mobile">01.</span>
About
</a>
<a href="about.html">About</a>
<ul>
<li><a href="index-with-iosslider.html">Home w/ Slider</a></li>
<li><a href="index-with-flexslider.html">Home w/ Slider 2</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</li>
<li>
<a href="works-stackgrid-with-title.html">
<span class="count hide-on-mobile">02.</span>
Works
</a>
<a href="works-stackgrid-with-title.html">Works</a>
<ul>
<li><a href="works-stackgrid-images.html">Images Only</a></li>
<li><a href="works-architecture-three-columns.html">Architecture</a></li>
Expand All @@ -101,20 +101,14 @@
</li>

<li>
<a href="shop.html">
<span class="count hide-on-mobile">03.</span>
Shop
</a>
<a href="shop.html">Shop</a>
<ul>
<li><a href="shop-item.html">Single Item</a></li>
</ul>
</li>

<li>
<a href="archive-blog.html">
<span class="count hide-on-mobile">04.</span>
Blog
</a>
<a href="archive-blog.html">Blog</a>
<ul>
<li><a href="single-blog.html">Single Page</a></li>
</ul>
Expand All @@ -128,14 +122,13 @@
<div class="logo-wrap">
<div class="container">
<div class="desktop-6 columns">
<!--
The wordmark is text, not a bitmap: it stays sharp at any
size, inherits the text colour in both themes, and costs no
request. The ring is drawn in CSS by .wordmark-ring.
-->
<h1 class="site-title">
<a href="index.html">
<picture>
<source srcset="images/logo_text_half.avif" type="image/avif">
<source srcset="images/logo_text_half.webp" type="image/webp">
<img src="images/logo_text_half.png" alt="Bernd" width="764" height="157" loading="eager" decoding="async" fetchpriority="high" class="invert-on-dark">
</picture>
</a>
<a href="index.html">Bernd<span class="wordmark-ring" aria-hidden="true"></span></a>
</h1>
</div><!-- // .desktop-6 -->

Expand Down Expand Up @@ -219,7 +212,7 @@ <h2 class="border-top">Contact</h2>

<div class="desktop-6 tablet-12 nested columns">

<div class="desktop-6 tablet-12 columns">
<div class="desktop-12 tablet-12 columns">
<h2 class="border-top">Location</h2>
<p class="title-desc">At the heart of Chicago</p>

Expand All @@ -243,11 +236,11 @@ <h2 class="border-top">Location</h2>
<a href="https://www.openstreetmap.org/?mlat=41.8553&amp;mlon=-87.6254#map=17/41.8553/-87.6254"
rel="noopener">Open a larger map</a>
</p>
</div><!-- // .desktop-6 -->
</div><!-- // .desktop-12 -->

<div class="clear"></div>

<div class="desktop-3 tablet-6 mobile-half columns">
<div class="desktop-6 tablet-6 mobile-half columns">

<div class="box-contact">
<h3 class="font-color-primary"><span class="underline">Address</span></h3>
Expand All @@ -259,9 +252,9 @@ <h3 class="font-color-primary"><span class="underline">Address</span></h3>
</address>
</div><!-- // .box-contact -->

</div><!-- // .desktop-3 -->
</div><!-- // .desktop-6 -->

<div class="desktop-3 tablet-6 mobile-half columns">
<div class="desktop-6 tablet-6 mobile-half columns">

<div class="box-contact">
<h3 class="font-color-primary"><span class="underline">Email</span></h3>
Expand All @@ -271,7 +264,7 @@ <h3 class="font-color-primary"><span class="underline">Email</span></h3>
</p>
</div><!-- // .box-contact -->

</div><!-- // .desktop-3 -->
</div><!-- // .desktop-6 -->

<div class="clear"></div>

Expand Down
Loading
Loading