footer updates

copier.yml

@@ -8,6 +8,11 @@ project_url:
     type: str
     help: what is your project url?
 
+footer_items_json:
+    type: str
+    help: path to JSON file defining links in the footer as a text-to-url mapping.
+    default: assets/json/footer_items.json
+
 favicon:
     type: str
     help: what is your project favicon?

template/assets/css/scientific-python.css

@@ -31,15 +31,13 @@ main {
   padding-left: 2rem;
   padding-right: 2rem;
 
-  padding-left: 3.5rem;
-  padding-right: 3.5rem;
-
   /* Outer content grid */
   & .outer-grid {
-    /* spacer, project description, spacer, link columns, spacer */
-    grid-template-columns: 3fr 3fr 4fr;
+    /* logo, project description, link columns, social icons */
+    grid-template-columns: 2fr 6fr 8fr 3fr;
+    column-gap: 4rem;
     align-items: center;
-    margin-bottom: 0rem;
+    margin: 0rem 4rem;
 
     & li {
       list-style: none;
@@ -68,6 +66,35 @@ main {
     font-size: 1.25rem;
     font-weight: bold;
   }
+  & .footer-links {
+    column-gap: 1.5rem;
+    line-height: normal;
+
+    & a {
+      color: white;
+      text-decoration-color: white;
+      inline-size: min-content;
+      display: inline-block;
+      text-wrap: nowrap;
+    }
+  }
+
+  & .footer-icons {
+    column-gap: 3rem;
+    row-gap: 1rem;
+
+    & img {
+      filter: invert(100%);
+      margin-bottom: 0.1rem;
+      margin-top: 0.1rem;
+      min-width: 1.75rem;
+      width: 1.75rem;
+    }
+  }
+}
+
+.footer-logo {
+    min-width: 60px;
 }
 
 /* Hide download button */
@@ -102,3 +129,7 @@ h4 {
 .bd-sidebar-primary {
   border-right: 0;
 }
+
+.copyright {
+    font-size: smaller;
+}

template/assets/icons/README.md

@@ -0,0 +1,8 @@
+You can find more free icons at:
+
+- https://fonts.google.com/icons (Search and then click the SVG download button at the bottom of the right-hand column.)
+- https://simpleicons.org/
+
+Apache licensed, but with a notice at https://github.com/google/material-design-icons:
+
+> We'd love attribution in your app's about screen, but it's not required.

template/assets/json/footer_items.json

@@ -0,0 +1,19 @@
+{
+  "links": {
+    "About": "/about",
+    "Roadmap": "/roadmap",
+    "Code of conduct": "/code_of_conduct",
+    "SPECs": "/specs",
+    "Summits": "/summits",
+    "Calendars": "/calendars",
+    "Press kit": "/press-kit"
+  },
+  "icons": {
+    "github": "https://github.com/scientific-python/",
+    "youtube": "https://www.youtube.com/c/ScientificPython-org",
+    "mastodon": "https://fosstodon.org/@scientific_python",
+    "bluesky": "https://bsky.app/profile/scientific-python.org",
+    "discourse": "https://discuss.scientific-python.org/",
+    "discord": "https://discord.com/invite/vur45CbwMz"
+  }
+}

template/config/scientific-python.yml

@@ -2,7 +2,9 @@ version: 1
 project:
   plugins:
     - team-grid.mjs
-
+    - footer-items.mjs
+  exclude:
+    - assets/icons/README.md
 site:
   template: book-theme
   parts:

template/footer-items.mjs

@@ -0,0 +1,77 @@
+import { readFileSync } from 'node:fs';
+
+/** @type {import('myst-common').DirectiveSpec} */
+const footerLinksDirective = {
+  name: 'footer-links',
+  doc: 'Display footer links from a JSON file.',
+  options: {
+    file: {
+      type: String,
+      required: true,
+      doc: 'Path to the JSON file, relative to the project root.',
+    },
+  },
+  run(data) {
+    const footerLinks = JSON.parse(readFileSync(data.options.file, 'utf-8'));
+    return Object.entries(footerLinks["links"]).map(
+      ([text, url]) => ({
+        type: 'grid-item',
+        children: [
+          {
+            type: 'link',
+            url: url,
+            children: [
+              {
+                type: 'text',
+                value: text
+              }
+            ]
+          }
+        ]
+      })
+    );
+  }
+};
+
+/** @type {import('myst-common').DirectiveSpec} */
+const footerIconsDirective = {
+  name: 'footer-icons',
+  doc: 'Display footer icons from a JSON file.',
+  options: {
+    file: {
+      type: String,
+      required: true,
+      doc: 'Path to the JSON file, relative to the project root.',
+    },
+  },
+  run(data) {
+    const footerIcons = JSON.parse(readFileSync(data.options.file, 'utf-8'));
+    return Object.entries(footerIcons["icons"]).map(
+      ([text, url]) => ({
+        type: 'grid-item',
+        children: [
+          {
+            type: 'link',
+            url: url,
+            children: [
+              {
+                type: 'image',
+                url: `/assets/icons/${text}.svg`,
+                alt: text
+              }
+            ]
+          }
+        ]
+      })
+    );
+    return IconsGrid;
+  }
+};
+
+/** @type {import('myst-common').MystPlugin} */
+const plugin = {
+    name: 'Footer Items',
+    directives: [footerLinksDirective, footerIconsDirective],
+};
+
+export default plugin;

template/footer.md.jinja

@@ -4,42 +4,58 @@
 % parts:
 % footer: footer.md
 
-% Here we use `grid` to add a basic grid structure to the HTML,
-% but the formatting column sizes are defined manually in css/footer.css
-% see the `grid-template-columns` line.
-:::::{grid} 3 3 5 5
-:class: outer-grid col-screen
-
-<!-- Project description -->
+% Here we use `grid` to add a basic grid structure to the footer, but we don't use
+% :columns: property of the grid-items to set widths; instead they're defined in
+% asserts/css/scientific-python.css using the `grid-template-columns` property.
 
-::::{div}
+::::::{grid} 1 1 4 4
+:class: outer-grid col-screen
 
-```{image} assets/images/logo.svg
+<!-- logo -->
+:::::{grid-item}
+:::{image} assets/images/logo.svg
 :width: 60px
-:align: left
-```
-
-Community-driven and community-owned initiative dedicated to building a robust, sustainable ecosystem for statistical software in Python.
-::::
-
-<!-- Spacer between project description and links columns -->
-
-::::{div}
-::::
+:class: footer-logo
+:::
+:::::
 
-<!-- Link columns -->
+<!-- community description -->
+:::::{grid-item}
+Community-driven and community-owned initiative dedicated to building a robust, sustainable ecosystem for scientific software in Python.
+:::::
 
-% This a _second_ grid embedded within the first one, to create nicer
+<!-- link columns -->
+:::::{grid-item}
+% This a grid embedded within the outer one, to create nicer
 % responsive design experience. This grid will have a single column on narrow screens,
 % and fan out into three columns on wide screens. However, it always remains within
 % its parent grid column.
-::::{grid} 1 1 3 3
+::::{grid} 1 1 2 3
+:class: footer-links
+
+:::{footer-links}
+:file: {{ footer_items_json }}
+:::
+
+::::
+:::::
 
-:::{div}
+<!-- social icon columns -->
+:::::{grid-item}
+:class: socials
 
-- [About](/about)
-  :::
+::::{grid} 2 2 3 6
+:class: footer-icons
+
+:::{footer-icons}
+:file: {{ footer_items_json }}
+:::
 
 ::::
 
+:::{div .copyright}
+© 2026 {{ project_name }} team. All rights reserved.
+:::
+
 :::::
+::::::