From 8021862bf0062c1d1a773b24fac6baea785ffa4c Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sun, 12 Nov 2023 13:09:20 -0700
Subject: [PATCH] Add more knob optimization

---
 index.html |  7 +++++--
 style.css  | 30 ++++++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 15da4cb..320a27d 100644
--- a/index.html
+++ b/index.html
@@ -42,8 +42,11 @@
                 <div class="slider">
                     <label 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" id="range-knob">
-                        <div class="knotch" id="range-knotch"></div>
+                    <div class="knob-container">
+                        <div class="knob" id="range-knob">
+                            <div class="knotch" id="range-knotch"></div>
+                        </div>
+                        <div class="knob-shadow"></div>
                     </div>
                 </div>
 
diff --git a/style.css b/style.css
index d60f448..d2a2d70 100644
--- a/style.css
+++ b/style.css
@@ -42,7 +42,7 @@ footer {
     opacity: .8;
 }
 
-button, .container, .color-input, .knob {
+button, .container, .color-input {
     box-shadow: 1px 2px 10px 1px #555;
     cursor: pointer;
 }
@@ -120,6 +120,22 @@ button {
     display: none;
 }
 
+.knob-container {
+    position: relative;
+    
+}
+
+.knob-shadow {
+    width: 95px;
+    height: 95px;
+    border-radius: 50%;
+    box-shadow: 1px 2px 10px 1px #555;
+    position: absolute;
+    top: 5%;
+    left: 1%;
+    z-index: -1;
+}
+
 .knob {
     width: 95px;
     height: 95px;
@@ -127,8 +143,10 @@ button {
     cursor: pointer;
     background: #bbb;
     margin-top: 5px;
+    position: relative;
+    z-index: 1;
     transform-style: preserve-3d;
-    will-change: transform, box-shadow;
+    will-change: transform;
 }
 
 .knotch {
@@ -152,8 +170,16 @@ button {
       justify-content: center;
       flex-wrap: wrap;
     }
+
     .knob {
         width: 50px;
         height: 50px;
     }
+
+    .knob-shadow {
+        width: 50px;
+        height: 50px;
+        top: 8%;
+        left: 1%;
+    }
   }
\ No newline at end of file