Jason Zimdars
32 lines
769 B
CSS
32 lines
769 B
CSS
@layer components {
|
|
.panel {
|
|
background-color: var(--color-bg);
|
|
border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
|
|
border-radius: var(--panel-border-radius, 1em);
|
|
color: var(--color-ink);
|
|
inline-size: var(--panel-size, 60ch);
|
|
max-inline-size: 100%;
|
|
padding: var(--panel-padding, calc(var(--block-space) * 2));
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--panel-border-color: var(--color-subtle-dark);
|
|
}
|
|
}
|
|
|
|
.panels--two-up {
|
|
--panel-size: auto;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--block-space-double);
|
|
align-content: start;
|
|
max-inline-size: min(100ch, 100%);
|
|
margin: auto;
|
|
|
|
.panel {
|
|
flex: 1 1 33%;
|
|
min-inline-size: 36ch;
|
|
}
|
|
}
|
|
}
|