From 4ef7a827fe99a96304f6163be5bdd468484bb9e6 Mon Sep 17 00:00:00 2001
From: august kline <me@augustkline.com>
Date: Tue, 25 Feb 2025 10:47:25 -0500
Subject: [PATCH] remove mobile hover styles

---
 site/style.css | 108 ++++++++++++++++++++++++++++---------------------
 1 file changed, 61 insertions(+), 47 deletions(-)

diff --git a/site/style.css b/site/style.css
index cb42f85..2481838 100644
--- a/site/style.css
+++ b/site/style.css
@@ -45,6 +45,7 @@ body,
 html {
     block-size: 100%;
     inline-size: 100%;
+    overflow: hidden;
     margin: 0;
     padding: 0;
 }
@@ -79,8 +80,10 @@ a {
 
     outline: 2px transparent solid;
 
-    &:hover {
-        text-shadow: 0px 0px 1px var(--color);
+    @media (hover:hover) {
+        &:hover {
+            text-shadow: 0px 0px 1px var(--color);
+        }
     }
 
     &:focus-visible {
@@ -143,9 +146,11 @@ main {
     }
 
     @media not (prefers-reduced-motion) {
-        &:hover {
-            transform: scale(1.025) rotate(0deg);
-            box-shadow: 0px 0px 30px rgba(152, 97, 42, 0.05);
+        @media (hover:hover) {
+            &:hover {
+                transform: scale(1.025) rotate(0deg);
+                box-shadow: 0px 0px 30px rgba(152, 97, 42, 0.05);
+            }
         }
     }
 
@@ -170,12 +175,15 @@ main {
             }
 
 
-            &:hover,
-            &:focus-visible {
-                transform: translateY(-2px) rotate(-2deg) scale(1.025);
+            @media (hover:hover) {
 
-                * {
-                    text-shadow: 0px 2px 4px rgba(152, 97, 42, 0.1);
+                &:hover,
+                &:focus-visible {
+                    transform: translateY(-2px) rotate(-2deg) scale(1.025);
+
+                    * {
+                        text-shadow: 0px 2px 4px rgba(152, 97, 42, 0.1);
+                    }
                 }
             }
         }
@@ -274,61 +282,65 @@ main {
         filter: brightness(0.85);
     }
 
-    @media (prefers-reduced-motion) {
+    @media (prefers-reduced-motion),
+    (hover: none) {
         .clipped-items {
-            transform: rotate(9deg) translate(-5%, 10%);
+            transform: rotate(9deg) translateX(-5cqi, 0);
 
             .slip-george {
-                bottom: -15%;
-                left: 40%;
+                bottom: 1cqb;
+                left: 40cqi;
                 transform: translateX(-50%) rotate(-15deg);
             }
         }
 
         .paperclip {
             transform: rotate(4deg);
-            top: -25%;
+            top: -3cqb;
         }
     }
 
 
     @media not (prefers-reduced-motion) {
-        * {
-            transition: transform 0.4s ease, top 0.3s ease, bottom 0.3s ease, left 0.3s ease;
-        }
-
-        &:has(.clipped-items:focus) {
-            .clipped-items {
-                transform: rotate(9deg) translate(-5%, 10%);
+        @media (hover:hover) {
+            * {
+                transition: transform 0.4s ease, top 0.3s ease, bottom 0.3s ease, left 0.3s ease;
             }
 
-            .paperclip {
-                transform: rotate(4deg);
-                top: -25%;
-            }
-        }
-
-        &:hover,
-        &:focus-visible {
-            .clipped-items {
-                transform: rotate(9deg) translate(-5%, 10%);
-
-                .slip-george {
-                    bottom: 5%;
-                    left: 50%;
-                    transform: translateX(-50%) rotate(-18deg);
+            &:has(.clipped-items:focus) {
+                .clipped-items {
+                    transform: rotate(9deg) translate(-5%, 10%);
                 }
 
-                .slip-sitemap {
-                    bottom: 70%;
-                    left: -30%;
-                    transform: translateX(-50%) rotate(7deg);
+                .paperclip {
+                    transform: rotate(4deg);
+                    top: -25%;
                 }
             }
 
-            .paperclip {
-                transform: rotate(4deg);
-                top: -25%;
+
+            &:hover,
+            &:focus-visible {
+                .clipped-items {
+                    transform: rotate(9deg) translate(-5%, 10%);
+
+                    .slip-george {
+                        bottom: 5%;
+                        left: 50%;
+                        transform: translateX(-50%) rotate(-18deg);
+                    }
+
+                    .slip-sitemap {
+                        bottom: 70%;
+                        left: -30%;
+                        transform: translateX(-50%) rotate(7deg);
+                    }
+                }
+
+                .paperclip {
+                    transform: rotate(4deg);
+                    top: -25%;
+                }
             }
         }
     }
@@ -350,9 +362,11 @@ main {
         block-size: 15cqb;
     }
 
-    &:hover {
-        img {
-            transform: rotate(0deg) scale(1.05) !important;
+    @media (hover:hover) {
+        &:hover {
+            img {
+                transform: rotate(0deg) scale(1.05) !important;
+            }
         }
     }
 }