update styles

This commit is contained in:
Chris Kruining 2025-05-14 13:53:47 +02:00
parent 18c96302e2
commit 81491482e4
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
4 changed files with 106 additions and 14 deletions

View file

@ -1,6 +1,6 @@
.container {
position: relative;
display: grid;
display: block grid;
grid: auto 1fr / 5em 1fr;
grid-template-areas:
"top top"
@ -11,29 +11,39 @@
overflow: clip;
container-type: inline-size;
background-color: var(--surface-1);
&::after {
content: '';
grid-area: content;
display: block;
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
inline-size: var(--radius-4);
block-size: var(--radius-4);
background: radial-gradient(circle at bottom right, transparent var(--radius-4), var(--surface-1) var(--radius-4));
pointer-events: none;
}
}
.body {
grid-area: 2 / 1 / 3 / 3;
inline-size: 100%;
block-size: 100%;
background: linear-gradient(
180deg,
transparent,
transparent 90vh,
var(--surface-500) 90vh,
var(--surface-500)
);
background: linear-gradient(180deg,
transparent,
transparent 90vh,
var(--surface-500) 90vh,
var(--surface-500));
overflow: clip auto;
padding-inline-start: 5em;
transition: filter var(--duration-moderate-1) var(--ease-3);
& > div {
border-top-left-radius: var(--radius-4);
background-color: var(--surface-2);
isolation: isolate;
inline-size: 100%;
block-size: fit-content;
min-block-size: 100%;
}
}
}