From c1c8627475a62343c89723edd49dbf3f6555908a Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sun, 12 Nov 2023 14:18:58 -0700
Subject: [PATCH] Fix how site looks in smaller windows

---
 index.html | 17 ++++++++++-------
 style.css  | 39 +++++++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 320a27d..2c5ebfb 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,7 @@
             <h3 class="tool-labels">Grid Tools</h3>
             <div class="grid-tools">
                 <div class="slider">
-                    <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
+                    <label class="tool-sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
                     <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
                     <div class="knob-container">
                         <div class="knob" id="range-knob">
@@ -50,13 +50,16 @@
                     </div>
                 </div>
 
-                <div class="background-col-picker">
-                    <label class="color-label" for="back-col-picker">Canvas color:</label>
-                    <input class="color-input" type="color" id="back-col-picker" value="#ff0000">
+                <div class="knobless-grid-tools">
+                    <div class="background-col-picker">
+                        <label class="tool-sub-labels" for="back-col-picker">Canvas color:</label>
+                        <input class="color-input" type="color" id="back-col-picker" value="#ff0000">
+                    </div>
+                    <div class="grid-buttons">
+                        <button id="gridToggle">Grid</button>
+                        <button id="reset">Reset</button>
+                    </div>
                 </div>
-
-                <button id="gridToggle">Grid</button>
-                <button id="reset">Reset</button>
             </div>
         </div>
     </main>
diff --git a/style.css b/style.css
index d2a2d70..a0b8eea 100644
--- a/style.css
+++ b/style.css
@@ -29,14 +29,14 @@ main {
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-wrap: wrap;
     flex: 1;
 }
 
+h3 {
+    
+}
+
 footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
     width: 100%;
     background-color: #111;
     opacity: .8;
@@ -67,7 +67,7 @@ button, .container, .color-input {
     padding: 0 10px;
 }
 
-.color-label {
+.tool-sub-labels {
     padding-bottom: 5px;
     font-size: 18px;
 }
@@ -75,7 +75,6 @@ button, .container, .color-input {
 .color-input {
     width: 120%;
     height: 25px;
-
 }
 
 button {
@@ -163,7 +162,21 @@ button {
     box-shadow: 1px 1px 1px #555;
 }
 
+.knobless-grid-tools {
+    display: flex;
+    flex-direction: column;
+}
+
+.grid-buttons {
+    display: flex;
+    flex-direction: column;
+}
+
 @media screen and (max-width: 900px) {
+    main {
+        flex-direction: column;
+    }
+    
     .pen-color, .pen-tools, .grid-tools {
       flex-direction: row; /* Switch to a row layout when wrapping occurs */
       align-items: flex-end;
@@ -171,15 +184,9 @@ button {
       flex-wrap: wrap;
     }
 
-    .knob {
-        width: 50px;
-        height: 50px;
+    .tool-sub-labels {
+        display: flex;
+        flex-direction: column;
     }
+  }
 
-    .knob-shadow {
-        width: 50px;
-        height: 50px;
-        top: 8%;
-        left: 1%;
-    }
-  }
\ No newline at end of file