Skip to content

template layout improvements #17

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

Open
drammock wants to merge 6 commits into
base: main
Choose a base branch
from
Open

template layout improvements #17

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5d3e851
wider main content (closes #13)
drammock Oct 16, 2026
394dcae
center footer items at narrow widths
drammock Oct 16, 2026
da3ba3e
use more width of footer on narrow screens
drammock Oct 16, 2026
55cbe75
better distribution of whitespace in footer
drammock Oct 16, 2026
4fb0e5b
even better whitespace distribution in footer
drammock Oct 16, 2026
f8117d1
adaptive number of rows for icon links in footer
drammock Oct 16, 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
64 changes: 60 additions & 4 deletions template/assets/css/scientific-python.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,20 @@ main {
* doesn't grow <main> to push the footer offscreen.
*/
min-height: 0;

/* Align main content with the navbar (2rem padding, max 1440px).
* text starts under the logo, and the page contents starts near the search box.
*/
@media (min-width: 1024px) {
grid-template-columns:
[screen-start] calc(max(2rem, 50% - 720px) + 1.25rem)

@drammock drammock Oct 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: code formatting to make this section more readable, plus some more comments (e.g, "matching the alignment of items in the topbar" etc)

[screen-inset-start page-start page-inset-start body-outset-start body-start body-inset-start middle-start gutter-left-start gutter-left-end gutter-right-start]
1fr
[gutter-right-end middle-end body-inset-end body-end body-outset-end]
20.5rem
[page-inset-end page-end screen-inset-end] max(2rem, 50% - 720px)
[screen-end];
Comment on lines +22 to +29

@lundybernard lundybernard Oct 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to reformat like this, or does the auto-formatter complain?

Suggested change
grid-template-columns:
[screen-start] calc(max(2rem, 50% - 720px) + 1.25rem)
[screen-inset-start page-start page-inset-start body-outset-start body-start body-inset-start middle-start gutter-left-start gutter-left-end gutter-right-start]
1fr
[gutter-right-end middle-end body-inset-end body-end body-outset-end]
20.5rem
[page-inset-end page-end screen-inset-end] max(2rem, 50% - 720px)
[screen-end];
grid-template-columns:
[screen-start]
calc(max(2rem, 50% - 720px) + 1.25rem)
[screen-inset-start page-start page-inset-start body-outset-start body-start body-inset-start middle-start gutter-left-start gutter-left-end gutter-right-start]
1fr
[gutter-right-end middle-end body-inset-end body-end body-outset-end]
20.5rem
[page-inset-end page-end screen-inset-end]
max(2rem, 50% - 720px)
[screen-end];

}
}

.footer {
Expand All @@ -33,8 +47,9 @@ main {

/* Outer content grid */
& .outer-grid {
/* logo, project description, link columns, social icons */
grid-template-columns: 2fr 6fr 8fr 3fr;
/* logo, project description, link columns, social icons;
* all but the description are "auto" for better whitespace distribution */
grid-template-columns: auto 1fr auto auto;
column-gap: 4rem;
align-items: center;
margin: 0rem 4rem;
Expand All @@ -44,10 +59,27 @@ main {
}
}

@media (max-width: 640px) {
/* Tighten spacing on mid-size screens to give the columns more room */
@media (max-width: 1279px) {
& .outer-grid {
column-gap: 2rem;
margin: 0;
}
}

/* Stack everything vertically below the theme's large breakpoint */
@media (max-width: 1023px) {
& .outer-grid {
grid-template-columns: 1fr;
justify-items: start;
justify-items: center;
text-align: center;
}

/* One centered, wrapping row of icons instead of a 2-column grid */
& .footer-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}

Expand All @@ -70,6 +102,12 @@ main {
column-gap: 1.5rem;
line-height: normal;

/* Two columns that hug the link text, so no dead space sits beside them
* (handles case where longest link in one col is much longer than in other col) */
@media (min-width: 1024px) {
grid-template-columns: repeat(2, max-content);
}

& a {
color: white;
text-decoration-color: white;
Expand All @@ -89,6 +127,18 @@ main {
column-gap: 3rem;
row-gap: 1rem;

/* One row, or two rows if there are 5+ icons, with as many columns as
* the icons need (adapts to the number of icons, and keeps them from
* overflowing their column) */
@media (min-width: 1024px) {
grid-template-columns: none;
grid-auto-flow: column;

&:has(> :nth-child(5)) {
grid-template-rows: repeat(2, auto);
}
}

& img {
filter: invert(100%);
margin-bottom: 0.1rem;
Expand Down Expand Up @@ -138,4 +188,10 @@ h4 {

.copyright {
font-size: smaller;

/* Don't widen the socials column to fit the copyright text; wrap to the icons' width
* instead (only when not stacked, so it can stay on one line on narrow screens) */
@media (min-width: 1024px) {
contain: inline-size;
}
}