fix(website): mobile regression and layout tweaks

apps/website/src/components/Footer.css

@@ -9,6 +9,12 @@ footer {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        flex-direction: column-reverse;
+        gap: 2em;
+
+        @media (min-width: 720px) {
+            flex-direction: row;
+        }
     }
 }
 

apps/website/src/components/Header.css

@@ -9,11 +9,12 @@ header {
     --gap: 1.25em;
     font-size: 0.8em;
 
-    .content-wrapper {
+    &>.content-wrapper {
         display: flex;
         align-items: center;
         justify-items: center;
         gap: var(--gap);
+        min-width: 80vw;
     }
 
     a.banner {
@@ -52,15 +53,9 @@ header {
     }
 }
 
-
-header > .content-wrapper,
-section.hero-section > .content-wrapper {
-    min-width: 80vw;
-}
-
 @media (max-width: 719px) {
     :root {
-        --header-height: 35px;
+        --header-height: 60px;
     }
 
     header {
@@ -69,6 +64,7 @@ section.hero-section > .content-wrapper {
         left: 0;
         right: 0;
         min-height: var(--header-height);
+        box-sizing: border-box;
         display: flex;
 
         .content-wrapper {

apps/website/src/components/Header.tsx

@@ -46,11 +46,14 @@ export function Header() {
 
                 <nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}>
                     {HEADER_LINKS.map(link => (
-                        <a
+                        <Link
                             href={link.url}
                             className={url === link.url ? "active" : ""}
-                            target={link.external && "_blank"}
-                        >{link.text}</a>
+                            openExternally={link.external}
+                            onClick={() => {
+                                setMobileMenuShown(false);
+                            }}
+                        >{link.text}</Link>
                     ))}
 
                     <SocialButtons className="mobile-only" withText />

apps/website/src/pages/Home/index.css

@@ -43,6 +43,7 @@ section.hero-section {
         align-items: center;
         justify-content: center;
         flex-direction: column;
+        min-width: 80vw;    
     }
 
     .title-section {
@@ -166,9 +167,12 @@ section.final-cta .buttons {
 }
 
 .list-with-screenshot {
-    display: flex;
     gap: 2em;
 
+    @media (min-width: 720px) {
+        display: flex;
+    }
+
     ul {
         list-style-type: none;
         margin: 0;
@@ -200,9 +204,12 @@ section.final-cta .buttons {
         flex-direction: column-reverse;
 
         ul {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
             gap: 1em;
+            display: grid;
+            
+            @media (min-width: 720px) {
+                grid-template-columns: 1fr 1fr 1fr;                
+            }
         }
 
         li {

apps/website/src/style.css

@@ -140,6 +140,7 @@ img {
 }
 
 @media (max-width: 719px) {
+    .grid-4-cols > *,
     .grid-3-cols > *,
     .grid-2-cols > * {
         margin-bottom: 1em;