docs: Add footer with links to pages (#50296)

Danilo Leal created 1 month ago

This PR includes a little footer with handy links in all docs pages:

<img width="500" height="532" alt="Screenshot 2026-02-27 at 10  03@2x"
src="https://github.com/user-attachments/assets/f1beb998-ae73-41d1-8fe1-734def58b0c5"
/>

Release Notes:

- N/A

Change summary

docs/theme/css/chrome.css    | 38 +++++++++++++++++++++++++++++++++++++-
docs/theme/css/variables.css |  2 ++
docs/theme/index.hbs         | 37 +++++++++++++++++++++++++++++++++++++
3 files changed, 76 insertions(+), 1 deletion(-)

Detailed changes

docs/theme/css/chrome.css

@@ -70,7 +70,9 @@ a > .hljs {
 }
 
 .logo-nav {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   filter: var(--logo-brightness);
 }
 
@@ -140,6 +142,40 @@ a > .hljs {
   text-decoration-color: transparent !important;
 }
 
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 24px 0;
+  border-top: 1px dashed var(--border-footer);
+}
+
+.footer-link {
+  font-size: 1.25rem;
+  color: var(--links);
+  text-decoration: underline;
+  text-decoration-color: var(--link-line-decoration);
+  text-wrap-mode: nowrap;
+
+  :hover {
+    text-decoration-color: var(--link-line-decoration-hover);
+  }
+}
+
+.footer-separator {
+  color: var(--border-light);
+  font-size: 0.8em;
+}
+
+.footer-logo {
+  height: 16px;
+  border-radius: 0 !important;
+  border: none !important;
+  background: transparent !important;
+}
+
 .mobile-nav-chapters {
   font-size: 2.5em;
   text-align: center;

docs/theme/css/variables.css

@@ -27,6 +27,7 @@
   --border: hsl(220, 13%, 80%);
   --border-light: hsl(220, 13%, 90%);
   --border-hover: hsl(220, 13%, 70%);
+  --border-footer: hsl(220, 13%, 91%);
 
   --media-bg: hsl(50, 25%, 92%);
 
@@ -124,6 +125,7 @@
   --border: hsl(220, 13%, 20%);
   --border-light: hsl(220, 13%, 15%);
   --border-hover: hsl(220, 13%, 40%);
+  --border-footer: hsl(220, 13%, 12%);
 
   --media-bg: hsl(220, 13%, 8%);
 

docs/theme/index.hbs

@@ -307,6 +307,43 @@
                             </a>
                             {{/next}}
                         </div>
+                        <footer class="footer">
+                            <a href="/" class="logo-nav">
+                                <img
+                                    src="https://zed.dev/logo_icon.webp"
+                                    class="footer-logo"
+                                    alt="Zed Industries"
+                                />
+                            </a>
+                            <span class="footer-separator">•</span>
+                            <a class="footer-link" href="https://zed.dev"
+                                >Back to Site</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://zed.dev/releases"
+                                >Releases</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://zed.dev/roadmap"
+                                >Roadmap</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://github.com/zed-industries/zed"
+                                >GitHub</a
+                            >
+                            <span class="footer-separator">•</span>
+                            <a
+                                class="footer-link"
+                                href="https://zed.dev/blog"
+                                >Blog</a
+                            >
+                        </footer>
                     </main>
                     <div class="toc-container">
                         <nav class="pagetoc"></nav>