Try use smaller dimension for fine pointers

This commit is contained in:
Lim Chee Aun 2024-03-28 00:22:43 +08:00
parent b1950046d4
commit 3b975e899b
3 changed files with 13 additions and 5 deletions

View file

@ -295,7 +295,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
video,
img,
audio {
min-height: 88px; /* for extreme dimensions */
min-height: var(--pointer-min-dimension); /* for extreme dimensions */
}
}
}

View file

@ -908,7 +908,7 @@
grid-auto-rows: 1fr;
gap: 2px;
/* height: 160px; */
min-height: 88px;
min-height: var(--pointer-min-dimension);
height: auto;
max-height: max(160px, 33vh);
}
@ -1037,9 +1037,9 @@
.status .media-container.media-eq1 .media {
display: inline-block;
max-width: 100% !important;
min-width: 88px;
min-width: var(--pointer-min-dimension);
/* width: auto; */
min-height: 88px;
min-height: var(--pointer-min-dimension);
/* --maxAspectHeight: max(160px, 33vh);
--aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
width: min(var(--aspectWidth), var(--width), 100%);
@ -1300,7 +1300,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
:is(.status, .media-post) .media-audio {
width: 100%;
height: 100%;
min-height: 88px;
min-height: var(--pointer-min-dimension);
background-image: radial-gradient(
circle at center center,
transparent,

View file

@ -96,6 +96,14 @@
--timing-function: cubic-bezier(0.3, 0.5, 0, 1);
--spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--pointer-min-dimension: 88px;
}
@media (pointer: fine) {
:root {
--pointer-min-dimension: 44px;
}
}
@media (min-resolution: 2dppx) {