Various fixes

website/src/components/ExpandableGrid/ExpandableGrid.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { flushSync } from "react-dom";
 import styles from "./styles.module.css";
 
 const ExpandableGrid = ({ items, defaultVisibleCount, renderItem }) => {
@@ -21,7 +22,17 @@ const ExpandableGrid = ({ items, defaultVisibleCount, renderItem }) => {
       {items.length > defaultVisibleCount && (
         <div className={styles.buttonContainer}>
           <button
-            onClick={() => setIsExpanded(!isExpanded)}
+            onClick={(event) => {
+              if (isExpanded) {
+                flushSync(() => setIsExpanded(false));
+                event.currentTarget.scrollIntoView({
+                  behavior: "smooth",
+                  block: "center",
+                });
+              } else {
+                setIsExpanded(true);
+              }
+            }}
             className={styles.toggleButton}
           >
             {isExpanded ? "See Less ∧" : "See All ∨"}

website/src/components/Grid/Grid.tsx

@@ -60,15 +60,15 @@ export const Grid = ({
       <div className={grid({ columns, className })}>
         {children}
         {Array.from({ length: missingSlots }, (_, i) => (
-          <GridItem key={i} />
+          <GridItem key={i} filler />
         ))}
       </div>
     </div>
   );
 };
 
 const gridItemVariants = cva(
-  ["flex flex-col items-start p-10 gap-20 justify-between w-full bg-[#0E1416]"],
+  ["flex-col items-start p-10 gap-20 justify-between w-full bg-[#0E1416]"],
   {
     variants: {
       width: {
@@ -78,6 +78,10 @@ const gridItemVariants = cva(
       direction: {
         reverse: "md:flex-col-reverse",
       },
+      filler: {
+        true: "hidden md:flex",
+        false: "flex",
+      },
     },
     compoundVariants: [
       {
@@ -99,6 +103,9 @@ export const GridItem = ({
   children,
   width,
   direction,
+  filler = false,
 }: PropsWithChildren<VariantProps<typeof gridItem>>) => {
-  return <div className={gridItem({ width, direction })}>{children}</div>;
+  return (
+    <div className={gridItem({ width, direction, filler })}>{children}</div>
+  );
 };

website/src/components/Layout/AboveTheFold.tsx

@@ -19,8 +19,8 @@ export function AboveTheFold({
 }: Props) {
   const bodyParts = Array.isArray(body) ? body : [body];
   return (
-    <div className="flex flex-col min-h-screen">
-      <div className="flex flex-col justify-center items-center flex-1 gap-6 w-full max-w-5xl mx-auto px-4">
+    <div className="flex flex-col min-h-screen gap-6">
+      <div className="flex flex-col justify-center items-center flex-1 gap-6 w-full max-w-5xl mx-auto md:px-4">
         {sectionLabel && <SectionLabel label={sectionLabel} />}
         <div className="max-w-4xl mx-auto">
           <Heading level={1}>{title}</Heading>

website/src/components/Typography/Heading.tsx

@@ -1,13 +1,13 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import type { PropsWithChildren } from "react";
 
-const styles = cva("", {
+const styles = cva("hyphens-auto break-word", {
   variants: {
     level: {
-      1: "text-balance font-light text-[64px] leading-[100%] tracking-[-3%] text-center",
-      2: "text-wrap font-light text-[52px] leading-[120%] tracking-[-1%] text-center text-white",
-      3: "text-wrap font-regular text-[40px] leading-[120%] tracking-[-1%]",
-      4: "text-wrap font-regular text-[32px] leading-[120%] tracking-[0%]",
+      1: "text-balance font-light text-[40px] xxs:text-[52px] xs:text-[64px] leading-[100%] tracking-[-3%] text-center",
+      2: "text-wrap font-light text-[32px] xxs:text-[40px] xs:text-[52px] leading-[120%] tracking-[-1%] text-center text-white",
+      3: "text-wrap font-regular text-[24px] xxs:text-[32px] xs:text-[40px] leading-[120%] tracking-[-1%]",
+      4: "text-wrap font-regular text-[24px] xxs:text-[32px] leading-[120%] tracking-[0%]",
       5: "text-wrap font-medium text-[24px] leading-[120%] tracking-[0%]",
     },
   },
@@ -23,7 +23,12 @@ export const Heading = ({
   "aria-level": ariaLevel = level, // use stylistic level by default, but allow aria-level override
 }: Props) => {
   return (
-    <div role="heading" aria-level={ariaLevel} className={styles({ level })}>
+    <div
+      role="heading"
+      aria-level={ariaLevel}
+      className={styles({ level })}
+      lang="en"
+    >
       {children}
     </div>
   );

website/src/css/custom.css

@@ -26,6 +26,13 @@
   --color-brand-teal: #44edbc;
 
   --font-weight-regular: 400;
+
+  --breakpoint-xxs: 4rem;
+  --breakpoint-xs: 32rem;
+}
+
+@utility break-word {
+  word-break: break-word;
 }
 
 html {
@@ -66,6 +73,10 @@ a {
   color: rgba(255, 255, 255, 0.6) !important;
 }
 
+.markdown a {
+  color: var(--color-brand-teal) !important;
+}
+
 a:hover {
   text-decoration: none !important;
   color: white !important;

website/src/theme/BlogPostItems/index.js

@@ -19,23 +19,23 @@ export default function BlogPostItems({
 
     return (
       <div className="flex flex-col mb-10 max-w-7xl mx-auto gap-20">
-        <div className="flex flex-col-reverse md:flex-row gap-10">
+        <div className="flex flex-col-reverse items-center md:flex-row gap-10">
           <Link
             href={firstBlogPost.content.metadata.permalink}
-            className="flex flex-col justify-center items-start gap-4 w-1/2"
+            className="flex flex-col justify-center items-start gap-4 md:w-1/2"
           >
             <SectionLabel label="Featured" />
             <Heading level={2}>{firstBlogPost.content.metadata.title}</Heading>
             <Body size="l">{firstBlogPost.content.metadata.description}</Body>
           </Link>
           <Link
             href={firstBlogPost.content.metadata.permalink}
-            className="w-1/2"
+            className="md:w-1/2"
           >
             <img
               src={useBaseUrl(firstBlogPost.content.frontMatter.thumbnail)}
               alt={firstBlogPost.content.frontMatter.title}
-              className="w-full h-full object-cover rounded-md"
+              className="w-full aspect-video object-cover rounded-md"
             />
           </Link>
         </div>

website/src/theme/ReleaseLayout/index.js

@@ -14,7 +14,11 @@ export default function ReleaseLayout(props) {
             <div className="contents text-white **:[nav_ul]:!mb-6">
               <BlogSidebar sidebar={sidebar} />
             </div>
-            <main itemScope itemType="https://schema.org/Blog">
+            <main
+              itemScope
+              itemType="https://schema.org/Blog"
+              className="hyphens-auto break-word"
+            >
               {children}
             </main>
             {toc && <div className="col col--2">{toc}</div>}