fix: layout and content fixes

ca057 · Dec 7, 2024 · f493b64 · f493b64
1 parent af8e061
commit f493b64
Showing 1 changed file with 5 additions and 9 deletions.
diff --git a/src/coffee/index.webc b/src/coffee/index.webc
@@ -41,11 +41,11 @@
       }
       html,
       body {
-        height: 100%;
+        min-height: 100%;
         font-family: var(--font-family-serif);
       }
       body {
-        padding: var(--spacing-1);
+        padding: 0 var(--spacing-1);
         background-color: #fffdf6;
         color: #040404;
       }
@@ -68,22 +68,18 @@
         font-family: Charter, Bitstream Charter, serif;
         margin-bottom: 0.5rem;
       }
-      p.info {
-        font-style: italic;
-      }
       p.footnote {
         font-size: 0.8rem;
         color: #04040455;
       }
 
-      main p.info {
+      p#explainer {
         margin: auto var(--spacing-1) clamp(var(--spacing-1), -0.875rem + 8.333vw, var(--spacing-2));
       }
       .coffees {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(min(max(50px, 25%), 300px), 1fr));
         grid-gap: var(--spacing-1);
-        margin: 1rem auto;
       }
       .coffees img {
         width: 100%;
@@ -108,8 +104,8 @@
       <h1><span class="numeric" @text="coffees.images.length"></span> coffees</h1>
     </header>
     <main>
-      <p class="info">
-        A picture of every coffee I drank between <span class="nowrap" @text="formatDate(coffees.images[0].day)"></span> and <span class="nowrap" @text="formatDate(coffees.images[coffees.images.length-1].day)"></span>.
+      <p id="explainer">
+        A picture of every coffee I drank between <span class="nowrap" @text="formatDate(coffees.images[coffees.images.length-1].day)"></span> and <span class="nowrap" @text="formatDate(coffees.images[0].day)"></span>.
       </p>
       <div class="coffees">
         <img