From 0e81edfa3b2b5b20081233a500b266daad784ca7 Mon Sep 17 00:00:00 2001
From: Francesco Minnocci <ad17fmin@uwcad.it>
Date: Sat, 10 Sep 2022 19:32:04 +0200
Subject: [PATCH 1/2] Fix mobile css and links in help

---
 src/styles/main.scss | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/styles/main.scss b/src/styles/main.scss
index f812cbf..40ba36e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -49,6 +49,11 @@ $device-s-width: 600px;
 
 // Elements
 
+a, a:visited {
+    color: var(--text-500);
+    font-weight: 400;
+}
+
 code {
     font-size: 90%;
 }
@@ -175,6 +180,7 @@ button,
     select {
         border: none;
         background: none;
+        color: var(--text-500);
         appearance: none;
 
         font-family: inherit;
@@ -366,8 +372,8 @@ body {
 
         gap: 0.75rem;
 
-        @media screen and (max-width: $device-s-width) and (orientation: portrait),
-            screen and (max-height: $device-s-width) and (orientation: landscape) {
+        @media screen and (max-width: $device-s-width),
+            (pointer: coarse) {
             display: none;
         }
     }
@@ -677,8 +683,8 @@ body {
 
                     border-top: 1px solid var(--border-500);
 
-                    @media screen and (max-width: $device-s-width) and (orientation: portrait),
-                        screen and (max-height: $device-s-width) and (orientation: landscape) {
+                    @media screen and (max-width: $device-s-width),
+                        (pointer: coarse) {
                         writing-mode: vertical-lr;
                     }
 
@@ -897,8 +903,8 @@ body {
 
 // not on mobile
 
-@media screen and (min-width: $device-s-width) and (orientation: portrait),
-    screen and (min-height: $device-s-width) and (orientation: landscape) {
+@media screen and (min-width: $device-s-width) and
+    (pointer: fine) {
     .mobile {
         display: none;
     }
@@ -910,8 +916,8 @@ body {
 
 // on mobile
 
-@media screen and (max-width: $device-s-width) and (orientation: portrait),
-    screen and (max-height: $device-s-width) and (orientation: landscape) {
+@media screen and (max-width: $device-s-width),
+    (pointer: coarse) {
     .toolbar {
         padding: 0.75rem 1rem 0.75rem 0.75rem;
     }

From 09ebad224b045ee3c34c3f0c33871a83c2747d6e Mon Sep 17 00:00:00 2001
From: Francesco Minnocci <ad17fmin@uwcad.it>
Date: Sat, 10 Sep 2022 19:42:49 +0200
Subject: [PATCH 2/2] Add prefers-dark-theme

---
 src/main.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main.jsx b/src/main.jsx
index 8c45a03..f0b8aff 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -103,11 +103,12 @@ const App = ({}) => {
         setEventi(eventi)
     }, [source])
 
-    const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "light")
+    const [theme, setTheme] = useState(localStorage.getItem("theme") ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"))
 
     document.body.classList.toggle("dark-mode", theme === "dark")
     localStorage.setItem("theme", theme)
 
+
     return (
         <>
             <Toolbar