[PATCH v2] docs: rework footer with semantic markup and responsive layout
From: Rito Rhymes
Date: Sun Mar 22 2026 - 14:23:14 EST
The current Alabaster footer uses a generic `div` container, is
hidden entirely at the theme's small-screen breakpoint, and does
not provide a responsive layout for narrower viewports.
Rework the Alabaster footer to use semantic markup while
preserving its existing content, including the copyright notice,
theme attribution, and Page source link. Structure it with a
responsive flexbox so those items remain visible and orderly on
smaller screens.
Scope the change to Alabaster so other supported themes remain
unaffected.
Signed-off-by: Rito Rhymes <rito@xxxxxxxxxxxxxx>
Assisted-by: Codex:GPT-5.4
---
v2: add Assisted-by attribution
Documentation/conf.py | 6 ++++
Documentation/sphinx-static/custom.css | 25 ++++++++++++++++
Documentation/sphinx/templates/layout.html | 33 ++++++++++++++++++++++
3 files changed, 64 insertions(+)
create mode 100644 Documentation/sphinx/templates/layout.html
diff --git a/Documentation/conf.py b/Documentation/conf.py
index 679861503..7ad1db83e 100644
--- a/Documentation/conf.py
+++ b/Documentation/conf.py
@@ -432,6 +432,12 @@ if html_theme == "alabaster":
sys.stderr.write("Using %s theme\n" % html_theme)
+# Expose the active theme so local templates can avoid overriding
+# theme-specific markup for non-default HTML builds.
+html_context = {
+ "kernel_docs_theme": html_theme,
+}
+
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
diff --git a/Documentation/sphinx-static/custom.css b/Documentation/sphinx-static/custom.css
index db24f4344..dfe550adf 100644
--- a/Documentation/sphinx-static/custom.css
+++ b/Documentation/sphinx-static/custom.css
@@ -23,6 +23,31 @@ div.document {
margin: 20px 10px 0 10px;
width: auto;
}
+/*
+ * Use a semantic footer that stays visible on small screens and wraps
+ * its content as needed.
+ */
+footer.footer {
+ max-width: 65em;
+ margin: 20px auto 30px auto;
+ padding: 0 15px 0 10px;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: #888;
+}
+
+footer.footer a {
+ color: inherit;
+}
+
+footer.footer div.footer-inner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.35em 0.6em;
+ text-align: center;
+}
/* Size the logo appropriately */
img.logo {
diff --git a/Documentation/sphinx/templates/layout.html b/Documentation/sphinx/templates/layout.html
new file mode 100644
index 000000000..52727cabc
--- /dev/null
+++ b/Documentation/sphinx/templates/layout.html
@@ -0,0 +1,33 @@
+{# SPDX-License-Identifier: GPL-2.0 #}
+
+{%- extends "!layout.html" %}
+
+{%- block footer %}
+ {% if kernel_docs_theme == "alabaster" %}
+ <footer class="footer" role="contentinfo">
+ <div class="footer-inner">
+ {% if show_copyright %}
+ <span class="footer-item">©{{ copyright }}.</span>
+ {% endif %}
+ {% if show_sphinx %}
+ {% if show_copyright %}
+ <span class="footer-sep" aria-hidden="true">|</span>
+ {% endif %}
+ <span class="footer-item">
+ Powered by <a href="https://www.sphinx-doc.org/">Sphinx {{ sphinx_version }}</a>
+ & <a href="https://alabaster.readthedocs.io">Alabaster {{ alabaster_version }}</a>
+ </span>
+ {% endif %}
+ {%- if show_source and has_source and sourcename %}
+ {% if show_copyright or show_sphinx %}
+ <span class="footer-sep" aria-hidden="true">|</span>
+ {% endif %}
+ <a class="footer-item" href="{{ pathto('_sources/' + sourcename, resource=True)|e }}"
+ rel="nofollow">{{ _('Page source') }}</a>
+ {%- endif %}
+ </div>
+ </footer>
+ {% else %}
+ {{ super() }}
+ {% endif %}
+{%- endblock %}
--
2.51.0