From 5d3e8517fff7cd64dd28831574dab0f75a2057e0 Mon Sep 17 00:00:00 2001 From: Daniel McCloy Date: Fri, 16 Oct 2026 15:28:32 -0500 Subject: [PATCH 1/6] wider main content (closes #13) --- template/assets/css/scientific-python.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css index 8edb5e5..dd4dcde 100644 --- a/template/assets/css/scientific-python.css +++ b/template/assets/css/scientific-python.css @@ -14,6 +14,20 @@ main { * doesn't grow
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) + [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 { From 394dcae72317f5d7607ca9a553eec4b7ff34cdb1 Mon Sep 17 00:00:00 2001 From: Daniel McCloy Date: Fri, 16 Oct 2026 15:35:30 -0500 Subject: [PATCH 2/6] center footer items at narrow widths --- template/assets/css/scientific-python.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css index dd4dcde..2a74940 100644 --- a/template/assets/css/scientific-python.css +++ b/template/assets/css/scientific-python.css @@ -61,7 +61,15 @@ main { @media (max-width: 640px) { & .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; } } From da3ba3efc68c9a0bd7ace2d2820f76c64e0691a5 Mon Sep 17 00:00:00 2001 From: Daniel McCloy Date: Fri, 16 Oct 2026 15:41:16 -0500 Subject: [PATCH 3/6] use more width of footer on narrow screens --- template/assets/css/scientific-python.css | 1 + 1 file changed, 1 insertion(+) diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css index 2a74940..236045c 100644 --- a/template/assets/css/scientific-python.css +++ b/template/assets/css/scientific-python.css @@ -63,6 +63,7 @@ main { grid-template-columns: 1fr; justify-items: center; text-align: center; + margin: 0; } /* One centered, wrapping row of icons instead of a 2-column grid */ From 55cbe753f41bf1bfabe08069b81cc70dd59fe6a0 Mon Sep 17 00:00:00 2001 From: Daniel McCloy Date: Fri, 16 Oct 2026 16:06:05 -0500 Subject: [PATCH 4/6] better distribution of whitespace in footer --- template/assets/css/scientific-python.css | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css index 236045c..af457e0 100644 --- a/template/assets/css/scientific-python.css +++ b/template/assets/css/scientific-python.css @@ -47,8 +47,10 @@ 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; + * link columns are "auto" for better whitespace distribution + * (handles case where longest link in one col is much different than other col) */ + grid-template-columns: 2fr 6fr auto 3fr; column-gap: 4rem; align-items: center; margin: 0rem 4rem; @@ -58,12 +60,20 @@ 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: center; text-align: center; - margin: 0; } /* One centered, wrapping row of icons instead of a 2-column grid */ @@ -93,6 +103,11 @@ main { column-gap: 1.5rem; line-height: normal; + /* Two columns that hug the link text, so no dead space sits beside them */ + @media (min-width: 1024px) { + grid-template-columns: repeat(2, max-content); + } + & a { color: white; text-decoration-color: white; From 4fb0e5b464f6e6ae6364973d7b5135eb0db728d7 Mon Sep 17 00:00:00 2001 From: Daniel McCloy Date: Fri, 16 Oct 2026 16:22:26 -0500 Subject: [PATCH 5/6] even better whitespace distribution in footer --- template/assets/css/scientific-python.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css index af457e0..e2531d0 100644 --- a/template/assets/css/scientific-python.css +++ b/template/assets/css/scientific-python.css @@ -48,9 +48,8 @@ main { /* Outer content grid */ & .outer-grid { /* logo, project description, link columns, social icons; - * link columns are "auto" for better whitespace distribution - * (handles case where longest link in one col is much different than other col) */ - grid-template-columns: 2fr 6fr auto 3fr; + * 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; @@ -103,7 +102,8 @@ main { column-gap: 1.5rem; line-height: normal; - /* Two columns that hug the link text, so no dead space sits beside them */ + /* 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); } @@ -127,6 +127,11 @@ main { column-gap: 3rem; row-gap: 1rem; + /* Three per row, so the icons fit their column instead of overflowing */ + @media (min-width: 1024px) { + grid-template-columns: repeat(3, max-content); + } + & img { filter: invert(100%); margin-bottom: 0.1rem; From f8117d1b98b3d6c07aade2ad5647966535734517 Mon Sep 17 00:00:00 2001 From: Daniel McCloy Date: Fri, 16 Oct 2026 17:15:59 -0500 Subject: [PATCH 6/6] adaptive number of rows for icon links in footer --- template/assets/css/scientific-python.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css index e2531d0..f54078d 100644 --- a/template/assets/css/scientific-python.css +++ b/template/assets/css/scientific-python.css @@ -127,9 +127,16 @@ main { column-gap: 3rem; row-gap: 1rem; - /* Three per row, so the icons fit their column instead of overflowing */ + /* 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: repeat(3, max-content); + grid-template-columns: none; + grid-auto-flow: column; + + &:has(> :nth-child(5)) { + grid-template-rows: repeat(2, auto); + } } & img { @@ -181,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; + } }