From c9ef52c7297cac28361c07ee85afd7db1fdf6187 Mon Sep 17 00:00:00 2001
From: n loewen <nick@nloewen.com>
Date: Thu, 21 Sep 2023 15:57:43 -0700
Subject: [PATCH] (CSS) Add styles that make the monogram-nav a little more
 usable on mobile (but still not as good as on a desktop)

---
 style.css | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index b02a2fc..4599a00 100644
--- a/style.css
+++ b/style.css
@@ -76,8 +76,8 @@ body {
 .triangle-label {
   position: absolute;
   color: black;
-  bottom: 0.5rem;
   left: 0.5rem;
+  bottom: 0.5rem;
 }
 
 .triangle-label.multiline {
@@ -118,4 +118,19 @@ h1 {
   background-color:hsl(50, 100%, 70%);
   border-left: 0.25ch solid hsl(50, 100%, 70%);
   border-right: 0.25ch solid hsl(50, 100%, 70%);
-}
\ No newline at end of file
+}
+
+
+/* Adjustments for touchscreen devices */
+
+@media (hover: none) {
+  .triangle-label {
+    color: white;
+    opacity: 0.75;
+  }
+
+  .triangle:hover .triangle-label {
+    color: black;
+    opacity: 1;
+  }
+}