Merge pull request #823 from StampyAI/rest-of-site-CSS-adjustments

site-wide footer
StampyAI · Oct 29, 2024 · 2e87ca0 · 2e87ca0
2 parents e1e9716 + 696e1c0
commit 2e87ca0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 33 deletions.
diff --git 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
@@ -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,39 +12,61 @@ 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="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="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>
           </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" />
-          <Link to="https://github.com/StampyAI/stampy-ui" title="Code" />
-          <Link to="https://get_involved.aisafety.info/" title="Write" />
-          <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" />
-          <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" />
+        <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>
   )
 }