Merge branch 'stampy-redesign' into jrhender-420-advanced-content-h-tag

app/components/Article/article.css

@@ -66,8 +66,6 @@ article .glossary-entry {
 article .link-popup {
   visibility: hidden;
   opacity: 0;
-  width: 522px;
-  height: 304px;
   position: absolute;
   display: inline-block;
   font: var(--baseFont);
@@ -80,6 +78,10 @@ article .link-popup {
     visibility 0s 300ms,
     opacity cubic-bezier(1, 0, 1, 1) 300ms;
 }
+article .glossary-popup {
+  width: 522px;
+  height: 304px;
+}
 
 article .contents a.button {
   font-weight: normal;
@@ -88,13 +90,14 @@ article .link-popup .glossary-popup > .contents {
   padding: var(--spacing-24) var(--spacing-40) var(--spacing-24);
 }
 article .defintion {
-  height: 160px;
+  height: 140px;
   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: 4; /* Number of lines you want to display */
+  -webkit-line-clamp: 5; /* Number of lines you want to display */
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: var(--spacing-32);
 }
 article .link-popup .glossary-popup > img {
   width: 100%;
@@ -130,6 +133,16 @@ article .footer-comtainer > * {
   margin: var(--spacing-8, 8px);
 }
 
+article a.see-more:not(.visible) + div.see-more-contents {
+  display: none;
+}
+article a.see-more:after {
+  content: 'See more...';
+}
+article a.see-more.visible:after {
+  content: 'See less';
+}
+
 @media only screen and (max-width: 640px) {
   article {
     max-width: 100%;

app/components/ContentBox/box.css

@@ -42,20 +42,9 @@
   text-decoration: none;
 }
 
-.content-box-table.main svg {
-  margin: -10px 0;
-}
-
-.content-box-table.main img {
-  width: fit-content;
-  height: -webkit-fill-available;
-  height: -moz-available;
-  margin: -7px 0;
-}
 .content-box-table.main {
   overflow: hidden;
-  padding: 0;
-  padding-right: var(--spacing-8);
+  padding: 0 var(--spacing-8);
 }
 
 @media (max-width: 640px) {

app/components/ContentBox/index.tsx

@@ -2,7 +2,10 @@ import {ReactNode} from 'react'
 import {ArrowRight} from '~/components/icons-generated'
 import ListTable from '~/components/Table'
 import Button from '~/components/Button'
+import BookCircle from '~/components/icons-generated/BookCircle'
 import SvgGroup from '~/components/icons-generated/Group'
+import IntroMobile from '~/components/icons-generated/IntroMobile'
+import GetInvolvedMobile from '~/components/icons-generated/GetInvolvedMobile'
 import {questionUrl} from '~/routesMapper'
 import './box.css'
 
@@ -53,12 +56,8 @@ export const ContentBoxMain = () => (
       </>
     }
   >
-    <img
-      loading="lazy"
-      src="/assets/book-circle.svg"
-      className="content-box-right-icon"
-      alt="AI Safety Image"
-    />
+    <BookCircle className="desktop-only" />
+    <IntroMobile className="mobile-only" />
   </ContentBox>
 )
 
@@ -94,7 +93,8 @@ export const ContentBoxThird = () => {
       actionTitle="Get involved"
       classNameTable={'content-box-table main'}
     >
-      <SvgGroup />
+      <SvgGroup className="desktop-only" />
+      <GetInvolvedMobile className="mobile-only full-width" />
     </ContentBox>
   )
 }

app/components/Grid/index.tsx

@@ -13,17 +13,14 @@ export const GridBox = ({title, subtitle, icon, pageid}: TOCItem) => (
 interface GridProps {
   gridBoxes: TOCItem[]
 }
-export const Grid = ({gridBoxes}: GridProps) => {
-  console.log(gridBoxes)
-  return (
-    <div className="grid">
-      {gridBoxes
-        .filter(({category}) => category)
-        .slice(0, 6)
-        .map((gridBoxProps) => (
-          <GridBox key={gridBoxProps.title} {...gridBoxProps} />
-        ))}
-    </div>
-  )
-}
+export const Grid = ({gridBoxes}: GridProps) => (
+  <div className="grid">
+    {gridBoxes
+      .filter(({category}) => category)
+      .slice(0, 6)
+      .map((gridBoxProps) => (
+        <GridBox key={gridBoxProps.title} {...gridBoxProps} />
+      ))}
+  </div>
+)
 export default Grid