Merge branch 'stampy-redesign' into 598-updated

app/components/Article/index.tsx

@@ -146,7 +146,7 @@ export const Article = ({question, glossary, className}: ArticleProps) => {
   return (
     <article className={`${className} ${isLoading(question) ? 'loading' : ''}`}>
       <h1 className="teal-500 padding-bottom-24">{title}</h1>
-      {question.banners?.map(Banner)}
+      {question.banners?.filter((b) => b.title).map(Banner)}
       <ArticleMeta question={question} className="padding-bottom-56" />
 
       <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />

app/components/Chatbot/index.tsx

@@ -71,7 +71,7 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
   }
 
   return (
-    <div className="widget-ask fcol-10">
+    <div className="widget-ask col-10">
       {results.length > 0 ? (
         <Button className="full-width suggestion" action={() => handleAsk(results[0].title)}>
           <p className="default">{results[0].title}</p>
@@ -106,8 +106,8 @@ export const WidgetStampy = ({className}: {className?: string}) => {
 
   const stampyUrl = (question: string) => `/chat/?question=${question.trim()}`
   return (
-    <div className={`centered fcol-9 padding-bottom-128 ${className || ''}`}>
-      <div className="fcol-6 padding-bottom-56">
+    <div className={`centered col-9 padding-bottom-128 ${className || ''}`}>
+      <div className="col-6 padding-bottom-56">
         <h2 className="teal-500">Questions?</h2>
         <h2>Ask Stampy, our chatbot, any question about AI safety</h2>
       </div>
@@ -169,7 +169,7 @@ const SplashScreen = ({
 }) => (
   <div className="padding-top-40">
     <IconStampyLarge />
-    <div className="fcol-6 padding-bottom-40 padding-top-40">
+    <div className="col-6 padding-bottom-40 padding-top-40">
       <h2 className="teal-500">Hi there, I'm Stampy.</h2>
       <h2>I can answer your questions about AI Safety</h2>
     </div>
@@ -299,7 +299,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   })
 
   return (
-    <div className="centered fcol-10 height-70">
+    <div className="centered col-10 height-70">
       {history.length === 0 ? (
         <SplashScreen questions={questions} onQuestion={onQuestion} />
       ) : undefined}

app/components/Menu/menuItem.css

@@ -1,5 +1,6 @@
 .top-menu-link {
   display: flex;
+  white-space: nowrap;
 }
 .top-menu-icon {
   width: var(--spacing-24);

app/components/Nav/nav.css

@@ -5,7 +5,6 @@
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
-  flex-wrap: wrap;
   align-items: center;
 }
 

app/components/SearchResults/Dropdown.tsx

@@ -27,7 +27,7 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="full-width container-search-results bordered fcol-5 container-search-results-mobile">
+      <div className="full-width container-search-results bordered col-5 container-search-results-mobile">
         <div className="search-result">No results found</div>
       </div>
     )

app/root.css

@@ -43,7 +43,7 @@
   --spacing-104: clamp(56px, 10.6vw, 104px);
   --spacing-128: clamp(56px, 13.8vw, 128px);
   --spacing-192: clamp(80px, 17vw, 192px);
-  --spacing-288: clamp(128px, 25.6vw, 288px);
+  --spacing-288: clamp(128px, 20vw, 288px);
 }
 
 /* CSS Reset */
@@ -376,40 +376,6 @@ h2 {
   width: clamp(0px, 73.33vw, 1344px);
 }
 
-.fcol-2 {
-  flex: 2;
-}
-.fcol-3 {
-  flex: 3;
-}
-.fcol-4 {
-  flex: 4;
-}
-.fcol-5 {
-  flex: 5;
-}
-.fcol-6 {
-  flex: 6;
-}
-.fcol-7 {
-  flex: 7;
-}
-.fcol-8 {
-  flex: 8;
-}
-.fcol-9 {
-  flex: 9;
-}
-.fcol-10 {
-  flex: 10;
-}
-.fcol-11 {
-  flex: 11;
-}
-.fcol-12 {
-  flex: 12;
-}
-
 .full-width {
   width: 100%;
 }
@@ -501,7 +467,7 @@ svg {
 
 /* defines the standard left and right margins */
 .page-body {
-  padding: 0px 13.333vw;
+  padding: 0px var(--spacing-128);
 }
 
 /* all other classes */
@@ -545,20 +511,8 @@ svg {
 /* mobile */
 
 @media (max-width: 780px) {
-  :root {
-    --spacing-24: 16px;
-    --spacing-32: 24px;
-    --spacing-40: 24px;
-    --spacing-56: 24px;
-    --spacing-80: 40px;
-    --spacing-104: 56px;
-    --spacing-128: 56px;
-    --spacing-192: 80px;
-    --spacing-288: 128px;
-  }
-
   .page-body {
-    padding: 0px 6.4vw;
+    padding: 0px var(--spacing-48);
   }
 
   /* typography tags */