773 lines
16 KiB
Text
773 lines
16 KiB
Text
$scale: 3;
|
|
$ease: cubic-bezier(0.32, 0.72, 0.22, 1);
|
|
|
|
:root {
|
|
--bg: #fff;
|
|
--ink: #17130e;
|
|
--ink-soft: #71695c;
|
|
--line: #e4ded3;
|
|
--card: #ffffff;
|
|
--accent: #7c3aed;
|
|
--ease: $ease;
|
|
--dur: 0.32s;
|
|
--radius: 0.75rem;
|
|
}
|
|
|
|
.navbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
isolation: isolate;
|
|
background: var(--card);
|
|
border-bottom: 1px solid var(--line);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.navbar__row {
|
|
position: relative;
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
padding: 0.55rem 1.25rem 0.45rem;
|
|
}
|
|
|
|
.navbar__brand {
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-weight: 650;
|
|
letter-spacing: -0.02em;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.navbar {
|
|
--pill-x: $refer[left](@navitemhome);
|
|
--pill-y: $refer[top](@navitemhome);
|
|
--pill-w: $refer[width](@navitemhome);
|
|
--pill-h: $refer[height](@navitemhome);
|
|
}
|
|
|
|
@each $item in naviteminterpolate navitemrefer navitempredict navitemroute {
|
|
.navbar:has([data-muddle-anchor="#{$item}"][aria-current="page"]) {
|
|
--pill-x: $refer[left](@#{$item});
|
|
--pill-y: $refer[top](@#{$item});
|
|
--pill-w: $refer[width](@#{$item});
|
|
--pill-h: $refer[height](@#{$item});
|
|
}
|
|
}
|
|
|
|
.navbar__pill {
|
|
position: absolute;
|
|
left: calc(var(--pill-x) - $refer[left](@navbar));
|
|
top: calc(var(--pill-y) - $refer[top](@navbar));
|
|
width: var(--pill-w);
|
|
height: var(--pill-h);
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--accent);
|
|
border-radius: 999px;
|
|
pointer-events: none;
|
|
transition:
|
|
left var(--dur) $ease,
|
|
top var(--dur) $ease,
|
|
width var(--dur) $ease,
|
|
height var(--dur) $ease;
|
|
}
|
|
|
|
.navbar__items {
|
|
display: flex;
|
|
gap: 0.15rem;
|
|
margin-left: auto;
|
|
list-style: none;
|
|
scroll-behavior: smooth;
|
|
scroll-snap-type: x proximity;
|
|
overscroll-behavior-inline: contain;
|
|
}
|
|
|
|
.navbar__item {
|
|
display: block;
|
|
scroll-snap-align: center;
|
|
padding: 0.3rem 0.62rem;
|
|
border-radius: 0.55rem;
|
|
color: var(--ink-soft);
|
|
text-decoration: none;
|
|
font-size: 0.82rem;
|
|
transition: color var(--dur) $ease;
|
|
|
|
&[aria-current="page"] {
|
|
color: var(--ink);
|
|
font-weight: 620;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--ink);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--muddle-predict-duration: 300ms;
|
|
--muddle-predict-easing: $ease;
|
|
}
|
|
|
|
.navbar {
|
|
--ribbon-x: calc(
|
|
$refer[left](@navitemhome) + $refer[width](@navitemhome) /
|
|
2 - $refer[left](@navbar) - ($refer[width](@panehome) + 1.6rem + 2px) / 2
|
|
);
|
|
--ribbon-w: calc($refer[width](@panehome) + 1.6rem + 2px);
|
|
--ribbon-h: calc($refer[height](@panehome) + 1.24rem + 2px);
|
|
--pointer-x: calc(
|
|
$refer[left](@navitemhome) + $refer[width](@navitemhome) /
|
|
2 - $refer[left](@navbar) - var(--ribbon-x)
|
|
);
|
|
}
|
|
|
|
@each $id in home interpolate refer predict route {
|
|
.navbar:has([data-muddle-anchor="navitem#{$id}"]:hover) .navbar__ribbon,
|
|
.navbar:has([data-muddle-anchor="navitem#{$id}"]:focus-visible)
|
|
.navbar__ribbon {
|
|
--ribbon-x: calc(
|
|
$refer[left](@navitem#{$id}) +
|
|
$refer[width](@navitem#{$id}) /
|
|
2 - $refer[left](@navbar) -
|
|
($refer[width](@pane#{$id}) + 1.6rem + 2px) /
|
|
2
|
|
);
|
|
--ribbon-w: calc($refer[width](@pane#{$id}) + 1.6rem + 2px);
|
|
--ribbon-h: calc($refer[height](@pane#{$id}) + 1.24rem + 2px);
|
|
--pointer-x: calc(
|
|
$refer[left](@navitem#{$id}) +
|
|
$refer[width](@navitem#{$id}) /
|
|
2 - $refer[left](@navbar) - var(--ribbon-x)
|
|
);
|
|
}
|
|
}
|
|
|
|
.navbar__ribbon {
|
|
position: fixed;
|
|
top: calc($refer[top](@navbar) + $refer[height](@navbar));
|
|
left: calc($refer[left](@navbar) + var(--ribbon-x));
|
|
width: var(--ribbon-w);
|
|
height: var(--ribbon-h);
|
|
max-width: min(24rem, calc(100vw - 3rem));
|
|
box-sizing: border-box;
|
|
overflow: clip;
|
|
clip-path: inset(-10px 0 0 round 0.6rem);
|
|
border: 1px solid var(--line);
|
|
border-radius: 0.6rem;
|
|
background: var(--card);
|
|
box-shadow: 0 14px 30px -20px rgba(23, 19, 14, 0.45);
|
|
opacity: 0;
|
|
visibility: visible;
|
|
transform: translateY(6px);
|
|
pointer-events: auto;
|
|
z-index: 30;
|
|
@predict left top width height opacity transform visibility;
|
|
@measure;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -6px;
|
|
left: calc(var(--pointer-x) - 6px);
|
|
width: 12px;
|
|
height: 12px;
|
|
transform: rotate(45deg);
|
|
pointer-events: none;
|
|
@predict transform;
|
|
}
|
|
|
|
&::before {
|
|
z-index: 1;
|
|
background: var(--card);
|
|
border-left: 1px solid var(--line);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
&::after {
|
|
z-index: 2;
|
|
width: 8px;
|
|
height: 8px;
|
|
top: -5px;
|
|
left: calc(var(--pointer-x) - 4px);
|
|
background: var(--card);
|
|
}
|
|
}
|
|
|
|
.navbar:has(.navbar__item:hover) .navbar__ribbon,
|
|
.navbar:has(.navbar__ribbon:hover) .navbar__ribbon,
|
|
.navbar:has(.navbar__items:focus-within) .navbar__ribbon {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.navbar__pane {
|
|
position: absolute;
|
|
top: 0.62rem;
|
|
left: 0.8rem;
|
|
width: max-content;
|
|
max-width: 24rem;
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: var(--ink-soft);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity var(--dur) $ease,
|
|
visibility var(--dur) step-end;
|
|
}
|
|
|
|
@each $id in home interpolate refer predict route {
|
|
.navbar:has([data-muddle-anchor="navitem#{$id}"]:hover)
|
|
[data-muddle-anchor="pane#{$id}"],
|
|
.navbar:has([data-muddle-anchor="navitem#{$id}"]:focus-visible)
|
|
[data-muddle-anchor="pane#{$id}"] {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
animation: fadein var(--dur) $ease;
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.navbar__pane-cover {
|
|
margin: 0;
|
|
|
|
img {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 0.45rem;
|
|
border: 1px solid var(--line);
|
|
display: block;
|
|
background: var(--bg);
|
|
}
|
|
}
|
|
|
|
.navbar__pane--album {
|
|
width: min(19rem, calc(100vw - 4rem));
|
|
max-height: min(20rem, calc(100vh - 6rem));
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--line) transparent;
|
|
padding-right: 0.2rem;
|
|
}
|
|
|
|
.navbar__album-header {
|
|
display: grid;
|
|
grid-template-columns: 3rem minmax(0, 1fr);
|
|
gap: 0.7rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar__pane-head {
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.navbar__album-date {
|
|
display: block;
|
|
margin-top: 0.18rem;
|
|
font-size: 0.7rem;
|
|
color: var(--ink-soft);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.navbar__tracks {
|
|
margin: 0.7rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-size: 0.74rem;
|
|
line-height: 1.6;
|
|
color: var(--ink-soft);
|
|
counter-reset: track;
|
|
|
|
li {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 0.8rem;
|
|
align-items: baseline;
|
|
counter-increment: track;
|
|
border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
|
|
padding: 0.28rem 0;
|
|
|
|
span:first-child::before {
|
|
content: counter(track, decimal-leading-zero);
|
|
display: inline-block;
|
|
width: 1.65rem;
|
|
color: color-mix(in srgb, var(--ink-soft) 62%, transparent);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar__track-duration {
|
|
margin-left: 0;
|
|
color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family:
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.page {
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 2.2rem 1.25rem 3rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
padding: 1.15rem 1.25rem;
|
|
}
|
|
|
|
.demo-hero {
|
|
max-width: 44rem;
|
|
margin: 0.8rem 0 2rem;
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(1.9rem, 4vw, 2.9rem);
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
p {
|
|
margin: 0.85rem 0 0;
|
|
max-width: 34rem;
|
|
color: var(--ink-soft);
|
|
line-height: 1.65;
|
|
|
|
kbd {
|
|
font-size: 0.72rem;
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-bottom-width: 2px;
|
|
border-radius: 0.3rem;
|
|
padding: 0.05rem 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
|
|
gap: 0.8rem;
|
|
|
|
a {
|
|
display: block;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.card {
|
|
height: 100%;
|
|
}
|
|
|
|
strong {
|
|
display: block;
|
|
margin-bottom: 0.3rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
span {
|
|
font-size: 0.8rem;
|
|
color: var(--ink-soft);
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.demo-aside {
|
|
margin-top: 1rem;
|
|
font-size: 0.8rem;
|
|
color: var(--ink-soft);
|
|
|
|
code {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 0.3rem;
|
|
padding: 0.05rem 0.3rem;
|
|
}
|
|
}
|
|
|
|
.demo-feature {
|
|
max-width: 44rem;
|
|
|
|
h1 {
|
|
margin: 0.6rem 0 0;
|
|
font-size: clamp(1.7rem, 3.4vw, 2.4rem);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
margin-top: 1.4rem;
|
|
|
|
a {
|
|
font-size: 0.8rem;
|
|
text-decoration: none;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--card);
|
|
color: var(--ink-soft);
|
|
padding: 0.2rem 0.65rem;
|
|
transition:
|
|
color var(--dur) $ease,
|
|
border-color var(--dur) $ease;
|
|
|
|
&:hover {
|
|
color: var(--ink);
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
&[aria-current="page"] {
|
|
color: var(--card);
|
|
border-color: var(--ink);
|
|
background: var(--ink);
|
|
}
|
|
}
|
|
}
|
|
|
|
.demo-grid {
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
.demo-meter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.45rem;
|
|
margin-top: 1.2rem;
|
|
|
|
i {
|
|
display: block;
|
|
height: 0.55rem;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--accent) 18%, var(--card));
|
|
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
|
|
}
|
|
}
|
|
|
|
.demo-meter--one i {
|
|
width: #{($scale * 2) * 2}rem;
|
|
}
|
|
|
|
.demo-meter--two i {
|
|
width: #{$scale * 2.5}rem;
|
|
}
|
|
|
|
.demo-meter--three i {
|
|
width: calc($scale * 3rem);
|
|
}
|
|
|
|
.demo-intro {
|
|
margin-top: 1.6rem;
|
|
max-width: 44rem;
|
|
}
|
|
|
|
.demo-intro__stage {
|
|
--intro-tint: var(--accent);
|
|
--intro-x: calc(
|
|
$refer[left](@introtopicscaffold) + $refer[width](@introtopicscaffold) /
|
|
2 - $refer[left](@introstage)
|
|
);
|
|
--intro-w: calc($refer[width](@intropanescaffold) + 2rem);
|
|
--intro-h: calc($refer[height](@intropanescaffold) + 1.4rem);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.9rem;
|
|
padding: 0.9rem 1rem 1.5rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 1rem;
|
|
background:
|
|
linear-gradient(
|
|
to bottom,
|
|
color-mix(in srgb, var(--intro-tint) 16%, transparent) 0%,
|
|
transparent 60%
|
|
),
|
|
var(--card);
|
|
}
|
|
|
|
.demo-intro__topics {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.demo-intro__topic {
|
|
display: inline-flex;
|
|
font: inherit;
|
|
font-size: 0.8rem;
|
|
padding: 0.28rem 0.7rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--ink-soft);
|
|
cursor: pointer;
|
|
transition:
|
|
color var(--dur) $ease,
|
|
border-color var(--dur) $ease,
|
|
background-color var(--dur) $ease;
|
|
|
|
&:hover {
|
|
color: var(--ink);
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
.demo-intro__toggle:checked + & {
|
|
color: var(--card);
|
|
background: var(--ink);
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--intro-tint);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.demo-intro__toggle {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.demo-intro__panel {
|
|
position: absolute;
|
|
left: max(0.75rem, calc(var(--intro-x) - var(--intro-w) / 2));
|
|
top: calc(
|
|
$refer[top](@introtopicscaffold) - $refer[top](@introstage) +
|
|
$refer[height](@introtopicscaffold) + 0.75rem
|
|
);
|
|
width: var(--intro-w);
|
|
height: var(--intro-h);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border: 1px solid color-mix(in srgb, var(--intro-tint) 45%, var(--line));
|
|
border-radius: 0.7rem;
|
|
background: var(--card);
|
|
box-shadow: 0 12px 26px -18px rgba(23, 19, 14, 0.5);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(5px);
|
|
pointer-events: none;
|
|
@predict left top width height opacity transform visibility;
|
|
@measure;
|
|
}
|
|
|
|
.demo-intro__note {
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 0.7rem;
|
|
width: max-content;
|
|
max-width: 24rem;
|
|
margin: 0;
|
|
font-size: 0.78rem;
|
|
line-height: 1.55;
|
|
color: var(--ink-soft);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
@measure;
|
|
}
|
|
|
|
.demo-intro__stage:has(.demo-intro__topics:focus-within) .demo-intro__panel {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.demo-intro__stage:has([data-tint="violet"]:hover),
|
|
.demo-intro__stage:has(#intro-step-scaffold:checked) {
|
|
--intro-tint: #7c3aed;
|
|
}
|
|
|
|
.demo-intro__stage:has([data-tint="rose"]:hover),
|
|
.demo-intro__stage:has(#intro-step-relations:checked) {
|
|
--intro-tint: #e11d48;
|
|
}
|
|
|
|
.demo-intro__stage:has([data-tint="sky"]:hover),
|
|
.demo-intro__stage:has(#intro-step-predict:checked) {
|
|
--intro-tint: #0284c7;
|
|
}
|
|
|
|
.demo-intro__stage:has([data-tint="amber"]:hover),
|
|
.demo-intro__stage:has(#intro-step-momentum:checked) {
|
|
--intro-tint: #d97706;
|
|
}
|
|
|
|
@each $id in scaffold relations predict momentum {
|
|
.demo-intro__stage:has([data-muddle-anchor="introtopic#{$id}"]:hover)
|
|
.demo-intro__panel,
|
|
.demo-intro__stage:has(#intro-step-#{$id}:checked) .demo-intro__panel {
|
|
--intro-x: calc(
|
|
$refer[left](@introtopic#{$id}) +
|
|
$refer[width](@introtopic#{$id}) /
|
|
2 - $refer[left](@introstage)
|
|
);
|
|
--intro-w: calc($refer[width](@intropane#{$id}) + 2rem);
|
|
--intro-h: calc($refer[height](@intropane#{$id}) + 1.4rem);
|
|
}
|
|
}
|
|
|
|
@each $id in scaffold relations predict momentum {
|
|
.demo-intro__stage:has([data-muddle-anchor="introtopic#{$id}"]:hover)
|
|
[data-muddle-anchor="intropane#{$id}"],
|
|
.demo-intro__stage:has(#intro-step-#{$id}:checked)
|
|
[data-muddle-anchor="intropane#{$id}"],
|
|
.demo-intro__stage:has([data-muddle-anchor="introtopic#{$id}"]:focus-visible)
|
|
[data-muddle-anchor="intropane#{$id}"] {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@each $id in scaffold relations predict momentum {
|
|
.demo-intro__stage:has(.demo-intro__topic:hover):has(
|
|
#intro-step-#{$id}:checked
|
|
)
|
|
[data-muddle-anchor="intropane#{$id}"] {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.demo-intro__stage:has([data-muddle-anchor="introtopic#{$id}"]:hover)
|
|
[data-muddle-anchor="intropane#{$id}"] {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.demo-intro__stage:has(.demo-intro__toggle:checked) .demo-intro__panel {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.prose {
|
|
max-width: 40rem;
|
|
line-height: 1.7;
|
|
font-size: 0.95rem;
|
|
margin-top: 1.1rem;
|
|
}
|
|
|
|
.demo-footer {
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 1rem 1.25rem 2rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.75rem;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.navbar__row {
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 1rem 0.35rem;
|
|
}
|
|
|
|
.navbar__brand {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.navbar__items {
|
|
margin-left: 0;
|
|
order: 3;
|
|
width: 100%;
|
|
gap: 0.05rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
.navbar__item {
|
|
font-size: 0.72rem;
|
|
padding: 0.25rem 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar__ribbon {
|
|
max-width: calc(100vw - 1.5rem);
|
|
}
|
|
|
|
.page {
|
|
padding: 1.4rem 1rem 2.2rem;
|
|
}
|
|
|
|
.demo-hero h1 {
|
|
font-size: clamp(1.6rem, 7vw, 2.2rem);
|
|
}
|
|
|
|
.demo-intro__stage {
|
|
padding: 0.8rem 0.8rem 1.2rem;
|
|
}
|
|
|
|
.demo-intro__note {
|
|
max-width: calc(100vw - 5rem);
|
|
}
|
|
|
|
.demo-intro__panel {
|
|
max-width: calc(100vw - 2rem);
|
|
}
|
|
|
|
.demo-meter i {
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.navbar__pane-cover img {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
}
|
|
|
|
.navbar__pane-head {
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.navbar__tracks {
|
|
font-size: 0.68rem;
|
|
}
|
|
}
|