From 7502f9c6ed98ca70d97f0b9d3a1121f73776900c Mon Sep 17 00:00:00 2001
From: Melissa Samworth <melissasamworth@gmail.com>
Date: Mon, 28 Oct 2024 21:49:19 -0400
Subject: [PATCH 1/2] site-wide footer

---
 app/components/Footer/footer.css |  6 +++---
 app/components/Footer/index.tsx  | 23 ++++++++++++-----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css
index 235c53b7..e662d8a0 100644
--- a/app/components/Footer/footer.css
+++ b/app/components/Footer/footer.css
@@ -3,16 +3,16 @@
 }
 
 .footer-contents {
-  display: flex;
+  /* display: flex;
   gap: var(--spacing-32);
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: baseline;
-  margin: var(--spacing-104) var(--spacing-80) var(--spacing-80) var(--spacing-80);
+  margin: var(--spacing-104) var(--spacing-80) var(--spacing-80) var(--spacing-80); */
 }
 
-@media (max-width: 780px) {
+@media (max-width: 1136px) {
   .footer-contents {
     flex-direction: column;
     gap: 32px;
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
index b33c1db9..31122139 100644
--- a/app/components/Footer/index.tsx
+++ b/app/components/Footer/index.tsx
@@ -1,10 +1,9 @@
 import {FunctionComponent} from 'react'
 import './footer.css'
-
 const year = new Date().getFullYear()
 
-const Link = ({to, title}: {to: string; title: string}) => (
-  <div>
+const Link = ({to, title, className}: {to: string; title: string; className?: string}) => (
+  <div className={className}>
     <a href={to} target="_blank" rel="noreferrer">
       {title}
     </a>
@@ -13,9 +12,10 @@ const Link = ({to, title}: {to: string; title: string}) => (
 
 export const FooterBar: FunctionComponent = () => {
   return (
-    <div className="footer" key="footer">
+    <div className="padding-top-104">
       <hr />
-      <div className="footer-contents">
+      <div className="page-body" key="footer">
+      <div className="flexbox padding-bottom-80 padding-top-104">
         <div className="col-5">
           <p className="large-bold teal-500 padding-bottom-16">
             <a href="/">AISafety.info</a>
@@ -28,25 +28,26 @@ export const FooterBar: FunctionComponent = () => {
 
         <div className="col-3 small">
           <p className="small-bold padding-bottom-16">Get involved</p>
-          <Link to="https://www.every.org/stampy?utm_campaign=donate-link#/donate" title="Donate" />
-          <Link to="https://github.com/StampyAI/stampy-ui" title="Code" />
-          <Link to="https://get_involved.aisafety.info/" title="Write" />
+          <Link to="https://www.every.org/stampy?utm_campaign=donate-link#/donate" title="Donate" className="padding-bottom-8" />
+          <Link to="https://github.com/StampyAI/stampy-ui" title="Code" className="padding-bottom-8"/>
+          <Link to="https://get_involved.aisafety.info/" title="Write" className="padding-bottom-8"/>
           <Link to="https://discord.gg/88TbjZnNyA" title="Join us on Discord" />
         </div>
         <div className="partners small col-4">
           <p className="small-bold padding-bottom-16">Partner projects</p>
-          <Link to="https://www.aisafety.com/" title="AISafety.com" />
-          <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" />
+          <Link to="https://www.aisafety.com/" title="AISafety.com" className="padding-bottom-8"/>
+          <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" className="padding-bottom-8"/>
         </div>
       </div>
       <div className="xs grey text-align-center padding-bottom-16">
         <br />
         <Link
           to="https://coda.io/d/AI-Safety-Info-Dashboard_dfau7sl2hmG/Copyright_su79L#_luPMa"
-          title={`© aisafety.info, 2022-${year}`}
+          title={`© AISafety.info, 2022—${year}`}
         />
       </div>
     </div>
+    </div>
   )
 }
 

From 696e1c05ce49c465237385511911e6a55210c993 Mon Sep 17 00:00:00 2001
From: Melissa Samworth <melissasamworth@gmail.com>
Date: Mon, 28 Oct 2024 21:50:58 -0400
Subject: [PATCH 2/2] lint

---
 app/components/Footer/index.tsx | 74 +++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 27 deletions(-)

diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
index 31122139..76ff008d 100644
--- a/app/components/Footer/index.tsx
+++ b/app/components/Footer/index.tsx
@@ -15,38 +15,58 @@ export const FooterBar: FunctionComponent = () => {
     <div className="padding-top-104">
       <hr />
       <div className="page-body" key="footer">
-      <div className="flexbox padding-bottom-80 padding-top-104">
-        <div className="col-5">
-          <p className="large-bold teal-500 padding-bottom-16">
-            <a href="/">AISafety.info</a>
-          </p>
-          <div>
-            We’re a global team of specialists and volunteers from various backgrounds who want to
-            ensure that the effects of future AI are beneficial rather than catastrophic.
+        <div className="flexbox padding-bottom-80 padding-top-104">
+          <div className="col-5">
+            <p className="large-bold teal-500 padding-bottom-16">
+              <a href="/">AISafety.info</a>
+            </p>
+            <div>
+              We’re a global team of specialists and volunteers from various backgrounds who want to
+              ensure that the effects of future AI are beneficial rather than catastrophic.
+            </div>
           </div>
-        </div>
 
-        <div className="col-3 small">
-          <p className="small-bold padding-bottom-16">Get involved</p>
-          <Link to="https://www.every.org/stampy?utm_campaign=donate-link#/donate" title="Donate" className="padding-bottom-8" />
-          <Link to="https://github.com/StampyAI/stampy-ui" title="Code" className="padding-bottom-8"/>
-          <Link to="https://get_involved.aisafety.info/" title="Write" className="padding-bottom-8"/>
-          <Link to="https://discord.gg/88TbjZnNyA" title="Join us on Discord" />
+          <div className="col-3 small">
+            <p className="small-bold padding-bottom-16">Get involved</p>
+            <Link
+              to="https://www.every.org/stampy?utm_campaign=donate-link#/donate"
+              title="Donate"
+              className="padding-bottom-8"
+            />
+            <Link
+              to="https://github.com/StampyAI/stampy-ui"
+              title="Code"
+              className="padding-bottom-8"
+            />
+            <Link
+              to="https://get_involved.aisafety.info/"
+              title="Write"
+              className="padding-bottom-8"
+            />
+            <Link to="https://discord.gg/88TbjZnNyA" title="Join us on Discord" />
+          </div>
+          <div className="partners small col-4">
+            <p className="small-bold padding-bottom-16">Partner projects</p>
+            <Link
+              to="https://www.aisafety.com/"
+              title="AISafety.com"
+              className="padding-bottom-8"
+            />
+            <Link
+              to="https://alignment.dev/"
+              title="Alignment Ecosystem Development"
+              className="padding-bottom-8"
+            />
+          </div>
         </div>
-        <div className="partners small col-4">
-          <p className="small-bold padding-bottom-16">Partner projects</p>
-          <Link to="https://www.aisafety.com/" title="AISafety.com" className="padding-bottom-8"/>
-          <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" className="padding-bottom-8"/>
+        <div className="xs grey text-align-center padding-bottom-16">
+          <br />
+          <Link
+            to="https://coda.io/d/AI-Safety-Info-Dashboard_dfau7sl2hmG/Copyright_su79L#_luPMa"
+            title={`© AISafety.info, 2022—${year}`}
+          />
         </div>
       </div>
-      <div className="xs grey text-align-center padding-bottom-16">
-        <br />
-        <Link
-          to="https://coda.io/d/AI-Safety-Info-Dashboard_dfau7sl2hmG/Copyright_su79L#_luPMa"
-          title={`© AISafety.info, 2022—${year}`}
-        />
-      </div>
-    </div>
     </div>
   )
 }