Merge pull request #751 from StampyAI/myles

Smaller text & Internal Links in Section Overview open in same tab

app/components/Article/KeepGoing/index.tsx

@@ -18,7 +18,7 @@ type NextArticleProps = {
 const NextArticle = ({section, next, first}: NextArticleProps) =>
   next && (
     <>
-      <h2 className="padding-bottom-40">Keep reading!</h2>
+      <h2 className="padding-bottom-40">Keep Reading</h2>
       <div className="padding-bottom-24">
         {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} entry in "
         {section?.title}"
@@ -59,15 +59,15 @@ export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
       )}
 
       {next && hasRelated && !skipNext && (
-        <div className="padding-bottom-56">Or jump to a related question</div>
+        <div className="padding-bottom-24">Or jump to a related question</div>
       )}
       {hasRelated && !skipNext && (
-        <div className="padding-bottom-40">
+        <div>
           <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated(true))} />
         </div>
       )}
       {skipNext && (
-        <div className="padding-bottom-40">
+        <div>
           <ListTable
             sameTab
             elements={getArticle(pageid)?.children?.map(formatRelated(false)) || []}

app/components/Button/button.css

@@ -13,12 +13,6 @@
 
   background: var(--colors-white, #ffffff);
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
-
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
 }
 
 .button-secondary {
@@ -37,54 +31,29 @@
   background: var(--colors-teal-500, #1d9089);
   font-weight: 500;
   color: var(--colors-white, #ffffff);
-
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
 }
 
 .primary-alt {
   background: var(--colors-white, #ffffff);
   color: var(--colors-teal-500, #1d9089);
-
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
 }
 
 .secondary {
   color: var(--colors-cool-grey-600, #788492) !important;
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
-
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
 }
 
 .secondary-selected {
   background: var(--colors-white, #ffffff);
   color: var(--colors-teal-500, #1d9089);
   border: 1px solid var(--colors-teal-500, #1d9089);
-
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
 }
 
 .secondary-alt {
   color: var(--colors-teal-500, #1d9089);
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
-
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
 }
 
 /* large */
@@ -93,54 +62,29 @@
   background: var(--colors-teal-500, #1d9089);
   font-weight: 500;
   color: var(--colors-white, #ffffff);
-
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
 }
 
 .primary-alt-large {
   background: var(--colors-white, #ffffff);
   color: var(--colors-teal-500, #1d9089);
-
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
 }
 
 .secondary-large {
   color: var(--colors-cool-grey-600, #788492) !important;
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
-
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
 }
 
 .secondary-selected-large {
   background: var(--colors-white, #ffffff);
   color: var(--colors-teal-500, #1d9089);
   border: 1px solid var(--colors-teal-500, #1d9089);
-
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
 }
 
 .secondary-alt-large {
   color: var(--colors-teal-500, #1d9089);
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
-
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
 }
 
 /* state */

app/components/Button/index.tsx

@@ -26,6 +26,7 @@ const Button = ({
   const mobile = useIsMobile()
 
   const classes = [
+    'default',
     (secondary && 'button-secondary') || 'button',
     className,
     secondary && active && 'active',

app/components/Chatbot/index.tsx

@@ -106,13 +106,13 @@ export const WidgetStampy = ({className}: {className?: string}) => {
     <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>
+        <h2>Ask Stampy, our chatbot, any questions about AI safety</h2>
       </div>
 
       <div className="sample-messages-container padding-bottom-24">
         <IconStampySmall />
         <div className="sample-messages rounded">
-          <div className="padding-bottom-24">Try asking me...</div>
+          <div className="padding-bottom-24 small">Try asking me...</div>
           {questions.map(({title}, i) => (
             <div key={i} className="padding-bottom-16">
               <Button className="secondary-alt-large" action={stampyUrl(title)}>
@@ -166,7 +166,7 @@ const Followups = ({title, followups, onSelect, className}: FollowupsProps) => {
       {items?.map(({text, pageid}, i) => (
         <div key={i} className="padding-bottom-16">
           <Button
-            className="secondary-alt-large text-align-left followup-button"
+            className="secondary-alt-large text-align-left followup-button large"
             action={() => onSelect({text, pageid})}
           >
             {text}

app/components/Input/input.css

@@ -28,6 +28,7 @@
   font-size: 18px;
   letter-spacing: -0.18px;
   padding-right: var(--height-64);
+  padding-left: var(--spacing-16);
 }
 
 /* states */

app/components/Table/index.tsx

@@ -26,9 +26,8 @@ export const ListTable = ({elements, sameTab, className}: ListTableProps) => {
       {elements.map(({pageid, title, subtitle, hasIcon, className}, i) => (
         <Link
           key={`entry-${i}`}
-          className={styles.entry + ' teal-500 default-bold flex-container ' + (className || '')}
+          className={styles.entry + ' teal-500 flex-container large-bold ' + (className || '')}
           to={questionUrl({pageid, title})}
-          target={sameTab ? undefined : '_blank'}
           rel={sameTab ? undefined : 'noopener noreferrer'}
         >
           <div>

app/root.css

@@ -101,39 +101,39 @@ h2 {
 /* typography classes */
 
 .large {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 300;
-  line-height: 170%; /* 37.4px */
-  letter-spacing: -0.44px;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
 }
 
 .large-reading {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 300;
-  line-height: 190%; /* 41.8px */
-  letter-spacing: -0.44px;
+  line-height: 190%; /* 30.6px */
+  letter-spacing: -0.18px;
 }
 
 .large-bold {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 500;
-  line-height: 170%; /* 37.4px */
-  letter-spacing: -0.44px;
+  line-height: 170%; /* 30.6px */
+  letter-spacing: -0.18px;
 }
 
 .default {
-  /* only use if a parent has been assigned another typography class (otherwise this is defined in body) */
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 300;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
+  /* only use if a parent has been assigned another typography class (otherwise this is defined in body) */
 }
 
 .default-bold {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 500;
-  line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
+  line-height: 170%; /* 27.2px */
+  letter-spacing: -0.16px;
 }
 
 .small {