34 lines
820 B
CSS
34 lines
820 B
CSS
@import 'tailwindcss' source('.');
|
|
@source './components/main.svelte';
|
|
|
|
@theme {
|
|
--breakout-size: calc((var(--breakpoint-xl) - var(--breakpoint-lg)) / 2);
|
|
--ultrawide-val: minmax(calc(var(--spacing) * 4), 1fr);
|
|
--breakout-val: minmax(0, var(--breakout-size));
|
|
--content-val: min(100% - calc(var(--spacing) * 8), var(--breakpoint-lg));
|
|
}
|
|
|
|
:root {
|
|
--header-height: --spacing(16);
|
|
--main-min-height: calc(100dvh - var(--header-height));
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
min-width: 0;
|
|
}
|
|
|
|
.content {
|
|
grid-template-columns:
|
|
[ultrawide-start] var(--ultrawide-val)
|
|
[breakout-start] var(--breakout-val)
|
|
[content-start] var(--content-val)
|
|
[content-end] var(--breakout-val)
|
|
[breakout-end] var(--ultrawide-val)
|
|
[ultrawide-end];
|
|
}
|
|
|
|
.content > * {
|
|
grid-column: content;
|
|
}
|
|
}
|