New footer (#4720)

* New footer * Layout tweaking * Reworked footer --------- Co-authored-by: Keith Burzinski <[email protected]> Co-authored-by: Darren Griffin <[email protected]>
esphome · Feb 26, 2025 · 1aeec02 · 1aeec02
1 parent 66a9ea8
commit 1aeec02
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 0 deletions.
diff --git a/_static/custom.css b/_static/custom.css
@@ -288,6 +288,10 @@ div.body p, div.body dd, div.body li, div.body blockquote {
 
 /* New branding changes */
 
+div.body{
+  margin: 0 auto;
+}
+
 div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6, div.sphinxsidebar h3, div.sphinxsidebar h4, div.admonition p.admonition-title {
   font-family: Figtree, system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   font-weight: 600;
@@ -297,6 +301,51 @@ div.body h1 {
   font-size: 2.5rem;
 }
 
+.custom-footer{
+  border-top: 1px solid #3E4349;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 1rem 0;
+}
+
+.custom-footer .side{
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+.custom-footer .side:last-child{
+  align-items: flex-end;
+}
+.custom-footer .ohf{
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+
+.custom-footer .ohf span{
+  font-size: 12px;
+}
+
+.custom-footer .ohf a{
+  border-bottom: none;
+}
+
+.custom-footer .links{
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+.custom-footer .links a{
+  display: flex;
+  align-items: flex-end;
+}
+
+.custom-footer .link-netlify{
+  font-size: 12px;
+}
+
 body {
   font-family: "Instrument Sans", system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   line-height: 1.5;
@@ -347,6 +396,10 @@ img.logo {
 /* dark theme */
 @media (prefers-color-scheme: dark) {
 
+  .custom-footer{
+    border-top: 1px solid #ececec;
+  }
+
   @media screen and (max-width: 875px) {
     div.documentwrapper {
       background-color: #212121;

diff --git a/_static/ohf-logo-on-dark.svg b/_static/ohf-logo-on-dark.svg
diff --git a/_static/ohf-logo-on-light.svg b/_static/ohf-logo-on-light.svg
diff --git a/_templates/layout.html b/_templates/layout.html
@@ -46,6 +46,26 @@
 {% endblock %}
 
 {% block footer %}
+  <div class="custom-footer">
+    <div class="side">
+      <div class="ohf">
+        <span>ESPHome is a project from the</span>
+        <a href="https://www.openhomefoundation.org" target="_blank">
+          <picture>
+            <source srcset="/_static/ohf-logo-on-dark.svg" media="(prefers-color-scheme: dark)">
+            <img width="180px" src="/_static/ohf-logo-on-light.svg" alt="Open Home Foundation">
+          </picture>
+        </a>
+      </div>
+    </div>
+    <div class="side">
+      <div class="links">
+        <a href="https://github.com/esphome/esphome" target="_blank">Source Code</a>
+        <a href="mailto:[email protected]">Contact</a><small>(no support)</small>
+      </div>
+      <a href="https://www.netlify.com" class="link-netlify" target="_blank">This site is powered by Netlify</a>
+    </div>
+  </div>
   <div id="upgrade-footer">
     A new version has been released since you last visited this page: {{ release }} 🎉
     <div class="footer-button-container">