From d3b64552b77fddfcacdc5275d1d42d35f074c469 Mon Sep 17 00:00:00 2001
From: Emi <coppolaemilio@protonmail.com>
Date: Sun, 18 Aug 2024 18:48:02 +0200
Subject: [PATCH] New footer design (#907)

* New Footer

* Make main.css be an scss file to handle imports

* Remove margin gap fix

* remove unused logos

* Update _sass/_footer.scss

Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>

* Update _sass/_footer.scss

Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>

* Update assets/css/main.scss

Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>

---------

Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>
---
 _includes/footer.html              | 119 ++++++++++++++--------------
 _layouts/download-archive.html     |   4 -
 _sass/_footer.scss                 | 120 +++++++++++++++++++++++++++++
 assets/css/{main.css => main.scss} |  80 ++++---------------
 assets/css/release.scss            |   3 -
 assets/footer/facebook_logo.svg    |  15 ----
 assets/footer/feed_logo.svg        |   1 -
 assets/footer/github_logo.svg      |  15 ----
 assets/footer/mastodon_logo.svg    |   4 -
 assets/footer/reddit_logo.svg      |  15 ----
 assets/footer/twitter_logo.svg     |   1 -
 pages/community/community.html     |   1 +
 pages/download/archive.html        |   4 -
 pages/download/preview.html        |   4 -
 pages/features.html                |   4 -
 pages/showcase/showcase.scss       |   1 +
 16 files changed, 195 insertions(+), 196 deletions(-)
 create mode 100644 _sass/_footer.scss
 rename assets/css/{main.css => main.scss} (94%)
 delete mode 100644 assets/footer/facebook_logo.svg
 delete mode 100644 assets/footer/feed_logo.svg
 delete mode 100644 assets/footer/github_logo.svg
 delete mode 100644 assets/footer/mastodon_logo.svg
 delete mode 100644 assets/footer/reddit_logo.svg
 delete mode 100644 assets/footer/twitter_logo.svg

diff --git a/_includes/footer.html b/_includes/footer.html
index 51d60929e5..4da92683d1 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,71 +1,72 @@
 </main>
 
-<footer>
-	<div class="container flex footer-container">
-		<div id="copyright">
+<footer class="footer-global">
+	<div class="wrapper">
+		<div class="columns">
+			<div class="col">
+				<h2>Godot Engine</h2>
+				<ul>
+					<li><a class="set-os-download-url" href="/download">Download</a></li>
+					<li><a href="https://docs.godotengine.org">Documentation</a></li>
+					<li><a href="/features/">Features</a></li>
+					<li><a href="https://editor.godotengine.org/releases/latest/">Web Editor</a></li>
+					<li><a href="/download/archive/">Release Archive</a></li>
+					<li><a href="https://github.com/godotengine">Source Code</a></li>
+				</ul>
+			</div>
+			<div class="col">
+				<h2>Project</h2>
+				<ul>
+					<li><a href="/blog/">Blog</a></li>
+					<li><a href="/code-of-conduct/">Code of Conduct</a></li>
+					<li><a href="/governance/">Governance</a></li>
+					<li><a href="/teams/">Teams</a></li>
+					<li><a href="/community/">Communities</a></li>
+				</ul>
+			</div>
+			<div class="col">
+				<h2>Resources</h2>
+				<ul>
+					<li><a href="https://godotengine.org/asset-library/asset">Asset Library</a></li>
+					<li><a href="/press/">Press Kit</a></li>
+					<li><a href="/showcase/">Showcase</a></li>
+					<li><a href="/education/">Education</a></li>
+				</ul>
+			</div>
+			<div class="col">
+				<h2>Foundation</h2>
+				<ul>
+					<li><a href="https://godot.foundation/">About</a></li>
+					<li><a href="https://fund.godotengine.org">Donate</a></li>
+					<li><a href="/license/">License</a></li>
+					<li><a href="/privacy-policy/">Privacy Policy</a></li>
+					<li><a href="/contact/">Contact us</a></li>
+				</ul>	
+			</div>
+		</div>
+		<hr>
+		<div class="credits-and-socials">
 			<p>
-				© 2007-{{ site.time | date: '%Y' }} Juan Linietsky, Ariel Manzur and <a
-					href="https://github.com/godotengine/godot/blob/master/AUTHORS.md" target="_blank"
-					rel="noopener">contributors</a>.<br>
-				Hosted by the <a href="https://godot.foundation/" target="_blank" rel="noopener">Godot Foundation</a>.<br>
-				Website <a href="https://github.com/godotengine/godot-website" target="_blank" rel="noopener">source code on  GitHub</a>.
+				© 2007-{{ site.time | date: '%Y' }} Juan Linietsky, Ariel Manzur and <a href="https://github.com/godotengine/godot/blob/master/AUTHORS.md" target="_blank" rel="noopener">contributors</a>. Hosted by the <a href="https://godot.foundation/" target="_blank" rel="noopener">Godot Foundation</a>. Website <a href="https://github.com/godotengine/godot-website" target="_blank" rel="noopener">source code on  GitHub</a>.
 			</p>
-		</div>
-		<div id="sitemap">
-			<ul class="sitemap-group">
-				<li><strong>Get Godot</strong></li>
-				<li><a href="/download/windows/" class="set-os-download-url">Download</a></li>
-				<li><a href="/download/archive/">Release Archive</a></li>
-				<li><a href="https://editor.godotengine.org/releases/latest/">Web Editor</a></li>
-				<li>&nbsp;</li>
-				<li><strong>Public Relations</strong></li>
-				<li><a href="/blog/">Blog</a></li>
-				<li><a href="/community/">Communities and Events</a></li>
-				<li><a href="/press/">Press Kit</a></li>
-			</ul>
-			<ul class="sitemap-group">
-				<li><strong>About Godot</strong></li>
-				<li><a href="/features/">Features</a></li>
-				<li><a href="/showcase/">Showcase</a></li>
-				<li><a href="/education/">Education</a></li>
-				<li><a href="/license/">License</a></li>
-				<li><a href="/code-of-conduct/">Code of Conduct</a></li>
-				<li><a href="/privacy-policy/">Privacy Policy</a></li>
-				<li><a href="https://fund.godotengine.org">Donate</a></li>
-			</ul>
-			<ul class="sitemap-group">
-				<li><strong>Project Team</strong></li>
-				<li><a href="/governance/">Governance</a></li>
-				<li><a href="/teams/">Teams</a></li>
-				<li>&nbsp;</li>
-				<li><strong>Extra Resources</strong></li>
-				<li><a href="https://godotengine.org/asset-library/asset">Asset Library</a></li>
-				<li><a href="https://docs.godotengine.org">Documentation</a></li>
-				<li><a href="https://github.com/godotengine">Code Repository</a></li>
-			</ul>
-		</div>
-		<div id="social" class="dark-desaturate">
-			<h4 class="text-right"><a href="/contact/">Contact us</a></h4>
-			<div class="flex justify-space-between" style="gap: 3px;">
-				<a href="https://github.com/godotengine" target="_blank" rel="noopener">
-					<img src="/assets/footer/github_logo.svg" width="32" height="32" alt="GitHub">
+			<div class="social">
+				<a href="https://github.com/godotengine" target="_blank" rel="noopener" title="GitHub">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
 				</a>
-				<a href="https://mastodon.gamedev.place/@godotengine" target="_blank" rel="noopener">
-					<img src="/assets/footer/mastodon_logo.svg" width="32" height="32" alt="Mastodon">
+				<a href="https://mastodon.gamedev.place/@godotengine" target="_blank" rel="noopener" title="Mastodon">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>
 				</a>
-				<a href="https://twitter.com/godotengine" target="_blank" rel="noopener">
-					<img src="/assets/footer/twitter_logo.svg" width="32" height="32" alt="Twitter">
+				<a href="https://twitter.com/godotengine" target="_blank" rel="noopener" title="Twitter">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>
 				</a>
-				<a href="https://www.facebook.com/groups/godotengine/" target="_blank" rel="noopener">
-					<img src="/assets/footer/facebook_logo.svg" width="32" height="32" alt="Facebook">
+				<a href="https://www.facebook.com/groups/godotengine/" target="_blank" rel="noopener" title="Facebook">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
 				</a>
-				<a href="https://www.reddit.com/r/godot" target="_blank" rel="noopener">
-					<!-- Zero-width space in the `alt` text to prevent content blockers from blocking the icon -->
-					<img src="/assets/footer/reddit_logo.svg" width="32" height="32" alt="Red​dit">
+				<a href="https://www.reddit.com/r/godot" title="Reddit" target="_blank" rel="noopener">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/></svg>
 				</a>
-				<a href="/rss.xml" target="_blank" rel="noopener">
-					<!-- Icon is called `feed` instead of `rss` to prevent content blockers from blocking the icon -->
-					<img src="/assets/footer/feed_logo.svg" width="32" height="32" alt="RSS feed">
+				<a href="/rss.xml" title="RSS" target="_blank" rel="noopener">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
 				</a>
 			</div>
 		</div>
diff --git a/_layouts/download-archive.html b/_layouts/download-archive.html
index c3782cd2b0..b8af1fd39b 100644
--- a/_layouts/download-archive.html
+++ b/_layouts/download-archive.html
@@ -38,10 +38,6 @@ layout: default
 		grid-template-columns: 1fr;
 		gap: 16px;
 	}
-
-	footer {
-		margin-top: 0;
-	}
 </style>
 
 <div class="hero">
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
new file mode 100644
index 0000000000..11626febea
--- /dev/null
+++ b/_sass/_footer.scss
@@ -0,0 +1,120 @@
+/* Footer */
+footer.footer-global {
+  padding: 15px;
+  color: #898989;
+  font-weight: 200;
+  font-size: 17px;
+  background: rgb(17, 17, 17);
+  @media (prefers-color-scheme: light) {
+    background: #fff;
+    color: #2c2c2c;
+  }
+  @media (max-width: 768px) {
+    padding: 23px;
+  }
+  .wrapper {
+    max-width: 1210px;
+    margin: 0 auto;
+    @media (min-width: 768px) {
+      margin: 60px auto;
+    }
+  }
+  hr {
+    border: none;
+    margin: 50px 0;
+    border-top: 1px solid #2c2c2c;
+    @media (prefers-color-scheme: light) {
+      border-top: 1px solid #e7e7e7;
+    }
+    @media (max-width: 768px) {
+      margin: 30px 0 50px;
+    }
+  }
+	a {
+		color: inherit;
+		text-decoration-color: #898989;
+		text-decoration-thickness: 1px;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      color: var(--link-color);
+      text-decoration-color: var(--link-color);
+    }
+    img {
+      display: inline-block;
+    }
+	}
+  h2 {
+    font-size: 25px;
+    margin-bottom: 14px;
+    color: white;
+    @media (prefers-color-scheme: light) {
+      color: #2c2c2c;
+    }
+    @media (max-width: 768px) {
+      font-size: 20px;
+    }
+  }
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 30px;
+    li {
+      margin-bottom: 5px;
+      font-size: 16px;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+  .columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+    }
+  }
+  .credits-and-socials {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr 1fr;
+    @media (max-width: 768px) {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+    p {
+      margin: 0;
+      max-width: 500px;
+      @media (max-width: 768px) {
+        margin: 0 auto;
+      }
+    }
+    .social {
+      text-align: right;
+      @media (max-width: 768px) {
+        margin-top: 30px;
+        text-align: center;
+      }
+      svg {
+        max-width: 32px;
+        max-height: 32px;
+        transition: all 0.2s ease-in-out;
+        fill: white;
+        opacity: 0.5;
+        @media (prefers-color-scheme: light) {
+          fill: #000;
+        }
+        &:hover {
+          fill: var(--link-color);
+          opacity: 1;
+        }
+      }
+      a {
+        text-decoration: none;
+        margin-right: 9px;
+        display: inline-block;
+        width: 32px;
+      }
+    }
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.scss
similarity index 94%
rename from assets/css/main.css
rename to assets/css/main.scss
index 7a59558d16..362a984863 100644
--- a/assets/css/main.css
+++ b/assets/css/main.scss
@@ -1,7 +1,10 @@
+---
+---
+
 :root {
   color-scheme: light dark;
 
-  --transparent-cover: rgb(51, 63, 103, 0.4);
+  --transparent-cover: rgba(51, 63, 103, 0.4);
   --transparent-cover-darker: rgba(51, 63, 103, 0.9);
 
   --base-color: #eff1f5;
@@ -30,8 +33,6 @@
   --link-underline-color: hsla(206, 58%, 50%, 0.3);
   --navbar-link-color: var(--dark-color);
   --navbar-link-current-color: var(--primary-color);
-  --footer-link-color: rgb(200, 210, 250);
-  --footer-link-underline-color: rgba(200, 210, 250, 0.3);
   --tab-active-color: var(--primary-color);
 
   --big-button-color: #478cbf;
@@ -49,8 +50,6 @@
   --card-footer-color: #eeeeee;
   --button-background-color: #ffffff;
   --button-card-background-color: #d7dee6;
-  --footer-color: rgb(175, 180, 220);
-  --footer-background-color: #414d69;
   --pagination-active-color: #284786;
   --placeholder-text-color: #7a87a2;
 
@@ -63,9 +62,9 @@
   --download-hero-color: hsla(0, 0%, 100%, 0.9);
   --download-main-details-color: #f1f1f1;
   --download-table-color: rgba(22, 22, 22, 0.08);
-  --platform-note-background-color: rgb(48 86 210 / 9%);
+  --platform-note-background-color: rgba(48, 86, 210, 0.9);
   --platform-code-background-color: #e5ebf1;
-  --download-mono-background-color: rgb(43 58 76 / 82%);
+  --download-mono-background-color: rgba(43, 58, 76, 0.82);
 
   --feature-heading-color: #2d76ad;
   --feature-note-color: #e53e3e;
@@ -89,7 +88,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --transparent-cover: rgb(51, 63, 103, 0.4);
+    --transparent-cover: rgba(51, 63, 103, 0.4);
     --transparent-cover-darker: rgba(51, 63, 103, 0.9);
 
     --base-color: #25282b;
@@ -118,8 +117,6 @@
     --link-underline-color: hsla(200, 60%, 70%, 0.3);
     --navbar-link-color: hsla(0, 0%, 100%, 0.9);
     --navbar-link-current-color: hsl(200, 100%, 80%);
-    --footer-link-color: hsla(0, 0%, 100%, 0.85);
-    --footer-link-underline-color: hsla(0, 0%, 100%, 0.25);
     --tab-active-color: white;
 
     --big-button-color: #478cbf;
@@ -137,8 +134,6 @@
     --card-footer-color: #505356;
     --button-background-color: #333639;
     --button-card-background-color: #55595e;
-    --footer-color: hsla(0, 0%, 100%, 0.625);
-    --footer-background-color: #333639;
     --pagination-active-color: #4080ff;
     --placeholder-text-color: #a6a6a6;
 
@@ -149,9 +144,9 @@
     --download-hero-color: hsla(0, 0%, 100%, 0.9);
     --download-main-details-color: #f1f1f1;
     --download-table-color: rgba(0, 0, 0, 0.2);
-    --platform-note-background-color: rgb(255 255 255 / 9%);
+    --platform-note-background-color: rgba(255, 255, 255, 0.9);
     --platform-code-background-color: #282b2e;
-    --download-mono-background-color: rgb(132 151 174 / 68%);
+    --download-mono-background-color: rgba(132, 151, 174, 0.68);
 
     --feature-heading-color: #57b3f8;
     --feature-note-color: #ef6767;
@@ -375,6 +370,7 @@ main {
   max-width: 800px;
   margin: auto;
   overflow: visible;
+  margin-bottom: 60px;
 }
 
 .container-text h2 {
@@ -577,52 +573,6 @@ ul li {
   margin-bottom: 16px;
 }
 
-footer {
-  background-color: var(--footer-background-color);
-  color: var(--footer-color);
-  font-size: 0.9em;
-  margin-top: 64px;
-  padding-top: 32px;
-  padding-bottom: 32px;
-}
-
-footer a {
-  color: var(--footer-link-color);
-  text-decoration-color: var(--footer-link-underline-color);
-}
-
-#copyright {
-  flex: 2;
-}
-#copyright > p:first-child {
-  margin-top: 0;
-}
-
-#sitemap {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-	gap: 24px;
-	margin-left: 16px;
-}
-#sitemap .sitemap-group {
-  float: left;
-  list-style: none;
-  margin: 0px;
-  overflow-wrap: break-word;
-  padding-left: 0px;
-}
-#sitemap .sitemap-group li {
-  line-height: 20px;
-  margin-bottom: 10px;
-}
-#sitemap .sitemap-group strong {
-  color: var(--footer-link-color);
-}
-#social {
-  flex: 1;
-  margin-left: 32px;
-}
-
 .pagination {
   margin: 2rem 0;
   justify-content: center;
@@ -793,7 +743,7 @@ p.small {
   color: hsla(0, 0%, 100%, 0.95);
 }
 .btn.btn-flat.btn-flat-frosted {
-  background-color: rgb(111 111 111 / 27%);
+  background-color: rgba(111, 111, 111, 0.27);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
 }
@@ -1093,12 +1043,6 @@ pre > code {
 }
 
 @media (max-width: 1020px) {
-  footer {
-    text-align: center;
-  }
-  .footer-container {
-    flex-direction: column;
-  }
 
   #social {
     margin: auto;
@@ -1563,3 +1507,5 @@ section.sponsors .grid {
   border: none;
   margin: 35px 0;
 }
+
+@import 'footer';
diff --git a/assets/css/release.scss b/assets/css/release.scss
index 2c927111c7..78c50c6100 100644
--- a/assets/css/release.scss
+++ b/assets/css/release.scss
@@ -10,9 +10,6 @@ html {
 	}
 }
 
-footer {
-	margin-top: 0;
-}
 
 .release-container {
 	position: relative;
diff --git a/assets/footer/facebook_logo.svg b/assets/footer/facebook_logo.svg
deleted file mode 100644
index 7bc6a47320..0000000000
--- a/assets/footer/facebook_logo.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32" height="32" version="1.1" viewBox="0 0 8.4666668 8.4666665" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<metadata>
-<rdf:RDF>
-<cc:Work rdf:about="">
-<dc:format>image/svg+xml</dc:format>
-<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-<dc:title/>
-</cc:Work>
-</rdf:RDF>
-</metadata>
-<g transform="translate(-106 -93.645)">
-<path d="m110.24 93.978c-2.1539 9.2e-5 -3.8999 1.7461-3.9 3.9 9e-5 2.1539 1.7461 3.8999 3.9 3.9 2.1542 3.4e-4 3.9007-1.7458 3.9008-3.9-1e-4 -2.1542-1.7466-3.9003-3.9008-3.9zm0.4656 1.3658h0.68147v0.8713h-0.42088c-0.32503 0-0.34656 0.12615-0.34656 0.35281l-9.1e-4 0.4388h0.78623l-0.0912 0.8713h-0.71815v2.5333h-1.0289v-2.5333h-0.47552v-0.8713h0.47552v-0.52027c0-0.70871 0.30429-1.1426 1.139-1.1426z" fill="#a9b3d4" stroke-width=".35456"/>
-</g>
-</svg>
diff --git a/assets/footer/feed_logo.svg b/assets/footer/feed_logo.svg
deleted file mode 100644
index 6dd6f23923..0000000000
--- a/assets/footer/feed_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m16 1a15 15 0 0 0 -15 15 15 15 0 0 0 15 15 15 15 0 0 0 15-15 15 15 0 0 0 -15-15zm-7.359375 6h.0371094c4.2602526.2190981 8.2645076 2.0081931 11.2832036 5.039062 3.030867 3.018697 4.819964 7.022951 5.039062 11.283204.01217.206929-.060512.414027-.21875.572265-.146066.158232-.341446.244141-.560547.244141h-1.740234c-.413853 0-.754954-.316616-.779297-.730469-.401683-7.072019-6.037353-12.709191-13.1093751-13.123047-.4138534-.024343-.7304688-.3639443-.7304688-.7656248v-1.7402343c0-.2190988.0859026-.4144807.2441407-.5605469.1460658-.1460655.3404016-.21875.5351562-.21875zm0 6.232422h.0605469c2.5926651.206926 5.0389571 1.337334 6.8769531 3.1875 1.850167 1.837997 2.982524 4.286234 3.189453 6.878906.01217.219097-.060963.425746-.207031.583984-.146066.170412-.353167.25586-.572266.25586h-1.642578c-.401682 0-.731062-.305351-.767578-.707031-.352993-3.712508-3.297262-6.658725-7.0097656-7.011719-.4016813-.036512-.7070313-.363942-.7070313-.765625v-1.644531c0-.219099.0854492-.426201.2558594-.572266.1338938-.133894.3286829-.205078.5234375-.205078zm1.558594 6.230469c1.290246 0 2.335937 1.047641 2.335937 2.33789 0 1.290248-1.045691 2.337891-2.335937 2.337891-1.2902488 0-2.3378909-1.047643-2.3378909-2.337891 0-1.290249 1.0476422-2.33789 2.3378909-2.33789z" fill="#a9b3d4"/></svg>
diff --git a/assets/footer/github_logo.svg b/assets/footer/github_logo.svg
deleted file mode 100644
index cf45e1a50b..0000000000
--- a/assets/footer/github_logo.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32" height="32" version="1.1" viewBox="0 0 8.4666668 8.4666665" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<metadata>
-<rdf:RDF>
-<cc:Work rdf:about="">
-<dc:format>image/svg+xml</dc:format>
-<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-<dc:title/>
-</cc:Work>
-</rdf:RDF>
-</metadata>
-<g transform="translate(-106 -93.645)">
-<path d="m110.24 93.978c-2.1511 0-3.8951 1.744-3.8951 3.8956 0 1.7211 1.1161 3.181 2.664 3.6964 0.19491 0.0355 0.26593-0.0846 0.26593-0.18795 0-0.0923-3e-3 -0.33743-4e-3 -0.66241-1.0836 0.2353-1.3122-0.52229-1.3122-0.52229-0.17719-0.44983-0.43261-0.56963-0.43261-0.56963-0.35368-0.24177 0.0268-0.23699 0.0268-0.23699 0.39099 0.02769 0.59665 0.40151 0.59665 0.40151 0.34748 0.59522 0.91186 0.42327 1.1338 0.3238 0.0354-0.25183 0.13578-0.42353 0.24729-0.52085-0.86499-0.09832-1.7744-0.43262-1.7744-1.9253 0-0.42519 0.1518-0.7729 0.40103-1.0453-0.0402-0.09848-0.17386-0.49454 0.0381-1.0309 0 0 0.32715-0.10477 1.0713 0.39936 0.31066-0.08637 0.64402-0.12963 0.97522-0.13105 0.33074 0.0014 0.66409 0.04468 0.97521 0.13105 0.74372-0.5041 1.0702-0.39936 1.0702-0.39936 0.2126 0.53638 0.0789 0.93241 0.0386 1.0309 0.24968 0.27238 0.40057 0.6201 0.40057 1.0453 0 1.4965-0.91089 1.8258-1.7787 1.9222 0.13986 0.12035 0.26449 0.358 0.26449 0.72147 0 0.52061-4e-3 0.94078-4e-3 1.0685 0 0.10425 0.0701 0.2255 0.26784 0.18747 1.5468-0.51629 2.6619-1.9753 2.6619-3.6959 0-2.1516-1.7443-3.8956-3.8958-3.8956" fill="#a9b3d4" fill-rule="evenodd"/>
-</g>
-</svg>
diff --git a/assets/footer/mastodon_logo.svg b/assets/footer/mastodon_logo.svg
deleted file mode 100644
index d854e8f913..0000000000
--- a/assets/footer/mastodon_logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31ZM19.8291 22.2439C22.247 21.9446 24.3522 20.4006 24.6168 18.9898C25.0337 16.7674 24.9993 13.5663 24.9993 13.5663C24.9993 9.22771 22.2567 7.95599 22.2567 7.95599C20.8738 7.29772 18.4992 7.0209 16.0321 7H15.9715C13.5045 7.0209 11.1314 7.29772 9.74846 7.95599C9.74846 7.95599 7.00571 9.22771 7.00571 13.5663C7.00571 13.8293 7.00439 14.106 7.00303 14.394C6.99924 15.1938 6.99503 16.0812 7.01735 17.0074C7.11695 21.2504 7.76789 25.432 11.5529 26.4703C13.2981 26.9491 14.7965 27.0493 16.0032 26.9805C18.1916 26.8548 19.4201 26.1711 19.4201 26.1711L19.348 24.5254C19.348 24.5254 17.7841 25.0365 16.0278 24.9742C14.2877 24.9124 12.4507 24.7797 12.1692 22.5655C12.1432 22.371 12.1302 22.163 12.1302 21.9446C12.1302 21.9446 13.8384 22.3774 16.0032 22.4802C17.3269 22.5431 18.5683 22.3998 19.8291 22.2439Z" fill="#A9B3D4"/>
-<path d="M21.7646 13.9025V19.1559H19.7565V14.057C19.7565 12.9821 19.3201 12.4365 18.4473 12.4365C17.4823 12.4365 16.9987 13.0837 16.9987 14.3634V17.1543H15.0024V14.3634C15.0024 13.0837 14.5186 12.4365 13.5536 12.4365C12.6808 12.4365 12.2445 12.9821 12.2445 14.057V19.1559H10.2363V13.9025C10.2363 12.8289 10.5001 11.9757 11.0299 11.3445C11.5763 10.7132 12.2918 10.3896 13.18 10.3896C14.2076 10.3896 14.9858 10.799 15.5003 11.6178L16.0005 12.4869L16.5008 11.6178C17.0152 10.799 17.7934 10.3896 18.8211 10.3896C19.7092 10.3896 20.4247 10.7132 20.9711 11.3445C21.5009 11.9757 21.7646 12.8289 21.7646 13.9025Z" fill="#A9B3D4"/>
-</svg>
diff --git a/assets/footer/reddit_logo.svg b/assets/footer/reddit_logo.svg
deleted file mode 100644
index 1c68f56994..0000000000
--- a/assets/footer/reddit_logo.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32" height="32" version="1.1" viewBox="0 0 8.4666668 8.4666665" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-<metadata>
-<rdf:RDF>
-<cc:Work rdf:about="">
-<dc:format>image/svg+xml</dc:format>
-<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-<dc:title/>
-</cc:Work>
-</rdf:RDF>
-</metadata>
-<g transform="translate(-106 -93.645)">
-<path d="m110.24 93.978a3.9004 3.9004 0 0 0 -3.9 3.9 3.9004 3.9004 0 0 0 3.9 3.9008 3.9004 3.9004 0 0 0 3.9 -3.9008 3.9004 3.9004 0 0 0 -3.9 -3.9zm0.30321 1.6741 0.90801 0.18128c0.0581-0.10136 0.16299-0.16887 0.27995-0.18128 0.20353-0.02204 0.38621 0.12542 0.4083 0.32887 0.022 0.20353-0.12527 0.38624-0.32889 0.40828-0.20351 0.02204-0.3862-0.12526-0.40828-0.32887l-0.79251-0.16685-0.24064 1.1559c0.50931 0.01087 1.0052 0.16825 1.427 0.45561 0.0958-0.09112 0.22191-0.14529 0.35455-0.14995 0.29935-0.01086 0.54968 0.22296 0.5607 0.52138 3e-3 0.20814-0.11316 0.39954-0.2992 0.49252 3e-3 0.05433 3e-3 0.1085 0 0.16283 0 0.8308-0.96742 1.5056-2.1602 1.5056s-2.1594-0.67578-2.1594-1.5056c-3e-3 -0.05433-3e-3 -0.1085 0-0.16283-0.0543-0.0239-0.10353-0.05821-0.14591-0.09779-0.21827-0.20444-0.22855-0.54707-0.0241-0.76443 0.20445-0.21824 0.54709-0.22776 0.76445-0.02328 0.42733-0.28921 0.92966-0.44866 1.4454-0.45642l0.27352-1.2858v-0.0016c0.014-0.06271 0.0754-0.10136 0.13722-0.08739zm-1.1663 2.2243c-0.20448 0-0.3706 0.16693-0.3706 0.3714 0 0.20449 0.16519 0.36984 0.3706 0.37139 0.20447 0 0.37138-0.1669 0.37138-0.37139 0-0.20448-0.16691-0.3714-0.37138-0.3714zm1.715 0.01242c-0.20448 0-0.37058 0.16693-0.37058 0.3714 0 0.20448 0.1661 0.37139 0.37058 0.37139l-3e-3 0.01397h0.0185c0.20449-0.0078 0.36358-0.18054 0.35535-0.38502 0-0.20448-0.16691-0.3714-0.37138-0.3714zm-1.6877 1.2136c-0.0225 0-0.0441 0.0078-0.0626 0.02251-0.0424 0.03508-0.0494 0.09872-0.014 0.1411 0.26342 0.19797 0.5863 0.29954 0.91604 0.28556 0.32974 0.01397 0.65183-0.08755 0.91524-0.28556v0.01397c0.0405-0.03974 0.0411-0.10633 2e-3 -0.14684-0.0396-0.0402-0.10539-0.04113-0.14591-0.0016-0.22566 0.16125-0.49857 0.24173-0.77487 0.22621-0.2763 0.01242-0.54795-0.07032-0.77085-0.23342-0.0189-0.01552-0.0418-0.02251-0.0641-0.02251z" fill="#a9b3d4" stroke-width=".35463"/>
-</g>
-</svg>
diff --git a/assets/footer/twitter_logo.svg b/assets/footer/twitter_logo.svg
deleted file mode 100644
index 0a99e12e11..0000000000
--- a/assets/footer/twitter_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="32" viewBox="0 0 8.4666668 8.4666665" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m16.017578 1.2890625a14.728813 14.728813 0 0 0 -14.7285155 14.7285155 14.728813 14.728813 0 0 0 14.7285155 14.728516 14.728813 14.728813 0 0 0 14.728516-14.728516 14.728813 14.728813 0 0 0 -14.728516-14.7285155zm3.878906 7.671875c1.077815 0 2.052705.4552739 2.736328 1.1835935.853593-.1680992 1.654862-.4788005 2.378907-.9082029-.27981.8750409-.874686 1.6084549-1.648438 2.0722659.758051-.090597 1.48028-.291795 2.152344-.589844-.502428.751504-1.137015 1.411103-1.869141 1.939453.0072.160684.011719.321886.011719.484375 0 4.952055-3.769225 10.66211-10.662109 10.66211-2.116278 0-4.0876808-.620344-5.746094-1.683594.2931723.034628.5920708.052734.8945312.052734 1.7556919 0 3.3717688-.598459 4.6542968-1.603516-1.639839-.030266-3.0231611-1.114675-3.4999999-2.603515.2287654.04374.4636193.068359.7050779.068359.341812 0 .671841-.045207.986328-.130859-1.7143347-.344216-3.005859-1.860093-3.005859-3.675781 0-.015772-.0002638-.031228 0-.046875.5053009.280678 1.0829272.449323 1.6972656.46875-1.005524-.671997-1.6660156-1.819042-1.6660156-3.119141 0-.686762.1832914-1.331293.5058594-1.8847656 1.8482936 2.2672066 4.6100916 3.7597416 7.7246096 3.9160156-.063893-.274264-.097656-.559809-.097656-.853516-.000001-2.069508 1.678403-3.7480465 3.748046-3.7480465z" fill="#a9b3d4" transform="scale(.26458333)"/></svg>
diff --git a/pages/community/community.html b/pages/community/community.html
index 22e3a9bc0b..d3c2f69d57 100644
--- a/pages/community/community.html
+++ b/pages/community/community.html
@@ -22,6 +22,7 @@ layout: default
 		display: flex;
 		flex-direction: column;
 		gap: 24px;
+		margin-bottom: 60px;
 	}
 
 	.community-list h2 {
diff --git a/pages/download/archive.html b/pages/download/archive.html
index 742495a4cd..8c442bf8b4 100644
--- a/pages/download/archive.html
+++ b/pages/download/archive.html
@@ -23,10 +23,6 @@ layout: default
 	.hero-blurb {
 		color: var(--base-color-text);
 	}
-
-	footer {
-		margin-top: 0;
-	}
 </style>
 
 <div class="hero">
diff --git a/pages/download/preview.html b/pages/download/preview.html
index bd2fe98dbc..8453458dda 100644
--- a/pages/download/preview.html
+++ b/pages/download/preview.html
@@ -24,10 +24,6 @@ layout: default
 		grid-template-columns: 1fr;
 		gap: 16px;
 	}
-
-	footer {
-		margin-top: 0;
-	}
 </style>
 
 <div class="hero">
diff --git a/pages/features.html b/pages/features.html
index 6dd7486f04..f0537cde00 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -267,10 +267,6 @@ layout: default
 	.showcase-credits a {
 		text-decoration: none;
 	}
-
-	footer {
-		margin-top: 0;
-	}
 </style>
 
 <div class="features-why">
diff --git a/pages/showcase/showcase.scss b/pages/showcase/showcase.scss
index febe0515ee..d7e9ecd5d0 100644
--- a/pages/showcase/showcase.scss
+++ b/pages/showcase/showcase.scss
@@ -76,6 +76,7 @@ h1 {
 	grid-template-columns: 1fr 200px;
 	grid-template-areas: "content aside";
 	gap: 20px;
+	margin-bottom: 60px;
 	@media (max-width: 800px) {
 		grid-template-columns: 1fr;
 		grid-template-areas: "aside"