responsive button sizing
Hunter
Tuesday, October 28th, 2025 at 5:05 PM
36 height: 100vh;
37 display: flex;
38 flex-direction: column;
- font-size: 24px;
39 + font-size: 25px;
40 background-color: var(--background);
41 }
42
59 .controls {
60 display: flex;
61 justify-content: center;
- padding-left: 15px;
- padding-right: 15px;
62 background: transparent;
63 position: absolute;
64 bottom: 0;
70 }
71
72 .control-button {
- width: 120px;
- height: 45px;
73 + width: clamp(60px, calc((100vw - 58px) / 3), 120px);
74 + aspect-ratio: 8 / 3;
75 background-size: contain;
76 background-repeat: no-repeat;
77 background-position: center;
92 pointer-events: auto;
93 }
94
-.control-button:not(:last-child) {
- margin-right: 14px;
-}
-
95 .controls-inner {
96 display: flex;
97 + justify-content: space-between;
98 padding: 10px 15px;
99 pointer-events: auto;
100 + width: 100%;
101 + box-sizing: border-box;
102 +}
103 +
104 +@media (min-width: 420px) {
105 + .controls-inner {
106 + justify-content: center;
107 + gap: 14px;
108 + width: auto;
109 + }
110 +
111 + .control-button {
112 + width: 120px;
113 + }
114 }
115
116 .playlist-wrapper {
146 }
147
148 .playlist-item-title {
- font-size: 20px;
149 + font-size: 21px;
150 line-height: 1.2;
151 }
152
156 }
157
158 .playlist-item-artist {
- font-size: 16px;
159 + font-size: 17px;
160 color: var(--dimmed-text);
161 line-height: 1.2;
162 }