From 0806293f05f24cf3509b7cb3fc27e35c7fdc8f14 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Sat, 24 Aug 2024 21:53:05 +0200
Subject: [PATCH] Make modal ids unique with suffix

---
 web-app/src/app.css                       | 2 +-
 web-app/src/lib/components/Modal.svelte   | 6 ++++--
 web-app/template-styles/blog-styles.css   | 2 +-
 web-app/template-styles/common-styles.css | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web-app/src/app.css b/web-app/src/app.css
index d861979..17a2f8c 100644
--- a/web-app/src/app.css
+++ b/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;
 }
 
diff --git a/web-app/src/lib/components/Modal.svelte b/web-app/src/lib/components/Modal.svelte
index 04b1073..cb629c0 100644
--- a/web-app/src/lib/components/Modal.svelte
+++ b/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>
diff --git a/web-app/template-styles/blog-styles.css b/web-app/template-styles/blog-styles.css
index a367443..60c0ea1 100644
--- a/web-app/template-styles/blog-styles.css
+++ b/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;
diff --git a/web-app/template-styles/common-styles.css b/web-app/template-styles/common-styles.css
index 5021358..607e3d5 100644
--- a/web-app/template-styles/common-styles.css
+++ b/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;
 }