Merge pull request #610 from StampyAI/col

reintroduce vw-based .col-x
StampyAI · May 3, 2024 · 0f7d38e · 0f7d38e
2 parents 6f2a69d + dcde863
commit 0f7d38e
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 29 deletions.
diff --git a/app/components/Article/FeedbackForm/index.tsx b/app/components/Article/FeedbackForm/index.tsx
@@ -66,7 +66,7 @@ const FeedbackForm = ({
 
   return (
     <div key={pageid} className={className} onBlur={handleBlur} onFocus={onFocus}>
-      <div className={'fcol-5 feedback-container bordered'}>
+      <div className={'col-5 feedback-container bordered'}>
         <span className={'black small'}>What was the problem?</span>
         {hasOptions
           ? options.map((option, index) => (

diff --git a/app/components/ArticlesDropdown/index.tsx b/app/components/ArticlesDropdown/index.tsx
@@ -65,8 +65,8 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
   )
 
   return hidden ? null : (
-    <div className="articles-dropdown-container bordered fcol-8">
-      <div className="fcol-5 toc">
+    <div className="articles-dropdown-container bordered col-8">
+      <div className="col-5 toc">
         <ArticlesSection
           category={INTRODUCTORY}
           toc={toc}
@@ -78,7 +78,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
           className={mobile ? 'padding-bottom-40' : ''}
         />
       </div>
-      <div className="fcol-4">
+      <div className="col-4">
         {/*sorted right side*/}
         <div className="default-bold">Browse by category</div>
 

diff --git a/app/components/ArticlesNav/articlenav.css b/app/components/ArticlesNav/articlenav.css
@@ -10,7 +10,9 @@
   overflow-y: scroll;
   overflow-x: hidden;
   opacity: 1;
-  transition: opacity 200ms, width 200ms;
+  transition:
+    opacity 200ms,
+    width 200ms;
 }
 
 .articles-group.loading {

diff --git a/app/components/CategoriesNav/Page.tsx b/app/components/CategoriesNav/Page.tsx
@@ -15,7 +15,7 @@ interface CategoriesPageProps {
 export const CategoriesPage = ({categories}: CategoriesPageProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={'categoriesPage fcol-12'}>
+    <div className={'categoriesPage col-12'}>
       <h1>Categories</h1>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />

diff --git a/app/components/Error/index.tsx b/app/components/Error/index.tsx
@@ -88,7 +88,7 @@ const errorName = (error?: ErrorType) => {
 
 const Error = ({error}: {error?: ErrorType}) => {
   return (
-    <div className={styles.errorContainer + ' fcol-10'}>
+    <div className={styles.errorContainer + ' col-10'}>
       <h1 className="padding-bottom-24">{errorName(error)}</h1>
       {error?.status && <div>{errors[error.status as keyof typeof errors] || ''}</div>}
     </div>

diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
@@ -16,7 +16,7 @@ export const FooterBar: FunctionComponent = () => {
     <div className="footer" key="footer">
       <hr />
       <div className="footer-contents">
-        <div className="fcol-5">
+        <div className="col-5">
           <p className="large-bold teal-500 padding-bottom-16">
             <a href="/">AISafety.info</a>
           </p>
@@ -26,14 +26,14 @@ export const FooterBar: FunctionComponent = () => {
           </div>
         </div>
 
-        <div className="fcol-3 small">
+        <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>
-        <div className="partners small fcol-4">
+        <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" />

diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx
@@ -27,14 +27,14 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="container-search-results bordered fcol-5 container-search-results-mobile">
+      <div className="container-search-results bordered col-5 container-search-results-mobile">
         <div className="search-result">No results found</div>
       </div>
     )
   }
 
   return (
-    <div className="container-search-results bordered fcol-5 container-search-results-mobile">
+    <div className="container-search-results bordered col-5 container-search-results-mobile">
       {results.map((result, i) => (
         <Link key={i} className="search-result" to={result.url}>
           <Paper />

diff --git a/app/components/Widget/Stampy.tsx b/app/components/Widget/Stampy.tsx
@@ -15,8 +15,8 @@ export const WidgetStampy = () => {
 
   const stampyUrl = (question: string) => `https://chat.aisafety.info/?question=${question.trim()}`
   return (
-    <div className="centered fcol-9 padding-bottom-128">
-      <div className="fcol-6 padding-bottom-56">
+    <div className="centered col-9 padding-bottom-128">
+      <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>

diff --git a/app/newRoot.css b/app/newRoot.css
@@ -73,7 +73,7 @@ input {
 }
 body {
   margin: auto;
-  max-width: 1600px;
+  max-width: 1608px; /* multiple of 12 for .col-x, 1 col at max width = 134px */
   min-height: 100vh;
 }
 
@@ -290,17 +290,42 @@ h2 {
 /* 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 */
 
-.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;}
+.col-1 {
+  width: clamp(65px, 8.25vw, 134px);
+}
+.col-2 {
+  width: clamp(130px, 16.5vw, 268px);
+}
+.col-3 {
+  width: clamp(195px, 24.75vw, 402px);
+}
+.col-4 {
+  width: clamp(260px, 33vw, 536px);
+}
+.col-5 {
+  width: clamp(325px, 41.25vw, 670px);
+}
+.col-6 {
+  width: clamp(390px, 49.5vw, 804px);
+}
+.col-7 {
+  width: clamp(455px, 57.75vw, 938px);
+}
+.col-8 {
+  width: clamp(520px, 66vw, 1072px);
+}
+.col-9 {
+  width: clamp(585px, 74.25vw, 1206px);
+}
+.col-10 {
+  width: clamp(650px, 82.5vw, 1340px);
+}
+.col-11 {
+  width: clamp(715px, 90.75vw, 1474px);
+}
+.col-12 {
+  width: clamp(780px, 99vw, 1608px);
+}
 
 .full-width {
   width: 100%;

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -29,11 +29,11 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => false
 
 export default function App() {
   const {advanced} = useToC()
-  
+
   useEffect(() => {
     document.title = 'AISafety.info'
   }, [])
-  
+
   return (
     <Page>
       <div className="page-body">

diff --git a/app/routes/categories.$.tsx b/app/routes/categories.$.tsx
@@ -56,7 +56,7 @@ export default function Tags() {
                       ? 'No pages found'
                       : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
                   </div>
-                  {selectedTag && <ListTable className="fcol-8" elements={selectedTag.questions} />}
+                  {selectedTag && <ListTable className="col-8" elements={selectedTag.questions} />}
                 </article>
               )}
             </>