84 lines
No EOL
1.8 KiB
CSS
84 lines
No EOL
1.8 KiB
CSS
@import "tailwindcss/base";
|
|
@import "tailwindcss/components";
|
|
@import "tailwindcss/utilities";
|
|
|
|
@import "./lightbox.css";
|
|
@import "./tablesort.css";
|
|
|
|
/*
|
|
The base layer is for things like reset rules or default styles applied to plain HTML elements.
|
|
*/
|
|
@layer base {
|
|
:root {
|
|
--color-background: 255 255 255;
|
|
--color-foreground: 0 0 0;
|
|
--color-primary: 0 0 0;
|
|
}
|
|
|
|
:root[mode=dark] {
|
|
--color-background: 0 0 0;
|
|
--color-foreground: 255 255 255;
|
|
--color-primary: 255 255 255;
|
|
}
|
|
|
|
html {
|
|
font-family: 'Inter', sans-serif;
|
|
font-feature-settings: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
|
|
}
|
|
|
|
.stack > * + * {
|
|
margin-block-start: var(--flow-space, 1em);
|
|
}
|
|
}
|
|
|
|
/*
|
|
The components layer is for class-based styles that you want to be able to override with utilities.
|
|
*/
|
|
@layer components {
|
|
|
|
#site-header {
|
|
@apply py-8 block px-3 bg-black text-white print:hidden;
|
|
}
|
|
|
|
#site-header nav ul {
|
|
@apply flex gap-3;
|
|
}
|
|
|
|
#site-content {
|
|
@apply grid grid-cols-1 lg:grid-cols-4 gap-3;
|
|
}
|
|
|
|
aside#primary-sidebar {
|
|
@apply col-span-1;
|
|
}
|
|
|
|
aside#primary-sidebar nav {
|
|
@apply flex flex-col md:flex-row;
|
|
}
|
|
aside#primary-sidebar .menu {
|
|
@apply flex-1;
|
|
}
|
|
|
|
aside#primary-sidebar .menu h2 {
|
|
@apply font-bold;
|
|
}
|
|
|
|
aside#secondary-sidebar {
|
|
@apply col-span-1;
|
|
}
|
|
|
|
section#content-wrapper {
|
|
@apply col-span-3;
|
|
}
|
|
|
|
.divider {
|
|
@apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden;
|
|
}
|
|
}
|
|
|
|
/*
|
|
The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
|
|
*/
|
|
@layer utilities {
|
|
|
|
} |