Merged css and js

src/main.jsx

@@ -103,7 +103,10 @@ 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)

src/styles/main.scss

@@ -49,6 +49,12 @@ $device-s-width: 600px;
 
 // Elements
 
+a,
+a:visited {
+    color: var(--text-500);
+    font-weight: 400;
+}
+
 code {
     font-size: 90%;
 }
@@ -175,6 +181,7 @@ button,
     select {
         border: none;
         background: none;
+        color: var(--text-500);
         appearance: none;
 
         font-family: inherit;
@@ -366,8 +373,7 @@ body {
 
         gap: 0.75rem;
 
-        @media screen and (max-width: $device-s-width) and (orientation: portrait),
+        @media screen and (max-width: $device-s-width), (pointer: coarse) {
-            screen and (max-height: $device-s-width) and (orientation: landscape) {
             display: none;
         }
     }
@@ -677,8 +683,7 @@ body {
 
                     border-top: 1px solid var(--border-500);
 
-                    @media screen and (max-width: $device-s-width) and (orientation: portrait),
+                    @media screen and (max-width: $device-s-width), (pointer: coarse) {
-                        screen and (max-height: $device-s-width) and (orientation: landscape) {
                         writing-mode: vertical-lr;
                     }
 
@@ -903,8 +908,7 @@ body {
 
 // not on mobile
 
-@media screen and (min-width: $device-s-width) and (orientation: portrait),
+@media screen and (min-width: $device-s-width) and (pointer: fine) {
-    screen and (min-height: $device-s-width) and (orientation: landscape) {
     .mobile {
         display: none;
     }
@@ -916,8 +920,7 @@ body {
 
 // on mobile
 
-@media screen and (max-width: $device-s-width) and (orientation: portrait),
+@media screen and (max-width: $device-s-width), (pointer: coarse) {
-    screen and (max-height: $device-s-width) and (orientation: landscape) {
     .toolbar {
         padding: 0.75rem 1rem 0.75rem 0.75rem;
     }