Style press page

namesakefyi · Jun 19, 2024 · 0e28b94 · 0e28b94
1 parent a1a044d
commit 0e28b94
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 33 deletions.
diff --git 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
@@ -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
@@ -103,6 +103,6 @@ img {
 }
 
 :focus-visible {
-  outline: 2px solid var(--white);
+  outline: 2px solid var(--bg-purple);
   outline-offset: 2px;
 }