wesbos
diff --git a/‎03 - CSS Variables/index-START.html‎
Lines changed: 0 additions & 59 deletions b/‎03 - CSS Variables/index-START.html‎
Lines changed: 0 additions & 59 deletions
diff --git a/‎03 - CSS Variables/index-FINISHED.html‎ ‎css_variables/index.html‎03 - CSS Variables/index-FINISHED.html renamed to css_variables/index.html
Lines changed: 26 additions & 15 deletions b/‎03 - CSS Variables/index-FINISHED.html‎ ‎css_variables/index.html‎03 - CSS Variables/index-FINISHED.html renamed to css_variables/index.html
Lines changed: 26 additions & 15 deletions
@@ -14,29 +14,28 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <label for="blur">Blur:</label>
     <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
+    <label for="pfont-size">Font Size:</label>
+    <input type="range" name="font-size" min="0" max="525" value="10" data-sizing="px">
+
     <label for="base">Base Color</label>
     <input type="color" name="base" value="#ffc600">
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+  <!--<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">-->
+  <h1 class="penis">penis</h1>
 
   <style>
+
     :root {
       --base: #ffc600;
-      --spacing: 10px;
+      --spacing: 50px;
       --blur: 10px;
+      --font-size: 10px;
     }
 
-    img {
+    img { 
       padding: var(--spacing);
-      background: var(--base);
-      filter: blur(var(--blur));
-    }
-
-    .hl {
-      color: var(--base);
-    }
-
+     }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -52,6 +51,19 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       font-weight: 100;
       font-size: 50px;
     }
+    .penis {
+      font-family: 'comic-sans';
+      font-size: var(--font-size);
+      color: var(--base);
+      filter: blur(var(--blur));
+      letter-spacing:  var(--spacing);
+    }
+    .hl {
+      font-size: var(--font-size);
+      color: var(--base);
+      filter: blur(var(--blur));
+      letter-spacing:  var(--spacing);
+    }
 
     .controls {
       margin-bottom: 50px;
@@ -70,15 +82,14 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <script>
     const inputs = document.querySelectorAll('.controls input');
 
-    function handleUpdate() {
+    function handleUpdate(){
       const suffix = this.dataset.sizing || '';
-      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+      document.documentElement.style.setProperty(`--${this.name}`, `${this.value}${suffix}`);
+      console.log(this.name);
     }
-
     inputs.forEach(input => input.addEventListener('change', handleUpdate));
     inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
   </script>
 
-
 </body>
 </html>