From e7f3009a73789d530fc614bf1d8f48c10a37124a Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Wed, 1 Feb 2023 20:54:27 -0500
Subject: [PATCH] Improve the rendering of the landing page for a few different
 sizes.

---
 rendered/pages/index.svelte | 49 ++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/rendered/pages/index.svelte b/rendered/pages/index.svelte
index a89f951..eced4fe 100644
--- a/rendered/pages/index.svelte
+++ b/rendered/pages/index.svelte
@@ -17,6 +17,12 @@
 </script>
 
 <style>
+  main {
+    max-width: 100vw;
+    min-height: unset;
+    margin-bottom: unset;
+  }
+
   h1 {
     font-size: 3em;
   }
@@ -48,14 +54,6 @@
   }
 
 
-  @media only screen and (max-width: 550px) {
-    modal {
-      display: flex;
-      justify-content: center;
-      align-items: start;
-    }
-  }
-
   hero {
     --h: 600px;
     --w: 100vw;
@@ -104,10 +102,12 @@
   }
 
   text-photo > photo {
-    --w: min(400px, 50vw);
+    --w: 400px;
     display: flex;
     justify-content: stretch;
+    max-width: var(--w);
     min-width: var(--w);
+    width: var(--w);
     background-color: var(--value6);
   }
 
@@ -162,11 +162,41 @@
     feature-grid {
       grid-template-columns: 1fr;
     }
+
+    text-photo > photo {
+      display: none;
+    }
   }
 
+  @media only screen and (max-width: 550px) {
+    modal {
+      display: flex;
+      justify-content: center;
+      align-items: start;
+    }
+  }
+
+  @media only screen and (min-width: 1080px) {
+    text-photo {
+      justify-content: center;
+    }
+
+    text-photo > div {
+      max-width: var(--width-content);
+    }
+
+    feature-grid,
+    text-center {
+      max-width: calc(var(--width-content) + 400px); /* content width plus photo width */
+      align-self: center;
+      justify-self: center;
+      border: 1px solid red;
+    }
+  }
 </style>
 
 <Layout bare={ true } fullwidth={true}>
+  <main>
   <hero>
     <h1 class="center-text">The Bandolier</h1>
     <h2 class="center-text">An educational fullstack web development framework.</h2>
@@ -271,4 +301,5 @@ npm run DANGER_ADMIN
       <p>This app is a work in progress so warping it to your phone isn't done yet.  You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.</p>
     </span></callout>
   </modal>
+  </main>
 </Layout>