jupyter · choldgraf · Jan 11, 2022 · Jan 9, 2022 · Jan 9, 2022 · Jan 11, 2022
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -18,6 +18,27 @@
     url: /security
   - title: About
     url: /about
+projects:
+  - title: Binder
+    url: /binder
+  - title: JupyterHub
+    url: /hub
+  - title: JupyterLab
+    url: https://jupyterlab.readthedocs.io/
+    newpage: true
+  - title: Jupyter Notebook
+    url: https://jupyter-notebook.readthedocs.io/
+    newpage: true
+  - title: Voilà
+    url: https://voila.readthedocs.io/
+    newpage: true
+  - title: Widgets
+    url: /widgets
+social:
+  - title: GitHub
+    url: https://github.com/jupyter/
+  - title: Twitter
+    url: https://twitter.com/projectjupyter
 ---
 <!DOCTYPE html>
 <html lang="en">
@@ -83,20 +104,59 @@
     <section>
       {{ content }}
     </section>
-    <footer>
-      <div class="footer" role="navigation">
-        <div class="container">
-            <div class="navbar-text">
-                <p>
-                    Copyright © {{site.time | date: '%Y' }}  Project Jupyter
-                </p>
-                <p>
-                    The Jupyter Trademark is registered with the U.S. Patent & Trademark Office.
-                </p>
-            </div>
+    <footer class="footer">
+      <section class="linklists">
+        <div class="content content--wide">
+        <div class="footer-links">
+          <h2>Project Jupyter</h2>
+          <ul>
+            {%- for obj in layout.nav -%}
+            <li>
+                <a href="{{ obj.url }}"
+                    {%- if obj.newpage %} target="_blank" rel="noopener noreferrer" {% endif %}>
+                    {{ obj.title }}
+                </a>
+            </li>
+            {%- endfor %}
+          </ul>
+        </div>
+        <div class="footer-links">
+          <h2>Subprojects</h2>
+          <ul>
+            {%- for obj in layout.projects -%}
+            <li>
+              <a href="{{ obj.url }}"
+                  {%- if obj.newpage %} target="_blank" rel="noopener noreferrer" {% endif %}>
+                  {{ obj.title }}
+              </a>
+            </li>
+            {%- endfor %}
+          </ul>
+        </div>
+        <div class="footer-links">
+          <h2>Follow us</h2>
+          <ul>
+            {%- for obj in layout.social -%}
+            <li>
+              <a href="{{ obj.url }}"
+                  target="_blank" rel="noopener noreferrer">
+                  {{ obj.title }}
+              </a>
+            </li>
+            {%- endfor %}
+          </ul>
         </div>
       </div>
+      </section>
+      <section class="footer-text">
+        <div class="content content--wide">
+          <img src="/assets/logos/rectanglelogo-blacktext-blackbody-blackplanets.svg" width="189" height="51" alt="project jupyter logo">
+          <p>
+              The Jupyter Trademark is registered with the U.S. Patent & Trademark Office. © {{site.time | date: '%Y' }}
+          </p>
+        </div>
+      </section>
     </footer>
     <script src="/assets/js/bootstrap-native.min.js" defer></script>
   </body>
-</html>
+</html>
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
@@ -1,13 +1,59 @@
 @import "settings/colors";
 
 .footer {
+  section {
+    padding: 2em;
+  }
+  .linklists {
+    background-color: lighten($orange, 12.5%);
+    .content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: start;
+      @media (max-width: 767px) {
+        flex-direction: column;
+      }
+    }
+    .footer-links {
+      color: $black;
+      @media (max-width: 420px) {
+        margin-top: 2em;
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
+      h2 {
+        font-size: 1.1em;
+        font-weight: bold;
+        margin: 0 0 1em 0;
+        padding: 0;
+      }
+      ul {
+        margin: 0 0 0 0;
+        padding: 0;
+        list-style-type: none;
+        li {
+          padding: 0;
+          margin: 0 0 0.75em 0;
+          a {
+            color: $black;
+          }
+        }
+      }
+    }
+  }
+  .footer-text {
     background-color: $orange;
-    padding: 15px;
-    @media (max-width:767px) {
-        padding: 15px 0;
+    img {
+      margin: 1em 0;
+      color: $black;
     }
     p {
-        color: $black;
-        padding-top: 10px;
+      color: $black;
+      padding-top: 10px;
+      font-size: 0.9em;
     }
+  }
 }
diff --git a/assets/logos/rectanglelogo-blacktext-blackbody-blackplanets.svg b/assets/logos/rectanglelogo-blacktext-blackbody-blackplanets.svg