diff --git a/src/app.css b/src/app.css
index 933ca51..adc9f11 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,9 +28,45 @@
font-family: var(--font-family-base);
}
+body {
+ margin: 0;
+ width: 100vw;
+ height: 100vh;
+}
+
a,
button.link {
color: var(--color-primary);
text-decoration: underline;
cursor: pointer;
}
+
+/**
+ * A11y-rules.
+ *
+ * (Note that the related CSS-classes are set by JS from `a11y-manager.js` therefore the CSS
+ * for it is defined globally in here)
+ **/
+*:has(> .--a11yRuleLinked)::after {
+ content: " ";
+ margin: 0 0.5em;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: var(--ally-rule-lineheight);
+ height: var(--ally-rule-lineheight);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+ background-color: hsl(0deg 0% 0% / 0.1);
+}
+*:has(> .--a11yRuleLinked.--a11yFailed)::after {
+ content: "👎";
+ background-color: var(--color-primary);
+}
+*:has(> .--a11yRuleLinked.--a11ySuccess)::after {
+ content: "👍";
+ background-color: hsl(120deg 100% 50%);
+}
diff --git a/src/lib/components/a11y-list-view.svelte b/src/lib/components/a11y-list-view.svelte
new file mode 100644
index 0000000..a658622
--- /dev/null
+++ b/src/lib/components/a11y-list-view.svelte
@@ -0,0 +1,103 @@
+
+
+{#each Object.keys(ruleset.groups) as group }
+ {#if Object.keys(ruleset.groups[group]).length > 0}
+ {@const uuid = crypto.randomUUID()}
+
+
+
+
+
+ {#each Object.keys(ruleset.groups[group]) as rule}
+