Merge pull request #444 from StampyAI/landing-css

landing page mobile
StampyAI · Feb 27, 2024 · ba02d51 · ba02d51
2 parents aa30093 + 938e4c5
commit ba02d51
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 18 deletions.
diff --git a/app/components/ContentBox/box.css b/app/components/ContentBox/box.css
@@ -1,7 +1,7 @@
 .main-container-box-table {
   display: flex;
   justify-content: space-between;
-  margin-top: var(--spacing-80);
+  margin-bottom: var(--spacing-80);
 }
 
 .content-box-table-button {
@@ -57,3 +57,15 @@
   padding: 0;
   padding-right: var(--spacing-8);
 }
+
+@media (max-width: 600px) {
+  .main-container-box-table {
+    flex-direction: column;
+    height: 550px;
+    margin-bottom: var(--spacing-80);
+  }
+
+  .content-box-description {
+    margin: var(--spacing-40); /* FIXME: should be done automatically */
+  }
+}
diff --git a/app/components/ContentBox/index.tsx b/app/components/ContentBox/index.tsx
@@ -76,7 +76,11 @@ export const ContentBoxSecond = () => {
       <ListTable
         elements={[
           {title: 'What are the main sources of AI existential risk?', pageid: '8503'},
-          {title: 'Do people seriously worry about existential risk from AI?', pageid: '6953'},
+          {
+            title: 'Do people seriously worry about existential risk from AI?',
+            pageid: '6953',
+            className: 'desktop-only',
+          },
           {title: 'Why would an AI do bad things?', pageid: '2400'},
         ]}
       />

diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css
@@ -10,3 +10,11 @@
   align-items: baseline;
   margin: var(--spacing-104) 13.33vw var(--spacing-80) 13.33vw;
 }
+
+@media (max-width: 600px) {
+  .footer-contents {
+    flex-direction: column;
+    gap: var(--spacing-80);
+    margin-bottom: 0;
+  }
+}
diff --git a/app/components/Grid/grid.css b/app/components/Grid/grid.css
@@ -1,7 +1,16 @@
+.grid {
+  display: flex;
+  gap: var(--spacing-32);
+  justify-content: center;
+  flex-flow: wrap;
+}
+
 .grid-item {
   cursor: pointer;
   text-align: left;
   padding: var(--spacing-32) var(--spacing-32);
+  width: 21.46vw;
+  height: 21.46vw;
   min-width: var(--spacing-288);
   min-height: var(--spacing-288);
   text-decoration: none;
@@ -18,10 +27,3 @@
 .grid-item div {
   padding: var(--spacing-8);
 }
-
-.grid {
-  display: grid;
-  gap: var(--spacing-56) var(--spacing-56);
-  grid-template-columns: repeat(3, 1fr);
-  justify-content: space-around;
-}
diff --git a/app/components/Table/index.tsx b/app/components/Table/index.tsx
@@ -8,6 +8,7 @@ export type ListItem = {
   title: string
   subtitle?: string
   hasIcon?: boolean
+  className?: string
 }
 export type ListTableProps = {
   /**
@@ -22,10 +23,10 @@ export const ListTable = ({elements, sameTab, className}: ListTableProps) => {
   if (!elements || elements.length === 0) return null
   return (
     <div className={styles.container + ' bordered' + (className ? ' ' + className : '')}>
-      {elements.map(({pageid, title, subtitle, hasIcon}, i) => (
+      {elements.map(({pageid, title, subtitle, hasIcon, className}, i) => (
         <Link
           key={`entry-${i}`}
-          className={styles.entry + ' teal-500 default-bold flex-container'}
+          className={styles.entry + ' teal-500 default-bold flex-container ' + (className || '')}
           to={questionUrl({pageid, title})}
           target={sameTab ? undefined : '_blank'}
           rel={sameTab ? undefined : 'noopener noreferrer'}

diff --git a/app/components/Widget/Stampy.tsx b/app/components/Widget/Stampy.tsx
@@ -15,7 +15,7 @@ export const WidgetStampy = () => {
 
   const stampyUrl = (question: string) => `https://chat.aisafety.info/?question=${question.trim()}`
   return (
-    <div className="chat col-10">
+    <div className="centered col-9">
       <div className="col-6 padding-bottom-56">
         <h2 className="teal-500">Questions?</h2>
         <h2>Ask Stampy any question about AI Safety</h2>

diff --git a/app/components/Widget/stampy.css b/app/components/Widget/stampy.css
@@ -1,7 +1,3 @@
-.chat {
-  margin-left: 6vw;
-}
-
 .sample-messages-container {
   display: flex;
   align-items: flex-end;

diff --git a/app/newRoot.css b/app/newRoot.css
@@ -308,6 +308,9 @@ ol {
   flex-grow: 2;
 }
 
+.centered {
+  margin: auto;
+}
 .vertically-centered {
   margin: auto 0;
 }
@@ -352,3 +355,49 @@ ol {
 .icon-link.focused path {
   stroke: var(--colors-teal-600);
 }
+
+.desktop-only {
+  display: inherit;
+}
+
+.mobile-only {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .col-2 {
+  }
+
+  .col-3 {
+  }
+
+  .col-4 {
+    width: 65vw;
+  }
+
+  .col-4-5 {
+  }
+
+  .col-5 {
+    width: 87.2vw;
+  }
+
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10 {
+    width: 87.2vw;
+  }
+
+  .col-11 {
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: inherit;
+  }
+}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -32,16 +32,16 @@ export default function App() {
   return (
     <Page>
       <div className="page-body">
-        <h1>
+        <h1 className="padding-bottom-56">
           Educational content <br />
           on all things AI Safety
         </h1>
 
+        <h3 className="grey padding-bottom-40">Introductory content</h3>
         <ContentBoxMain />
         <ContentBoxSecond />
         <ContentBoxThird />
 
-        <div className="padding-bottom-80" />
         <WidgetStampy />
 
         <div className="padding-bottom-80" />