mobile (#24)

kjy5 · web-flow · commit 8cd52cbf5915 · 2025-02-06T08:43:45.000Z
* Updated intro text

* Figuring out mobile sizing

* Can only apply to individual parts

* Mobile friendly

* Better spacing
diff --git a/public/ufh-2025.pdf b/public/ufh-2025.pdf
diff --git a/src/components/Graphics.astro b/src/components/Graphics.astro
@@ -11,7 +11,8 @@ const { imageMetadatas, alt } = Astro.props;
     imageMetadatas.then((metadatas) => (
         <!--suppress HtmlUnknownTag -->
     <graphics-element data-image-srcs={JSON.stringify(metadatas.map(({default: {src}}) => src))}>
-        <img class="max-h-dvh object-contain rounded-xl" src={metadatas[0].default.src} width={metadatas[0].default.width}
+        <img class="max-h-dvh object-contain rounded-xl" src={metadatas[0].default.src}
+             width={metadatas[0].default.width}
              height={metadatas[0].default.height} alt={alt}/>
     </graphics-element>
         ))
diff --git a/src/components/Spacer.astro b/src/components/Spacer.astro
@@ -2,4 +2,11 @@
 
 ---
 
-<div class="h-1/4dvh"/>
+<!-- Large screen spacer -->
+<div class="hidden lg:block h-1/4dvh"/>
+
+<!-- Small screen spacer. -->
+<div class="lg:hidden">
+    <br/>
+    <br/>
+</div>
diff --git a/src/components/TextCardPair.astro b/src/components/TextCardPair.astro
@@ -0,0 +1,18 @@
+---
+import Article from "./Article.astro";
+---
+<div class="hero">
+    <div class="hero-content flex-col lg:flex-row w-full pt-0 pb-0">
+        <!-- Content side. -->
+        <div class="basis-1/2 self-stretch flex items-center">
+            <Article>
+                <slot/>
+            </Article>
+        </div>
+
+        <!-- Graphics side. -->
+        <div class="basis-1/2 self-stretch">
+            <slot name="graphics"/>
+        </div>
+    </div>
+</div>
diff --git a/src/components/TextImagePair.astro b/src/components/TextImagePair.astro
@@ -2,12 +2,7 @@
 import Article from "./Article.astro";
 ---
 <div class="hero">
-    <div class="hero-content flex-col lg:flex-row-reverse w-full p-0">
-        <!-- Graphics side. -->
-        <div class="basis-1/2 self-stretch">
-            <slot name="graphics"/>
-        </div>
-
+    <div class="hero-content flex-col lg:flex-row w-full pt-0 pb-0">
         <!-- Content side. -->
         <div class="basis-1/2 self-stretch">
             <div class="sticky top-1/3">
@@ -16,5 +11,10 @@ import Article from "./Article.astro";
                 </Article>
             </div>
         </div>
+
+        <!-- Graphics side. -->
+        <div class="basis-1/2 self-stretch">
+            <slot name="graphics"/>
+        </div>
     </div>
 </div>
diff --git a/src/components/TextVideoPair.astro b/src/components/TextVideoPair.astro
@@ -1,16 +1,16 @@
 ---
 ---
 <div class="hero">
-    <div class="hero-content flex-col lg:flex-row-reverse w-full p-0">
+    <div class="hero-content flex-col lg:flex-row-reverse w-full pt-0 pb-0">
         <!-- Graphics side. -->
-        <div class="basis-1/2 self-stretch">
-            <div class="h-dvh sticky top-0 flex justify-center items-center">
+        <div class="hidden lg:block basis-1/2 self-stretch">
+            <div class="lg:h-dvh sticky top-0 flex justify-center items-center">
                 <slot name="graphics"/>
             </div>
         </div>
 
         <!-- Content side. -->
-        <div class="basis-1/2">
+        <div class="lg:basis-1/2">
             <slot/>
         </div>
     </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -9,7 +9,7 @@ const { imageSrcs } = Astro.props;
 <html lang="en" class="scroll-smooth">
 <head>
     <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
     <meta name="generator" content={Astro.generator}/>
     <title>Pinpoint</title>
diff --git a/src/pages/index.astro b/src/pages/index.astro
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
