Make modal ids unique with suffix

web-app/src/app.css

@@ -68,7 +68,7 @@ label[for="toggle-mobile-preview"],
 
 :is(button, input, textarea, select):focus,
 #toggle-mobile-preview:checked + label {
-  outline: 0.125rem solid currentColor;
+  outline: 0.125rem solid var(--color-accent);
   outline-offset: 0.25rem;
 }
 

web-app/src/lib/components/Modal.svelte

@@ -2,11 +2,13 @@
   import type { Snippet } from "svelte";
 
   const { children, id, text }: { children: Snippet; id: string; text: string } = $props();
+
+  const modalId = `${id}-modal`
 </script>
 
-<a href={`#${id}`} role="button">{text}</a>
+<a href={`#${modalId}`} role="button">{text}</a>
 
-<div {id} class="modal">
+<div id={modalId} class="modal">
   <div class="modal__content">
     {@render children()}
     <a href="#!" role="button">Close</a>

web-app/template-styles/blog-styles.css

@@ -24,7 +24,7 @@ footer {
 }
 
 .articles li {
-  border: 1px solid hsl(0 0% 50%);
+  border: var(--border-primary);
   padding: var(--space-s);
   display: flex;
   flex-direction: column;

web-app/template-styles/common-styles.css

@@ -123,6 +123,7 @@ a {
 
 :is(h1, h2, h3, h4, h5, h6) > a:hover {
   text-decoration: underline;
+  text-decoration-color: var(--color-accent);
 }
 
 details[open] summary {
@@ -225,6 +226,6 @@ summary {
 }
 
 :is(a, summary):focus {
-  outline: 0.125rem solid currentColor;
+  outline: 0.125rem solid var(--color-accent);
   outline-offset: 0.25rem;
 }