better (?) glasses styling

matt-meeks · Nov 30, 2023 · 7b4d670 · 7b4d670
1 parent e364e00
commit 7b4d670
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/blob/styles.css b/blob/styles.css
@@ -117,53 +117,57 @@ body {
 
 .cool-glasses {
     --color: hsla(var(--glasses-hue, 0), 100%, 50%, 100%);
+    --tint-color: hsla(var(--glasses-hue, 0), 100%, 50%, 40%);
     translate: -50% -50%;
     position: absolute;
     left: 40px;
-    top: 30px;
+    top: 28px;
     background: var(--color);
-    width: 9px;
+    width: 4px;
     height: 6px;
 }
 
 .cool-glasses::before,
 .cool-glasses::after {
     content: "";
     position: absolute;
-    top: -7px;
-    width: 26px;
+    top: -5px;
+    width: 30px;
     height: 20px;
-    background: #0007;
-    border-radius: 50%;
+    background: var(--tint-color);
+    border-radius: 40%;
     border: solid 2px var(--color);
     box-sizing: border-box;
 }
 
 .cool-glasses::before {
-    right: 7px;
+    right: 3px;
 }
 
 .cool-glasses::after {
-    left: 7px;
+    left: 3px;
 }
 
 .cool-glasses--sides::before,
 .cool-glasses--sides::after {
     content: "";
     position: absolute;
-    /* background: black; */
     height: 6px;
-    width: 13px;
-    border-top: solid 4px var(--color);
+    width: 10px;
+    border-top: solid 5px var(--color);
     border-radius: 2px;
 }
 
 .cool-glasses--sides::before {
-    right: 30px;
+    right: 31px;
     border-left: solid 2px var(--color);
+    transform-origin: right;
+    rotate: 8deg;
 }
 
 .cool-glasses--sides::after {
-    left: 30px;
+    left: 31px;
     border-right: solid 2px var(--color);
+    transform-origin: left;
+    rotate: -8deg;
 }