232 lines
No EOL
4.5 KiB
CSS
232 lines
No EOL
4.5 KiB
CSS
@import "tailwindcss/base";
|
|
@import "tailwindcss/components";
|
|
@import "tailwindcss/utilities";
|
|
|
|
@import "./hljs.css";
|
|
@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-foreground: 15 23 42;
|
|
--color-background: 241 245 249;
|
|
}
|
|
|
|
:root[data-mode=dark] {
|
|
--color-foreground: 241 245 249;
|
|
--color-background: 15 23 42;
|
|
}
|
|
|
|
html {
|
|
font-family: 'Inter', sans-serif;
|
|
font-feature-settings: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
.stack > * + * {
|
|
margin-block-start: var(--flow-space, 1em);
|
|
}
|
|
|
|
:root .prose {
|
|
@apply prose-inhji;
|
|
}
|
|
|
|
:root[data-mode=dark] .prose {
|
|
@apply prose-invert;
|
|
}
|
|
|
|
|
|
/*
|
|
* ============= SITE LAYOUT =============
|
|
*/
|
|
|
|
/* === SITE HEADER === */
|
|
|
|
#site-header {
|
|
@apply block px-3 py-6 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white print:hidden;
|
|
|
|
& nav ul {
|
|
@apply flex;
|
|
}
|
|
|
|
& a {
|
|
@apply p-3 rounded transition;
|
|
@apply hover:border hover:border-white;
|
|
}
|
|
}
|
|
|
|
/* === PRIMARY SIDEBAR === */
|
|
|
|
#primary-sidebar {
|
|
@apply col-span-1;
|
|
@apply prose-a:no-underline;
|
|
|
|
& nav {
|
|
@apply flex md:flex-row lg:flex-col mb-6 lg:mb-0;
|
|
}
|
|
|
|
& h3 {
|
|
@apply m-0;
|
|
}
|
|
|
|
& a.active {
|
|
@apply text-primary-500;
|
|
}
|
|
}
|
|
|
|
/* === SITE CONTENT === */
|
|
|
|
#site-content {
|
|
@apply grid grid-cols-1 lg:grid-cols-5 gap-0 lg:gap-12;
|
|
@apply sm:mt-12 px-3 sm:px-0;
|
|
|
|
#content-wrapper {
|
|
@apply col-span-4;
|
|
}
|
|
|
|
#secondary-sidebar {
|
|
@apply col-span-1;
|
|
}
|
|
}
|
|
|
|
/* === SITE FOOTER === */
|
|
|
|
#site-footer {
|
|
@apply mt-8 prose max-w-none;
|
|
}
|
|
|
|
/* === CONCERNING MULTIPLE LAYOUT BLOCKS === */
|
|
|
|
#site-content, #site-footer, #primary-sidebar, #secondary-sidebar {
|
|
@apply hover:prose-a:text-primary-600 hover:prose-a:transition;
|
|
}
|
|
|
|
/*
|
|
* ============= PAGE LAYOUT =============
|
|
*/
|
|
|
|
/* === PAGE HEADER === */
|
|
|
|
header.page-header {
|
|
@apply border-b border-foreground/50 mb-6 prose max-w-none;
|
|
}
|
|
|
|
header.page-header h1 {
|
|
@apply text-3xl leading-loose font-bold;
|
|
}
|
|
|
|
header.page-header p {
|
|
@apply mb-3;
|
|
}
|
|
|
|
/* === PAGE GRID === */
|
|
|
|
section.page-grid {
|
|
@apply grid grid-cols-1 md:grid-cols-3 gap-6;
|
|
|
|
> section {
|
|
@apply col-span-1 md:col-span-2 last:md:col-span-3;
|
|
}
|
|
|
|
> aside {
|
|
@apply print:hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
The components layer is for class-based styles that you want to be able to override with utilities.
|
|
*/
|
|
@layer components {
|
|
.note {
|
|
.note-link {
|
|
@apply text-center text-neutral-900 dark:text-neutral-100;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
@apply flex text-primary-500 items-center my-8 w-full mx-auto last:hidden;
|
|
@apply before:flex-1 before:content-[''] before:bg-neutral-500/25 before:p-[0.5px] before:mr-2;
|
|
@apply after:flex-1 after:content-[''] after:bg-neutral-500/25 after:p-[0.5px] after:ml-2;
|
|
}
|
|
|
|
.dot {
|
|
@apply before:content-['·']
|
|
}
|
|
|
|
.tag-bar {
|
|
& .letter {
|
|
@apply text-neutral-900 dark:text-neutral-100 capitalize border rounded text-sm px-2 py-1 inline-block mb-2;
|
|
}
|
|
|
|
& li {
|
|
@apply mb-2;
|
|
}
|
|
|
|
& a {
|
|
@apply text-neutral-900 dark:text-neutral-100 border rounded text-sm px-2 py-1 inline-block mb-2 transition;
|
|
}
|
|
|
|
& .count {
|
|
@apply text-sm font-mono rounded-full py-0.5 px-1 align-middle;
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
@apply flex justify-between mt-6;
|
|
|
|
& .pagination-previous, & .pagination-next {
|
|
@apply block py-2 px-3 bg-neutral-700 text-white rounded;
|
|
}
|
|
|
|
& .pagination-previous.disabled, & .pagination-next.disabled {
|
|
@apply bg-neutral-500;
|
|
}
|
|
|
|
& .pagination-list {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
/* === CARD LIST (ADMIN) === */
|
|
|
|
.card-list {
|
|
@apply flex flex-col gap-3 mt-6;
|
|
}
|
|
|
|
/* === CARD (ADMIN) === */
|
|
.card {
|
|
@apply bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 p-3 rounded;
|
|
|
|
& header {
|
|
& h2 {
|
|
@apply text-xl leading-normal;
|
|
}
|
|
}
|
|
|
|
& footer {
|
|
@apply flex gap-3 text-sm;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/*
|
|
The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
|
|
*/
|
|
@layer utilities {
|
|
.hljs {
|
|
background: transparent !important;
|
|
}
|
|
|
|
a.invalid {
|
|
@apply line-through;
|
|
}
|
|
} |