♻️ Refactored guestbook

Started using https://guestbooks.meadow.cafe/ instead

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>

src/pages/guestbook.astro

@@ -5,29 +5,7 @@ const visitors = guestbook["visitors"];
 ---
 
 <SectionContainer>
-  <main class="flex flex-col flex-1 gap-4 mt-4">
-    <h1 class="text-3xl font-extrabold">[ Guestbook ]</h1>
-    <blockquote><p><em>Last update: {guestbook.meta.lastModified}</em></p></blockquote>
-    <div class="flex flex-col gap-2">
-      <p class="blog">Welcome to the <i>digital pizzeria</i>! Leave your mark by doodling a pizza slice, snapping a pic, and sharing it with me at <code>pizza [at] kjelsrud [dot] dev</code> with your name & social media / website. And remember, creativity knows no bounds! Just like in my sketch, where I went with a Bitcoin pizza slice!🪙</p>
-      <p class="blog italic text-xs"><strong>PS:</strong> This page was inspired by <a href="https://azlen.me/doorstep">azlen.me</a>!</p>
-   </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      {visitors.map((visitor) => (
-        <div class="flex flex-col items-center">
-          <figure class="relative">
-            <img src={visitor.image} class="object-cover h-full md:h-[300px] w-full rounded-sm"/>
-            <figcaption class="absolute bottom-2 left-2 bg-black text-white px-2 py-1 rounded-xl text-xs">
-              <div class="guestbook">
-                {visitor.name} ✿ 
-                <a href={visitor.sociallink} target="_blank" class="px-2 bg-gray-500 rounded-lg italic">
-                 {visitor.social}~
-                </a>
-              </div>
-            </figcaption>
-          </figure>
-        </div>
-      ))}
-    </div>
+  <main class="flex flex-col flex-1">
+    <iframe src="https://guestbooks.meadow.cafe/guestbook/593" width="100%" height="1500" frameborder="0"></iframe>
 	</main>
 </SectionContainer>

src/styles/global.css

@@ -44,6 +44,12 @@ hr {
 	padding: 10px 0 0 0;
 }
 
+iframe {
+  display: block;
+  margin: 1.05rem 0;
+  max-width: 100%;
+  border-radius: 1.05rem;
+}
 .index a { color: var(--dark-link);}
 
 .index a:hover { text-decoration: underline 2px;}