From e2875442cd8a5d9d334b0c52924ed7522f66d61c Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 26 May 2024 23:35:31 -0700
Subject: [PATCH] Refactor to use CSS nesting

---
 index.html | 493 ++++++++++++++++++++++++++---------------------------
 1 file changed, 242 insertions(+), 251 deletions(-)

diff --git a/index.html b/index.html
index 6fd7584..abd47c7 100644
--- a/index.html
+++ b/index.html
@@ -93,11 +93,10 @@
       border: 0;
       background: none;
       cursor: pointer;
-    }
 
-    .icon-button:hover svg,
-    .icon-button:focus svg {
-      animation: spin 0.2s linear 1;
+      &:is(:hover, :focus) svg {
+        animation: spin 0.2s linear 1;
+      }
     }
 
     /* SVG animations */
@@ -153,97 +152,93 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 2px;
+        left: 2px;
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        background: white;
+        border-radius: 8px;
+      }
     }
 
     .card.rainbow-border {
       position: relative;
       transition: border-color 1400ms;
-    }
 
-    .card.rainbow-border:hover,
-    .card.rainbow-border:focus-within {
-      border-color: transparent;
-      transition: border-color 600ms;
-    }
+      &:is(:hover, :focus-within) {
+        border-color: transparent;
+        transition: border-color 600ms;
 
-    .card.rainbow-border::before {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: 10px;
-      background: conic-gradient(hsl(360deg 80% 50%),
-          hsl(315deg 80% 50%),
-          hsl(270deg 80% 50%),
-          hsl(225deg 80% 50%),
-          hsl(180deg 80% 50%),
-          hsl(135deg 80% 50%),
-          hsl(90deg 80% 50%),
-          hsl(45deg 80% 50%),
-          hsl(0deg 80% 50%));
-      clip-path: circle(0% at 5% 15%);
-      transition: clip-path 1200ms;
-    }
+        &::before {
+          clip-path: circle(150% at 5% 15%);
+          transition: clip-path 800ms;
+        }
+      }
 
-    .card.rainbow-border:hover::before,
-    .card.rainbow-border:focus-within::before {
-      clip-path: circle(150% at 5% 15%);
-      transition: clip-path 800ms;
-    }
-
-    .card-content.rainbow-border::before {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: 2px;
-      left: 2px;
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      background: white;
-      border-radius: 8px;
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        background: conic-gradient(hsl(360deg 80% 50%),
+            hsl(315deg 80% 50%),
+            hsl(270deg 80% 50%),
+            hsl(225deg 80% 50%),
+            hsl(180deg 80% 50%),
+            hsl(135deg 80% 50%),
+            hsl(90deg 80% 50%),
+            hsl(45deg 80% 50%),
+            hsl(0deg 80% 50%));
+        clip-path: circle(0% at 5% 15%);
+        transition: clip-path 1200ms;
+      }
     }
 
     .card.rainbow-gradient {
       background: hsl(216deg 40% 95% / 0.5);
       transition: border-color 700ms, background-color 2000ms;
       position: relative;
-    }
 
-    .card.rainbow-gradient:hover,
-    .card.rainbow-gradient:focus-within {
-      background: hsl(216deg 40% 95% / 0.9);
-      transition: background-color 250ms;
-    }
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: -1px;
+        left: -1px;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        border-radius: 18px;
+        background: conic-gradient(hsl(360deg 80% 50%),
+            hsl(315deg 80% 50%),
+            hsl(270deg 80% 50%),
+            hsl(225deg 80% 50%),
+            hsl(180deg 80% 50%),
+            hsl(135deg 80% 50%),
+            hsl(90deg 80% 50%),
+            hsl(45deg 80% 50%),
+            hsl(0deg 80% 50%));
+        opacity: 0;
+        transition: opacity 600ms;
+      }
 
-    .card.rainbow-gradient::before {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: -1px;
-      left: -1px;
-      width: calc(100% + 2px);
-      height: calc(100% + 2px);
-      border-radius: 18px;
-      background: conic-gradient(hsl(360deg 80% 50%),
-          hsl(315deg 80% 50%),
-          hsl(270deg 80% 50%),
-          hsl(225deg 80% 50%),
-          hsl(180deg 80% 50%),
-          hsl(135deg 80% 50%),
-          hsl(90deg 80% 50%),
-          hsl(45deg 80% 50%),
-          hsl(0deg 80% 50%));
-      opacity: 0;
-      transition: opacity 600ms;
-    }
+      &:is(:hover, :focus-within) {
+        background: hsl(216deg 40% 95% / 0.9);
+        transition: background-color 250ms;
 
-    .card.rainbow-gradient:hover::before,
-    .card.rainbow-gradient:focus-within::before {
-      opacity: 1;
-      transition: opacity 400ms;
+        &::before {
+          opacity: 1;
+          transition: opacity 400ms;
+        }
+      }
     }
 
     .card.hover-detail {
@@ -251,12 +246,16 @@
       background: hsl(0deg 0% 98%);
       position: relative;
       transition: filter 800ms;
-    }
 
-    .card.hover-detail:hover,
-    .card.hover-detail:focus-within {
-      filter: brightness(93%);
-      transition: filter 400ms;
+      &:is(:hover, :focus-within) {
+        filter: brightness(93%);
+        transition: filter 400ms;
+
+        & p {
+          max-height: 100%;
+          transition: max-height 1700ms;
+        }
+      }
     }
 
     .card-content.hover-detail {
@@ -265,92 +264,82 @@
       flex-direction: column;
       justify-content: flex-end;
       overflow: hidden;
-    }
 
-    .card-content.hover-detail p {
-      margin: 0;
-      max-height: 0;
-      overflow: hidden;
-      transition: max-height 2000ms;
-    }
-
-    .card.hover-detail:hover p,
-    .card.hover-detail:focus-within p {
-      max-height: 100%;
-      transition: max-height 1700ms;
+      & p {
+        margin: 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 2000ms;
+      }
     }
 
     .card.hover-grow {
       margin-block: 8px;
       will-change: transform;
       transition: scale 400ms;
-    }
 
-    .card.hover-grow:hover,
-    .card.hover-grow:focus-within {
-      scale: 105%;
-      transition: scale 200ms;
+      &:is(:hover, :focus-within) {
+        scale: 105%;
+        transition: scale 200ms;
+      }
     }
 
     .card.text-focus {
       margin-block: 8px;
-    }
 
-    .text-focus p {
-      filter: blur(4px);
-      transition: filter 400ms;
-    }
+      & p {
+        filter: blur(4px);
+        transition: filter 400ms;
+      }
 
-    .card.text-focus:hover p,
-    .card.text-focus:focus-within p {
-      filter: blur(0);
-      transition: filter 200ms;
+      &:is(:hover, :focus-within) p {
+        filter: blur(0);
+        transition: filter 200ms;
+      }
     }
 
     .card.big-box-shadow {
       margin-block: 8px;
       transition: padding 400ms, border 400ms, box-shadow 400ms;
-    }
 
-    .card.big-box-shadow:hover,
-    .card.big-box-shadow:focus-within {
-      border: 1px solid black;
-      box-shadow: 10px 10px black;
-      padding: 16px 24px 24px 16px;
-      transition: padding 200ms, border 200ms, box-shadow 200ms;
+      &:is(:hover, :focus-within) {
+        border: 1px solid black;
+        box-shadow: 10px 10px black;
+        padding: 16px 24px 24px 16px;
+        transition: padding 200ms, border 200ms, box-shadow 200ms;
+      }
     }
 
     .card.peeking-rainbow-background {
       position: relative;
-    }
 
-    .card.peeking-rainbow-background::before {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      bottom: calc(100% - 10px);
-      width: 100%;
-      border-radius: 10px 10px 0 0;
-      background-image: linear-gradient(transparent, white),
-        linear-gradient(90deg,
-          hsl(360deg 80% 50% / 0.25),
-          hsl(315deg 80% 50% / 0.25),
-          hsl(270deg 80% 50% / 0.25),
-          hsl(225deg 80% 50% / 0.25),
-          hsl(180deg 80% 50% / 0.25),
-          hsl(135deg 80% 50% / 0.25),
-          hsl(90deg 80% 50% / 0.25),
-          hsl(45deg 80% 50% / 0.25),
-          hsl(0deg 80% 50% / 0.25)
-        );
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        bottom: calc(100% - 10px);
+        width: 100%;
+        border-radius: 10px 10px 0 0;
+        background-image: linear-gradient(transparent, white),
+          linear-gradient(90deg,
+            hsl(360deg 80% 50% / 0.25),
+            hsl(315deg 80% 50% / 0.25),
+            hsl(270deg 80% 50% / 0.25),
+            hsl(225deg 80% 50% / 0.25),
+            hsl(180deg 80% 50% / 0.25),
+            hsl(135deg 80% 50% / 0.25),
+            hsl(90deg 80% 50% / 0.25),
+            hsl(45deg 80% 50% / 0.25),
+            hsl(0deg 80% 50% / 0.25));
         transition: bottom 400ms;
-    }
+      }
 
-    .card.peeking-rainbow-background:is(:hover, :focus-within)::before {
-      bottom: 0;
-      transition: bottom 200ms;
+      &:is(:hover, :focus-within)::before {
+        bottom: 0;
+        transition: bottom 200ms;
+      }
     }
 
     .card.pattern-background {
@@ -374,11 +363,11 @@
         margin-inline: -8px;
         border-radius: 4px;
       }
-    }
 
-    .card.pattern-background:is(:hover, :focus-within) {
-      --c2: hsl(216deg 100% 50% / 0.15);
-      transition: background-color 200ms;
+      &:is(:hover, :focus-within) {
+        --c2: hsl(216deg 100% 50% / 0.15);
+        transition: background-color 200ms;
+      }
     }
 
     /* Button hovers */
@@ -392,62 +381,66 @@
       cursor: pointer;
     }
 
-    .arrow-movement::after {
-      content: "→";
-      display: inline-block;
-      margin-inline-start: 4px;
-      transition: translate 400ms;
+    .arrow-movement {
+      &::after {
+        content: "→";
+        display: inline-block;
+        margin-inline-start: 4px;
+        transition: translate 400ms;
+      }
+
+      &:is(:hover, :focus-within)::after {
+        translate: 4px;
+        transition: translate 200ms;
+      }
     }
 
-    :is(.arrow-movement:hover, .arrow-movement:focus)::after {
-      translate: 4px;
-      transition: translate 200ms;
-    }
+    .arrow-movement-2 {
+      &::after {
+        content: "→";
+        display: inline-block;
+        margin-inline-start: 4px;
+        rotate: -45deg;
+        transition: rotate 400ms;
+      }
 
-    .arrow-movement-2::after {
-      content: "→";
-      display: inline-block;
-      margin-inline-start: 4px;
-      rotate: -45deg;
-      transition: rotate 400ms;
-    }
-
-    :is(.arrow-movement-2:hover, .arrow-movement-2:focus)::after {
-      rotate: 0deg;
-      transition: rotate 200ms;
+      &:is(:hover, :focus-within)::after {
+        rotate: 0deg;
+        transition: rotate 200ms;
+      }
     }
 
     .gradient-shadow {
       position: relative;
-    }
 
-    .gradient-shadow::after {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      translate: -2px -2px;
-      width: calc(100% + 4px);
-      height: calc(100% + 4px);
-      border-radius: 18px;
-      background: conic-gradient(hsl(360deg 80% 50%),
-          hsl(315deg 80% 50%),
-          hsl(270deg 80% 50%),
-          hsl(225deg 80% 50%),
-          hsl(180deg 80% 50%),
-          hsl(135deg 80% 50%),
-          hsl(90deg 80% 50%),
-          hsl(45deg 80% 50%),
-          hsl(0deg 80% 50%));
-      filter: drop-shadow(0 0 8px hsl(216deg 100% 50% / 0.5));
-      opacity: 0;
-      transition: opacity 600ms;
-    }
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        translate: -2px -2px;
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        border-radius: 18px;
+        background: conic-gradient(hsl(360deg 80% 50%),
+            hsl(315deg 80% 50%),
+            hsl(270deg 80% 50%),
+            hsl(225deg 80% 50%),
+            hsl(180deg 80% 50%),
+            hsl(135deg 80% 50%),
+            hsl(90deg 80% 50%),
+            hsl(45deg 80% 50%),
+            hsl(0deg 80% 50%));
+        filter: drop-shadow(0 0 8px hsl(216deg 100% 50% / 0.5));
+        opacity: 0;
+        transition: opacity 600ms;
+      }
 
-    :is(.gradient-shadow:hover, .gradient-shadow:focus)::after {
-      opacity: 1;
-      transition: opacity 400ms;
+      &:is(:hover, :focus-within)::after {
+        opacity: 1;
+        transition: opacity 400ms;
+      }
     }
 
     @keyframes radiate {
@@ -458,63 +451,63 @@
 
     .radiating-shadow {
       position: relative;
-    }
 
-    .radiating-shadow::after {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      translate: -2px -2px;
-      width: calc(100% + 4px);
-      height: calc(100% + 4px);
-      border-radius: 18px;
-      background: radial-gradient(ellipse at center,
-          hsl(216deg 70% 30% / 0.3),
-          hsl(216deg 60% 40% / 0.4),
-          hsl(216deg 50% 50% / 0.5),
-          hsl(216deg 20% 80% / 0.8));
-      opacity: 0;
-      transition: opacity 600ms;
-      animation: radiate 1s infinite alternate;
-    }
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        translate: -2px -2px;
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        border-radius: 18px;
+        background: radial-gradient(ellipse at center,
+            hsl(216deg 70% 30% / 0.3),
+            hsl(216deg 60% 40% / 0.4),
+            hsl(216deg 50% 50% / 0.5),
+            hsl(216deg 20% 80% / 0.8));
+        opacity: 0;
+        transition: opacity 600ms;
+        animation: radiate 1s infinite alternate;
+      }
 
-    :is(.radiating-shadow:hover, .radiating-shadow:focus)::after {
-      opacity: 1;
-      transition: opacity 400ms;
+      &:is(:hover, :focus-within)::after {
+        opacity: 1;
+        transition: opacity 400ms;
+      }
     }
 
     .gradient-fill {
       background: transparent;
       overflow: hidden;
       position: relative;
-    }
 
-    .gradient-fill::after {
-      content: "";
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: conic-gradient(hsl(360deg 80% 90%),
-          hsl(315deg 80% 90%),
-          hsl(270deg 80% 90%),
-          hsl(225deg 80% 90%),
-          hsl(180deg 80% 90%),
-          hsl(135deg 80% 90%),
-          hsl(90deg 80% 90%),
-          hsl(45deg 80% 90%),
-          hsl(0deg 80% 90%));
-      opacity: 0;
-      transition: opacity 600ms;
-    }
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: conic-gradient(hsl(360deg 80% 90%),
+            hsl(315deg 80% 90%),
+            hsl(270deg 80% 90%),
+            hsl(225deg 80% 90%),
+            hsl(180deg 80% 90%),
+            hsl(135deg 80% 90%),
+            hsl(90deg 80% 90%),
+            hsl(45deg 80% 90%),
+            hsl(0deg 80% 90%));
+        opacity: 0;
+        transition: opacity 600ms;
+      }
 
-    :is(.gradient-fill:hover, .gradient-fill:focus)::after {
-      opacity: 1;
-      transition: opacity 300ms;
+      &:is(:hover, :focus-within)::after {
+        opacity: 1;
+        transition: opacity 300ms;
+      }
     }
 
     /* Link hovers */
@@ -524,13 +517,12 @@
       color: inherit;
       text-decoration: underline;
       transition: color 600ms;
-    }
 
-    .thick-underline:hover,
-    .thick-underline:focus {
-      color: hsl(216deg 80% 40%);
-      text-decoration-thickness: 0.2em;
-      transition: color 200ms;
+      &:is(:hover, :focus-within) {
+        color: hsl(216deg 80% 40%);
+        text-decoration-thickness: 0.2em;
+        transition: color 200ms;
+      }
     }
 
     .gradient-shift {
@@ -553,12 +545,11 @@
       background-size: 200% 100%;
       background-position: 100% 0%;
       transition: background-position 800ms;
-    }
 
-    .gradient-shift:hover,
-    .gradient-shift:focus {
-      background-position: 0% 0%;
-      transition: background-position 400ms;
+      &:is(:hover, :focus-within) {
+        background-position: 0% 0%;
+        transition: background-position 400ms;
+      }
     }
   </style>
   <link rel="icon" href="data:,">
-- 
2.47.3