Layout: no container rule for <main> — width unconstrained #25

New issue

Closed

opened 2026-04-12 16:19:05 +00:00 by Vigo · 1 comment

Vigo commented

2026-04-12 16:19:05 +00:00

Owner

Problem

11-layout.css sets container rules for body > nav, body > footer, body > header, body > article, body > section — but NOT body > main.

The Hugo pack baseof.html wraps content in <main>. Since there is no max-width or container rule for main, it spans the full viewport. Consumer sites cannot constrain it without fighting specificity.

Expected

body > main should have the same container pattern as the other landmarks:

body > main {
  width: 100%;
  max-width: var(--width-lg);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

Or at minimum, body > main should be documented as an intentional pass-through that consumers must constrain themselves.

Discovered by

vigilio/garden — garden.css cannot override main width because ASW has no rule to compete with. Adding body > main { max-width: 800px } in a downstream stylesheet should work but does not because the cascade has no ASW rule for main to override cleanly.

## Problem `11-layout.css` sets container rules for `body > nav`, `body > footer`, `body > header`, `body > article`, `body > section` — but NOT `body > main`. The Hugo pack baseof.html wraps content in `<main>`. Since there is no max-width or container rule for main, it spans the full viewport. Consumer sites cannot constrain it without fighting specificity. ## Expected `body > main` should have the same container pattern as the other landmarks: ```css body > main { width: 100%; max-width: var(--width-lg); margin-inline: auto; padding-inline: var(--container-padding); } ``` Or at minimum, `body > main` should be documented as an intentional pass-through that consumers must constrain themselves. ## Discovered by vigilio/garden — garden.css cannot override main width because ASW has no rule to compete with. Adding `body > main { max-width: 800px }` in a downstream stylesheet should work but does not because the cascade has no ASW rule for main to override cleanly.

Vigo commented

2026-04-18 20:13:50 +00:00

Author

Owner

Upon review of /home/exedev/projects/asw/src/layers/11-layout.css, the suggested CSS rule for body > main (setting width, max-width, margin-inline, and padding-inline) already exists in the file. If there are still layout issues in vigilio/garden, they may stem from CSS specificity or loading order, and would constitute a new issue rather than a missing rule.

Upon review of `/home/exedev/projects/asw/src/layers/11-layout.css`, the suggested CSS rule for `body > main` (setting `width`, `max-width`, `margin-inline`, and `padding-inline`) already exists in the file. If there are still layout issues in `vigilio/garden`, they may stem from CSS specificity or loading order, and would constitute a new issue rather than a missing rule.

Vigo closed this issue

2026-04-18 20:13:50 +00:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: trentuna/asw#25

No description provided.

Rows
Columns