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

mostly css for how can I help actually
StampyAI · Oct 30, 2024 · 8d5d122 · 8d5d122
2 parents b030cbb + 63729b4
commit 8d5d122
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 154 deletions.
diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css
@@ -1,27 +1,7 @@
-.footer {
-  margin-top: var(--spacing-104);
-}
-
-.footer-contents {
-  /* 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); */
-}
-
 @media (max-width: 1136px) {
   .footer-contents {
     flex-direction: column;
     gap: 32px;
     margin-bottom: 0;
   }
-
-  .col-5,
-  .col-4,
-  .col-3 {
-    width: 100%;
-  }
 }
diff --git a/app/components/HowCanIHelp/HelpItem.tsx b/app/components/HowCanIHelp/HelpItem.tsx
@@ -8,6 +8,7 @@ type HelpItemProps = {
   links?: Link[]
   additionalInfo?: ReactNode
   titleFont?: 'large-bold' | 'default-bold'
+  className?: string
 }
 const HelpItem = ({
   title,
@@ -16,17 +17,18 @@ const HelpItem = ({
   links,
   additionalInfo,
   titleFont = 'large-bold',
+  className = '',
 }: HelpItemProps) => {
   return (
-    <div className="flexbox padding-bottom-40">
+    <div className={`flexbox ${className}`}>
       <div className="col-6">
         {title && (
           <p className={`flexbox gap-16 center-align padding-bottom-16 ${titleFont}`}>
             <span>{title}</span>
             {tag && <span className="tag xs">{tag}</span>}
           </p>
         )}
-        <p className="grey default padding-bottom-16"> {children} </p>
+        <p className="grey default"> {children} </p>
       </div>
       <div className="col-6">
         {links?.map((link) => (

diff --git a/app/components/HowCanIHelp/category-carousel.css b/app/components/HowCanIHelp/category-carousel.css
@@ -36,3 +36,10 @@
   text-align: left;
   gap: var(--spacing-16);
 }
+
+@media (max-width: 1136px) {
+  .carousel-item {
+    width: 100%;
+    height: auto;
+  }
+}
diff --git a/app/root.css b/app/root.css
@@ -34,17 +34,17 @@
   --spacing-8: 8px;
   --spacing-12: 12px;
   --spacing-16: 16px;
-  --spacing-24: clamp(16px, 1.67vw, 24px);
-  --spacing-32: clamp(24px, 2.22vw, 32px);
-  --spacing-40: clamp(24px, 2.78vw, 40px);
-  --spacing-48: clamp(24px, 3.33vw, 48px);
-  --spacing-56: clamp(24px, 3.89vw, 56px);
-  --spacing-64: clamp(32px, 4.45vw, 64px);
-  --spacing-80: clamp(40px, 5.56vw, 80px);
-  --spacing-104: clamp(56px, 7.22vw, 104px);
-  --spacing-128: clamp(56px, 8.89vw, 128px);
-  --spacing-192: clamp(80px, 13.33vw, 192px);
-  --spacing-288: clamp(128px, 20vw, 288px);
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-56: 56px;
+  --spacing-64: 64px;
+  --spacing-80: 80px;
+  --spacing-104: 104px;
+  --spacing-128: 128px;
+  --spacing-192: 192px;
+  --spacing-288: 288px;
 
   /* height */
   --height-48: 48px;

diff --git a/app/routes/how-can-i-help.career.tsx b/app/routes/how-can-i-help.career.tsx
@@ -63,7 +63,7 @@ const ResearchPath = () => (
       </div>
     </div>
 
-    <div className="padding-bottom-24">
+    <div className="padding-bottom-56">
       <div className="flexbox padding-bottom-56">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
         <p className="col-6 large">
@@ -79,6 +79,7 @@ const ResearchPath = () => (
             action: 'https://80000hours.org/career-reviews/ai-safety-researcher/',
           },
         ]}
+        className="padding-bottom-40"
       >
         <p className="padding-bottom-16">The review takes about one hour and addresses:</p>
         <ul>
@@ -101,6 +102,7 @@ const ResearchPath = () => (
             action: 'https://80000hours.org/speak-with-us/',
           },
         ]}
+        className="padding-bottom-40"
       >
         <p className="grey default padding-bottom-16">
           Schedule a 30-minute or 1-hour video call—we recommend booking both! These calls will
@@ -142,12 +144,12 @@ const ResearchPath = () => (
 
     <div className="padding-bottom-80">
       <DropDown title="I’m interested in non-technical or supporting roles in AI alignment">
-        <HelpItem>
+        <p className="padding-bottom-40 col-6 grey">
           There are many roles that support the work of AI alignment researchers, and having
           high-performing people in these roles is crucial. In a research organisation around half
           of the staff will be doing other tasks essential for the organisation to perform at its
           best and have an impact. Some of these roles include:
-        </HelpItem>
+        </p>
         <HelpItem
           title="Operations management at an AI safety research organization"
           links={[
@@ -156,6 +158,7 @@ const ResearchPath = () => (
               action: 'https://80000hours.org/articles/operations-management/',
             },
           ]}
+          className="padding-bottom-40"
         >
           This involves overseeing the day-to-day activities that enable the organization to
           function efficiently and effectively. Responsibilities may include administrative support,
@@ -169,6 +172,7 @@ const ResearchPath = () => (
               action: '#',
             },
           ]}
+          className="padding-bottom-40"
         >
           This involves overseeing and coordinating research activities to ensure they align with
           the mission of promoting safe AI development. Responsibilities include setting research
@@ -192,7 +196,7 @@ const ResearchPath = () => (
       </DropDown>
     </div>
 
-    <div className="flexbox padding-bottom-32">
+    <div className="flexbox">
       <Testimonial
         src="/assets/guy.jpeg"
         title="Lorem ipsum"
@@ -214,7 +218,7 @@ const ResearchPath = () => (
       />
     </div>
 
-    <div className="padding-bottom-80">
+    <div className="padding-bottom-104">
       <CategoryCarousel
         title="Our articles on pursuing a career in alignment research"
         category="NM1D"
@@ -224,7 +228,7 @@ const ResearchPath = () => (
 )
 
 const GovernancePath = () => (
-  <div className="padding-bottom-80">
+  <div className="padding-bottom-104">
     <div className="padding-bottom-80">
       <h2 className="teal-500 padding-bottom-40" id="governance">
         AI governance & policy
@@ -249,7 +253,7 @@ const GovernancePath = () => (
       </div>
     </div>
 
-    <div className="padding-bottom-24">
+    <div className="padding-bottom-80">
       <div className="flexbox padding-bottom-56">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
         <p className="col-6 large">
@@ -265,6 +269,7 @@ const GovernancePath = () => (
             action: 'https://80000hours.org/career-reviews/ai-safety-researcher/',
           },
         ]}
+        className="padding-bottom-40"
       >
         <p className="padding-bottom-16">The review takes about one hour and addresses:</p>
         <ul>
@@ -277,6 +282,7 @@ const GovernancePath = () => (
       </HelpItem>
       <HelpItem
         title="Sign up for 1-on-1 career advice with AI safety Quest & 80,000 Hours (free)"
+        className="padding-bottom-40"
         links={[
           {
             title: 'Book your AI Safety Quest call',
@@ -321,7 +327,7 @@ const GovernancePath = () => (
       </HelpItem>
     </div>
 
-    <div className="flexbox padding-bottom-32">
+    <div className="flexbox">
       <Testimonial
         src="/assets/guy.jpeg"
         title="Lorem ipsum"
@@ -388,12 +394,13 @@ const FieldBuildingPath = () => (
       </div>
     </div>
 
-    <div className="padding-bottom-24">
+    <div className="padding-bottom-56">
       <p className="padding-bottom-40 large-bold">Most common field-building roles</p>
 
       <HelpItem
         titleFont="default-bold"
         title="Communications & advocacy"
+        className="padding-bottom-40"
         links={[
           {
             title: "Read 80k's guide on communications",
@@ -410,6 +417,7 @@ const FieldBuildingPath = () => (
       <HelpItem
         titleFont="default-bold"
         title="Being a grantmaker"
+        className="padding-bottom-40"
         links={[
           {
             title: "Read 80k's guide on being a grantmaker",
@@ -442,7 +450,7 @@ const FieldBuildingPath = () => (
 
     <div className="padding-bottom-80">
       <DropDown title="What are some other miscellaneous roles?">
-        <HelpItem title="Supporting roles">
+        <HelpItem title="Supporting roles" className="padding-bottom-40">
           There are many roles that support the work of AI alignment researchers or people in AI
           governance, and having high-performing people in these roles is crucial. In a research
           organisation, for example, around half of the staff will be doing other tasks essential
@@ -452,6 +460,7 @@ const FieldBuildingPath = () => (
         <HelpItem
           titleFont="default-bold"
           title="Operations management at an AI safety research organization"
+          className="padding-bottom-40"
           links={[
             {
               title: "Read 80k's guide on operations work",
@@ -467,6 +476,7 @@ const FieldBuildingPath = () => (
         <HelpItem
           titleFont="default-bold"
           title="Research management at an AI safety research organization"
+          className="padding-bottom-40"
           links={[
             {
               title: "Read 80k's guide on research management",
@@ -483,6 +493,7 @@ const FieldBuildingPath = () => (
         <HelpItem
           titleFont="default-bold"
           title="Being an executive assistant to someone doing important work on safety and governance"
+          className="padding-bottom-40"
           links={[
             {
               title: "Read 80k's guide on being an executive assistant",
@@ -501,6 +512,7 @@ const FieldBuildingPath = () => (
         <HelpItem
           titleFont="default-bold"
           title="Working in information security to protect AI (or the results of key experiments) from misuse, theft, or tampering"
+          className="padding-bottom-40"
           links={[
             {
               title: "Read 80k's guide on Information security in high-impact areas",
@@ -526,7 +538,7 @@ const FieldBuildingPath = () => (
       </DropDown>
     </div>
 
-    <div className="padding-bottom-24">
+    <div className="padding-bottom-80">
       <div className="flexbox padding-bottom-56">
         <h2 className="col-6">Interested in pursuing this career path?</h2>
         <p className="col-6">
@@ -536,6 +548,7 @@ const FieldBuildingPath = () => (
       </div>
       <HelpItem
         title="Sign up for 1-on-1 career advice with AI safety Quest & 80,000 Hours (free)"
+        className="padding-bottom-40"
         links={[
           {
             title: 'Book your AI Safety Quest call',
@@ -585,7 +598,7 @@ const FieldBuildingPath = () => (
       </HelpItem>
     </div>
 
-    <div className="padding-bottom-24">
+    <div>
       <Testimonial
         src="/assets/bryce.png"
         title="Bryce Robertson"

diff --git a/app/routes/how-can-i-help.donate.tsx b/app/routes/how-can-i-help.donate.tsx
@@ -33,11 +33,12 @@ export default function Donate() {
         </div>
       </div>
 
-      <div className="padding-bottom-24">
+      <div className="padding-bottom-80">
         <h2 className="col-6 padding-bottom-56 teal-500">How & where to donate</h2>
         <HelpItem
           title="Donating to grantmakers"
           tag="Easiest & most common"
+          className="padding-bottom-40"
           links={[
             {
               tag: 'Top recommendation',
@@ -67,7 +68,7 @@ export default function Donate() {
         </HelpItem>
 
         <HelpItem title="Donating directly" tag="Highest impact">
-          <p className="padding-bottom-16">
+          <p>
             If you're deeply involved in the AI safety community, we encourage you to directly fund
             research, projects, or miscellaneous expenses that you think are valuable. Donating
             directly puts you in the seat of the grantmaker—if you have knowledge of an avenue that
@@ -76,7 +77,7 @@ export default function Donate() {
         </HelpItem>
       </div>
 
-      <div className="flexbox padding-bottom-32">
+      <div className="flexbox">
         <Testimonial
           src="/assets/guy.jpeg"
           title="Søren Elverlin"
@@ -95,7 +96,7 @@ export default function Donate() {
         />
       </div>
 
-      <div className="padding-bottom-80">
+      <div>
         <CategoryCarousel title="Our articles on donating" category="NM1B" />
       </div>
     </Base>