add footer

RGB-WG · Sep 2, 2024 · ab01a87 · ab01a87
1 parent 7eee4ea
commit ab01a87
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 45 deletions.
diff --git a/sass/_base.sass b/sass/_base.sass
@@ -1,13 +1,80 @@
+$gray: #2a3439
 $code: #2b303b
+$yellow: #ffc832
+$footer-gray: $gray
 
 @media screen and (max-width: 30em)
   html
     font-size: 75%
 
+html
+  height: 100%
+
 body
   padding: 0
   margin: 0
   font-family: "Inter", Helvetica, Arial, sans-serif
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+
+  > main
+    flex: 1
+
+  > footer
+    padding: 2rem
+    background-color: $footer-gray
+    color: white
+    display: flex
+    align-items: center
+
+    > *:first-child
+      text-align: left
+    > *
+      text-align: center
+    > *:last-child
+      text-align: right
+
+    > p
+      flex: 3 1
+    > div
+      flex: 1 0 fit-content
+      display: flex
+      justify-content: center
+      align-content: center
+      align-items: center
+      a
+        display: block
+        flex: 1 0 fit-content
+
+    p
+      margin: 0
+
+    ul
+      list-style-type: none
+      padding-left: 0
+      margin-top: 0
+
+    li
+      margin-bottom: 1rem
+
+    a
+      color: $yellow
+      text-decoration: none
+      &:hover
+        color: $yellow
+        text-decoration: underline
+
+    h4
+      font-size: 1.2em
+      font-weight: 600
+      margin-top: 0
+      margin-bottom: 2rem
+
+    img
+      width: 40px
+      padding: 0 10px
+
 
 table
   border-spacing: 0

diff --git a/sass/front.sass b/sass/front.sass
@@ -3,11 +3,7 @@
 $body-font: "Inter", Helvetica, Arial, sans-serif
 $header-font: "Inter", Helvetica, Arial, sans-serif
 
-$gray: #2a3439
-$yellow: #ffc832
-$border-radius: 4px
 $link-color: #4299bf
-$footer-gray: $gray
 
 .nav a
   color: $gray
@@ -62,39 +58,3 @@ article h1
   width: 100%
   font-size: 0.8em
 
-footer
-  padding: 30px 0
-  background-color: $footer-gray
-  color: white
-
-  p
-    margin: 0
-
-  ul
-    list-style-type: none
-    padding-left: 0
-    margin-top: 0
-
-  li
-    margin-bottom: 1rem
-
-  a
-    color: $yellow
-    text-decoration: none
-    &:hover
-      color: $yellow
-      text-decoration: underline
-
-  h4
-    font-size: 1.2em
-    font-weight: 600
-    margin-top: 0
-    margin-bottom: 2rem
-
-  img
-    width: 40px
-    padding: 0 10px
-
-  .attribution
-    text-align: center
-    padding-top: 30px
diff --git a/templates/base.html b/templates/base.html
@@ -26,25 +26,26 @@
       <img alt="RGB Logo" src="/logo/rgb-symbol-color.svg">
     </a>
   </div>
+  {% block breadcrumbs %} {% endblock %}
 </nav -->
 
 <main>
   {% block content %} {% endblock %}
 </main>
 
-<!-- footer>
+<footer>
   <p>
-    Maintained by the <a href="https://www.lnp-bp.org">LNP/BP Labs</a>. See a bug?
-    <a href="https://github.com/RGB-WG/rgbfaq.com/issues/new">File an issue!</a>
+    Created &amp; maintained by <a href="https://www.lnp-bp.org">LNP/BP Labs</a><br/>
+    See a bug? <a href="https://github.com/RGB-WG/rgbfaq.com/issues/new">File an issue!</a>
   </p>
   <div>
     <a href="https://twitter.com/lnp_bp"><img src="/social/twitter.svg" alt="twitter logo" title="Twitter"></a>
     <a href="https://www.youtube.com/LNP-BP"><img class="pv2" src="/social/youtube.svg" alt="youtube logo" title="YouTube"></a>
     <a href="https://reddit.com/r/RGB_protocol"><img src="/social/reddit.svg" alt="discord logo" title="Discord"></a>
     <a href="https://github.com/RGB-WG"><img src="/social/github.svg" alt="github logo" title="GitHub"></a>
   </div>
-  <p>We do not use cookies or any other tracking technology on visitors to this site.</p>
-</footer-->
+  <p>We do not use cookies or any other tracking technology on visitors to this site</p>
+</footer>
 
 </body>
 </html>