62 lines
1.4 KiB
CSS
62 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
@source "../templates/*.templ";
|
|
|
|
@theme {
|
|
--color-accent-50: #e7fdea;
|
|
--color-accent-100: #cbfbd1;
|
|
--color-accent-200: #9cf7a8;
|
|
--color-accent-300: #68f37a;
|
|
--color-accent-400: #33ef4d;
|
|
--color-accent-500: #11db2d;
|
|
--color-accent-600: #0eaf23;
|
|
--color-accent-700: #0a851b;
|
|
--color-accent-800: #075a12;
|
|
--color-accent-900: #032b09;
|
|
--color-accent-950: #021805;
|
|
--color-accent: #0eaf23;
|
|
--color-text-50: #f7f8f7;
|
|
--color-text-100: #f2f3f2;
|
|
--color-text-200: #e2e4e2;
|
|
--color-text-300: #d2d6d2;
|
|
--color-text-400: #c2c7c2;
|
|
--color-text-500: #afb6af;
|
|
--color-text-600: #97a097;
|
|
--color-text-700: #7d877d;
|
|
--color-text-800: #5a625a;
|
|
--color-text-900: #161816;
|
|
--color-text-950: #000000;
|
|
}
|
|
|
|
@layer components {
|
|
.grid-main {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.grid-sub {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
grid-column: 1 / -1;
|
|
border-color: var(--color-neutral-400);
|
|
}
|
|
|
|
.grid-sub:hover {
|
|
background-color: var(--color-neutral-200);
|
|
}
|
|
|
|
.grid-cell {
|
|
padding: calc(var(--spacing) * 2);
|
|
border-color: var(--color-neutral-400);
|
|
}
|
|
|
|
@media (width >=48rem) {
|
|
.grid-main {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
margin: 0 10%;
|
|
}
|
|
|
|
.grid-sub {}
|
|
}
|
|
}
|