(home) card styles

src/components/cards/Contact.astro

@@ -1,17 +1,25 @@
 ---
-const email = "maciej@kamoshi.org";
-const discord = "kamov#2485";
+import { Maybe } from 'purify-ts';
+interface Props {
+  email?: string;
+  discord?: string;
+}
 ---
-<section class="p-card p-card-contact">
-  <h2 class="p-card__header">Contact</h2>
-  <div class="p-card-contact__grid">
-    {email && (
-      <img class="p-card-contact__image" width="38" height="25" src="/static/svg/email.svg" alt="email">
-      <a class="p-card-contact__text" href={`mailto:${email}`}>{email}</a>
-    )}
-    {discord && (
-      <img class="p-card-contact__image" width="38" height="30" src="/static/svg/discord.svg" alt="discord">
-      <span class="p-card-contact__text">{discord}</span>
-    )}
+<section class="p-card home-card-contact">
+  <h2 class="p-card__heading">Contact</h2>
+  <div class="home-card-contact__grid">
+    {Maybe.fromNullable(Astro.props.email)
+      .map(email => [`mailto:${email}`, email] as const)
+      .map(([href, email]) => [
+        <img class="home-card-contact__icon" width="38" height="25" src="/static/svg/email.svg" alt="email">,
+        <a class="home-card-contact__text" href={href}>{email}</a>
+      ]).extract()
+    }
+    {Maybe.fromNullable(Astro.props.discord)
+      .map(discord => [
+        <img class="home-card-contact__icon" width="38" height="30" src="/static/svg/discord.svg" alt="discord">,
+        <span class="home-card-contact__text">{discord}</span>
+      ]).extract()
+    }
   </div>
 </section>

src/components/cards/Photo.astro

@@ -4,9 +4,9 @@ import Image from "astro/components/Image.astro";
 
 const alt = "A building covered by multicolor Ivy.";
 ---
-<section class="p-card p-card-image">
-  <h2 class="p-card__header">Image of the Month</h2>
-  <a href={image.src}>
-    <Image src={image} alt={alt} class="p-card-image__image" />
+<section class="p-card home-card-image">
+  <h2 class="p-card__heading">Image of the Month</h2>
+  <a href={image.src} class="home-card-image__link">
+    <Image src={image} alt={alt} class="home-card-image__image" />
   </a>
 </section>

src/layouts/Home.astro

@@ -16,7 +16,7 @@ import Base from "./Base.astro";
       <!--  -->
       <PhotoCard />
 			<!--  -->
-			<ContactCard />
+			<ContactCard email="maciej@kamoshi.org" discord="kamov#2485" />
 		</aside>
 	</main>
 </Base>

src/styles/layouts/_home.scss

@@ -33,6 +33,60 @@
   }
 }
 
+.p-card {
+  padding: 1em;
+  border-radius: 0.25em;
+  background-color: white;
+  box-shadow: var(--shadow-l);
+
+  &__heading {
+    line-height: 1em;
+    margin-bottom: 0.5em;
+    font-family: var(--serif);
+    font-weight: 500;
+  }
+}
+
+.home-card-image {
+  &__link {
+    display: block;
+  }
+  &__image {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.home-card-contact {
+  a {
+    color: var(--c-primary);
+    font-family: var(--serif);
+    font-weight: 500;
+    font-style: italic;
+    text-decoration: unset;
+    font-size: 1.1em;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  &__grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    row-gap: 0.5em;
+    column-gap: 0.5em;
+  }
+  &__image {
+    max-width: 2em;
+    height: auto;
+    margin: 0 0.5em 0 0;
+  }
+  &__text {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
 .intro-jp {
   max-height: 18em;
   min-width: fit-content;

src/styles/partials/_card.scss

@@ -1,44 +0,0 @@
-.p-card {
-  padding: 1em;
-  border-radius: 5px;
-  background-color: white;
-  box-shadow: var(--shadow-l);
-
-  &__header {
-    margin-top: 0;
-  }
-
-  &-latest {
-    &__pages {
-      display: grid;
-      grid-template-columns: 4em 1fr;
-      row-gap: 0.5em;
-    }
-  }
-
-  &-image {
-    &__image {
-      width: 100%;
-      height: auto;
-    }
-  }
-
-  &-contact {
-    &__grid {
-      display: grid;
-      grid-template-columns: 3em 1fr;
-      row-gap: 0.5em;
-    }
-
-    &__image {
-      max-width: 2em;
-      height: auto;
-      margin: 0 0.5em 0 0;
-    }
-
-    &__text {
-      display: inline-flex;
-      align-items: center;
-    }
-  }
-}

src/styles/styles.scss

@@ -20,7 +20,6 @@
 @use 'partials/nav';
 @use 'partials/footer';
 @use 'partials/github';
-@use 'partials/card';
 @use 'partials/header';
 @use 'partials/pagelist';
 @use 'partials/toc';