Chore: Accessibility

src/components/Asset.tsx

@@ -13,6 +13,7 @@ import {
   Switch,
   createEffect,
   createSignal,
+  onCleanup,
 } from "solid-js";
 import { FontAwesomeIcon } from "./FontAwesomeIcon";
 
@@ -71,9 +72,33 @@ function AssetHandler() {
       setControlls(false);
     });
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!active() || "Escape" != event.key) return;
+      event.preventDefault();
+      setActive("");
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!active()) return;
+      event.preventDefault();
+      if (event.deltaY > 0 && !(zoomLevel() <= 0)) setZoomLevel((e) => e - 1);
+      else if (event.deltaY < 0 && !(zoomLevel() >= 4))
+        setZoomLevel((e) => e + 1);
+    };
+
+    createEffect(() => {
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("wheel", handleWheel, { passive: false });
+      onCleanup(() => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("wheel", handleWheel);
+      });
+    });
+
     return (
       <div
         ref={wrapperRef!}
+        onClick={(e) => e.target === wrapperRef && setActive("")}
         onMouseMove={handleMouseMove}
         classList={{ "fullscreen-asset": true, active: !!active() }}
       >
@@ -105,14 +130,14 @@ function AssetHandler() {
           </Show>
           <button
             onClick={() => setZoomLevel((e) => e + 1)}
-            disabled={zoomLevel() === 4}
+            disabled={zoomLevel() >= 4}
             title="Zoom +"
           >
             <FontAwesomeIcon icon={faMagnifyingGlassPlus} />
           </button>
           <button
             onClick={() => setZoomLevel((e) => e - 1)}
-            disabled={zoomLevel() === 0}
+            disabled={zoomLevel() <= 0}
             title="Zoom -"
           >
             <FontAwesomeIcon icon={faMagnifyingGlassMinus} />

src/components/de/Navbar.tsx

@@ -6,7 +6,7 @@ import {
   faGlobe,
   faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
 import { FontAwesomeIcon } from "../FontAwesomeIcon";
 
@@ -23,6 +23,19 @@ function Navbar() {
     setMenu(false);
   });
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!menu() || "Escape" != event.key) return;
+    event.preventDefault();
+    setMenu(false);
+  };
+
+  createEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+
   return (
     <>
       <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>

src/components/en/Navbar.tsx

@@ -6,7 +6,7 @@ import {
   faGlobe,
   faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
 import { FontAwesomeIcon } from "../FontAwesomeIcon";
 
@@ -23,6 +23,19 @@ function Navbar() {
     setMenu(false);
   });
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!menu() || "Escape" != event.key) return;
+    event.preventDefault();
+    setMenu(false);
+  };
+
+  createEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+
   return (
     <>
       <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>

src/styles/global.scss

@@ -48,10 +48,16 @@ body {
 
     button {
       padding: 0.5rem 0.6rem;
+      border-radius: 10%;
 
       svg {
         height: 2rem;
         width: 2rem;
+
+        @media (max-width: 1200px) {
+          height: 5vw;
+          width: 5vw;
+        }
       }
     }
   }
@@ -62,11 +68,24 @@ body {
   top: 2rem;
   left: 2rem;
   padding: 0.5rem 0.6rem;
+  border-radius: 10%;
 
   svg {
     height: 2rem;
     width: 2rem;
   }
+
+  @media (max-width: 1200px) {
+    position: fixed;
+    top: 5vw;
+    left: 5vw;
+    padding: 2vw;
+
+    svg {
+      height: 5vw;
+      width: 5vw;
+    }
+  }
 }
 
 article > div {
@@ -186,9 +205,7 @@ body.light-mode {
   }
 }
 
-@media (min-width: 960px) {
+article {
-  article {
+  max-width: 80vw;
-    max-width: 80vw;
+  margin: auto;
-    margin: auto;
-  }
 }

src/styles/overview.scss

@@ -178,26 +178,6 @@ body.overview {
   }
 
   @media (max-width: 767px) /*unter handy größe*/ {
-    header,
-    article,
-    img,
-    p,
-    h1,
-    h2,
-    h3 {
-      margin-left: 0%;
-      padding-left: 0;
-    }
-    // [class*="col-"] {
-    //   width: 100%;
-    // }
-    #navbar {
-      visibility: hidden;
-    }
-    // #sidenavbar {
-    //   visibility: visible;
-    // }
-    /*.raster {width: calc(100%/2);}*/
     .righties {
       width: 100%;
 
@@ -207,16 +187,6 @@ body.overview {
     }
   }
 
-  @media only screen and (min-width: 767px) /*über handy größe*/ {
-    #navbar {
-      visibility: visible;
-    }
-    // #sidenavbar {
-    //   visibility: hidden;
-    // }
-    /*.raster {width: calc(100%/5);}*/
-  }
-
   /*@media screen and (min-width:1200px) {.raster {width: calc(100%/6);}}
   
 @media screen and (min-width:1500px) {.raster {width: calc(100%/8);}}*/