From 334125e03bc6576e5b4c829a42128d2c699270dd Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Mon, 16 Dec 2024 13:16:29 +0100 Subject: [PATCH] site: migrate to tailwindcss v4 Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- assets/css/code.css | 81 - assets/css/fonts.css | 73 + assets/css/global.css | 81 +- assets/css/hack.css | 21 + assets/css/icons.css | 42 +- assets/css/kapa.css | 19 - assets/css/palette.css | 160 ++ assets/css/styles.css | 24 +- assets/css/syntax-dark.css | 682 ++++----- assets/css/syntax-light.css | 682 ++++----- assets/css/tailwind.config.js | 46 + assets/css/toc.css | 14 - assets/css/typography.css | 122 +- layouts/partials/utils/css.html | 4 +- package-lock.json | 2526 +++++++++---------------------- package.json | 8 +- tailwind.config.js | 277 ---- 17 files changed, 1868 insertions(+), 2994 deletions(-) delete mode 100644 assets/css/code.css create mode 100644 assets/css/fonts.css delete mode 100644 assets/css/kapa.css create mode 100644 assets/css/palette.css create mode 100644 assets/css/tailwind.config.js delete mode 100644 assets/css/toc.css delete mode 100644 tailwind.config.js diff --git a/assets/css/code.css b/assets/css/code.css deleted file mode 100644 index fa4bb4bd34b..00000000000 --- a/assets/css/code.css +++ /dev/null @@ -1,81 +0,0 @@ -@layer components { - .prose { - .highlight, - :not(pre) > code { - font-size: 0.875em; - border: 1px solid; - border-radius: theme("spacing.1"); - background: theme("colors.white"); - border-color: theme("colors.gray.light.300"); - .dark & { - background: theme("colors.gray.dark.200"); - border-color: theme("colors.gray.dark.300"); - } - } - - :not(pre) > code { - background: theme("colors.gray.light.200"); - display: inline-block; - margin: 0; - font-weight: 400; - overflow-wrap: anywhere; - padding: 0 4px; - } - - table:not(.lntable) code { - overflow-wrap: unset; - white-space: nowrap; - } - - /* Indented code blocks */ - pre:not(.chroma) { - @apply my-4 overflow-x-auto p-3; - font-size: 0.875em; - border: 1px solid; - border-radius: theme("spacing.1"); - background: theme("colors.white"); - border-color: theme("colors.gray.light.300"); - .dark & { - background: theme("colors.gray.dark.200"); - border-color: theme("colors.gray.dark.300"); - } - } - - .highlight { - @apply my-4 overflow-x-auto p-3; - - /* LineTableTD */ - .lntd { - vertical-align: top; - padding: 0; - margin: 0; - font-weight: 400; - padding: 0 4px; - &:first-child { - width: 0; - } - } - - /* LineTableTD */ - .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; - } - /* LineTable */ - .lntable { - display: table; - width: 100%; - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; - /* LineNumberColumnHighlight */ - .lntd:first-child .hl { - display: block; - } - } - } - } -} diff --git a/assets/css/fonts.css b/assets/css/fonts.css new file mode 100644 index 00000000000..e6517d35b4f --- /dev/null +++ b/assets/css/fonts.css @@ -0,0 +1,73 @@ +@import "tailwindcss"; + +@layer base { + :root { + /* + * Font faces for Roboto Flex and Roboto Mono. + * + * - https://fonts.google.com/specimen/Roboto+Flex + * - https://fonts.google.com/specimen/Roboto+Mono + * + * The TTF fonts have been compressed to woff2, + * preserving the latin character subset. + * + * */ + + /* Roboto Flex */ + @font-face { + font-family: "Roboto Flex"; + src: url("/assets/fonts/RobotoFlex.woff2") format("woff2"); + font-weight: 100 1000; /* Range of weights Roboto Flex supports */ + font-stretch: 100%; /* Range of width Roboto Flex supports */ + font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */ + font-display: fallback; + } + + /* Roboto Mono */ + @font-face { + font-family: "Roboto Mono"; + src: url("/assets/fonts/RobotoMono-Regular.woff2") format("woff2"); + font-weight: 100 700; /* Define the range of weight the variable font supports */ + font-style: normal; + font-display: fallback; + } + + /* Roboto Mono Italic */ + @font-face { + font-family: "Roboto Mono"; + src: url("/assets/fonts/RobotoMono-Italic.woff2") format("woff2"); + font-weight: 100 700; /* Define the range of weight the variable font supports */ + font-style: italic; + font-display: fallback; + } + } +} + +@theme { + /* Font variables */ + --font-sans: "Roboto Flex", system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + --font-mono: "Roboto Mono", monospace; + --font-icons: "Material Symbols Rounded"; + + /* Font sizes */ + --text-xs: 0.7143rem; + --text-xs--letter-spacing: 0.015em; + --text-xs--font-weight: 500; + --text-sm: 0.851rem; + --text-base: 14px; + --text-lg: 1.1429rem; + --text-lg--line-height: 1.75; + --text-xl: 1.2857rem; + --text-xl--letter-spacing: -0.015em; + --text-xl--font-weight: 500; + --text-2xl: 1.5rem; + --text-2xl--letter-spacing: -0.015em; + --text-2xl--font-weight: 500; + --text-3xl: 2rem; + --text-3xl--font-weight: 500; + --text-4xl: 2.5rem; + --text-4xl--letter-spacing: -0.015em; + --text-4xl--font-weight: 500; +} diff --git a/assets/css/global.css b/assets/css/global.css index fa6742830e8..85473cdab25 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,4 +1,5 @@ /* global styles */ +@import "tailwindcss"; @layer base { [x-cloak=""] { @@ -41,49 +42,61 @@ input[type="search"]::-ms-clear { display: none; } + + /* Styles for built-in Table of Contents markup */ + #TableOfContents { + .toc a { + @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline; + &[aria-current="true"], + &:hover { + @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white; + } + &:not([aria-current="true"]) { + @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white; + } + } + } } /* utility classes */ -@layer utilities { - .link { - @apply text-blue-light underline underline-offset-2 dark:text-blue-dark; - } +@utility link { + @apply text-blue-light underline underline-offset-2 dark:text-blue-dark; +} - .invertible { - @apply dark:hue-rotate-180 dark:invert dark:filter; - } +@utility invertible { + @apply dark:hue-rotate-180 dark:invert dark:filter; +} - .bg-pattern-blue { - background-color: theme(colors.white / 50%); - background-image: url('/assets/images/bg-pattern-blue.webp'); - background-blend-mode: overlay; - background-size: cover; - background-repeat: none; - .dark & { - background-color: theme(colors.black / 70%); - } +@utility bg-pattern-blue { + background-color: theme(colors.white / 50%); + background-image: url('/assets/images/bg-pattern-blue.webp'); + background-blend-mode: overlay; + background-size: cover; + background-repeat: none; + .dark & { + background-color: theme(colors.black / 70%); } +} - .bg-pattern-purple { - background-color: theme(colors.white / 50%); - background-image: url('/assets/images/bg-pattern-purple.webp'); - background-blend-mode: overlay; - background-size: cover; - background-repeat: none; - .dark & { - background-color: theme(colors.black / 70%); - } +@utility bg-pattern-purple { + background-color: theme(colors.white / 50%); + background-image: url('/assets/images/bg-pattern-purple.webp'); + background-blend-mode: overlay; + background-size: cover; + background-repeat: none; + .dark & { + background-color: theme(colors.black / 70%); } +} - .bg-pattern-verde { - background-color: theme(colors.white / 50%); - background-image: url('/assets/images/bg-pattern-verde.webp'); - background-blend-mode: overlay; - background-size: cover; - background-repeat: none; - .dark & { - background-color: theme(colors.black / 70%); - } +@utility bg-pattern-verde { + background-color: theme(colors.white / 50%); + background-image: url('/assets/images/bg-pattern-verde.webp'); + background-blend-mode: overlay; + background-size: cover; + background-repeat: none; + .dark & { + background-color: theme(colors.black / 70%); } } diff --git a/assets/css/hack.css b/assets/css/hack.css index 21d1cf744d7..e6a86464d71 100644 --- a/assets/css/hack.css +++ b/assets/css/hack.css @@ -2,3 +2,24 @@ .ot-floating-button__close { @apply flex justify-center items-center; } + +/* Kapa overrides */ +.mantine-Modal-root { + .mantine-Modal-inner { inset: 0; } + + ol { + list-style-type: decimal; + } + + .mantine-List-root { + min-width: 100%; + } + + .mantine-List-itemWrapper { + max-width: 100%; + } + + .mantine-Prism-copy { + background-color: rgb(20, 21, 23) + } +} diff --git a/assets/css/icons.css b/assets/css/icons.css index 08428273b26..bb59d53d11c 100644 --- a/assets/css/icons.css +++ b/assets/css/icons.css @@ -1,29 +1,29 @@ -@layer utilities { - .icon-svg { - svg { - font-size: 24px; - width: 1em; - height: 1em; - display: inline-block; - fill: currentColor; - } +@import "tailwindcss"; + +@utility icon-svg { + svg { + font-size: 24px; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; } +} - .icon-xs { - svg { - font-size: 12px; - } +@utility icon-xs { + svg { + font-size: 12px; } +} - .icon-sm { - svg { - font-size: 16px; - } +@utility icon-sm { + svg { + font-size: 16px; } +} - .icon-lg { - svg { - font-size: 32px; - } +@utility icon-lg { + svg { + font-size: 32px; } } diff --git a/assets/css/kapa.css b/assets/css/kapa.css deleted file mode 100644 index 5d9cb0bfb7a..00000000000 --- a/assets/css/kapa.css +++ /dev/null @@ -1,19 +0,0 @@ -.mantine-Modal-root { - .mantine-Modal-inner { inset: 0; } - - ol { - list-style-type: decimal; - } - - .mantine-List-root { - min-width: 100%; - } - - .mantine-List-itemWrapper { - max-width: 100%; - } - - .mantine-Prism-copy { - background-color: rgb(20, 21, 23) - } -} diff --git a/assets/css/palette.css b/assets/css/palette.css new file mode 100644 index 00000000000..54ad92a1c9f --- /dev/null +++ b/assets/css/palette.css @@ -0,0 +1,160 @@ +@import "tailwindcss"; + +@variant dark (&:where(.dark, .dark *)); + +@theme { + --color-transparent: transparent; + + --color-background-light: #f9f9fa; + --color-background-dark: #141b1f; + + --color-divider-light: hsla(0, 0%, 0%, 0.1); + --color-divider-dark: hsla(0, 0%, 100%, 0.05); + + /* Amber */ + --color-amber-light-100: #fff4dc; + --color-amber-light-200: #fce1a9; + --color-amber-light-300: #fbb552; + --color-amber-light-400: #dd7805; + --color-amber-light-500: #b85504; + --color-amber-light-600: #a9470f; + --color-amber-light-700: #893607; + --color-amber-light-800: #421a02; + --color-amber-light: #b85504; + + --color-amber-dark-100: #753715; + --color-amber-dark-200: #944307; + --color-amber-dark-300: #af560a; + --color-amber-dark-400: #cd6a0a; + --color-amber-dark-500: #ed8d25; + --color-amber-dark-600: #f6a650; + --color-amber-dark-700: #f8b974; + --color-amber-dark-800: #fac892; + --color-amber-dark: #ed8d25; + + /* Red */ + --color-red-light-100: #fdeaea; + --color-red-light-200: #f6cfd0; + --color-red-light-300: #eea3a5; + --color-red-light-400: #e25d68; + --color-red-light-500: #d52536; + --color-red-light-600: #b72132; + --color-red-light-700: #8b1924; + --color-red-light-800: #350a10; + --color-red-light: #d52536; + + --color-red-dark-100: #741624; + --color-red-dark-200: #951c2f; + --color-red-dark-300: #bc233c; + --color-red-dark-400: #d1334c; + --color-red-dark-500: #dd4659; + --color-red-dark-600: #e96c7c; + --color-red-dark-700: #ea8e9a; + --color-red-dark-800: #f0aab4; + --color-red-dark: #dd4659; + + /* Violet */ + --color-violet-light-100: #f7ecff; + --color-violet-light-200: #e9d4ff; + --color-violet-light-300: #c9a6ff; + --color-violet-light-400: #9860ff; + --color-violet-light-500: #7d2eff; + --color-violet-light-600: #6d00eb; + --color-violet-light-700: #5700bb; + --color-violet-light-800: #220041; + --color-violet-light: #7d2eff; + + --color-violet-dark-100: #380093; + --color-violet-dark-200: #4f00b4; + --color-violet-dark-300: #6d1cdb; + --color-violet-dark-400: #8a53ec; + --color-violet-dark-500: #a371fc; + --color-violet-dark-600: #b38bfc; + --color-violet-dark-700: #c5a6fd; + --color-violet-dark-800: #d4bdfe; + --color-violet-dark: #a371fc; + + /* Magenta */ + --color-magenta-light-100: #ffe6fb; + --color-magenta-light-200: #ffc9f6; + --color-magenta-light-300: #ffa6f0; + --color-magenta-light-400: #e950e2; + --color-magenta-light-500: #c918c0; + --color-magenta-light-600: #ab00a4; + --color-magenta-light-700: #830080; + --color-magenta-light-800: #440040; + --color-magenta-light: #c918c0; + + --color-magenta-dark-100: #7e0078; + --color-magenta-dark-200: #92008b; + --color-magenta-dark-300: #ab00a4; + --color-magenta-dark-400: #cc18c4; + --color-magenta-dark-500: #e950e2; + --color-magenta-dark-600: #ff6ff9; + --color-magenta-dark-700: #ff8afa; + --color-magenta-dark-800: #ffa4fb; + --color-magenta-dark: #e950e2; + + /* Blue */ + --color-blue-light-100: #e5f2fc; + --color-blue-light-200: #c0e0fa; + --color-blue-light-300: #8bc7f5; + --color-blue-light-400: #1c90ed; + --color-blue-light-500: #1d63ed; + --color-blue-light-600: #0c49c2; + --color-blue-light-700: #00308d; + --color-blue-light-800: #00084d; + --color-blue-light: #1d63ed; + + --color-blue-dark-100: #002ea3; + --color-blue-dark-200: #063bb7; + --color-blue-dark-300: #1351d4; + --color-blue-dark-400: #1d63ed; + --color-blue-dark-500: #3391ee; + --color-blue-dark-600: #55a4f1; + --color-blue-dark-700: #7cb9f4; + --color-blue-dark-800: #98c8f6; + --color-blue-dark: #3391ee; + + /* Green */ + --color-green-light-100: #e6f5f3; + --color-green-light-200: #c6eae1; + --color-green-light-300: #88d5c0; + --color-green-light-400: #3ba08d; + --color-green-light-500: #2e7f74; + --color-green-light-600: #1e6c5f; + --color-green-light-700: #185a51; + --color-green-light-800: #0c2c28; + --color-green-light: #2e7f74; + + --color-green-dark-100: #003f36; + --color-green-dark-200: #005045; + --color-green-dark-300: #006256; + --color-green-dark-400: #008471; + --color-green-dark-500: #00a58c; + --color-green-dark-600: #3cc1ad; + --color-green-dark-700: #7accc3; + --color-green-dark-800: #a5ddd6; + --color-green-dark: #00a58c; + + /* Gray */ + --color-gray-light-100: #f4f4f6; + --color-gray-light-200: #e1e2e6; + --color-gray-light-300: #c4c8d1; + --color-gray-light-400: #8993a5; + --color-gray-light-500: #677285; + --color-gray-light-600: #505968; + --color-gray-light-700: #393f49; + --color-gray-light-800: #17191e; + --color-gray-light: #677285; + + --color-gray-dark-100: #080b0e; + --color-gray-dark-200: #1c262d; + --color-gray-dark-300: #2d404e; + --color-gray-dark-400: #4e6a81; + --color-gray-dark-500: #7794ab; + --color-gray-dark-600: #94abbc; + --color-gray-dark-700: #adbecb; + --color-gray-dark-800: #c4d0da; + --color-gray-dark: #7794ab; +} diff --git a/assets/css/styles.css b/assets/css/styles.css index b0861321544..f9ec6cdd0f8 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,16 +1,12 @@ /* see also: tailwind.config.js */ +@import "tailwindcss"; +/* @config "tailwind.config.js"; */ -@import "tailwindcss/base"; -@import "/assets/css/global"; -@import "/assets/css/typography"; -@import "/assets/css/hack"; - -@import "tailwindcss/components"; -@import "/assets/css/code"; -@import "/assets/css/toc"; -@import "/assets/css/kapa"; - -@import "tailwindcss/utilities"; -@import "/assets/css/syntax-light"; -@import "/assets/css/syntax-dark"; -@import "/assets/css/icons"; +@import "fonts.css"; +@import "palette.css"; +@import "global.css"; +@import "typography.css"; +@import "syntax-light.css"; +@import "syntax-dark.css"; +@import "icons.css"; +@import "hack.css"; diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css index ff24a195488..a053cf09b79 100644 --- a/assets/css/syntax-dark.css +++ b/assets/css/syntax-dark.css @@ -1,343 +1,343 @@ -@layer utilities { - .syntax-dark { - /* Other */ - .x { - color: theme("colors.white"); - } - /* Error */ - .err { - color: theme("colors.red.dark.500"); - } - /* CodeLine */ - .cl { - } - /* LineHighlight */ - .hl { - min-width: fit-content; - background-color: theme("colors.gray.dark.300"); - } - .lntd:first-child .hl, - & > .chroma > code > .hl { - margin-left: -4px; - border-left: 4px solid theme("colors.gray.dark.400"); - } - /* LineNumbersTable */ - .lnt { - white-space: pre; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: theme("colors.gray.dark.400"); - } - /* LineNumbers */ - .ln { - white-space: pre; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: theme("colors.gray.dark.400"); - } - /* Line */ - .line { - display: flex; - } - /* Keyword */ - .k { - color: theme("colors.amber.dark.700"); - } - /* KeywordConstant */ - .kc { - color: theme("colors.violet.dark.700"); - } - /* KeywordDeclaration */ - .kd { - color: theme("colors.amber.dark.700"); - } - /* KeywordNamespace */ - .kn { - color: theme("colors.amber.dark.700"); - } - /* KeywordPseudo */ - .kp { - color: theme("colors.amber.dark.700"); - } - /* KeywordReserved */ - .kr { - color: theme("colors.amber.dark.700"); - } - /* KeywordType */ - .kt { - color: theme("colors.amber.dark.700"); - } - /* Name */ - .n { - color: theme("colors.violet.dark.700"); - } - /* NameAttribute */ - .na { - color: theme("colors.amber.dark.700"); - } - /* NameBuiltin */ - .nb { - color: theme("colors.amber.dark.700"); - } - /* NameBuiltinPseudo */ - .bp { - color: theme("colors.violet.dark.700"); - } - /* NameClass */ - .nc { - color: theme("colors.white"); - } - /* NameConstant */ - .no { - color: theme("colors.white"); - } - /* NameDecorator */ - .nd { - color: theme("colors.violet.dark.700"); - } - /* NameEntity */ - .ni { - color: theme("colors.amber.dark.700"); - } - /* NameException */ - .ne { - color: theme("colors.red.dark.700"); - } - /* NameFunction */ - .nf { - color: theme("colors.blue.dark.600"); - } - /* NameFunctionMagic */ - .fm { - color: theme("colors.blue.dark.600"); - } - /* NameLabel */ - .nl { - color: theme("colors.amber.dark.500"); - } - /* NameNamespace */ - .nn { - color: theme("colors.white"); - } - /* NameOther */ - .nx { - color: theme("colors.white"); - } - /* NameProperty */ - .py { - color: theme("colors.white"); - } - /* NameTag */ - .nt { - color: theme("colors.green.dark.600"); - } - /* NameVariable */ - .nv { - color: theme("colors.white"); - } - /* NameVariableClass */ - .vc { - color: theme("colors.violet.dark.600"); - } - /* NameVariableGlobal */ - .vg { - color: theme("colors.violet.dark.600"); - } - /* NameVariableInstance */ - .vi { - color: theme("colors.violet.dark.600"); - } - /* NameVariableMagic */ - .vm { - color: theme("colors.violet.dark.600"); - } - /* Literal */ - .l { - color: theme("colors.white"); - } - /* LiteralDate */ - .ld { - color: theme("colors.green.dark.600"); - } - /* LiteralString */ - .s { - color: theme("colors.white"); - } - /* LiteralStringAffix */ - .sa { - color: theme("colors.green.dark.600"); - } - /* LiteralStringBacktick */ - .sb { - color: theme("colors.green.dark.600"); - } - /* LiteralStringChar */ - .sc { - color: theme("colors.green.dark.600"); - } - /* LiteralStringDelimiter */ - .dl { - color: theme("colors.green.dark.600"); - } - /* LiteralStringDoc */ - .sd { - color: theme("colors.green.dark.600"); - } - /* LiteralStringDouble */ - .s2 { - color: theme("colors.green.dark.600"); - } - /* LiteralStringEscape */ - .se { - color: theme("colors.white"); - } - /* LiteralStringHeredoc */ - .sh { - color: theme("colors.green.dark.600"); - } - /* LiteralStringInterpol */ - .si { - color: theme("colors.green.dark.600"); - } - /* LiteralStringOther */ - .sx { - color: theme("colors.green.dark.600"); - } - /* LiteralStringRegex */ - .sr { - color: theme("colors.blue.dark.500"); - } - /* LiteralStringSingle */ - .s1 { - color: theme("colors.green.dark.600"); - } - /* LiteralStringSymbol */ - .ss { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumber */ - .m { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumberBin */ - .mb { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumberFloat */ - .mf { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumberHex */ - .mh { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumberInteger */ - .mi { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumberIntegerLong */ - .il { - color: theme("colors.blue.dark.600"); - } - /* LiteralNumberOct */ - .mo { - color: theme("colors.blue.dark.600"); - } - /* Operator */ - .o { - color: theme("colors.blue.dark.700"); - } - /* OperatorWord */ - .ow { - color: theme("colors.amber.dark.700"); - } - /* Punctuation */ - .p { - color: theme("colors.gray.dark.500"); - } - /* Comment */ - .c { - color: theme("colors.gray.dark.500"); - } - /* CommentHashbang */ - .ch { - color: theme("colors.gray.dark.500"); - } - /* CommentMultiline */ - .cm { - color: theme("colors.gray.dark.500"); - } - /* CommentSingle */ - .c1 { - color: theme("colors.gray.dark.500"); - } - /* CommentSpecial */ - .cs { - color: theme("colors.gray.dark.500"); - } - /* CommentPreproc */ - .cp { - color: theme("colors.gray.dark.500"); - } - /* CommentPreprocFile */ - .cpf { - color: theme("colors.gray.dark.500"); - } - /* Generic */ - .g { - color: theme("colors.white"); - } - /* GenericDeleted */ - .gd { - color: theme("colors.red.dark.500"); - } - /* GenericEmph */ - .ge { - color: theme("colors.white"); - } - /* GenericError */ - .gr { - color: theme("colors.red.dark.500"); - } - /* GenericHeading */ - .gh { - color: theme("colors.gray.dark.600"); - } - /* GenericInserted */ - .gi { - color: theme("colors.green.dark.500"); - } - /* GenericOutput */ - .go { - color: theme("colors.white"); - } - /* GenericPrompt */ - .gp { - user-select: none; - color: theme("colors.green.dark.400"); - } - /* GenericStrong */ - .gs { - color: theme("colors.white"); - } - /* GenericSubheading */ - .gu { - color: theme("colors.gray.dark.600"); - } - /* GenericTraceback */ - .gt { - color: theme("colors.red.dark.500"); - } - /* GenericUnderline */ - .gl { - color: theme("colors.white"); - text-decoration: underline; - } - /* TextWhitespace */ - .w { - color: theme("colors.gray.dark.100"); - } +@import "tailwindcss"; + +@utility syntax-dark { + /* Other */ + .x { + color: theme("colors.white"); + } + /* Error */ + .err { + color: theme("colors.red.dark.500"); + } + /* CodeLine */ + .cl { + } + /* LineHighlight */ + .hl { + min-width: fit-content; + background-color: theme("colors.gray.dark.300"); + } + .lntd:first-child .hl, + & > .chroma > code > .hl { + margin-left: -4px; + border-left: 4px solid theme("colors.gray.dark.400"); + } + /* LineNumbersTable */ + .lnt { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: theme("colors.gray.dark.400"); + } + /* LineNumbers */ + .ln { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: theme("colors.gray.dark.400"); + } + /* Line */ + .line { + display: flex; + } + /* Keyword */ + .k { + color: theme("colors.amber.dark.700"); + } + /* KeywordConstant */ + .kc { + color: theme("colors.violet.dark.700"); + } + /* KeywordDeclaration */ + .kd { + color: theme("colors.amber.dark.700"); + } + /* KeywordNamespace */ + .kn { + color: theme("colors.amber.dark.700"); + } + /* KeywordPseudo */ + .kp { + color: theme("colors.amber.dark.700"); + } + /* KeywordReserved */ + .kr { + color: theme("colors.amber.dark.700"); + } + /* KeywordType */ + .kt { + color: theme("colors.amber.dark.700"); + } + /* Name */ + .n { + color: theme("colors.violet.dark.700"); + } + /* NameAttribute */ + .na { + color: theme("colors.amber.dark.700"); + } + /* NameBuiltin */ + .nb { + color: theme("colors.amber.dark.700"); + } + /* NameBuiltinPseudo */ + .bp { + color: theme("colors.violet.dark.700"); + } + /* NameClass */ + .nc { + color: theme("colors.white"); + } + /* NameConstant */ + .no { + color: theme("colors.white"); + } + /* NameDecorator */ + .nd { + color: theme("colors.violet.dark.700"); + } + /* NameEntity */ + .ni { + color: theme("colors.amber.dark.700"); + } + /* NameException */ + .ne { + color: theme("colors.red.dark.700"); + } + /* NameFunction */ + .nf { + color: theme("colors.blue.dark.600"); + } + /* NameFunctionMagic */ + .fm { + color: theme("colors.blue.dark.600"); + } + /* NameLabel */ + .nl { + color: theme("colors.amber.dark.500"); + } + /* NameNamespace */ + .nn { + color: theme("colors.white"); + } + /* NameOther */ + .nx { + color: theme("colors.white"); + } + /* NameProperty */ + .py { + color: theme("colors.white"); + } + /* NameTag */ + .nt { + color: theme("colors.green.dark.600"); + } + /* NameVariable */ + .nv { + color: theme("colors.white"); + } + /* NameVariableClass */ + .vc { + color: theme("colors.violet.dark.600"); + } + /* NameVariableGlobal */ + .vg { + color: theme("colors.violet.dark.600"); + } + /* NameVariableInstance */ + .vi { + color: theme("colors.violet.dark.600"); + } + /* NameVariableMagic */ + .vm { + color: theme("colors.violet.dark.600"); + } + /* Literal */ + .l { + color: theme("colors.white"); + } + /* LiteralDate */ + .ld { + color: theme("colors.green.dark.600"); + } + /* LiteralString */ + .s { + color: theme("colors.white"); + } + /* LiteralStringAffix */ + .sa { + color: theme("colors.green.dark.600"); + } + /* LiteralStringBacktick */ + .sb { + color: theme("colors.green.dark.600"); + } + /* LiteralStringChar */ + .sc { + color: theme("colors.green.dark.600"); + } + /* LiteralStringDelimiter */ + .dl { + color: theme("colors.green.dark.600"); + } + /* LiteralStringDoc */ + .sd { + color: theme("colors.green.dark.600"); + } + /* LiteralStringDouble */ + .s2 { + color: theme("colors.green.dark.600"); + } + /* LiteralStringEscape */ + .se { + color: theme("colors.white"); + } + /* LiteralStringHeredoc */ + .sh { + color: theme("colors.green.dark.600"); + } + /* LiteralStringInterpol */ + .si { + color: theme("colors.green.dark.600"); + } + /* LiteralStringOther */ + .sx { + color: theme("colors.green.dark.600"); + } + /* LiteralStringRegex */ + .sr { + color: theme("colors.blue.dark.500"); + } + /* LiteralStringSingle */ + .s1 { + color: theme("colors.green.dark.600"); + } + /* LiteralStringSymbol */ + .ss { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumber */ + .m { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumberBin */ + .mb { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumberFloat */ + .mf { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumberHex */ + .mh { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumberInteger */ + .mi { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumberIntegerLong */ + .il { + color: theme("colors.blue.dark.600"); + } + /* LiteralNumberOct */ + .mo { + color: theme("colors.blue.dark.600"); + } + /* Operator */ + .o { + color: theme("colors.blue.dark.700"); + } + /* OperatorWord */ + .ow { + color: theme("colors.amber.dark.700"); + } + /* Punctuation */ + .p { + color: theme("colors.gray.dark.500"); + } + /* Comment */ + .c { + color: theme("colors.gray.dark.500"); + } + /* CommentHashbang */ + .ch { + color: theme("colors.gray.dark.500"); + } + /* CommentMultiline */ + .cm { + color: theme("colors.gray.dark.500"); + } + /* CommentSingle */ + .c1 { + color: theme("colors.gray.dark.500"); + } + /* CommentSpecial */ + .cs { + color: theme("colors.gray.dark.500"); + } + /* CommentPreproc */ + .cp { + color: theme("colors.gray.dark.500"); + } + /* CommentPreprocFile */ + .cpf { + color: theme("colors.gray.dark.500"); + } + /* Generic */ + .g { + color: theme("colors.white"); + } + /* GenericDeleted */ + .gd { + color: theme("colors.red.dark.500"); + } + /* GenericEmph */ + .ge { + color: theme("colors.white"); + } + /* GenericError */ + .gr { + color: theme("colors.red.dark.500"); + } + /* GenericHeading */ + .gh { + color: theme("colors.gray.dark.600"); + } + /* GenericInserted */ + .gi { + color: theme("colors.green.dark.500"); + } + /* GenericOutput */ + .go { + color: theme("colors.white"); + } + /* GenericPrompt */ + .gp { + user-select: none; + color: theme("colors.green.dark.400"); + } + /* GenericStrong */ + .gs { + color: theme("colors.white"); + } + /* GenericSubheading */ + .gu { + color: theme("colors.gray.dark.600"); + } + /* GenericTraceback */ + .gt { + color: theme("colors.red.dark.500"); + } + /* GenericUnderline */ + .gl { + color: theme("colors.white"); + text-decoration: underline; + } + /* TextWhitespace */ + .w { + color: theme("colors.gray.dark.100"); } } diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css index ba0bb789f85..8321c1f2d8b 100644 --- a/assets/css/syntax-light.css +++ b/assets/css/syntax-light.css @@ -1,343 +1,343 @@ -@layer utilities { - .syntax-light { - /* Other */ - .x { - color: theme("colors.black"); - } - /* Error */ - .err { - color: theme("colors.red.light.500"); - } - /* CodeLine */ - .cl { - } - /* LineHighlight */ - .hl { - min-width: fit-content; - background-color: theme("colors.blue.light.100"); - } - .lntd:first-child .hl, - & > .chroma > code > .hl { - margin-left: -4px; - border-left: 4px solid theme("colors.blue.light.300"); - } - /* LineNumbersTable */ - .lnt { - white-space: pre; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: theme("colors.gray.light.400"); - } - /* LineNumbers */ - .ln { - white-space: pre; - user-select: none; - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: theme("colors.gray.light.400"); - } - /* Line */ - .line { - display: flex; - } - /* Keyword */ - .k { - color: theme("colors.amber.light.500"); - } - /* KeywordConstant */ - .kc { - color: theme("colors.violet.light.400"); - } - /* KeywordDeclaration */ - .kd { - color: theme("colors.amber.light.500"); - } - /* KeywordNamespace */ - .kn { - color: theme("colors.amber.light.500"); - } - /* KeywordPseudo */ - .kp { - color: theme("colors.amber.light.500"); - } - /* KeywordReserved */ - .kr { - color: theme("colors.amber.light.500"); - } - /* KeywordType */ - .kt { - color: theme("colors.amber.light.500"); - } - /* Name */ - .n { - color: theme("colors.violet.light.400"); - } - /* NameAttribute */ - .na { - color: theme("colors.amber.light.500"); - } - /* NameBuiltin */ - .nb { - color: theme("colors.amber.light.500"); - } - /* NameBuiltinPseudo */ - .bp { - color: theme("colors.violet.light.400"); - } - /* NameClass */ - .nc { - color: theme("colors.black"); - } - /* NameConstant */ - .no { - color: theme("colors.black"); - } - /* NameDecorator */ - .nd { - color: theme("colors.violet.light.400"); - } - /* NameEntity */ - .ni { - color: theme("colors.amber.light.500"); - } - /* NameException */ - .ne { - color: theme("colors.red.light.700"); - } - /* NameFunction */ - .nf { - color: theme("colors.blue.light.600"); - } - /* NameFunctionMagic */ - .fm { - color: theme("colors.blue.light.600"); - } - /* NameLabel */ - .nl { - color: theme("colors.amber.light.700"); - } - /* NameNamespace */ - .nn { - color: theme("colors.black"); - } - /* NameOther */ - .nx { - color: theme("colors.black"); - } - /* NameProperty */ - .py { - color: theme("colors.black"); - } - /* NameTag */ - .nt { - color: theme("colors.green.light.600"); - } - /* NameVariable */ - .nv { - color: theme("colors.black"); - } - /* NameVariableClass */ - .vc { - color: theme("colors.violet.light.600"); - } - /* NameVariableGlobal */ - .vg { - color: theme("colors.violet.light.600"); - } - /* NameVariableInstance */ - .vi { - color: theme("colors.violet.light.600"); - } - /* NameVariableMagic */ - .vm { - color: theme("colors.violet.light.600"); - } - /* Literal */ - .l { - color: theme("colors.black"); - } - /* LiteralDate */ - .ld { - color: theme("colors.black"); - } - /* LiteralString */ - .s { - color: theme("colors.black"); - } - /* LiteralStringAffix */ - .sa { - color: theme("colors.green.light.600"); - } - /* LiteralStringBacktick */ - .sb { - color: theme("colors.green.light.600"); - } - /* LiteralStringChar */ - .sc { - color: theme("colors.green.light.600"); - } - /* LiteralStringDelimiter */ - .dl { - color: theme("colors.green.light.600"); - } - /* LiteralStringDoc */ - .sd { - color: #8f5902; - } - /* LiteralStringDouble */ - .s2 { - color: theme("colors.green.light.600"); - } - /* LiteralStringEscape */ - .se { - color: theme("colors.black"); - } - /* LiteralStringHeredoc */ - .sh { - color: theme("colors.green.light.600"); - } - /* LiteralStringInterpol */ - .si { - color: theme("colors.green.light.600"); - } - /* LiteralStringOther */ - .sx { - color: theme("colors.green.light.600"); - } - /* LiteralStringRegex */ - .sr { - color: theme("colors.blue.light.500"); - } - /* LiteralStringSingle */ - .s1 { - color: theme("colors.green.light.600"); - } - /* LiteralStringSymbol */ - .ss { - color: theme("colors.green.light.600"); - } - /* LiteralNumber */ - .m { - color: theme("colors.blue.light.600"); - } - /* LiteralNumberBin */ - .mb { - color: theme("colors.blue.light.600"); - } - /* LiteralNumberFloat */ - .mf { - color: theme("colors.blue.light.600"); - } - /* LiteralNumberHex */ - .mh { - color: theme("colors.blue.light.600"); - } - /* LiteralNumberInteger */ - .mi { - color: theme("colors.blue.light.600"); - } - /* LiteralNumberIntegerLong */ - .il { - color: theme("colors.blue.light.600"); - } - /* LiteralNumberOct */ - .mo { - color: theme("colors.blue.light.600"); - } - /* Operator */ - .o { - color: theme("colors.blue.light.400"); - } - /* OperatorWord */ - .ow { - color: theme("colors.amber.light.500"); - } - /* Punctuation */ - .p { - color: theme("colors.gray.light.400"); - } - /* Comment */ - .c { - color: theme("colors.gray.light.400"); - } - /* CommentHashbang */ - .ch { - color: theme("colors.gray.light.400"); - } - /* CommentMultiline */ - .cm { - color: theme("colors.gray.light.400"); - } - /* CommentSingle */ - .c1 { - color: theme("colors.gray.light.400"); - } - /* CommentSpecial */ - .cs { - color: theme("colors.gray.light.400"); - } - /* CommentPreproc */ - .cp { - color: theme("colors.gray.light.400"); - } - /* CommentPreprocFile */ - .cpf { - color: theme("colors.gray.light.400"); - } - /* Generic */ - .g { - color: theme("colors.black"); - } - /* GenericDeleted */ - .gd { - color: theme("colors.red.light.500"); - } - /* GenericEmph */ - .ge { - color: theme("colors.black"); - } - /* GenericError */ - .gr { - color: theme("colors.red.light.500"); - } - /* GenericHeading */ - .gh { - color: theme("colors.gray.light.600"); - } - /* GenericInserted */ - .gi { - color: theme("colors.green.light.500"); - } - /* GenericOutput */ - .go { - color: theme("colors.black"); - } - /* GenericPrompt */ - .gp { - user-select: none; - color: theme("colors.green.light.400"); - } - /* GenericStrong */ - .gs { - color: theme("colors.black"); - } - /* GenericSubheading */ - .gu { - color: theme("colors.gray.light.600"); - } - /* GenericTraceback */ - .gt { - color: theme("colors.red.light.500"); - } - /* GenericUnderline */ - .gl { - color: theme("colors.black"); - text-decoration: underline; - } - /* TextWhitespace */ - .w { - color: theme("colors.gray.light.100"); - } +@import "tailwindcss"; + +@utility syntax-light { + /* Other */ + .x { + color: theme("colors.black"); + } + /* Error */ + .err { + color: theme("colors.red.light.500"); + } + /* CodeLine */ + .cl { + } + /* LineHighlight */ + .hl { + min-width: fit-content; + background-color: theme("colors.blue.light.100"); + } + .lntd:first-child .hl, + & > .chroma > code > .hl { + margin-left: -4px; + border-left: 4px solid theme("colors.blue.light.300"); + } + /* LineNumbersTable */ + .lnt { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: theme("colors.gray.light.400"); + } + /* LineNumbers */ + .ln { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: theme("colors.gray.light.400"); + } + /* Line */ + .line { + display: flex; + } + /* Keyword */ + .k { + color: theme("colors.amber.light.500"); + } + /* KeywordConstant */ + .kc { + color: theme("colors.violet.light.400"); + } + /* KeywordDeclaration */ + .kd { + color: theme("colors.amber.light.500"); + } + /* KeywordNamespace */ + .kn { + color: theme("colors.amber.light.500"); + } + /* KeywordPseudo */ + .kp { + color: theme("colors.amber.light.500"); + } + /* KeywordReserved */ + .kr { + color: theme("colors.amber.light.500"); + } + /* KeywordType */ + .kt { + color: theme("colors.amber.light.500"); + } + /* Name */ + .n { + color: theme("colors.violet.light.400"); + } + /* NameAttribute */ + .na { + color: theme("colors.amber.light.500"); + } + /* NameBuiltin */ + .nb { + color: theme("colors.amber.light.500"); + } + /* NameBuiltinPseudo */ + .bp { + color: theme("colors.violet.light.400"); + } + /* NameClass */ + .nc { + color: theme("colors.black"); + } + /* NameConstant */ + .no { + color: theme("colors.black"); + } + /* NameDecorator */ + .nd { + color: theme("colors.violet.light.400"); + } + /* NameEntity */ + .ni { + color: theme("colors.amber.light.500"); + } + /* NameException */ + .ne { + color: theme("colors.red.light.700"); + } + /* NameFunction */ + .nf { + color: theme("colors.blue.light.600"); + } + /* NameFunctionMagic */ + .fm { + color: theme("colors.blue.light.600"); + } + /* NameLabel */ + .nl { + color: theme("colors.amber.light.700"); + } + /* NameNamespace */ + .nn { + color: theme("colors.black"); + } + /* NameOther */ + .nx { + color: theme("colors.black"); + } + /* NameProperty */ + .py { + color: theme("colors.black"); + } + /* NameTag */ + .nt { + color: theme("colors.green.light.600"); + } + /* NameVariable */ + .nv { + color: theme("colors.black"); + } + /* NameVariableClass */ + .vc { + color: theme("colors.violet.light.600"); + } + /* NameVariableGlobal */ + .vg { + color: theme("colors.violet.light.600"); + } + /* NameVariableInstance */ + .vi { + color: theme("colors.violet.light.600"); + } + /* NameVariableMagic */ + .vm { + color: theme("colors.violet.light.600"); + } + /* Literal */ + .l { + color: theme("colors.black"); + } + /* LiteralDate */ + .ld { + color: theme("colors.black"); + } + /* LiteralString */ + .s { + color: theme("colors.black"); + } + /* LiteralStringAffix */ + .sa { + color: theme("colors.green.light.600"); + } + /* LiteralStringBacktick */ + .sb { + color: theme("colors.green.light.600"); + } + /* LiteralStringChar */ + .sc { + color: theme("colors.green.light.600"); + } + /* LiteralStringDelimiter */ + .dl { + color: theme("colors.green.light.600"); + } + /* LiteralStringDoc */ + .sd { + color: #8f5902; + } + /* LiteralStringDouble */ + .s2 { + color: theme("colors.green.light.600"); + } + /* LiteralStringEscape */ + .se { + color: theme("colors.black"); + } + /* LiteralStringHeredoc */ + .sh { + color: theme("colors.green.light.600"); + } + /* LiteralStringInterpol */ + .si { + color: theme("colors.green.light.600"); + } + /* LiteralStringOther */ + .sx { + color: theme("colors.green.light.600"); + } + /* LiteralStringRegex */ + .sr { + color: theme("colors.blue.light.500"); + } + /* LiteralStringSingle */ + .s1 { + color: theme("colors.green.light.600"); + } + /* LiteralStringSymbol */ + .ss { + color: theme("colors.green.light.600"); + } + /* LiteralNumber */ + .m { + color: theme("colors.blue.light.600"); + } + /* LiteralNumberBin */ + .mb { + color: theme("colors.blue.light.600"); + } + /* LiteralNumberFloat */ + .mf { + color: theme("colors.blue.light.600"); + } + /* LiteralNumberHex */ + .mh { + color: theme("colors.blue.light.600"); + } + /* LiteralNumberInteger */ + .mi { + color: theme("colors.blue.light.600"); + } + /* LiteralNumberIntegerLong */ + .il { + color: theme("colors.blue.light.600"); + } + /* LiteralNumberOct */ + .mo { + color: theme("colors.blue.light.600"); + } + /* Operator */ + .o { + color: theme("colors.blue.light.400"); + } + /* OperatorWord */ + .ow { + color: theme("colors.amber.light.500"); + } + /* Punctuation */ + .p { + color: theme("colors.gray.light.400"); + } + /* Comment */ + .c { + color: theme("colors.gray.light.400"); + } + /* CommentHashbang */ + .ch { + color: theme("colors.gray.light.400"); + } + /* CommentMultiline */ + .cm { + color: theme("colors.gray.light.400"); + } + /* CommentSingle */ + .c1 { + color: theme("colors.gray.light.400"); + } + /* CommentSpecial */ + .cs { + color: theme("colors.gray.light.400"); + } + /* CommentPreproc */ + .cp { + color: theme("colors.gray.light.400"); + } + /* CommentPreprocFile */ + .cpf { + color: theme("colors.gray.light.400"); + } + /* Generic */ + .g { + color: theme("colors.black"); + } + /* GenericDeleted */ + .gd { + color: theme("colors.red.light.500"); + } + /* GenericEmph */ + .ge { + color: theme("colors.black"); + } + /* GenericError */ + .gr { + color: theme("colors.red.light.500"); + } + /* GenericHeading */ + .gh { + color: theme("colors.gray.light.600"); + } + /* GenericInserted */ + .gi { + color: theme("colors.green.light.500"); + } + /* GenericOutput */ + .go { + color: theme("colors.black"); + } + /* GenericPrompt */ + .gp { + user-select: none; + color: theme("colors.green.light.400"); + } + /* GenericStrong */ + .gs { + color: theme("colors.black"); + } + /* GenericSubheading */ + .gu { + color: theme("colors.gray.light.600"); + } + /* GenericTraceback */ + .gt { + color: theme("colors.red.light.500"); + } + /* GenericUnderline */ + .gl { + color: theme("colors.black"); + text-decoration: underline; + } + /* TextWhitespace */ + .w { + color: theme("colors.gray.light.100"); } } diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js new file mode 100644 index 00000000000..51f592f7400 --- /dev/null +++ b/assets/css/tailwind.config.js @@ -0,0 +1,46 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + theme: { + extend: { + typography: (theme) => ({ + DEFAULT: { + css: { + pre: false, + code: false, + 'pre code': false, + 'code::before': false, + 'code::after': false, + blockquote: false, + 'blockquote p:first-of-type::before': false, + 'blockquote p:last-of-type::after': false, + // light colors for prose + "--tw-prose-body": theme("colors.black"), + "--tw-prose-headings": theme("colors.black"), + "--tw-prose-lead": theme("colors.gray.light.600"), + "--tw-prose-links": theme("colors.blue.light.500"), + "--tw-prose-bold": theme("colors.black"), + "--tw-prose-counters": theme("colors.black"), + "--tw-prose-bullets": theme("colors.black"), + "--tw-prose-hr": theme("colors.divider.light"), + "--tw-prose-captions": theme("colors.gray.light.600"), + "--tw-prose-th-borders": theme("colors.gray.light.200"), + "--tw-prose-td-borders": theme("colors.gray.light.200"), + + // dark colors for prose + "--tw-prose-invert-body": theme("colors.white"), + "--tw-prose-invert-headings": theme("colors.white"), + "--tw-prose-invert-lead": theme("colors.gray.dark.600"), + "--tw-prose-invert-links": theme("colors.blue.dark.500"), + "--tw-prose-invert-bold": theme("colors.white"), + "--tw-prose-invert-counters": theme("colors.white"), + "--tw-prose-invert-bullets": theme("colors.white"), + "--tw-prose-invert-hr": theme("colors.divider.dark"), + "--tw-prose-invert-captions": theme("colors.gray.dark.600"), + "--tw-prose-invert-th-borders": theme("colors.gray.dark.200"), + "--tw-prose-invert-td-borders": theme("colors.gray.dark.300"), + }, + }, + }), + }, + }, +}; diff --git a/assets/css/toc.css b/assets/css/toc.css deleted file mode 100644 index 91ff92d7cd9..00000000000 --- a/assets/css/toc.css +++ /dev/null @@ -1,14 +0,0 @@ -@layer components { - #TableOfContents { - .toc a { - @apply block max-w-full truncate py-1 pl-2 hover:font-medium hover:no-underline; - &[aria-current="true"], - &:hover { - @apply border-l-2 border-l-gray-light bg-gradient-to-r from-gray-light-100 font-medium text-black dark:border-l-gray-dark dark:from-gray-dark-200 dark:text-white; - } - &:not([aria-current="true"]) { - @apply text-gray-light-600 hover:text-black dark:text-gray-dark-700 dark:hover:text-white; - } - } - } -} diff --git a/assets/css/typography.css b/assets/css/typography.css index 008e7af7049..4e4b99d2acd 100644 --- a/assets/css/typography.css +++ b/assets/css/typography.css @@ -1,44 +1,7 @@ -@layer base { - - /* - * Font faces for Roboto Flex and Roboto Mono. - * - * - https://fonts.google.com/specimen/Roboto+Flex - * - https://fonts.google.com/specimen/Roboto+Mono - * - * The TTF fonts have been compressed to woff2, - * preserving the latin character subset. - * - * */ - - /* Roboto Flex */ - @font-face { - font-family: 'Roboto Flex'; - src: url('/assets/fonts/RobotoFlex.woff2') format('woff2'); - font-weight: 100 1000; /* Range of weights Roboto Flex supports */ - font-stretch: 100%; /* Range of width Roboto Flex supports */ - font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */ - font-display: fallback; - } - - /* Roboto Mono */ - @font-face { - font-family: 'Roboto Mono'; - src: url('/assets/fonts/RobotoMono-Regular.woff2') format('woff2'); - font-weight: 100 700; /* Define the range of weight the variable font supports */ - font-style: normal; - font-display: fallback; - } - - /* Roboto Mono Italic */ - @font-face { - font-family: 'Roboto Mono'; - src: url('/assets/fonts/RobotoMono-Italic.woff2') format('woff2'); - font-weight: 100 700; /* Define the range of weight the variable font supports */ - font-style: italic; - font-display: fallback; - } +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; +@layer base { .prose { li { @apply my-2; @@ -73,5 +36,84 @@ @apply text-lg; line-height: 1.75; } + + /* Code */ + .highlight, + :not(pre) > code { + font-size: 0.875em; + border: 1px solid; + border-radius: theme("spacing.1"); + background: theme("colors.white"); + border-color: theme("colors.gray.light.300"); + .dark & { + background: theme("colors.gray.dark.200"); + border-color: theme("colors.gray.dark.300"); + } + } + + :not(pre) > code { + background: theme("colors.gray.light.200"); + display: inline-block; + margin: 0; + font-weight: 400; + overflow-wrap: anywhere; + padding: 0 4px; + } + + table:not(.lntable) code { + overflow-wrap: unset; + white-space: nowrap; + } + + /* Indented code blocks */ + pre:not(.chroma) { + @apply my-4 overflow-x-auto p-3; + font-size: 0.875em; + border: 1px solid; + border-radius: theme("spacing.1"); + background: theme("colors.white"); + border-color: theme("colors.gray.light.300"); + .dark & { + background: theme("colors.gray.dark.200"); + border-color: theme("colors.gray.dark.300"); + } + } + + .highlight { + @apply my-4 overflow-x-auto p-3; + + /* LineTableTD */ + .lntd { + vertical-align: top; + padding: 0; + margin: 0; + font-weight: 400; + padding: 0 4px; + &:first-child { + width: 0; + } + } + + /* LineTableTD */ + .lntd { + vertical-align: top; + padding: 0; + margin: 0; + border: 0; + } + /* LineTable */ + .lntable { + display: table; + width: 100%; + border-spacing: 0; + padding: 0; + margin: 0; + border: 0; + /* LineNumberColumnHighlight */ + .lntd:first-child .hl { + display: block; + } + } + } } } diff --git a/layouts/partials/utils/css.html b/layouts/partials/utils/css.html index 88e48d59f63..5e5a5dffeb1 100644 --- a/layouts/partials/utils/css.html +++ b/layouts/partials/utils/css.html @@ -1,7 +1,7 @@ {{ $styles := resources.Get "css/styles.css" }} -{{ $styles = $styles | css.PostCSS }} +{{ $styles = $styles | css.TailwindCSS }} {{ if hugo.IsProduction }} - {{ $styles = $styles | minify | fingerprint | resources.PostProcess }} + {{ $styles = $styles | minify | fingerprint }}