2 files changed, 62 insertions, 6 deletions

diff --git a/src/page.rs b/src/page.rs
index 6774a1b..7449f46 100644
--- a/src/page.rs
+++ b/src/page.rs
@@ -19,7 +19,7 @@ pub trait Page: Sized {
 
     fn logo_svg(height_px: f32) -> Markup {
         html!(
-            svg xmlns="http://www.w3.org/2000/svg" width=(height_px * 0.707_070_7) height=(height_px) viewBox="0 0 210 297"        {
+            svg role="img" title="V2 Tales Logo" alt="V2 Tales Logo" xmlns="http://www.w3.org/2000/svg" width=(height_px * 0.707_070_7) height=(height_px) viewBox="0 0 210 297"        {
                 path d="m143.17 118.01 19.018 30.905-33.758-.951zM66.41 118.01 47.39 148.915l33.758-.951z" style="opacity:.5;fill:#000;fill-opacity:1;stroke:#000;stroke-width:5.76727" transform="matrix(1.081 0 0 1.081 -10.214 -40)"{}
                 path d="M193.13 62.963s.92 3.455 0 4.74c-3.708 5.173-13.105 2.168-18.081 6.136-24.12 19.233-36.92 50.23-48.505 78.822-10.285 25.384-17.792 80.217-17.792 80.217h-6.274s-9.022-55.018-19.557-80.566c-11.655-28.264-24.145-58.718-47.478-78.473-4.225-3.577-12.324-1.556-15.432-6.136-.887-1.308 0-4.74 0-4.74" aria-label="V" style="font-size:251.905px;font-family:"Liberation Serif";-inkscape-font-specification:"Liberation Serif";opacity:1;fill:none;fill-opacity:1;stroke:#000;stroke-width:4.62538498;stroke-dasharray:none" transform="matrix(1.081 0 0 1.081 -10.214 -40)"{}
                 path d="M35.723 73.988h135.413v75.733H35.723v86.553h135.413" style="opacity:1;fill:none;fill-opacity:1;stroke:#000;stroke-width:4.62538498;stroke-dasharray:none" transform="matrix(1.081 0 0 1.081 -10.214 -40)"{}
diff --git a/src/story.rs b/src/story.rs
index c5371ee..716b4ae 100644
--- a/src/story.rs
+++ b/src/story.rs
@@ -1,6 +1,6 @@
 use crate::page;
 use anyhow::Result;
-use maud::{html, Markup};
+use maud::{html, Markup, PreEscaped};
 use serde::Deserialize;
 use toml::value::Date;
 
@@ -11,8 +11,24 @@ impl page::Page for Vec<Story> {
 
     fn render_content(&self) -> Markup {
         html!(
-            @for story in self {
-                (story.render_as_card())
+            section class="stories" {
+                div class="stories-filter" {
+                    label for="all" {
+                        input type="radio" id="all" name="language" checked;
+                        "All"
+                    }
+                    label for="de" {
+                        input type="radio" id="de" name="language";
+                        "German"
+                    }
+                    label for="en" {
+                        input type="radio" id="en" name="language";
+                        "English"
+                    }
+                }
+                @for story in self {
+                    (story.render_as_card())
+                }
             }
         )
     }
@@ -31,7 +47,8 @@ impl page::Page for Vec<Story> {
 
     fn content_style() -> Markup {
         html!(
-        """
+            (PreEscaped(
+                r#"
 h2 {
     font-size: 1.8rem;
     margin-bottom: 2rem;
@@ -88,7 +105,46 @@ hr {
         width: fit-content;
     }
 }
-        """
+
+.stories:has(input:checked) .story-card {
+    display: none;
+}
+
+.stories:has(#all:checked) .story-card,
+.stories:has(#de:checked) .story-card[lang="de"],
+.stories:has(#en:checked) .story-card[lang="en"] {
+    display: block;
+}
+
+.stories-filter {
+  display: flex;
+  align-items: center;
+  border: .1rem dotted #000;
+  margin: 3rem;
+  width: fit-content;
+  border:.1rem dotted #000;
+  label {
+    margin: 0.8rem;
+    padding: .8rem;
+  }
+  input {
+    margin-right: 0.5rem;
+    appearance: none;
+  }
+
+  label:hover {
+    cursor: pointer;
+    color: #11396A;
+  }
+
+  label:has(input:checked) {
+    color: #FFD1A3;
+    background-color: #11396A;
+    #background-color: #2F3C57;
+  }
+}
+"#
+            ))
         )
     }
 }