From 99a1c02c80ee2d1154c163644a4e341aba4db192 Mon Sep 17 00:00:00 2001
From: JP Appel <jeanpierre.appel01@gmail.com>
Date: Wed, 25 Oct 2023 23:52:32 -0700
Subject: made css more dynamic for mobile

---
 site/style.css | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

(limited to 'site/style.css')

diff --git a/site/style.css b/site/style.css
index 508ad61..cb82f1e 100644
--- a/site/style.css
+++ b/site/style.css
@@ -14,22 +14,34 @@ body {
     flex-direction: column;
 }
 
+main {
+    width: 80vw;
+}
+
 #game {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 1vh;
 }
 
 .vertex {
     padding: 1em;
-    background-color: var(--hi-color);
+    /* padding: 1em; */
+    background-color: green;
     border-radius: 50%;
+    width: 1%;
 }
 
 .vertex.off {
     background-color: yellow;
 }
 
-.vertex:hover {
+.vertex.untoggleable:not(.off) {
+    background-color: orange;
+}
+
+.vertex:hover:not(.off):not(.untoggleable){
     filter: brightness(150%);
 }
 
@@ -44,6 +56,11 @@ section#optionsScreen {
     justify-content: space-between;
 }
 
+section#gameScreen {
+    display: flex;
+    flex-direction: column;
+}
+
 section.screen {
     animation: fadein 1s linear;
 }
@@ -55,6 +72,24 @@ button {
     border: none;
 }
 
+
+#key {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: start;
+    flex-wrap: wrap;
+}
+
+.keyitem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 1em;
+    max-width: 33%;
+    text-align: center;
+}
+
 button:hover {
     filter: brightness(120%);
 }
-- 
cgit v1.2.3