From da93d7bb8d4a805202f5c6f4b5cd2302df051694 Mon Sep 17 00:00:00 2001
From: Melissa Samworth <melissasamworth@gmail.com>
Date: Thu, 15 Feb 2024 21:04:58 +0000
Subject: [PATCH] finish footer styling

---
 app/components/Footer/footer.css |  4 +--
 app/components/Footer/index.tsx  |  8 +++---
 app/newRoot.css                  | 43 ++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css
index 2b8ca3ac..96e4b05e 100644
--- a/app/components/Footer/footer.css
+++ b/app/components/Footer/footer.css
@@ -44,7 +44,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: baseline;
-  margin: 104px 0 80px 0;
+  margin: 104px 13.33vw 80px 13.33vw;
 }
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
index 9b20e026..8f8dd22e 100644
--- a/app/components/Footer/index.tsx
+++ b/app/components/Footer/index.tsx
@@ -16,24 +16,24 @@ export const FooterBar: FunctionComponent = () => {
     <div className="footer" key="footer">
       <hr />
       <div className="footer-grid">
-        <div>
+        <div className="col-5">
           <p className="large-bold teal-500">
             <a href="/">AISafety.info</a>
           </p>
-          <div className="footer-description">
+          <div>
             We're a global team of volunteers from various disciplines who believe AI poses a grave
             risk of extinction to humanity.
           </div>
         </div>
 
-        <div className="small">
+        <div className="col-3 small">
           <p className="small-bold">Help out</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://discord.com/invite/Bt8PaRTDQC" title="Join us on Discord" />
         </div>
-        <div className="partners small">
+        <div className="partners small col-4">
           <p className="small-bold">Partner projects</p>
           <Link to="https://www.aisafety.com/" title="AIsafety.com" />
           <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" />
diff --git a/app/newRoot.css b/app/newRoot.css
index 21ec1eb7..a6b5c30e 100644
--- a/app/newRoot.css
+++ b/app/newRoot.css
@@ -202,6 +202,49 @@ h2 {
   padding-bottom: var(--spacing-288);
 }
 
+/* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */
+/* note I may change these to vars later */
+
+.col-2 {
+  width: 8.54vw;
+}
+
+.col-3 {
+  width: 15vw;
+}
+
+.col-4 {
+  width: 21.46vw;
+}
+
+.col-5 {
+  width: 27.99vw;
+}
+
+.col-6 {
+  width: 34.44vw;
+}
+
+.col-7 {
+  width: 40.9vw;
+}
+
+.col-8 {
+  width: 47.43vw;
+}
+
+.col-9 {
+  width: 53.89vw;
+}
+
+.col-10 {
+  width: 60.35vw;
+}
+
+.col-11 {
+  width: 66.88vw;
+}
+
 /* other tags */
 
 a {