thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 02:41:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make modal ids unique with suffix

Browse Source
This commit is contained in:
thiloho
2024-08-24 21:53:05 +02:00
parent 079b6d8f8a
commit 0806293f05
4 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web-app/src/app.css
View File

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

6
web-app/src/lib/components/Modal.svelte
View File

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

2
web-app/template-styles/blog-styles.css
View File

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

3
web-app/template-styles/common-styles.css
View File

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