cleanup: misc (#22)

queen-raae · Nov 18, 2023 · c054a63 · c054a63
1 parent aad7fd9
commit c054a63
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 53 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,24 +1,39 @@
 ---
 interface Props {
   title: string;
-  body: string;
-  href: string;
+  body?: string;
+  href?: string;
 }
 
 const { href, title, body } = Astro.props;
 ---
 
 <li class="link-card">
-  <a href={href}>
-    <h2>
-      {title}
-      <span>&rarr;</span>
-    </h2>
-    <p>
-      {body}
-    </p>
-  </a>
+  {
+    href && (
+      <a href={href}>
+        <h2>
+          {title}
+          <span>&rarr;</span>
+        </h2>
+
+        {body && <p>{body}</p>}
+        <slot />
+      </a>
+    )
+  }
+  {
+    !href && (
+      <div>
+        <h2>{title}</h2>
+        {body && <p>{body}</p>}
+        {body && <p>{body}</p>}
+        <slot />
+      </div>
+    )
+  }
 </li>
+
 <style>
   .link-card {
     list-style: none;
@@ -32,7 +47,7 @@ const { href, title, body } = Astro.props;
     transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
-  .link-card > a {
+  .link-card > * {
     width: 100%;
     text-decoration: none;
     line-height: 1.4;
@@ -46,16 +61,16 @@ const { href, title, body } = Astro.props;
     margin: 0;
     font-size: 1.25rem;
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    margin-bottom: 0.5em;
   }
   p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
+    margin: 0;
   }
-  .link-card:is(:hover, :focus-within) {
+  .link-card:is(:hover, :focus-within):has(a) {
     background-position: 0;
     background-image: var(--accent-gradient);
   }
-  .link-card:is(:hover, :focus-within) h2 {
+  .link-card a:is(:hover, :focus-within):has(a) h2 {
     color: rgb(var(--accent-light));
   }
 </style>
diff --git a/src/components/SignUp.astro b/src/components/SignUp.astro
@@ -0,0 +1,39 @@
+<!-- Begin Outseta Email Signup Form -->
+<form action={import.meta.env.PUBLIC_OUTSETA_EMAIL_LIST_URL} method="post">
+  <label for="Email">Your best email</label>
+  <input id="Email" name="Email" type="email" required />
+
+  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+  <div style="position: absolute; left: -5000px;" aria-hidden="true">
+    <input
+      type="text"
+      name="o_RFZuyatxph7BYb4gc2dD0fjE_FC1uRAop"
+      tabindex="-1"
+      value=""
+    />
+  </div>
+
+  <input type="submit" value="Signup" data-wait="Please wait..." />
+</form>
+<!--End Outseta Email Signup Form -->
+
+<script src="https://cdn.outseta.com/emailsignup.min.js" defer></script>
+
+<style>
+  form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.2em 0.5em;
+  }
+
+  label {
+    width: 100%;
+    font-size: 0.5em;
+    opacity: 0.5;
+  }
+
+  input {
+    font-size: 0.8em;
+    padding: 0.3em;
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
+import SignUp from "../components/SignUp.astro";
 ---
 
 <Layout title="Welcome to Astro.">
@@ -37,54 +38,43 @@ import Card from "../components/Card.astro";
     <p class="instructions">
       Make a playlist of podcast episodes for your friend. (Coming later 🐊)
     </p>
+
     <ul role="list" class="link-card-grid">
+      <Card title="💌 Stay updated on the journey from idea to launch">
+        <SignUp />
+      </Card>
       <Card
         href="https://www.tldraw.com/v/3Fm1saCUgL4FnXHC7QUH_?viewport=0%2C0%2C1470%2C834&page=page%3Apage"
         title="🗺️ Our Treasure Map Charted in tldraw"
         body="An overview of topics we'll work on to build MixPod in public."
       />
-      <Card
-        href="https://www.youtube.com/live/ZWhzBS0PJQg?si=xaeDndHeQtRdkPo4"
-        title="🔴 🏴‍☠️ Charting Our Course: Drawing the #MixPod Treasure Map 🗺️"
-        body="You can check out our video on youtube"
-      />
     </ul>
-    <!-- Begin Outseta Email Signup Form -->
-    <form action={import.meta.env.PUBLIC_OUTSETA_EMAIL_LIST_URL} method="post">
-      <div class="form-group">
-        <label for="Email">Email</label>
-        <input id="Email" name="Email" type="email" required />
-      </div>
 
-      <div class="form-group">
-        <label for="FirstName">First Name</label>
-        <input id="FirstName" name="FirstName" type="text" />
-      </div>
+    <h2>Voyages</h2>
 
-      <div class="form-group">
-        <label for="LastName">Last Name</label>
-        <input id="LastName" name="LastName" type="text" />
-      </div>
+    <ul role="list" class="link-card-grid">
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/S_fwn8S7UHU?si=6-TsmdKTFyo57uG7"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe>
+
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/SQ8URCwbW5g?si=qnRLQdsqUaw_Fwoz"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe>
+    </ul>
 
-      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-      <div style="position: absolute; left: -5000px;" aria-hidden="true">
-        <input
-          type="text"
-          name="o_RFZuyatxph7BYb4gc2dD0fjE_FC1uRAop"
-          tabindex="-1"
-          value=""
-        />
-      </div>
+    <h2>Our Treasure Map</h2>
 
-      <div class="clear">
-        <input type="submit" value="Subscribe" data-wait="Please wait..." />
-      </div>
-    </form>
-    <script src="https://cdn.outseta.com/emailsignup.min.js" defer></script>
-    <!--End Outseta Email Signup Form -->
     <iframe
-      width="1333"
-      height="892"
       src="https://www.tldraw.com/v/3Fm1saCUgL4FnXHC7QUH_?viewport=1288,455,3676,1857&page=page%3Apage"
     ></iframe>
   </main>
@@ -151,7 +141,6 @@ import Card from "../components/Card.astro";
     padding: 0;
   }
   iframe {
-    margin-top: 2em;
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;