1b167e4ca1
* feat: add support for GFM and highlight in markdown rendering * feat: enhance markdown rendering by splitting YAML frontmatter and body * feat: improve markdown styling for light and dark themes * feat: enhance frontmatter parsing and display in SkillDetail component
123 lines
2.7 KiB
CSS
123 lines
2.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@import 'github-markdown-css/github-markdown.css';
|
|
@import 'highlight.js/styles/github.css' (prefers-color-scheme: light);
|
|
@import 'highlight.js/styles/github-dark.css' (prefers-color-scheme: dark);
|
|
|
|
.markdown-body {
|
|
color: var(--color-slate-800);
|
|
}
|
|
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4,
|
|
.markdown-body h5,
|
|
.markdown-body h6 {
|
|
color: var(--color-slate-900);
|
|
}
|
|
|
|
.markdown-body hr,
|
|
.markdown-body table tr,
|
|
.markdown-body table th,
|
|
.markdown-body table td,
|
|
.markdown-body blockquote {
|
|
border-color: var(--color-slate-200);
|
|
}
|
|
|
|
.markdown-body code {
|
|
background-color: var(--color-slate-100);
|
|
color: var(--color-slate-900);
|
|
}
|
|
|
|
.markdown-body pre {
|
|
background-color: var(--color-slate-100);
|
|
border: 1px solid var(--color-slate-200);
|
|
}
|
|
|
|
.markdown-body pre code {
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.markdown-body {
|
|
color-scheme: dark;
|
|
color: var(--color-slate-200);
|
|
}
|
|
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4,
|
|
.markdown-body h5,
|
|
.markdown-body h6 {
|
|
color: var(--color-slate-100);
|
|
}
|
|
|
|
.markdown-body hr,
|
|
.markdown-body table tr,
|
|
.markdown-body table th,
|
|
.markdown-body table td,
|
|
.markdown-body blockquote {
|
|
border-color: var(--color-slate-700);
|
|
}
|
|
|
|
.markdown-body code {
|
|
background-color: var(--color-slate-800);
|
|
color: var(--color-slate-100);
|
|
}
|
|
|
|
.markdown-body pre {
|
|
background-color: var(--color-slate-900);
|
|
border-color: var(--color-slate-700);
|
|
}
|
|
|
|
.markdown-body pre code,
|
|
.markdown-body pre .hljs,
|
|
.markdown-body pre .hljs-code,
|
|
.markdown-body pre .hljs-subst,
|
|
.markdown-body pre .hljs-punctuation,
|
|
.markdown-body pre .hljs-operator {
|
|
color: var(--color-slate-100) !important;
|
|
}
|
|
|
|
.markdown-body pre .hljs-comment,
|
|
.markdown-body pre .hljs-quote {
|
|
color: var(--color-slate-200) !important;
|
|
}
|
|
|
|
.markdown-body pre .hljs-keyword,
|
|
.markdown-body pre .hljs-selector-tag,
|
|
.markdown-body pre .hljs-built_in,
|
|
.markdown-body pre .hljs-section,
|
|
.markdown-body pre .hljs-title,
|
|
.markdown-body pre .hljs-name {
|
|
color: var(--color-sky-300) !important;
|
|
}
|
|
|
|
.markdown-body pre .hljs-string,
|
|
.markdown-body pre .hljs-literal,
|
|
.markdown-body pre .hljs-number,
|
|
.markdown-body pre .hljs-attr,
|
|
.markdown-body pre .hljs-template-tag,
|
|
.markdown-body pre .hljs-template-variable {
|
|
color: var(--color-emerald-300) !important;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-slate-50);
|
|
color: var(--color-slate-900);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: var(--color-slate-950);
|
|
color: var(--color-slate-50);
|
|
}
|
|
} |