Tweak guestbook feed size (#683)

Author: evadecker

src/components/Carousel.astro

@@ -1,22 +1,30 @@
 ---
+interface Props {
+  spacing?: "tight" | "normal";
+}
 
+const { spacing = "normal" } = Astro.props;
 ---
 
-<ul class="carousel">
+<ul class:list={["carousel", { tight: spacing === "tight" }]}>
   <slot />
 </ul>
 
 <style>
   .carousel {
     list-style: none;
     display: flex;
-    gap: var(--space-xs);
+    gap: var(--space-l);
     padding-inline: var(--space-xl);
     padding-block: var(--space-2xs) var(--space-l);
     margin: 0;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scroll-padding: var(--space-xl);
     scrollbar-width: thin;
+
+    &.tight {
+      gap: var(--space-xs);
+    }
   }
 </style>

src/components/CarouselButton.astro

@@ -19,7 +19,7 @@ const { url } = Astro.props;
     align-items: center;
     gap: var(--space-xs);
     height: auto;
-    margin-inline-start: var(--space-l);
+    margin-inline: var(--space-l);
     padding: var(--space-s) var(--space-m) var(--space-s) var(--space-l);
     border-radius: var(--radius-full);
     font-weight: var(--font-weight-bold);

src/components/Home/PhotoFeed.astro

@@ -12,7 +12,7 @@ const limitedEntries = entries.slice(0, LIMIT);
 const photos = limitedEntries.map((entry) => entry.data);
 ---
 
-<Carousel>
+<Carousel spacing="tight">
   {
     photos.map((photo) => (
       <CarouselItem>

src/components/Notecard/Notecard.astro

@@ -51,7 +51,7 @@ const backgroundImage = `url(${NOTECARD_THEMES[theme].src})`;
   .notecard {
     aspect-ratio: 4 / 3;
     font-family: var(--font-mono);
-    padding: 5.5ch 6ch;
+    padding: 5.5ch;
     color: #111;
     display: flex;
     flex-direction: column;
@@ -61,6 +61,10 @@ const backgroundImage = `url(${NOTECARD_THEMES[theme].src})`;
     background-repeat: no-repeat;
     background-position: center;
     transform: translateX(var(--translateX)) rotate(var(--rotation));
+
+    &.small {
+      font-size: 0.8em;
+    }
   }
 
   .content {
@@ -81,11 +85,7 @@ const backgroundImage = `url(${NOTECARD_THEMES[theme].src})`;
   }
 
   .date {
-    font-size: var(--step--1);
-  }
-
-  .notecard.small {
-    font-size: var(--step--1);
+    font-size: 0.85em;
   }
 </style>
 

src/pages/index.astro

@@ -61,7 +61,7 @@ const feed = work
     <Center>
       <h2>Latest <a href="https://glass.photo/evadecker">photos</a></h2>
     </Center>
-    <PhotoFeed />
+    <PhotoFeed server:defer />
   </section>
   <section>
     <Center>