1 files changed, 138 insertions, 136 deletions

diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss
index aece947208..dca2960eb9 100644
--- a/documentation/themes/beastie/assets/styles/footer.scss
+++ b/documentation/themes/beastie/assets/styles/footer.scss
@@ -1,6 +1,6 @@
 /*
- * Copyright (c) 2001-2022, The FreeBSD Documentation Project
- * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
+ * Copyright (c) 1994-2023, The FreeBSD Documentation Project
+ * Copyright (c) 2021-2023, Sergio Carlavilla <carlavilla@FreeBSD.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -27,159 +27,161 @@
  */
 
 footer {
-  display: flex;
-  flex-flow: row wrap;
-  padding: 30px 20px 20px 20px;
+  margin-top: 1rem;
+  padding: 1rem;
   color: var(--global-font-color);
-  background-color: var(--footer-background);
-  border-top: 1px solid var(--footer-border-color);
-  align-items: center;
-  justify-content: center;
+  background-color: var(--footer-background-color);
+}
 
-  .container {
-    display: flex;
-    max-width: 1440px;
-    flex-flow: row wrap;
-  }
+.footer-container {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "logo"
+    "about"
+    "documentation"
+    "community"
+    "legal"
+    "copyright";
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+}
 
-  > * {
-    flex:  1 100%;
-  }
+.logo-column {
+  grid-area: logo;
+}
 
-  .footer-project-language {
-    margin-right: 1.25em;
-    margin-bottom: 2em;
-
-    h1 {
-      font-weight: bolder;
-      font-size: 1.5rem;
-    }
-
-    .options-container {
-      display: flex;
-      align-items: center;
-
-      .theme-container {
-        display: none;
-        margin-left: 2rem;
-
-        select {
-          border: 1px solid #CCC;
-          border-radius: 4px;
-          box-sizing: border-box;
-          background-color: #FCFCFD;
-          color: #444;
-        }
-      }
-
-      .language-container {
-        display: flex;
-        align-items: center;
-
-        a {
-          display: flex;
-          align-items: center;
-          text-decoration: none;
-          color: var(--global-font-color);
-          border-radius: 1px;
-          padding: .3rem;
-
-        img {
-          display: inline-flex;
-          padding-right: 10px;
-          align-items: center;
-          justify-content: center;
-          height: 1.5rem;
-          width: 1.5rem;
-        }
-        }
-      }
-
-    }
+.about-column {
+  grid-area: about;
+}
 
-  }
+.community-column {
+  grid-area: community;
+}
 
-  .footer-nav {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    > * {
-      flex: 1 50%;
-      margin-right: 1.25em;
-    }
-
-    .title {
-      font-weight: bolder;
-      font-size: 15px;
-      border-bottom: 1px solid var(--white);
-    }
-
-    h2 {
-      border: none !important;
-    }
-
-    ul {
-      list-style: none;
-      padding-left: 0;
-
-      li {
-        line-height: 2em;
-
-        a {
-          text-decoration: none;
-          color: var(--global-font-color);
-        }
-      }
-    }
-  }
+.documentation-column {
+  grid-area: documentation;
+}
 
-  .footer-nav > li {
-    margin-bottom: 2rem;
-  }
+.legal-column {
+  grid-area: legal;
+}
 
-  .copyright {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    color: var(--global-font-color);
-
-    .love {
-      display: flex;
-      align-items: center;
-      font-weight: bolder;
-
-      .heart {
-        color: red;
-      }
-    }
-  }
+.copyright-column {
+  grid-area: copyright;
+  padding-top: 1rem;
+  border-top: 1px solid #E5E7EB;
+  line-height: 1rem;
+  font-size: .8rem;
+}
 
+.column-title {
+  margin-top: 0;
+  font-size: inherit;
+  border-bottom: none;
 }
 
-@media screen and (min-width: 24rem) {
-  .copyright .love {
-    margin-left: auto;
-  }
+.column-elements-container {
+  margin: .5rem 0;
+  padding: 0;
+  list-style: none;
+}
+
+.column-elements-container li {
+  margin-top: .7rem;
+}
+
+.column-element {
+  text-decoration: none;
+  line-height: 2rem;
+  color: inherit;
+  font-size: inherit;
+}
+
+.heart {
+  font-size: 1.2rem;
+  color: #E38582;
+}
+
+.heart:hover {
+  color: #D1332E;
+}
+
+.options-container {
+  display: flex;
+  align-items: center;
+}
+
+.theme-container {
+  display: none;
+  margin-left: 2rem;
+}
+
+.theme-container select {
+  border: 1px solid #CCC;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background-color: #FCFCFD;
+  color: #444;
+}
+
+.language-container {
+  display: flex;
+  align-items: center;
 }
 
-@media screen and (min-width: 40rem) {
-  .footer-project-language {
-    flex: 1 0px;
+.language-container a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--global-font-color);
+  border-radius: 1px;
+  padding: .3rem;
+}
+
+.language-container a img {
+  display: inline-flex;
+  padding-right: 10px;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+@media screen and (min-width: 450px) {
+  .footer-container {
+    gap: 2rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "logo logo"
+      "about community"
+      "documentation legal"
+      "copyright copyright";
   }
+}
 
-  .footer-nav > * {
-    flex: 1;
+@media screen and (min-width: 900px) {
+  footer {
+    padding: 2rem;
   }
 
-  .footer-nav {
-    flex: 2 0px;
+  .footer-container {
+    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "logo about documentation community legal"
+      "copyright copyright copyright copyright copyright";
+    gap: 1rem;
   }
 }
 
-@media screen and (max-width: 41rem) {
-  .footer-nav {
-    display: block !important;
+@media screen and (min-width: 1451px) {
+  footer {
+    padding: 2rem 5rem;
+  }
+
+  .footer-container {
+    gap: 2rem;
   }
 }