css stuff

StampyAI · Feb 29, 2024 · edd7fbe · edd7fbe
1 parent 7cbdf34
commit edd7fbe
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 23 deletions.
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
@@ -17,7 +17,7 @@ export const FooterBar: FunctionComponent = () => {
       <hr />
       <div className="footer-contents">
         <div className="col-5">
-          <p className="large-bold teal-500">
+          <p className="large-bold teal-500 padding-bottom-16">
             <a href="/">AISafety.info</a>
           </p>
           <div>
@@ -27,14 +27,14 @@ export const FooterBar: FunctionComponent = () => {
         </div>
 
         <div className="col-3 small">
-          <p className="small-bold">Get involved</p>
+          <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.com/invite/Bt8PaRTDQC" title="Join us on Discord" />
         </div>
         <div className="partners small col-4">
-          <p className="small-bold">Partner projects</p>
+          <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>

diff --git a/app/components/Grid/index.tsx b/app/components/Grid/index.tsx
@@ -5,7 +5,7 @@ import './grid.css'
 export const GridBox = ({title, subtitle, icon, pageid}: TOCItem) => (
   <a href={questionUrl({title, pageid})} className="grid-item bordered">
     {icon && <img alt={title} width="72" height="80" src={icon} />}
-    <h3>{title}</h3>
+    <p className="large-bold">{title}</p>
     <div className="grid-description grey">{subtitle}</div>
   </a>
 )

diff --git a/app/newRoot.css b/app/newRoot.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway&display=swap');
 
 :root {
   /* colors */
@@ -79,14 +79,14 @@ body {
 
 h1 {
   font-size: 64px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 125%; /* 80px */
   letter-spacing: -1.28px;
 }
 
 h2 {
   font-size: 38px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 130%; /* 49.4px */
   letter-spacing: -0.57px;
 }
@@ -95,46 +95,66 @@ h2 {
 
 .large {
   font-size: 22px;
+  font-weight: 300;
+  line-height: 170%; /* 37.4px */
   letter-spacing: -0.44px;
 }
 
 .large-reading {
   font-size: 22px;
+  font-weight: 300;
   line-height: 190%; /* 41.8px */
   letter-spacing: -0.44px;
 }
 
 .large-bold {
   font-size: 22px;
+  font-weight: 500;
+  line-height: 170%; /* 37.4px */
   letter-spacing: -0.44px;
-  font-weight: 600;
+}
+
+.default {
+  /* only use if a parent has been assigned another typography class (otherwise this is defined in body) */
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
 }
 
 .default-bold {
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 500;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
 }
 
 .small {
-  font-size: 16px !important;
-  letter-spacing: -0.16px !important;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
 }
 
 .small-bold {
   font-size: 16px;
+  font-weight: 500;
+  line-height: 170%; /* 27.2px */
   letter-spacing: -0.16px;
-  font-weight: 600;
 }
 
 .xs {
   font-size: 14px;
+  font-weight: 300;
+  line-height: 170%; /* 23.8px */
   letter-spacing: -0.14px;
 }
 
 .xs-bold {
   font-size: 14px;
+  font-weight: 500;
+  line-height: 170%; /* 23.8px */
   letter-spacing: -0.14px;
-  font-weight: 600;
 }
 
 /* color classes */
@@ -168,6 +188,7 @@ h2 {
 .no-padding {
   padding: 0 !important;
 }
+
 .padding-bottom-4 {
   padding-bottom: var(--spacing-4);
 }
@@ -216,6 +237,54 @@ h2 {
   padding-bottom: var(--spacing-288);
 }
 
+.padding-top-4 {
+  padding-top: var(--spacing-4);
+}
+
+.padding-top-8 {
+  padding-top: var(--spacing-8);
+}
+
+.padding-top-16 {
+  padding-top: var(--spacing-16);
+}
+
+.padding-top-24 {
+  padding-top: var(--spacing-24);
+}
+
+.padding-top-32 {
+  padding-top: var(--spacing-32);
+}
+
+.padding-top-40 {
+  padding-top: var(--spacing-40);
+}
+
+.padding-top-56 {
+  padding-top: var(--spacing-56);
+}
+
+.padding-top-80 {
+  padding-top: var(--spacing-80);
+}
+
+.padding-top-104 {
+  padding-top: var(--spacing-104);
+}
+
+.padding-top-128 {
+  padding-top: var(--spacing-128);
+}
+
+.padding-top-192 {
+  padding-top: var(--spacing-192);
+}
+
+.padding-top-288 {
+  padding-top: 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 */
 
@@ -266,6 +335,7 @@ h2 {
 .full-width {
   width: 100%;
 }
+
 /* other tags */
 
 a {
@@ -372,6 +442,8 @@ ol {
   }
 }
 
+/* mobile */
+
 @media (max-width: 640px) {
   :root {
     --spacing-24: 16px;
@@ -385,9 +457,7 @@ ol {
     --spacing-288: 128px;
   }
 
-  .col-2 {
-  }
-
+  .col-2,
   .col-3,
   .col-4,
   .col-4-5,
@@ -396,23 +466,64 @@ ol {
   .col-7,
   .col-8,
   .col-9,
-  .col-10 {
+  .col-10,
+  .col-11 {
     width: 87.2vw;
   }
 
-  .col-11 {
+  .page-body {
+    padding: 0px 6.4vw;
   }
 
-  .page-body {
-    padding: 0px var(--spacing-80);
+  /* typography tags */
+
+  h1 {
+    font-size: 38px;
+    font-weight: 600;
+    line-height: 130%; /* 49.4px */
+    letter-spacing: -0.57px;
+  }
+
+  h2 {
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 145%; /* 37.7px */
+    letter-spacing: -0.52px;
+  }
+
+  /* typography classes */
+
+  .large {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 170%; /* 30.6px */
+    letter-spacing: -0.18px;
   }
 
+  .large-reading {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 190%; /* 34.2px */
+    letter-spacing: -0.18px;
+  }
+
+  .large-bold {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 170%; /* 30.6px */
+    letter-spacing: -0.18px;
+  }
+
+  /* other one-off classes */
+
   .desktop-only {
     display: none !important;
   }
 
+  /* other classes */
+
   .article-container {
     padding: var(--spacing-32);
     flex-direction: column;
   }
-}
+} /* end mobile */
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -32,9 +32,8 @@ export default function App() {
   return (
     <Page>
       <div className="page-body">
-        <h1 className="padding-bottom-80">Answers on all things AI safety</h1>
+        <h1 className="padding-bottom-80 padding-top-56">Answers on all things AI safety</h1>
 
-        <h3 className="grey padding-bottom-40">Beginner sections</h3>
         <ContentBoxMain />
         <ContentBoxSecond />
         <ContentBoxThird />