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] 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;
     }