From 0e28b94c05c46871dfa41bf2958cc104ea9b2f7e Mon Sep 17 00:00:00 2001
From: Eva Decker <itsevadecker@gmail.com>
Date: Tue, 18 Jun 2024 23:58:07 -0400
Subject: [PATCH] Style press page

---
 src/pages/index.astro | 18 +------------
 src/pages/press.astro | 59 ++++++++++++++++++++++++++++++++-----------
 src/styles/base.css   |  2 +-
 3 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7701b00..dbc31e7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -100,7 +100,6 @@ const shuffledPartners = partners.sort(() => 0.5 - Math.random());
     const highlight = annotate(whoYouAre, {
       type: "highlight",
       iterations: 1,
-      animate: false,
     });
     highlight.show();
   }
@@ -121,8 +120,7 @@ const shuffledPartners = partners.sort(() => 0.5 - Math.random());
   const partners: HTMLElement | null = document.querySelector(".partners h2");
   if (partners) {
     const brackets = annotate(partners, {
-      type: "bracket",
-      brackets: ["left", "right"],
+      type: "underline",
       animate: false,
     });
     brackets.show();
@@ -265,10 +263,6 @@ const shuffledPartners = partners.sort(() => 0.5 - Math.random());
     &::placeholder {
       color: var(--text-placeholder);
     }
-
-    &:focus {
-      background-color: var(--white);
-    }
   }
 
   button {
@@ -279,15 +273,5 @@ const shuffledPartners = partners.sort(() => 0.5 - Math.random());
     gap: var(--space-2xs);
     align-items: center;
     padding-inline: var(--space-m);
-
-    @media (hover: hover) {
-      &:hover {
-        background: var(--white);
-      }
-    }
-
-    &:focus-visible {
-      background: var(--white);
-    }
   }
 </style>
diff --git a/src/pages/press.astro b/src/pages/press.astro
index cbbdde0..b0acdce 100644
--- a/src/pages/press.astro
+++ b/src/pages/press.astro
@@ -25,7 +25,7 @@ pressArticles.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
           </time>
           <strong class="outlet">{article.data.outlet}</strong>
           <a href={article.data.url} class="title" target="_blank">
-            <span>{article.data.title}</span>
+            <span class="title-text">{article.data.title}</span>
           </a>
           {article.data.image && (
             <Image
@@ -41,13 +41,43 @@ pressArticles.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
   </ul>
 </BaseLayout>
 
+<script>
+  import { annotate } from "rough-notation";
+
+  const header: HTMLElement | null = document.querySelector(".page-head h1");
+
+  if (header) {
+    const highlight = annotate(header, {
+      type: "circle",
+      iterations: 2,
+    });
+    highlight.show();
+  }
+
+  const titles: NodeListOf<HTMLElement> =
+    document.querySelectorAll(".title-text");
+
+  if (titles) {
+    titles.forEach((title) => {
+      const highlight = annotate(title, {
+        type: "highlight",
+        color: "var(--bg-purple)",
+        multiline: true,
+        iterations: 1,
+        animate: false,
+      });
+      highlight.show();
+    });
+  }
+</script>
+
 <style lang="scss">
   .page-head {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: var(--space-m);
     padding-block-end: var(--space-3xl);
+
+    h1 {
+      display: inline;
+    }
   }
 
   .articles {
@@ -64,18 +94,17 @@ pressArticles.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
     display: flex;
     flex-direction: column;
     gap: var(--space-2xs);
+  }
 
-    .title {
-      font-size: var(--step-3);
-      font-weight: 600;
-      max-width: 36ch;
+  .title {
+    font-size: var(--step-3);
+    font-weight: 600;
+    max-width: 36ch;
+  }
 
-      span {
-        background: var(--bg-purple);
-        border-radius: 2px;
-        box-shadow: 0.2em 0.2em 0 var(--bg-purple);
-      }
-    }
+  .title-text {
+    padding-inline-end: var(--space-s);
+    padding-block-end: var(--space-s);
   }
 
   .image {
diff --git a/src/styles/base.css b/src/styles/base.css
index 4b0132a..2113241 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -103,6 +103,6 @@ img {
 }
 
 :focus-visible {
-  outline: 2px solid var(--white);
+  outline: 2px solid var(--bg-purple);
   outline-offset: 2px;
 }