commit 0a3f261d2a17f3f0afcb8b3142f0ea1eead19734
parent f6ae230b2a62c93e9615122b0baf0d0c2243b4aa
Author: Hunter
Date: Tue, 28 Oct 2025 17:05:48 -0400
responsive button sizing
Diffstat:
1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/styles.css b/styles.css
@@ -36,7 +36,7 @@ body {
height: 100vh;
display: flex;
flex-direction: column;
- font-size: 24px;
+ font-size: 25px;
background-color: var(--background);
}
@@ -59,8 +59,6 @@ body {
.controls {
display: flex;
justify-content: center;
- padding-left: 15px;
- padding-right: 15px;
background: transparent;
position: absolute;
bottom: 0;
@@ -72,8 +70,8 @@ body {
}
.control-button {
- width: 120px;
- height: 45px;
+ width: clamp(60px, calc((100vw - 58px) / 3), 120px);
+ aspect-ratio: 8 / 3;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
@@ -94,14 +92,25 @@ body {
pointer-events: auto;
}
-.control-button:not(:last-child) {
- margin-right: 14px;
-}
-
.controls-inner {
display: flex;
+ justify-content: space-between;
padding: 10px 15px;
pointer-events: auto;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+@media (min-width: 420px) {
+ .controls-inner {
+ justify-content: center;
+ gap: 14px;
+ width: auto;
+ }
+
+ .control-button {
+ width: 120px;
+ }
}
.playlist-wrapper {
@@ -137,7 +146,7 @@ body {
}
.playlist-item-title {
- font-size: 20px;
+ font-size: 21px;
line-height: 1.2;
}
@@ -147,7 +156,7 @@ body {
}
.playlist-item-artist {
- font-size: 16px;
+ font-size: 17px;
color: var(--dimmed-text);
line-height: 1.2;
}