Relative color syntax (#238)

* init

* sturdy base

* img nit

* adds focus zoom component

Author: argyleink

.github/workflows/main.yml

@@ -106,6 +106,9 @@ jobs:
 
     - name: Adaptive Typography
       run: cd adaptive-typography && npm install && npm run build
+
+    - name: Relative Colors
+      run: cd relative-colors && npm install && npm run build
 
     - name: Deploy to Firebase
       uses: w9jds/firebase-action@master

README.md

@@ -119,10 +119,13 @@ and expand the diversity of our skills.**
 30. okLCH Color Palettes
   [`Demo`](https://gui-challenges.web.app/color-palettes/dist/) 
   [`YouTube`](https://www.youtube.com/watch?v=6aCsAMgwnjE)
-30. Morphing Button
+31. Morphing Button
   [`Demo`](https://gui-challenges.web.app/morphing-button/dist/) 
   [`YouTube`](https://www.youtube.com/watch?v=N2BKAKwGP6M)
-30. Adaptive Typography
+32. Adaptive Typography
   [`Demo`](https://gui-challenges.web.app/adaptive-typography/dist/) 
   [`YouTube`](https://www.youtube.com/watch?v=8B7xOgp5Aow) 
   [`Article`](https://web.dev/adapting-typography-to-user-preferences-with-css/)
+33. Relative Colors
+  [`Demo`](https://gui-challenges.web.app/relative-colors/dist/) 
+  [`YouTube`](#)(coming soon)

relative-colors/favicon.ico

@@ -0,0 +1,47 @@
+@property --top {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --right {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --bottom {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@property --left {
+  syntax: '<length>';
+  initial-value: 0;
+  inherits: false;
+}
+
+focus-zoom {
+  --backdrop-color: hsl(0 0% 0% / 30%); /* can't be opaque */
+  --backdrop-blur-strength: 10px;
+  
+  position: fixed;
+  touch-action: none;
+  pointer-events: none;
+  inset: 0;
+  background-color: var(--backdrop-color);
+  backdrop-filter: blur(var(--backdrop-blur-strength));
+  
+  mask-image: 
+    linear-gradient(to bottom, black var(--top), black 0%, transparent 0%),
+    linear-gradient(to right, black var(--left), black 0%, transparent 0%),
+    linear-gradient(to top, black var(--bottom), black 0%, transparent 0%),
+    linear-gradient(to left, black var(--right), black 0%, transparent 0%);
+  
+  transition: 
+    --top .3s ease,
+    --right .3s ease,
+    --bottom .3s ease,
+    --left .3s ease;
+}

relative-colors/favicon.svg

@@ -0,0 +1,35 @@
+const zoom = document.querySelector('focus-zoom')
+
+const state = {}
+
+const toggleSpotlight = show_effect => {
+  if (show_effect) {
+    zoom.style.setProperty('--top', `${state.top}px`)
+    zoom.style.setProperty('--right', `${state.right}px`)
+    zoom.style.setProperty('--bottom', `${state.bottom}px`)
+    zoom.style.setProperty('--left', `${state.left}px`)
+  } else {
+    zoom.style.setProperty('--top', `0px`)
+    zoom.style.setProperty('--right', `0px`)
+    zoom.style.setProperty('--bottom', `0px`)
+    zoom.style.setProperty('--left', `0px`)
+  }
+}
+
+window.addEventListener('mouseover', e => {
+  let { top, right, bottom, left } = e.target.getBoundingClientRect()
+  
+  state.top = top - 2
+  state.right = window.innerWidth-right - 2
+  state.bottom = window.innerHeight-bottom - 2
+  state.left = left - 2
+}) 
+
+window.addEventListener('keydown', e =>
+  toggleSpotlight(e.altKey))
+window.addEventListener('keyup', e =>
+  toggleSpotlight(e.altKey))
+window.addEventListener('touchstart', e =>
+  toggleSpotlight(true))
+window.addEventListener('touchend', e =>
+  toggleSpotlight(false))