Styling for the articles nav

app/components/Article/Contents.tsx

@@ -94,7 +94,6 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
      */
     const glossaryEntry = (e: Element) => {
       const entry = e.textContent && glossary[e?.textContent.toLowerCase().trim()]
-      console.log(e.textContent, entry)
       if (
         // If the contents of this item aren't simply a glossary item word, then
         // something has gone wrong and the glossary-entry should be removed

app/components/Article/article.css

@@ -91,7 +91,7 @@ article .defintion {
   display: -webkit-box;
   /* These are webkit specific things, so might not work in all browsers (firefox handles them fine) */
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5; /* Number of lines you want to display */
+  -webkit-line-clamp: 4; /* Number of lines you want to display */
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -129,10 +129,10 @@ article .footer-comtainer > * {
   margin: var(--spacing-8, 8px);
 }
 
-h1.teal {
-  color: var(--colors-teal-500);
-}
 @media only screen and (max-width: 640px) {
+  article {
+    max-width: 100%;
+  }
   article .footer-comtainer {
     flex-direction: row;
     flex-wrap: wrap;

app/components/Article/index.tsx

@@ -97,13 +97,14 @@ const Tags = ({tags}: Question) => (
 type ArticleProps = {
   question: Question
   glossary?: Glossary
+  className?: string
 }
-export const Article = ({question, glossary}: ArticleProps) => {
+export const Article = ({question, glossary, className}: ArticleProps) => {
   const {title, text, pageid} = question
 
   return (
-    <article>
-      <h1 className="teal padding-bottom-24">{title}</h1>
+    <article className={className}>
+      <h1 className="teal-500 padding-bottom-24">{title}</h1>
       <ArticleMeta question={question} className="padding-bottom-56" />
 
       <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />

app/components/ArticlesNav/Menu.tsx

@@ -1,4 +1,5 @@
 import {Link} from '@remix-run/react'
+import ChevronRight from '~/components/icons-generated/ChevronRight'
 import {questionUrl} from '~/routesMapper'
 import type {TOCItem} from '~/routes/questions.toc'
 import './menu.css'
@@ -8,13 +9,14 @@ type Article = {
   path?: string[]
   current?: string
   hideChildren?: boolean
+  className?: string
 }
 
 const DropdownIcon = ({article, path}: Article) => {
   if (!article?.children || article.children.length === 0 || article.pageid === (path && path[0]))
     return null
-  if (!path?.includes(article.pageid)) return <div className="dropdown-icon" />
-  return <div className="dropdown-icon active" />
+  if (!path?.includes(article.pageid)) return <ChevronRight className="dropdown-icon" />
+  return <ChevronRight className="dropdown-icon active" />
 }
 
 const Title = ({article, path, current}: Article) => {
@@ -50,21 +52,26 @@ const ArticleLevel = ({article, path, current, hideChildren}: Article) => {
     >
       <Title article={article} path={path} current={current} />
       {!hideChildren && (
-        <div className={'articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}>
-          {article.children?.map((child) => (
-            <ArticleLevel key={child.pageid} article={child} path={path} current={current} />
-          ))}
-        </div>
+        <>
+          <div
+            className={'grey articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}
+          >
+            {article.children?.map((child) => (
+              <ArticleLevel key={child.pageid} article={child} path={path} current={current} />
+            ))}
+          </div>
+          <hr className="mobile-only" />
+        </>
       )}
     </details>
   )
 }
 
-export const ArticlesNav = ({article, path}: Article) => {
+export const ArticlesNav = ({article, path, className}: Article) => {
   const current = path ? path[path.length - 1] : ''
 
   return (
-    <div className="articles-group col-4-5 bordered small">
+    <div className={`articles-group col-4-5 small ${className || ''}`}>
       <ArticleLevel article={article} path={path} current={current} hideChildren />
       <hr />
 

app/components/ArticlesNav/menu.css

@@ -15,16 +15,14 @@
   padding: var(--spacing-8);
   cursor: pointer;
 }
+.article-selector .dropdown-icon,
 .articles-group .dropdown-icon {
-  background-image: url(/assets/chevron-right.svg);
-  background-repeat: no-repeat;
   height: var(--spacing-12);
   margin-left: var(--spacing-8);
-  padding-left: var(--spacing-16);
 }
+.article-selector .dropdown-icon.active,
 .articles-group .article[open] .dropdown-icon {
   transform: rotate(90deg);
-  margin-top: var(--spacing-4);
 }
 
 .articles-group .article {
@@ -51,3 +49,16 @@
   top: 25px;
   left: -5px;
 }
+
+@media (max-width: 640px) {
+  .articles-group {
+    width: 100%;
+  }
+  .article-selector {
+    margin-bottom: var(--spacing-40);
+    justify-content: space-between;
+  }
+  .articles-title {
+    padding: var(--spacing-8) var(--spacing-16);
+  }
+}

app/components/Button/button.css

@@ -1,14 +1,17 @@
 .button {
   cursor: pointer;
   display: inline-flex;
-  height: var(--spacing-56, 56px);
+  min-height: var(--spacing-56, 56px);
   padding: var(--spacing-8) var(--spacing-24);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, 4px);
   box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(32, 44, 89, 0.05);
   border-radius: var(--border-radius);
   box-sizing: border-box;
+
+  background: var(--colors-white, #ffffff);
+  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
 }
 
 .primary {

app/components/Button/index.tsx

@@ -7,15 +7,13 @@ type ButtonProps = {
   children?: ReactNode
   className?: string
   tooltip?: string
-  icon?: ReactNode
 }
-const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
+const Button = ({children, action, tooltip, className}: ButtonProps) => {
   const classes = ['button', className, tooltip && 'tooltip'].filter((i) => i).join(' ')
   if (typeof action === 'string') {
     return (
       <Link to={action} className={classes} data-tooltip={tooltip}>
         {children}
-        {icon && icon}
       </Link>
     )
   }

app/components/ContentBox/box.css

@@ -1,7 +1,7 @@
 .main-container-box-table {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-80);
+  margin-bottom: var(--spacing-40);
 }
 
 .content-box-table-button {
@@ -58,14 +58,14 @@
   padding-right: var(--spacing-8);
 }
 
-@media (max-width: 600px) {
+@media (max-width: 640px) {
   .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 */
+  .content-box-table {
+    padding: var(--spacing-80);
+    padding-top: 0;
   }
 }

app/components/Error/index.tsx

@@ -89,7 +89,7 @@ const errorName = (error?: ErrorType) => {
 const Error = ({error}: {error?: ErrorType}) => {
   return (
     <div className={styles.errorContainer + ' col-10'}>
-      <h1>{errorName(error)}</h1>
+      <h1 className="padding-bottom-24">{errorName(error)}</h1>
       {error?.status && <div>{errors[error.status as keyof typeof errors] || ''}</div>}
     </div>
   )

app/components/Footer/footer.css

@@ -11,10 +11,10 @@
   margin: var(--spacing-104) 13.33vw var(--spacing-80) 13.33vw;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 640px) {
   .footer-contents {
     flex-direction: column;
-    gap: var(--spacing-80);
+    gap: 32px;
     margin-bottom: 0;
   }
 }

app/components/Grid/grid.css

@@ -1,14 +1,13 @@
 .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);
+  padding: var(--spacing-40);
   width: 21.46vw;
   height: 21.46vw;
   min-width: var(--spacing-288);
@@ -24,6 +23,17 @@
   outline: 1px solid var(--colors-teal-200);
 }
 
-.grid-item div {
+.grid-item > * {
   padding: var(--spacing-8);
 }
+
+.grid-item > img {
+  margin-bottom: var(--spacing-24);
+}
+
+@media (max-width: 640px) {
+  .grid-item {
+    width: 100%;
+    height: 300px;
+  }
+}

app/components/Grid/index.tsx

@@ -4,7 +4,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="72" src={icon} />}
+    {icon && <img alt={title} width="72" height="80" src={icon} />}
     <h3>{title}</h3>
     <div className="grid-description grey">{subtitle}</div>
   </a>

app/components/Page.tsx

@@ -6,17 +6,17 @@ import Nav from '~/components/Nav'
 import {useTags} from '~/hooks/useCachedObjects'
 import useToC from '~/hooks/useToC'
 
-const Page = ({children}: {children: ReactNode}) => {
+const Page = ({children, modal}: {children: ReactNode; modal?: boolean}) => {
   const {toc} = useToC()
   const {items: tags} = useTags()
   const {embed} = useOutletContext<Context>() || {}
 
   return (
     <>
-      <Nav toc={toc} categories={tags} />
+      {!modal && <Nav toc={toc} categories={tags} />}
       {children}
 
-      {!embed && <Footer />}
+      {!embed && !modal && <Footer />}
     </>
   )
 }

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="centered col-9">
+    <div className="centered col-9 padding-bottom-128">
       <div className="col-6 padding-bottom-56">
         <h2 className="teal-500">Questions?</h2>
         <h2>Ask Stampy any question about AI Safety</h2>

app/components/Widget/stampy.css

@@ -7,15 +7,21 @@
 .sample-messages {
   width: 100%;
   padding: var(--spacing-32);
-  background: var(--colors-cool-grey-200);
+  background: var(--colors-cool-grey-100);
 }
 
 .widget-ask input {
   display: inline-flex;
-  height: var(--spacing-56, 56px);
+  height: 56px;
   padding: var(--spacing-8) var(--spacing-24);
 }
 .widget-ask svg {
   position: absolute;
   transform: translate(-52px, 4px);
 }
+
+@media (max-width: 640px) {
+  .button {
+    width: 100%;
+  }
+}

app/components/icons-generated/ChevronRight.tsx

@@ -0,0 +1,7 @@
+import type {SVGProps} from 'react'
+const SvgChevronRight = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" {...props}>
+    <path d="M66.07 477.3a7.96 7.96 0 0 1-2.048-5.344 7.94 7.94 0 0 1 2.642-5.938L300.2 256 66.66 45.93c-3.283-2.906-3.58-8-.594-11.28 2.97-3.281 8.019-3.563 11.32-.594l240.1 216c3.345 3 3.345 8.875 0 11.88L77.38 477.9c-3.3 3-8.34 2.7-11.31-.6" />
+  </svg>
+)
+export default SvgChevronRight

app/components/icons-generated/index.ts

@@ -6,6 +6,7 @@ export {default as Bot} from './Bot'
 export {default as BottomEclipse} from './BottomEclipse'
 export {default as BoxArrow} from './BoxArrow'
 export {default as Chatbot} from './Chatbot'
+export {default as ChevronRight} from './ChevronRight'
 export {default as Clipboard} from './Clipboard'
 export {default as Code} from './Code'
 export {default as Copy} from './Copy'