2b07c5cc3d
* Add styling for tables in Markdoc content This commit introduces consistent styles for tables in Markdoc, including adjustments for headers, footers, rows, and cells. It ensures better alignment, spacing, and visual clarity across table elements, enhancing readability and usability.
142 lines
3.1 KiB
CSS
142 lines
3.1 KiB
CSS
/*
|
|
* markdoc.css
|
|
*
|
|
* Styles for Markdoc Markdown files. Update this to customize the stylesheet for Markdoc content, such as
|
|
* the blog post, documentation, etc.
|
|
*/
|
|
|
|
.markdoc {
|
|
@apply text-foreground;
|
|
}
|
|
|
|
.markdoc h1 {
|
|
@apply mt-8 lg:mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
|
|
}
|
|
|
|
.markdoc h2 {
|
|
@apply mb-3 lg:mb-6 mt-6 lg:mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground;
|
|
}
|
|
|
|
.markdoc h3 {
|
|
@apply mt-6 lg:mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
|
|
}
|
|
|
|
.markdoc h4 {
|
|
@apply mt-4 lg:mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground;
|
|
}
|
|
|
|
.markdoc h5 {
|
|
@apply mt-3 lg:mt-6 text-base font-medium tracking-tight dark:text-white text-foreground;
|
|
}
|
|
|
|
.markdoc h6 {
|
|
@apply mt-2 text-sm font-normal tracking-tight dark:text-white text-foreground;
|
|
}
|
|
|
|
.markdoc p {
|
|
@apply mb-3 lg:mb-6 mt-2 lg:mt-4 text-base leading-7 text-muted-foreground;
|
|
}
|
|
|
|
.markdoc li {
|
|
@apply relative my-1.5 text-base leading-7 text-muted-foreground;
|
|
}
|
|
|
|
.markdoc ul > li:before {
|
|
content: '-';
|
|
|
|
@apply mr-2;
|
|
}
|
|
|
|
.markdoc ol > li:before {
|
|
@apply inline-flex font-medium text-muted-foreground;
|
|
|
|
content: counters(counts, '.') '. ';
|
|
font-feature-settings: 'tnum';
|
|
}
|
|
|
|
.markdoc b,
|
|
.markdoc strong {
|
|
@apply font-semibold text-secondary-foreground dark:text-white;
|
|
}
|
|
|
|
.markdoc img,
|
|
.markdoc video {
|
|
@apply rounded-md;
|
|
}
|
|
|
|
.markdoc ul,
|
|
.markdoc ol {
|
|
@apply pl-1;
|
|
}
|
|
|
|
.markdoc ol > li {
|
|
counter-increment: counts;
|
|
}
|
|
|
|
.markdoc ol > li:before {
|
|
@apply mr-2 inline-flex font-semibold;
|
|
|
|
content: counters(counts, '.') '. ';
|
|
font-feature-settings: 'tnum';
|
|
}
|
|
|
|
.markdoc p > code, .markdoc li > code {
|
|
@apply p-0.5 text-sm font-semibold bg-muted/50 border font-mono text-secondary-foreground;
|
|
}
|
|
|
|
.markdoc pre {
|
|
@apply overflow-x-auto bg-muted/50 rounded-md border border-border p-4 text-sm font-mono text-foreground;
|
|
}
|
|
|
|
.markdoc blockquote {
|
|
@apply my-4 border-l-8 border border-primary px-6 py-4 text-lg font-medium text-muted-foreground;
|
|
}
|
|
|
|
.markdoc a {
|
|
@apply border-b-black border-b hover:border-b-2 pb-0.5 text-secondary-foreground font-semibold dark:border-yellow-300;
|
|
}
|
|
|
|
.markdoc hr {
|
|
@apply mt-8 mb-6 border-border;
|
|
}
|
|
|
|
.markdoc [role='alert'] {
|
|
@apply py-4 m-0 my-8;
|
|
}
|
|
|
|
.markdoc [role='alert'] * {
|
|
color: inherit;
|
|
@apply m-0 p-0 text-sm;
|
|
}
|
|
|
|
.markdoc [role='alert'] h5 {
|
|
color: inherit;
|
|
}
|
|
|
|
.markdoc table {
|
|
@apply w-full caption-bottom text-sm my-4;
|
|
}
|
|
|
|
.markdoc th {
|
|
@apply [&_tr]:border-b;
|
|
}
|
|
|
|
.markdoc tbody {
|
|
@apply [&_tr:last-child]:border-0;
|
|
}
|
|
|
|
.markdoc tfoot {
|
|
@apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
|
|
}
|
|
|
|
.markdoc tr {
|
|
@apply data-[state=selected]:bg-muted border-b transition-colors;
|
|
}
|
|
|
|
.markdoc th {
|
|
@apply text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
|
|
}
|
|
|
|
.markdoc td {
|
|
@apply p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
|
|
} |