august
/
augustkline.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove mobile hover styles

This commit is contained in:
august kline 2025-02-25 10:47:25 -05:00
parent 390497b743
commit 4ef7a827fe
1 changed files with 61 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
site/style.css
View File

@ -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;
}
}
}
}