style(immersive): increase artwork size and reduce wasted padding
Bump artwork vh constraint from 60vh to 72vh — the previous value was the bottleneck on laptop screens (461px on 768px viewport). Now yields ~553px. Reduce vertical padding from 164px to 140px total. Compact track info margins below artwork. cc
This commit is contained in:
2 files changed
+7
-7
No files matched your search
@@ -36,7 +36,7 @@
|
||||
/* Floating variant (default) */
|
||||
.artwork-wrapper {
|
||||
width: 100%;
|
||||
max-width: min(42vw, 60vh);
|
||||
max-width: min(42vw, 72vh);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
@@ -55,7 +55,7 @@
|
||||
.vinyl-disc {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: min(42vw, 60vh);
|
||||
max-width: min(42vw, 72vh);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
@@ -104,14 +104,14 @@
|
||||
@media (max-width: 1200px) {
|
||||
.artwork-wrapper,
|
||||
.vinyl-disc {
|
||||
max-width: min(38vw, 52vh);
|
||||
max-width: min(40vw, 65vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.artwork-wrapper,
|
||||
.vinyl-disc {
|
||||
max-width: min(55vw, 32vh);
|
||||
max-width: min(55vw, 35vh);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -892,7 +892,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 64px 40px 100px;
|
||||
padding: 52px 40px 88px;
|
||||
gap: 40px;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -956,7 +956,7 @@
|
||||
.split-track-album {
|
||||
font-size: clamp(12px, 1.5vw, 14px);
|
||||
color: var(--alpha-50, rgba(255, 255, 255, 0.5));
|
||||
margin: 0 0 12px 0;
|
||||
margin: 0 0 6px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -965,7 +965,7 @@
|
||||
.split-quality-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
|
||||
Reference in new issue
Block a user