Fix some mobile styles

data/people.yml

@@ -18,7 +18,7 @@ noah:
 
     Outside of work, you'll find Noah with his wife, dog, and two young children;
     or you'll find him working, but this time on a new GUI layout engine in Rust or
-    perhaps trying to get his video drivers to work correctly --- he runs Linux after
+    perhaps trying to get his video drivers to work correctly — he runs Linux after
     all.
   bio_short: |
     For over a decade, Noah has led Apsis' engineering team with technical expertise.
@@ -132,7 +132,7 @@ matt:
   bio_short: |
     A seasoned Senior Software Engineer and enthusiastic problem solver, Matt
     combines nearly 2 decades of dev experience with a pure mathematician's mind.
-    When not coding, you'll find him on the farm --- his true passion.
+    When not coding, you'll find him on the farm — his true passion.
 
 joey:
   name: Joey Harwood

src/components/Cta.tsx

@@ -18,7 +18,7 @@ export const Cta: React.FC<CtaProps> = ({ title, subtitle, button }) => {
       </header>
 
       <div className={styles.cta__actions}>
-        <Button size="lg">{button}</Button>
+        <Button href="mailto:[email protected]?subject=Apsis Project Inquiry" size="lg">{button}</Button>
       </div>
     </div>
   );

src/components/LogoType.tsx

@@ -15,7 +15,8 @@ export const LogoType: React.FC<
         width={size}
         height={size}
       />
-      Apsis Labs
+
+      <span className={styles.logotype__wordmark}>Apsis Labs</span>
     </h1>
   );
 };

src/styles/components/LogoType.module.scss

@@ -1,7 +1,7 @@
 @use "styles/vars";
 
 .logotype {
-  font-size: var(--font_size_h3);
+  font-size: var(--font_size);
   line-height: 1.75;
   color: inherit;
   text-transform: lowercase;
@@ -12,6 +12,14 @@
   flex-direction: row;
   align-items: center;
 
+  @media (min-width: vars.$mobile) {
+    font-size: var(--font_size_h3);
+  }
+
+  &__wordmark {
+    // display: none;
+  }
+
   &__planet {
     margin-right: var(--spacing_sm);
     flex-shrink: 0;

src/styles/components/Navbar.module.scss

@@ -57,9 +57,10 @@
     margin-left: auto;
     display: flex;
     flex-direction: row;
-    gap: var(--spacing);
+    gap: var(--spacing_xs);
 
     @media (min-width: vars.$mobile) {
+      gap: var(--spacing);
       margin-left: var(--spacing_lg);
     }
   }
@@ -71,7 +72,8 @@
     padding: var(--spacing_xs);
     line-height: 1;
 
-    transition: background-color var(--easing) var(--timing_sm),
+    transition:
+      background-color var(--easing) var(--timing_sm),
       opacity var(--easing) var(--timing_sm);
 
     @media screen and (prefers-reduced-motion: reduce) {
@@ -99,7 +101,7 @@
       margin-left: auto;
       display: flex;
       align-items: center;
-      gap: var(--spacing)
+      gap: var(--spacing);
     }
   }
 

src/styles/components/TeamMember.module.scss

@@ -2,8 +2,13 @@
 
 .bio {
   display: flex;
-  flex-direction: row;
-  gap: var(--spacing_lg);
+  flex-direction: column;
+  gap: var(--spacing);
+
+  @media (min-width: vars.$mobile) {
+    flex-direction: row;
+    gap: var(--spacing_lg);
+  }
 
   &--small {
     font-size: var(--font_size_sm);