Skip to content

fix(theme): stop section pages stranding prose beside full-width blocks #190

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
sanity merged 3 commits into from
Sep 28, 2026
+18 −1
Merged

fix(theme): stop section pages stranding prose beside full-width blocks #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a0b2c3
fix(nix): render /nix/ as an article page, not a section landing page
sanity Sep 28, 2026
3f89b5f
fix(theme): stop section pages stranding prose beside full-width blocks
sanity Sep 28, 2026
31f3079
fix(theme): skip the empty card grid on sections with no child pages
sanity Sep 28, 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
0 hugo-site/content/nix/_index.md → hugo-site/content/nix/index.md
View file
Open in desktop
File renamed without changes.
11 changes: 11 additions & 0 deletions hugo-site/themes/freenet/assets/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,14 @@ pre code {
max-width: 1344px;
}

/* ...but cap the intro as a whole, not just its paragraphs. Capping only the
paragraphs left code blocks, tables, tabs and alerts running the full shell
width beside them, so the prose looked hard-wrapped in a narrow strip. The
card grid below keeps the full width. */
.container.is-section-page .page-intro {
max-width: var(--measure);
}

.page-list.is-grid {
display: grid;
gap: 1.5rem;
Expand Down Expand Up @@ -401,6 +409,9 @@ pre code {
@media screen and (min-width: 1024px) {
.container.is-prose .content > table,
.container.is-prose .content > pre,
/* Hugo wraps every highlighted fence in <div class="highlight">, so the
bare `> pre` above never matched a fenced code block. */
.container.is-prose .content > .highlight,
.container.is-prose .content > figure {
margin-inline: calc((var(--measure-content) - var(--breakout)) / 2);
width: var(--breakout);
Expand Down
8 changes: 7 additions & 1 deletion hugo-site/themes/freenet/layouts/_default/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
{{ define "main" }}
<div class="container{{ if .IsSection }} is-section-page{{ else }} is-prose{{ end }}">
{{/* The wide shell exists for the child-page card grid. A section with no
child pages (try, uninstall, ...) is just an article, and in the wide
shell its capped paragraphs sit beside full-width code blocks and
alerts, which reads as hard-wrapped text. */}}
<div class="container{{ if and .IsSection .Pages }} is-section-page{{ else }} is-prose{{ end }}">
<h1 class="title">{{ .Title }}</h1>
{{ if .IsSection }}
<div class="content page-intro">
{{ .Content }}
</div>
{{ if .Pages }}
<div class="page-list{{ if not .Params.list_child_pages }} is-grid{{ end }}">
{{ range .Pages }}
<section class="child-entry">
Expand All @@ -25,6 +30,7 @@ <h2 class="title is-5">
</section>
{{ end }}
</div>
{{ end }}
{{ else }}
{{ if eq .Section "news" }}
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
Expand Down
Loading