diff --git a/.github/labeler.yml b/.github/labeler.yml index c610f1df62..a4fd92c0e1 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -179,7 +179,6 @@ hugo: - hugo_stats.json - i18n/** - layouts/** - - postcss.config.js - static/** - tailwind.config.js diff --git a/assets/css/code.css b/assets/css/code.css deleted file mode 100644 index fa4bb4bd34..0000000000 --- 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/components.css b/assets/css/components.css new file mode 100644 index 0000000000..c77f6ec01a --- /dev/null +++ b/assets/css/components.css @@ -0,0 +1,100 @@ +@layer components { + .card { + @apply mt-2 mb-2 flex flex-col gap-2 rounded-sm border border-gray-200 p-3; + @apply dark:border-gray-700 dark:bg-gray-900; + @apply transition-shadow duration-200; + &:hover, + &:focus { + @apply border-gray-300 dark:border-gray-600; + } + } + .card-link:hover { + @apply !no-underline; + } + .card-header { + @apply mb-2 flex items-center gap-2; + @apply text-gray-700 dark:text-gray-100; + } + .card-icon { + @apply text-gray-700 dark:text-gray-100; + } + .card-img, + .card-img svg { + @apply m-0 flex max-h-5 min-h-5 max-w-5 min-w-5 items-center justify-center fill-current; + } + .card-title { + @apply font-semibold; + } + .card-link { + @apply block text-inherit no-underline hover:underline; + } + .card-description { + @apply text-gray-600; + @apply dark:text-gray-300; + } + + .admonition { + @apply relative mb-4 flex w-full flex-col items-start gap-3 rounded-sm px-6 py-4; + @apply bg-gray-50 dark:bg-gray-900; + } + .admonition-header { + @apply flex flex-wrap items-center gap-2; + } + .admonition-title { + @apply font-semibold; + } + .admonition-content { + @apply w-full min-w-0 flex-1 flex-wrap overflow-x-auto break-words; + color: var(--tw-prose-body); + } + .admonition-note { + @apply border-blue-400 bg-blue-50 text-blue-900; + @apply dark:border-blue-600 dark:bg-blue-950 dark:text-blue-100; + } + .admonition-tip { + @apply border-green-400 bg-green-100 text-green-900; + @apply dark:border-green-600 dark:bg-green-950 dark:text-green-100; + } + .admonition-warning { + @apply border-yellow-400 bg-yellow-50 text-yellow-900; + @apply dark:border-yellow-600 dark:bg-yellow-950 dark:text-yellow-100; + } + .admonition-danger { + @apply border-red-400 bg-red-50 text-red-900; + @apply dark:border-red-600 dark:bg-red-950 dark:text-red-100; + } + .admonition-important { + @apply border-purple-400 bg-purple-50 text-purple-900; + @apply dark:border-purple-600 dark:bg-purple-950 dark:text-purple-100; + } + .admonition-icon { + @apply flex-shrink-0; + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + display: flex; + align-items: center; + justify-content: center; + } + + .download-links { + @apply block; + @apply text-gray-800; + @apply dark:text-gray-200; + } + .download-links a { + @apply link; + } + .download-links-subcontainer { + @apply flex flex-wrap gap-2; + } + + .card-image { + @apply h-12 w-12 overflow-hidden; + } +} + +.summary-bar { + @apply my-1 mt-4 flex flex-col rounded-sm border-1 border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900; +} diff --git a/assets/css/global.css b/assets/css/global.css index fa6742830e..e1d27a0b32 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,89 +1,106 @@ /* global styles */ -@layer base { - [x-cloak=""] { +[x-cloak=""] { + display: none !important; +} +/* alpine cloak for small screens only */ +[x-cloak="sm"] { + @media (width <= 768px) { display: none !important; } - /* alpine cloak for small screens only */ - [x-cloak="sm"] { - @media (width <= 768px) { - display: none !important; - } - } +} +:root { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; - :root { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05); - &.dark { - scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10); - } - } - - mark { - @apply bg-transparent font-bold text-blue-light dark:text-blue-dark; - } - - /* Hide the clear (X) button for search inputs */ - /* Chrome, Safari, Edge, and Opera */ - input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; - appearance: none; - } - - /* Firefox */ - input[type="search"]::-moz-search-cancel-button { - display: none; - } - - /* Internet Explorer and Edge (legacy) */ - input[type="search"]::-ms-clear { - display: none; + scrollbar-color: var(--color-gray-400) rgba(0, 0, 0, 0.05); + &.dark { + scrollbar-color: var(--color-gray-700) rgba(255, 255, 255, 0.1); } } -/* utility classes */ +mark { + @apply bg-transparent font-bold text-blue-500 dark:text-blue-800; +} -@layer utilities { - .link { - @apply text-blue-light underline underline-offset-2 dark:text-blue-dark; +/* Hide the clear (X) button for search inputs */ +/* Chrome, Safari, Edge, and Opera */ +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + appearance: none; +} + +/* Firefox */ +input[type="search"]::-moz-search-cancel-button { + display: none; +} + +/* Internet Explorer and Edge (legacy) */ +input[type="search"]::-ms-clear { + display: none; +} +.prose { + code { + @apply !bg-gray-100; } - - .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; + & .highlight, + & :not(pre) > code { .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%); - } - } - - .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%); + background: var(--color-gray-900) !important; + border-color: var(--color-gray-700) !important; } } } + +.prose { + li { + @apply my-2; + > :last-child, + > :first-child { + margin: 0; + } + } + hr { + @apply mt-8 mb-4; + } + :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + color: var(--tw-prose-headings); + font-weight: 500 !important; + margin-top: 0; + margin-bottom: 0.2em !important; + line-height: 1.1111111; + } + > h2 { + @apply mt-5! mb-3! text-3xl!; + a { + @apply hover:no-underline!; + } + } + > h3 { + @apply text-2xl!; + a { + @apply hover:no-underline!; + } + } + > h4 { + a { + @apply hover:no-underline!; + } + } + > h5 { + a { + @apply hover:no-underline!; + } + } + ol { + list-style-type: decimal; + } + + ol ol { + list-style-type: lower-alpha; + } + + ol ol ol { + list-style-type: lower-roman; + } +} diff --git a/assets/css/icons.css b/assets/css/icons.css deleted file mode 100644 index 08428273b2..0000000000 --- a/assets/css/icons.css +++ /dev/null @@ -1,29 +0,0 @@ -@layer utilities { - .icon-svg { - svg { - font-size: 24px; - width: 1em; - height: 1em; - display: inline-block; - fill: currentColor; - } - } - - .icon-xs { - svg { - font-size: 12px; - } - } - - .icon-sm { - svg { - font-size: 16px; - } - } - - .icon-lg { - svg { - font-size: 32px; - } - } -} diff --git a/assets/css/lists.css b/assets/css/lists.css deleted file mode 100644 index 249f71f4f2..0000000000 --- a/assets/css/lists.css +++ /dev/null @@ -1,12 +0,0 @@ -.prose ol { - list-style-type: decimal; -} - -.prose ol ol { - list-style-type: lower-alpha; -} - -.prose ol ol ol { - list-style-type: lower-roman; -} - diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000000..d8469b419a --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,45 @@ +/* Main CSS entry point */ +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; +@source "hugo_stats.json"; + +@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; +} + +@layer theme { + @import "theme.css"; +} + +@layer base { + @import "global.css"; +} +@import "utilities.css"; +@import "syntax-dark.css"; +@import "syntax-light.css"; +@import "components.css"; + +@variant dark (&:where(.dark, .dark *)); diff --git a/assets/css/styles.css b/assets/css/styles.css deleted file mode 100644 index 377c07bcc2..0000000000 --- a/assets/css/styles.css +++ /dev/null @@ -1,16 +0,0 @@ -/* see also: 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 "tailwindcss/utilities"; -@import "/assets/css/syntax-light"; -@import "/assets/css/syntax-dark"; -@import "/assets/css/icons"; -@import "/assets/css/lists"; diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css index ff24a19548..74b0b7b2d2 100644 --- a/assets/css/syntax-dark.css +++ b/assets/css/syntax-dark.css @@ -1,343 +1,342 @@ -@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"); - } +@utility syntax-dark { + /* Other */ + .x { + color: var(--color-white-main); + } + /* Error */ + .err { + color: var(--color-red-500); + } + /* CodeLine */ + .cl { + color: var(--color-gray-200); + } + /* LineHighlight */ + .hl { + min-width: fit-content; + background-color: var(--color-gray-800); + } + .lntd:first-child .hl, + & > .chroma > code > .hl { + margin-left: -4px; + border-left: 4px solid var(--color-gray-900); + } + /* LineNumbersTable */ + .lnt { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--color-gray-900); + } + /* LineNumbers */ + .ln { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--color-gray-900); + } + /* Line */ + .line { + display: flex; + } + /* Keyword */ + .k { + color: var(--color-yellow-700); + } + /* KeywordConstant */ + .kc { + color: var(--color-violet-300); + } + /* KeywordDeclaration */ + .kd { + color: var(--color-yellow-700); + } + /* KeywordNamespace */ + .kn { + color: var(--color-yellow-700); + } + /* KeywordPseudo */ + .kp { + color: var(--color-yellow-700); + } + /* KeywordReserved */ + .kr { + color: var(--color-yellow-700); + } + /* KeywordType */ + .kt { + color: var(--color-yellow-700); + } + /* Name */ + .n { + color: var(--color-violet-300); + } + /* NameAttribute */ + .na { + color: var(--color-yellow-700); + } + /* NameBuiltin */ + .nb { + color: var(--color-yellow-700); + } + /* NameBuiltinPseudo */ + .bp { + color: var(--color-violet-300); + } + /* NameClass */ + .nc { + color: var(--color-white-main); + } + /* NameConstant */ + .no { + color: var(--color-white-main); + } + /* NameDecorator */ + .nd { + color: var(--color-violet-300); + } + /* NameEntity */ + .ni { + color: var(--color-yellow-700); + } + /* NameException */ + .ne { + color: var(--color-red-700); + } + /* NameFunction */ + .nf { + color: var(--color-blue-400); + } + /* NameFunctionMagic */ + .fm { + color: var(--color-blue-400); + } + /* NameLabel */ + .nl { + color: var(--color-yellow-500); + } + /* NameNamespace */ + .nn { + color: var(--color-white-main); + } + /* NameOther */ + .nx { + color: var(--color-white-main); + } + /* NameProperty */ + .py { + color: var(--color-violet-300); + } + /* NameTag */ + .nt { + color: var(--color-green-300); + } + /* NameVariable */ + .nv { + color: var(--color-green-500); + } + /* NameVariableClass */ + .vc { + color: var(--color-violet-600); + } + /* NameVariableGlobal */ + .vg { + color: var(--color-violet-600); + } + /* NameVariableInstance */ + .vi { + color: var(--color-violet-600); + } + /* NameVariableMagic */ + .vm { + color: var(--color-violet-600); + } + /* Literal */ + .l { + color: var(--color-white-main); + } + /* LiteralDate */ + .ld { + color: var(--color-green-600); + } + /* LiteralString */ + .s { + color: var(--color-white-main); + } + /* LiteralStringAffix */ + .sa { + color: var(--color-green-600); + } + /* LiteralStringBacktick */ + .sb { + color: var(--color-green-600); + } + /* LiteralStringChar */ + .sc { + color: var(--color-green-600); + } + /* LiteralStringDelimiter */ + .dl { + color: var(--color-green-600); + } + /* LiteralStringDoc */ + .sd { + color: var(--color-green-600); + } + /* LiteralStringDouble */ + .s2 { + color: var(--color-green-600); + } + /* LiteralStringEscape */ + .se { + color: var(--color-white-main); + } + /* LiteralStringHeredoc */ + .sh { + color: var(--color-green-600); + } + /* LiteralStringInterpol */ + .si { + color: var(--color-green-600); + } + /* LiteralStringOther */ + .sx { + color: var(--color-green-600); + } + /* LiteralStringRegex */ + .sr { + color: var(--color-blue-400); + } + /* LiteralStringSingle */ + .s1 { + color: var(--color-green-600); + } + /* LiteralStringSymbol */ + .ss { + color: var(--color-blue-400); + } + /* LiteralNumber */ + .m { + color: var(--color-blue-400); + } + /* LiteralNumberBin */ + .mb { + color: var(--color-blue-400); + } + /* LiteralNumberFloat */ + .mf { + color: var(--color-blue-400); + } + /* LiteralNumberHex */ + .mh { + color: var(--color-blue-400); + } + /* LiteralNumberInteger */ + .mi { + color: var(--color-blue-400); + } + /* LiteralNumberIntegerLong */ + .il { + color: var(--color-blue-400); + } + /* LiteralNumberOct */ + .mo { + color: var(--color-blue-400); + } + /* Operator */ + .o { + color: var(--color-blue-200); + } + /* OperatorWord */ + .ow { + color: var(--color-yellow-700); + } + /* Punctuation */ + .p { + color: var(--color-gray-500); + } + /* Comment */ + .c { + color: var(--color-gray-500); + } + /* CommentHashbang */ + .ch { + color: var(--color-gray-500); + } + /* CommentMultiline */ + .cm { + color: var(--color-gray-500); + } + /* CommentSingle */ + .c1 { + color: var(--color-gray-500); + } + /* CommentSpecial */ + .cs { + color: var(--color-gray-500); + } + /* CommentPreproc */ + .cp { + color: var(--color-gray-500); + } + /* CommentPreprocFile */ + .cpf { + color: var(--color-gray-500); + } + /* Generic */ + .g { + color: var(--color-white-main); + } + /* GenericDeleted */ + .gd { + color: var(--color-red-500); + } + /* GenericEmph */ + .ge { + color: var(--color-white-main); + } + /* GenericError */ + .gr { + color: var(--color-red-500); + } + /* GenericHeading */ + .gh { + color: var(--color-gray-600); + } + /* GenericInserted */ + .gi { + color: var(--color-green-500); + } + /* GenericOutput */ + .go { + color: var(--color-white-main); + } + /* GenericPrompt */ + .gp { + user-select: none; + color: var(--color-green-500); + } + /* GenericStrong */ + .gs { + color: var(--color-white-main); + } + /* GenericSubheading */ + .gu { + color: var(--color-gray-600); + } + /* GenericTraceback */ + .gt { + color: var(--color-red-500); + } + /* GenericUnderline */ + .gl { + color: var(--color-white-main); + text-decoration: underline; + } + /* TextWhitespace */ + .w { + color: var(--color-gray-100); } } diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css index ba0bb789f8..c43ffa79ca 100644 --- a/assets/css/syntax-light.css +++ b/assets/css/syntax-light.css @@ -1,343 +1,342 @@ -@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"); - } +@utility syntax-light { + /* Other */ + .x { + color: var(--color-black-main); + } + /* Error */ + .err { + color: var(--color-red-500); + } + /* CodeLine */ + .cl { + color: var(--color-gray-700); + } + /* LineHighlight */ + .hl { + min-width: fit-content; + background-color: var(--color-blue-100); + } + .lntd:first-child .hl, + & > .chroma > code > .hl { + margin-left: -4px; + border-left: 4px solid var(--color-blue-300); + } + /* LineNumbersTable */ + .lnt { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--color-gray-400); + } + /* LineNumbers */ + .ln { + white-space: pre; + user-select: none; + margin-right: 0.4em; + padding: 0 0.4em 0 0.4em; + color: var(--color-gray-400); + } + /* Line */ + .line { + display: flex; + } + /* Keyword */ + .k { + color: var(--color-yellow-700); + } + /* KeywordConstant */ + .kc { + color: var(--color-violet-400); + } + /* KeywordDeclaration */ + .kd { + color: var(--color-yellow-700); + } + /* KeywordNamespace */ + .kn { + color: var(--color-yellow-700); + } + /* KeywordPseudo */ + .kp { + color: var(--color-yellow-700); + } + /* KeywordReserved */ + .kr { + color: var(--color-yellow-700); + } + /* KeywordType */ + .kt { + color: var(--color-yellow-700); + } + /* Name */ + .n { + color: var(--color-violet-400); + } + /* NameAttribute */ + .na { + color: var(--color-yellow-700); + } + /* NameBuiltin */ + .nb { + color: var(--color-yellow-800); + } + /* NameBuiltinPseudo */ + .bp { + color: var(--color-violet-400); + } + /* NameClass */ + .nc { + color: var(--color-black-main); + } + /* NameConstant */ + .no { + color: var(--color-black-main); + } + /* NameDecorator */ + .nd { + color: var(--color-violet-400); + } + /* NameEntity */ + .ni { + color: var(--color-yellow-700); + } + /* NameException */ + .ne { + color: var(--color-red-700); + } + /* NameFunction */ + .nf { + color: var(--color-blue-500); + } + /* NameFunctionMagic */ + .fm { + color: var(--color-blue-500); + } + /* NameLabel */ + .nl { + color: var(--color-yellow-700); + } + /* NameNamespace */ + .nn { + color: var(--color-black-main); + } + /* NameOther */ + .nx { + color: var(--color-black-main); + } + /* NameProperty */ + .py { + color: var(--color-black-main); + } + /* NameTag */ + .nt { + color: var(--color-blue-400); + } + /* NameVariable */ + .nv { + color: var(--color-black-main); + } + /* NameVariableClass */ + .vc { + color: var(--color-violet-600); + } + /* NameVariableGlobal */ + .vg { + color: var(--color-violet-600); + } + /* NameVariableInstance */ + .vi { + color: var(--color-violet-600); + } + /* NameVariableMagic */ + .vm { + color: var(--color-violet-600); + } + /* Literal */ + .l { + color: var(--color-black-main); + } + /* LiteralDate */ + .ld { + color: var(--color-black-main); + } + /* LiteralString */ + .s { + color: var(--color-black-main); + } + /* LiteralStringAffix */ + .sa { + color: var(--color-green-700); + } + /* LiteralStringBacktick */ + .sb { + color: var(--color-green-700); + } + /* LiteralStringChar */ + .sc { + color: var(--color-green-700); + } + /* LiteralStringDelimiter */ + .dl { + color: var(--color-green-700); + } + /* LiteralStringDoc */ + .sd { + color: #8f5902; + } + /* LiteralStringDouble */ + .s2 { + color: var(--color-green-700); + } + /* LiteralStringEscape */ + .se { + color: var(--color-black-main); + } + /* LiteralStringHeredoc */ + .sh { + color: var(--color-green-700); + } + /* LiteralStringInterpol */ + .si { + color: var(--color-green-700); + } + /* LiteralStringOther */ + .sx { + color: var(--color-green-700); + } + /* LiteralStringRegex */ + .sr { + color: var(--color-blue-500); + } + /* LiteralStringSingle */ + .s1 { + color: var(--color-green-700); + } + /* LiteralStringSymbol */ + .ss { + color: var(--color-green-700); + } + /* LiteralNumber */ + .m { + color: var(--color-blue-500); + } + /* LiteralNumberBin */ + .mb { + color: var(--color-blue-500); + } + /* LiteralNumberFloat */ + .mf { + color: var(--color-blue-500); + } + /* LiteralNumberHex */ + .mh { + color: var(--color-blue-500); + } + /* LiteralNumberInteger */ + .mi { + color: var(--color-blue-500); + } + /* LiteralNumberIntegerLong */ + .il { + color: var(--color-blue-500); + } + /* LiteralNumberOct */ + .mo { + color: var(--color-blue-500); + } + /* Operator */ + .o { + color: var(--color-blue-400); + } + /* OperatorWord */ + .ow { + color: var(--color-yellow-700); + } + /* Punctuation */ + .p { + color: var(--color-gray-400); + } + /* Comment */ + .c { + color: var(--color-gray-400); + } + /* CommentHashbang */ + .ch { + color: var(--color-gray-400); + } + /* CommentMultiline */ + .cm { + color: var(--color-gray-400); + } + /* CommentSingle */ + .c1 { + color: var(--color-gray-400); + } + /* CommentSpecial */ + .cs { + color: var(--color-gray-400); + } + /* CommentPreproc */ + .cp { + color: var(--color-gray-400); + } + /* CommentPreprocFile */ + .cpf { + color: var(--color-gray-400); + } + /* Generic */ + .g { + color: var(--color-black-main); + } + /* GenericDeleted */ + .gd { + color: var(--color-red-500); + } + /* GenericEmph */ + .ge { + color: var(--color-black-main); + } + /* GenericError */ + .gr { + color: var(--color-red-500); + } + /* GenericHeading */ + .gh { + color: var(--color-gray-600); + } + /* GenericInserted */ + .gi { + color: var(--color-green-500); + } + /* GenericOutput */ + .go { + color: var(--color-black-main); + } + /* GenericPrompt */ + .gp { + user-select: none; + color: var(--color-green-400); + } + /* GenericStrong */ + .gs { + color: var(--color-black-main); + } + /* GenericSubheading */ + .gu { + color: var(--color-gray-600); + } + /* GenericTraceback */ + .gt { + color: var(--color-red-500); + } + /* GenericUnderline */ + .gl { + color: var(--color-black-main); + text-decoration: underline; + } + /* TextWhitespace */ + .w { + color: var(--color-gray-100); } } diff --git a/assets/css/theme.css b/assets/css/theme.css new file mode 100644 index 0000000000..c47a582eec --- /dev/null +++ b/assets/css/theme.css @@ -0,0 +1,203 @@ +@theme inline { + --font-sans: "roboto flex", sans-serif; + --font-mono: "roboto flex mono", ui-monospace, SFMono-Regular, monospace; + --default-font-family: var(--font-sans); + + --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; + + --color-background-light: #f9f9fa; + --color-background-dark: #10151b; + --color-primary-blue: var(--color-blue); + + --color-divider-light: hsla(0, 0%, 0%, 0.1); + --color-divider-dark: hsla(0, 0%, 100%, 0.05); + + --card-bg-dark: #1d262d; + --card-border-dark: #516980; + --card-bg-dark: var(--color-gray-900); + --card-border-dark: var(--color-gray-700); + + --color-navbar-bg: var(--color-background-light); + --color-navbar-bg-dark: var(--color-background-dark); + --color-navbar-text: var(--color-gray-700); + --color-navbar-text-dark: var(--tw-prose-body); + --color-navbar-border-color-light: var(--tw-prose-inverse-body); + --navbar-font-size: 1rem; + --navbar-group-font-title-size: 1rem; + --color-navbar-text-dark: var(--color-gray-200); + --color-navbar-group-text-dark: var(--tw-prose-body); + + --color-blue: var(--color-blue-400); + --color-blue-100: rgba(217, 229, 252, 1); + --color-blue-200: rgba(170, 196, 248, 1); + --color-blue-300: rgba(123, 164, 244, 1); + --color-blue-400: rgba(75, 131, 241, 1); + --color-blue-50: rgba(246, 248, 254, 1); + --color-blue-500: rgba(37, 96, 255, 1); + --color-blue-600: rgba(13, 77, 242, 1); + --color-blue-700: rgba(0, 61, 181, 1); + --color-blue-800: rgba(0, 41, 120, 1); + --color-blue-900: rgba(0, 29, 86, 1); + --color-blue-950: rgba(0, 21, 60, 1); + --color-blue-focus: rgba(37, 96, 255, 0.24); + --color-blue-focusvisible: rgba(37, 96, 255, 0.32); + --color-blue-hover: rgba(37, 96, 255, 0.12); + --color-blue-outlinedborder: rgba(37, 96, 255, 0.56); + --color-blue-selected: rgba(37, 96, 255, 0.16); + + --color-gray: var(--color-gray-600); + --color-gray-100: rgba(231, 234, 239, 1); + --color-gray-200: rgba(200, 207, 218, 1); + --color-gray-300: rgba(169, 180, 198, 1); + --color-gray-400: rgba(139, 153, 178, 1); + --color-gray-50: rgba(249, 250, 251, 1); + --color-gray-500: rgba(108, 126, 157, 1); + --color-gray-600: rgba(86, 101, 129, 1); + --color-gray-700: rgba(67, 76, 95, 1); + --color-gray-800: rgba(44, 51, 63, 1); + --color-gray-900: rgba(30, 33, 41, 1); + --color-gray-950: rgb(18, 21, 31); + --color-gray-focus: rgba(108, 126, 157, 0.24); + --color-gray-focusvisible: rgba(108, 126, 157, 0.32); + --color-gray-hover: rgba(108, 126, 157, 0.12); + --color-gray-outlinedborder: rgba(108, 126, 157, 0.56); + --color-gray-selected: rgba(108, 126, 157, 0.16); + + --color-green-100: rgba(235, 249, 238, 1); + --color-green-200: rgba(208, 241, 215, 1); + --color-green-300: rgba(169, 229, 189, 1); + --color-green-400: rgba(129, 217, 162, 1); + --color-green-50: rgba(245, 252, 247, 1); + --color-green-500: rgba(90, 206, 140, 1); + --color-green-600: rgba(56, 189, 125, 1); + --color-green-700: rgba(45, 149, 104, 1); + --color-green-800: rgba(33, 110, 75, 1); + --color-green-900: rgba(23, 75, 50, 1); + --color-green-950: rgba(17, 55, 26, 1); + --color-green-focus: rgba(56, 189, 125, 0.24); + --color-green-focusvisible: rgba(56, 189, 125, 0.32); + --color-green-hover: rgba(56, 189, 125, 0.12); + --color-green-outlinedborder: rgba(56, 189, 125, 0.56); + --color-green-selected: rgba(56, 189, 125, 0.16); + + --color-orange-100: rgba(255, 233, 217, 1); + --color-orange-200: rgba(255, 216, 187, 1); + --color-orange-300: rgba(255, 196, 153, 1); + --color-orange-400: rgba(255, 169, 107, 1); + --color-orange-50: rgba(255, 249, 245, 1); + --color-orange-500: rgba(255, 135, 49, 1); + --color-orange-600: rgba(255, 107, 0, 1); + --color-orange-700: rgba(218, 92, 0, 1); + --color-orange-800: rgba(173, 72, 0, 1); + --color-orange-900: rgba(137, 58, 1, 1); + --color-orange-950: rgba(94, 40, 0, 1); + --color-orange-focus: rgba(255, 107, 0, 0.24); + --color-orange-focusvisible: rgba(255, 107, 0, 0.32); + --color-orange-hover: rgba(255, 107, 0, 0.12); + --color-orange-outlinedborder: rgba(255, 107, 0, 0.56); + --color-orange-selected: rgba(255, 107, 0, 0.16); + + --color-pink-100: rgba(255, 230, 251, 1); + --color-pink-200: rgba(255, 201, 246, 1); + --color-pink-300: rgba(255, 166, 240, 1); + --color-pink-400: rgba(252, 113, 220, 1); + --color-pink-50: rgba(255, 247, 254, 1); + --color-pink-500: rgba(237, 73, 199, 1); + --color-pink-600: rgba(201, 24, 171, 1); + --color-pink-700: rgba(171, 0, 137, 1); + --color-pink-800: rgba(131, 0, 105, 1); + --color-pink-900: rgba(109, 0, 81, 1); + --color-pink-950: rgba(85, 0, 51, 1); + --color-pink-focus: rgba(201, 24, 171, 0.24); + --color-pink-focusvisible: rgba(201, 24, 171, 0.32); + --color-pink-hover: rgba(201, 24, 171, 0.12); + --color-pink-outlinedborder: rgba(201, 24, 171, 0.56); + --color-pink-selected: rgba(201, 24, 171, 0.16); + + --color-red-100: rgba(255, 223, 223, 1); + --color-red-200: rgba(255, 194, 194, 1); + --color-red-300: rgba(255, 168, 168, 1); + --color-red-400: rgba(255, 117, 117, 1); + --color-red-50: rgba(255, 245, 245, 1); + --color-red-500: rgba(255, 87, 87, 1); + --color-red-600: rgba(244, 47, 57, 1); + --color-red-700: rgba(228, 12, 44, 1); + --color-red-800: rgba(179, 9, 9, 1); + --color-red-900: rgba(137, 0, 0, 1); + --color-red-950: rgba(110, 0, 0, 1); + --color-red-focus: rgba(244, 47, 57, 0.24); + --color-red-focusvisible: rgba(244, 47, 57, 0.32); + --color-red-hover: rgba(244, 47, 57, 0.12); + --color-red-outlinedborder: rgba(244, 47, 57, 0.56); + --color-red-selected: rgba(244, 47, 57, 0.16); + + --color-teal-100: rgba(223, 246, 246, 1); + --color-teal-200: rgba(195, 240, 241, 1); + --color-teal-300: rgba(160, 229, 232, 1); + --color-teal-400: rgba(106, 220, 222, 1); + --color-teal-50: rgba(243, 252, 252, 1); + --color-teal-500: rgba(47, 208, 210, 1); + --color-teal-600: rgba(27, 189, 191, 1); + --color-teal-700: rgba(44, 158, 160, 1); + --color-teal-800: rgba(24, 116, 115, 1); + --color-teal-900: rgba(18, 85, 85, 1); + --color-teal-950: rgba(9, 61, 61, 1); + --color-teal-focus: rgba(27, 189, 191, 0.24); + --color-teal-focusvisible: rgba(27, 189, 191, 0.32); + --color-teal-hover: rgba(27, 189, 191, 0.12); + --color-teal-outlinedborder: rgba(27, 189, 191, 0.56); + --color-teal-selected: rgba(27, 189, 191, 0.16); + + --color-violet: var(--color-violet-500); + --color-violet-100: rgba(239, 224, 255, 1); + --color-violet-200: rgba(211, 183, 255, 1); + --color-violet-300: rgba(174, 130, 255, 1); + --color-violet-400: rgba(152, 96, 255, 1); + --color-violet-50: rgba(252, 249, 255, 1); + --color-violet-500: rgba(125, 46, 255, 1); + --color-violet-600: rgba(109, 0, 235, 1); + --color-violet-700: rgba(87, 0, 187, 1); + --color-violet-800: rgba(69, 0, 147, 1); + --color-violet-900: rgba(55, 0, 118, 1); + --color-violet-950: rgba(37, 0, 80, 1); + --color-violet-focus: rgba(125, 46, 255, 0.24); + --color-violet-focusvisible: rgba(125, 46, 255, 0.32); + --color-violet-hover: rgba(125, 46, 255, 0.12); + --color-violet-outlinedborder: rgba(125, 46, 255, 0.56); + --color-violet-selected: rgba(125, 46, 255, 0.16); + + --color-white-main: rgba(255, 255, 255, 1); + --color-yellow-100: rgba(255, 245, 219, 1); + --color-yellow-200: rgba(255, 241, 204, 1); + --color-yellow-300: rgba(255, 232, 173, 1); + --color-yellow-400: rgba(255, 218, 122, 1); + --color-yellow-50: rgba(255, 251, 240, 1); + --color-yellow-500: rgba(255, 204, 72, 1); + --color-yellow-600: rgba(248, 182, 15, 1); + --color-yellow-700: rgba(235, 156, 0, 1); + --color-yellow-800: rgba(184, 110, 0, 1); + --color-yellow-900: rgba(133, 73, 0, 1); + --color-yellow-950: rgba(100, 55, 0, 1); + --color-yellow-focus: rgba(235, 156, 0, 0.24); + --color-yellow-focusvisible: rgba(235, 156, 0, 0.32); + --color-yellow-hover: rgba(235, 156, 0, 0.12); + --color-yellow-outlinedborder: rgba(235, 156, 0, 0.56); + --color-yellow-selected: rgba(235, 156, 0, 0.16); +} diff --git a/assets/css/toc.css b/assets/css/toc.css deleted file mode 100644 index 91ff92d7cd..0000000000 --- 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 deleted file mode 100644 index 008e7af704..0000000000 --- a/assets/css/typography.css +++ /dev/null @@ -1,77 +0,0 @@ -@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; - } - - .prose { - li { - @apply my-2; - > :last-child, - > :first-child { - margin: 0; - } - } - a { - font-weight: 400; - } - hr { - @apply mb-4 mt-8; - } - h1 { - @apply my-4 text-4xl; - line-height: 1.167; - } - h2 { - @apply mb-4 mt-8 text-3xl; - line-height: 1.2; - } - h3 { - @apply text-2xl; - line-height: 1.167; - } - h4 { - @apply text-xl; - line-height: 1.235; - } - h5 { - @apply text-lg; - line-height: 1.75; - } - } -} diff --git a/assets/css/utilities.css b/assets/css/utilities.css new file mode 100644 index 0000000000..5bd521f8f1 --- /dev/null +++ b/assets/css/utilities.css @@ -0,0 +1,242 @@ +@utility icon-svg { + svg { + font-size: 24px; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + } +} + +@utility icon-xs { + svg { + font-size: 12px; + } +} + +@utility icon-sm { + svg { + font-size: 16px; + } +} + +@utility icon-lg { + svg { + font-size: 32px; + } +} + +@utility text-primary-blue { + color: var(--color-primary-blue); +} + +@utility link { + @apply text-blue no-underline dark:text-blue-400; + font-weight: inherit; + &:hover { + @apply underline underline-offset-3; + } +} + +@utility invertible { + @apply dark:hue-rotate-180 dark:invert dark:filter; +} + +@utility bg-pattern-blue { + background-color: rgba(255, 255, 255, 0.5); + background-image: url("/assets/images/bg-pattern-blue.webp"); + background-blend-mode: overlay; + background-size: cover; + background-repeat: no-repeat; + .dark & { + background-color: rgba(0, 0, 0, 0.741); + } +} + +@utility bg-pattern-purple { + background-color: rgba(255, 255, 255, 0.5); + background-image: url("/assets/images/bg-pattern-purple.webp"); + background-blend-mode: overlay; + background-size: cover; + background-repeat: no-repeat; + .dark & { + background-color: rgba(0, 0, 0, 0.741); + } +} + +@utility bg-background-toc { + background-color: var(--color-navbar-bg); + .dark & { + background-color: var(--color-navbar-bg-dark); + } +} + +@utility bg-pattern-verde { + background-color: rgba(255, 255, 255, 0.5); + background-image: url("/assets/images/bg-pattern-verde.webp"); + background-blend-mode: overlay; + background-size: cover; + background-repeat: no-repeat; + .dark & { + background-color: rgba(0, 0, 0, 0.741); + } +} + +@utility icon-svg { + svg { + font-size: 24px; + width: 1em; + height: 1em; + display: inline-block; + fill: currentColor; + } +} + +@utility icon-xs { + svg { + font-size: 12px; + } +} + +@utility icon-sm { + svg { + font-size: 16px; + } +} + +@utility icon-lg { + svg { + font-size: 32px; + } +} + +@utility navbar-font { + font-size: var(--navbar-font-size); + color: var(--color-navbar-text); + .dark & { + color: var(--color-navbar-text-dark); + } +} + +@utility navbar-group-font-title { + font-size: var(--color-navbar-group-font-title-size); + @apply font-semibold uppercase; + color: var(--color-navbar-text); + .dark & { + color: var(--color-navbar-text-dark); + } +} + +@utility prose { + .highlight, + :not(pre) > code { + font-size: 0.875em; + border: 1px solid; + border-radius: 0.25rem; /* theme("spacing.1") fallback */ + background: var(--color-white-main); + border-color: var(--color-gray-300); + .dark & { + background: var(--color-gray-200); + border-color: var(--color-gray-400); + } + &::before, + &::after { + content: none !important; + } + } + + :not(pre) > code { + background: var(--color-gray-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: 0.25rem; /* theme("spacing.1") fallback */ + background: var(--color-white-main); + border-color: var(--color-gray-300); + .dark & { + background: var(--color-gray-200); + border-color: var(--color-gray-400); + } + } + + .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; + } + } + } +} + +@utility section-card { + @apply flex h-full flex-col gap-2 rounded-sm border p-4 drop-shadow-xs hover:drop-shadow-lg; + @apply text-gray dark:text-gray-200; + @apply border-gray-100 bg-gray-50 hover:border-gray-200 dark:border-gray-600 dark:bg-gray-900 hover:dark:border-gray-500; +} + +@utility section-card-text { + @apply leading-snug text-gray-800 dark:text-gray-200; +} +@utility section-card-title { + @apply text-xl font-semibold text-gray-900 dark:text-gray-100; +} + +@utility sub-button { + @apply flex w-full items-start gap-2 rounded-sm px-2 py-2 text-left text-gray-700 transition-colors hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800; +} + +@utility 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-x-gray-200 bg-gradient-to-r from-gray-50 font-medium text-black dark:border-l-gray-300 dark:from-gray-900 dark:text-white; + } + &:not([aria-current="true"]) { + @apply text-gray-600 hover:text-black dark:text-gray-100 dark:hover:text-white; + } + } +} diff --git a/assets/icons/AppleMac.svg b/assets/icons/AppleMac.svg new file mode 100644 index 0000000000..b218d8cdca --- /dev/null +++ b/assets/icons/AppleMac.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icons/Compose.svg b/assets/icons/Compose.svg similarity index 100% rename from static/assets/icons/Compose.svg rename to assets/icons/Compose.svg diff --git a/assets/icons/Linux.svg b/assets/icons/Linux.svg new file mode 100644 index 0000000000..55554f63b6 --- /dev/null +++ b/assets/icons/Linux.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icons/Scout.svg b/assets/icons/Scout.svg similarity index 100% rename from static/assets/icons/Scout.svg rename to assets/icons/Scout.svg diff --git a/static/assets/icons/Testcontainers.svg b/assets/icons/Testcontainers.svg similarity index 100% rename from static/assets/icons/Testcontainers.svg rename to assets/icons/Testcontainers.svg diff --git a/static/assets/icons/Whale.svg b/assets/icons/Whale.svg similarity index 100% rename from static/assets/icons/Whale.svg rename to assets/icons/Whale.svg diff --git a/assets/icons/Windows.svg b/assets/icons/Windows.svg new file mode 100644 index 0000000000..7244da36d9 --- /dev/null +++ b/assets/icons/Windows.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/assets/icons/go.svg b/assets/icons/go.svg similarity index 100% rename from static/assets/icons/go.svg rename to assets/icons/go.svg diff --git a/static/assets/icons/java.svg b/assets/icons/java.svg similarity index 100% rename from static/assets/icons/java.svg rename to assets/icons/java.svg diff --git a/static/assets/images/logo-build-cloud.svg b/assets/icons/logo-build-cloud.svg similarity index 100% rename from static/assets/images/logo-build-cloud.svg rename to assets/icons/logo-build-cloud.svg diff --git a/assets/icons/toolbox.svg b/assets/icons/toolbox.svg new file mode 100644 index 0000000000..ef4c016dc5 --- /dev/null +++ b/assets/icons/toolbox.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/theme/icons/edit.svg b/assets/theme/icons/edit.svg new file mode 100644 index 0000000000..2ee5ec5d2b --- /dev/null +++ b/assets/theme/icons/edit.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/theme/icons/issue.svg b/assets/theme/icons/issue.svg new file mode 100644 index 0000000000..eef2863fdf --- /dev/null +++ b/assets/theme/icons/issue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/content/get-started/get-docker.md b/content/get-started/get-docker.md index 17217e7654..b34af06fa7 100644 --- a/content/get-started/get-docker.md +++ b/content/get-started/get-docker.md @@ -31,27 +31,25 @@ section and choose the best installation path for you. > employees OR more than $10 million USD in annual revenue) requires a [paid > subscription](https://www.docker.com/pricing/). +
{{< card title="Docker Desktop for Mac" description="A native application using the macOS sandbox security model that delivers all Docker tools to your Mac." link="/desktop/setup/install/mac-install/" - icon="/assets/images/apple_48.svg" >}} - -
+ icon="/icons/AppleMac.svg" >}} {{< card title="Docker Desktop for Windows" description="A native Windows application that delivers all Docker tools to your Windows computer." link="/desktop/setup/install/windows-install/" - icon="/assets/images/windows_48.svg" >}} - -
+ icon="/icons/Windows.svg" >}} {{< card title="Docker Desktop for Linux" description="A native Linux application that delivers all Docker tools to your Linux computer." link="/desktop/setup/install/linux/" - icon="/assets/images/linux_48.svg" >}} + icon="/icons/Linux.svg" >}} +
> [!NOTE] > diff --git a/content/get-started/introduction/get-docker-desktop.md b/content/get-started/introduction/get-docker-desktop.md index 123c0ef1ce..7bb25be36e 100644 --- a/content/get-started/introduction/get-docker-desktop.md +++ b/content/get-started/introduction/get-docker-desktop.md @@ -29,21 +29,18 @@ This guide will walk you through the installation process, enabling you to exper {{< card title="Docker Desktop for Mac" description="[Download (Apple Silicon)](https://desktop.docker.com/mac/main/arm64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64) | [Download (Intel)](https://desktop.docker.com/mac/main/amd64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-amd64) | [Install instructions](/desktop/setup/install/mac-install)" - icon="/assets/images/apple_48.svg" >}} - -
+ icon="/icons/AppleMac.svg" >}} {{< card title="Docker Desktop for Windows" description="[Download](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-windows) | [Install instructions](/desktop/setup/install/windows-install)" - icon="/assets/images/windows_48.svg" >}} - -
+ icon="/icons/Windows.svg" >}} {{< card title="Docker Desktop for Linux" description="[Install instructions](/desktop/setup/install/linux/)" - icon="/assets/images/linux_48.svg" >}} + icon="/icons/Linux.svg" >}} + Once it's installed, complete the setup process and you're all set to run a Docker container. @@ -94,4 +91,3 @@ Docker Desktop simplifies container management for developers by streamlining th Now that you have Docker Desktop installed and ran your first container, it's time to start developing with containers. {{< button text="Develop with containers" url="develop-with-containers" >}} - diff --git a/content/manuals/_index.md b/content/manuals/_index.md index 558924bf10..16007f912b 100644 --- a/content/manuals/_index.md +++ b/content/manuals/_index.md @@ -25,11 +25,11 @@ params: link: /engine/ - title: Docker Compose description: Define and run multi-container applications. - icon: /assets/icons/Compose.svg + icon: /icons/Compose.svg link: /compose/ - title: Testcontainers description: Run containers programmatically in your preferred programming language. - icon: /assets/icons/Testcontainers.svg + icon: /icons/Testcontainers.svg link: /testcontainers/ ai: - title: Ask Gordon @@ -47,11 +47,11 @@ params: products: - title: Docker Desktop description: Your command center for container development. - icon: /assets/icons/Whale.svg + icon: /icons/Whale.svg link: /desktop/ - title: Build Cloud description: Build your images faster in the cloud. - icon: /assets/images/logo-build-cloud.svg + icon: /icons/logo-build-cloud.svg link: /build-cloud/ - title: Docker Hub description: Discover, share, and integrate container images. @@ -59,7 +59,7 @@ params: link: /docker-hub/ - title: Docker Scout description: Image analysis and policy evaluation. - icon: /assets/icons/Scout.svg + icon: /icons/Scout.svg link: /scout/ - title: Docker for GitHub Copilot description: Integrate Docker's capabilities with GitHub Copilot. diff --git a/content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md b/content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md index 3af9971dba..5fbc0208f4 100644 --- a/content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md +++ b/content/manuals/ai/mcp-catalog-and-toolkit/toolkit.md @@ -50,4 +50,4 @@ The following example assumes you have already installed and set up Claude Deskt Take a screenshot of docs.docker.com and then invert the colors ``` -Once you've given your consent to use the new tools, Claude spins up the Puppeteer MCP server inside a container, navigates to the target URL, captures and modify the page, and returns the screenshot. \ No newline at end of file +Once you've given your consent to use the new tools, Claude spins up the Puppeteer MCP server inside a container, navigates to the target URL, captures and modify the page, and returns the screenshot. diff --git a/content/manuals/ai/model-runner.md b/content/manuals/ai/model-runner.md index 680c87fec5..7ef5f37679 100644 --- a/content/manuals/ai/model-runner.md +++ b/content/manuals/ai/model-runner.md @@ -32,6 +32,8 @@ Models are pulled from Docker Hub the first time they're used and stored locally ## Enable Docker Model Runner +### Enable DMR in Docker Desktop + 1. Navigate to the **Features in development** tab in settings. 2. Under the **Experimental features** tab, select **Access experimental features**. 3. Select **Apply and restart**. @@ -42,6 +44,15 @@ Models are pulled from Docker Hub the first time they're used and stored locally You can now use the `docker model` command in the CLI and view and interact with your local models in the **Models** tab in the Docker Desktop Dashboard. +### Enable DMR in Docker Engine + +1. Ensure you have installed [Docker Engine](/engine/install/). +2. DMR is available as a package. To install it, run: + + ```console + apt install docker-model-plugin + ``` + ## Available commands ### Model runner status diff --git a/content/manuals/testcontainers.md b/content/manuals/testcontainers.md index 73b538a275..52a5c26560 100644 --- a/content/manuals/testcontainers.md +++ b/content/manuals/testcontainers.md @@ -18,11 +18,11 @@ intro: quickstart: - title: Testcontainers for Go description: A Go package that makes it simple to create and clean up container-based dependencies for automated integration/smoke tests. - icon: /assets/icons/go.svg + icon: /icons/go.svg link: https://golang.testcontainers.org/quickstart/ - title: Testcontainers for Java description: A Java library that supports JUnit tests, providing lightweight, throwaway instances of anything that can run in a Docker container. - icon: /assets/icons/java.svg + icon: /icons/java.svg link: https://java.testcontainers.org/ --- diff --git a/hugo.yaml b/hugo.yaml index 3677727b31..7bc30bdc40 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -46,8 +46,8 @@ build: disableTags: true # Ensure that CSS/assets changes trigger a dev server rebuild cachebusters: - - source: assets/watching/hugo_stats\.json - target: styles\.css + - source: assets/notwatching/hugo_stats\.json + target: css - source: (postcss|tailwind)\.config\.js target: css - source: assets/.*\.js @@ -278,8 +278,9 @@ module: - source: assets target: assets # Mount hugo_stats.json to the assets dir to trigger cachebust - - source: hugo_stats.json - target: assets/watching/hugo_stats.json + - disableWatch: true + source: hugo_stats.json + target: assets/notwatching/hugo_stats.json # Mount the icon files to assets so we can access them with resources.Get - source: node_modules/@material-symbols/svg-400/rounded target: assets/icons diff --git a/hugo_stats.json b/hugo_stats.json index 357cc9d7dc..aa5f14ad77 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -5,10 +5,8 @@ "!mt-0", "--mount", "--tmpfs", - "-mb-3", "-mr-8", "-mt-0.5", - "-mt-4", "-mt-8", "-top-16", "-v", @@ -133,126 +131,143 @@ "Without-systemd", "[display:none]", "absolute", + "admonition", + "admonition-content", + "admonition-danger", + "admonition-header", + "admonition-icon", + "admonition-note", + "admonition-tip", + "admonition-title", + "admonition-warning", "aspect-video", "bake-action", - "bg-amber-light", + "bg-amber-500", "bg-background-light", + "bg-background-toc", "bg-black/50", "bg-black/70", - "bg-blue-light", - "bg-blue-light-400", - "bg-blue-light-500", - "bg-cover", + "bg-blue", + "bg-blue-400", + "bg-blue-500", "bg-gradient-to-br", "bg-gradient-to-r", - "bg-gradient-to-t", - "bg-gray-light-100", - "bg-gray-light-200", - "bg-gray-light-400", - "bg-gray-light-700", - "bg-green-light", - "bg-green-light-400", - "bg-opacity-75", + "bg-gray-00", + "bg-gray-100", + "bg-gray-200", + "bg-gray-400", + "bg-gray-50", + "bg-gray-700", + "bg-green-400", + "bg-green-500", + "bg-navbar-bg", "bg-pattern-blue", "bg-pattern-purple", "bg-pattern-verde", - "bg-red-light", + "bg-red-500", "bg-transparent", - "bg-violet-light", + "bg-violet-500", "bg-white", "bg-white/10", "block", "border", "border-0", - "border-amber-light", "border-b", "border-b-4", - "border-blue-light", - "border-blue-light-500", + "border-blue", "border-divider-light", - "border-gray-light-100", - "border-gray-light-200", - "border-gray-light-400", - "border-green-light", - "border-green-light-400", + "border-gray-200", + "border-gray-300", + "border-gray-400", + "border-gray-600", + "border-green-400", "border-l-2", - "border-l-4", "border-l-magenta-light", - "border-red-light", "border-transparent", - "border-violet-light", "border-white", "bottom-0", "build-push-action", + "card", + "card-content", + "card-description", + "card-header", + "card-icon", + "card-img", + "card-link", + "card-title", "chroma", + "cls-1", + "cls-2", "col-start-2", "containerd-image-store", "cursor-pointer", - "dark:bg-amber-dark", + "dark:bg-amber-300", "dark:bg-background-dark", - "dark:bg-blue-dark", - "dark:bg-blue-dark-400", - "dark:bg-gray-dark-100", - "dark:bg-gray-dark-200", - "dark:bg-gray-dark-300", - "dark:bg-gray-dark-400", - "dark:bg-green-dark", + "dark:bg-background-toc", + "dark:bg-blue", + "dark:bg-blue-300", + "dark:bg-blue-400", + "dark:bg-blue-500", + "dark:bg-blue-800", + "dark:bg-gray-300", + "dark:bg-gray-400", + "dark:bg-gray-500", + "dark:bg-gray-800", + "dark:bg-gray-900", + "dark:bg-gray-950", + "dark:bg-green-300", + "dark:bg-green-700", "dark:bg-green-dark-400", - "dark:bg-opacity-75", - "dark:bg-red-dark", - "dark:bg-violet-dark", + "dark:bg-navbar-bg-dark", + "dark:bg-red-300", + "dark:bg-violet-300", + "dark:bg-violet-400", "dark:block", - "dark:border-amber-dark", - "dark:border-b-blue-dark-600", - "dark:border-blue-dark", + "dark:border-b-blue-600", "dark:border-divider-dark", - "dark:border-gray-dark-200", - "dark:border-gray-dark-400", - "dark:border-green-dark", - "dark:border-green-dark-400", + "dark:border-gray-100", + "dark:border-gray-400", + "dark:border-gray-50", + "dark:border-gray-700", + "dark:border-green-400", "dark:border-l-magenta-dark", - "dark:border-red-dark", - "dark:border-violet-dark", - "dark:fill-blue-dark", - "dark:focus:ring-blue-dark", - "dark:from-background-dark", - "dark:from-blue-dark-200", - "dark:from-blue-dark-400", - "dark:from-gray-dark-100", + "dark:fill-blue-300", + "dark:focus:ring-3-blue-dark", + "dark:from-blue-300", + "dark:from-blue-600", "dark:hidden", - "dark:hover:bg-blue-dark", - "dark:hover:bg-blue-dark-500", - "dark:hover:bg-gray-dark-200", - "dark:hover:bg-gray-dark-400", - "dark:hover:bg-gray-dark-500", - "dark:hover:text-blue-dark", + "dark:hover:bg-blue-400", + "dark:hover:bg-blue-500", + "dark:hover:bg-blue-700", + "dark:hover:bg-gray-500", + "dark:hover:bg-gray-800", + "dark:hover:bg-gray-900", + "dark:hover:text-blue", "dark:prose-invert", - "dark:ring-blue-dark-400", - "dark:ring-gray-dark-400", + "dark:ring-3-blue-dark-400", + "dark:ring-3-gray-dark-400", "dark:syntax-dark", - "dark:text-amber-dark", - "dark:text-blue-dark", + "dark:text-blue", + "dark:text-blue-700", "dark:text-divider-dark", - "dark:text-gray-dark", - "dark:text-gray-dark-300", - "dark:text-gray-dark-500", - "dark:text-gray-dark-600", - "dark:text-gray-dark-700", - "dark:text-gray-dark-800", - "dark:text-green-dark", + "dark:text-gray", + "dark:text-gray-100", + "dark:text-gray-200", + "dark:text-gray-300", + "dark:text-gray-400", + "dark:text-gray-500", + "dark:text-gray-900", "dark:text-magenta-dark", - "dark:text-red-dark", - "dark:text-violet-dark", "dark:text-white", - "dark:to-background-dark", - "dark:to-blue-dark-100", - "dark:to-magenta-dark-400", + "dark:to-blue-400", + "dark:to-blue-500", "docker/bake-action", "docker/build-push-action", + "download-links", + "download-links-subcontainer", "drop-shadow", - "drop-shadow-sm", "duration-300", - "fill-blue-light", + "fill-blue", "fixed", "flex", "flex-1", @@ -260,21 +275,19 @@ "flex-col", "flex-col-reverse", "flex-grow", - "flex-grow-0", "flex-none", "flex-shrink", "flex-wrap", - "focus:ring-blue-light", + "focus:ring-3-blue-light", "font-bold", "font-medium", "font-semibold", "footnote-backref", "footnote-ref", "footnotes", - "from-20%", - "from-background-light", - "from-blue-light-400", - "from-blue-light-600", + "from-blue-400", + "from-blue-600", + "gap-0", "gap-1", "gap-10", "gap-12", @@ -282,7 +295,6 @@ "gap-20", "gap-3", "gap-4", - "gap-6", "gap-8", "goat", "grid", @@ -305,20 +317,23 @@ "hidden", "hidden'", "highlight", - "hover:bg-blue-light-400", - "hover:bg-gray-light-100", - "hover:bg-gray-light-200", - "hover:bg-gray-light-300", + "hover:bg-blue", + "hover:bg-blue-400", + "hover:bg-blue-500", + "hover:bg-gray-100", + "hover:bg-gray-200", + "hover:bg-gray-300", + "hover:bg-gray-50", "hover:bg-white/20", - "hover:border-gray-light-200", "hover:border-white/20", - "hover:dark:bg-gray-dark-200", - "hover:dark:bg-gray-dark-300", - "hover:dark:border-gray-dark", - "hover:dark:text-blue-dark", - "hover:drop-shadow-lg", + "hover:dark:bg-blue-500", + "hover:dark:bg-gray-300", + "hover:dark:bg-gray-700", + "hover:dark:bg-gray-800", + "hover:dark:text-blue-400", + "hover:dark:text-blue-700", "hover:opacity-90", - "hover:text-blue-light", + "hover:text-blue", "hover:text-white", "hover:underline", "icon-lg", @@ -364,13 +379,14 @@ "max-w-56", "max-w-[1920px]", "max-w-[840px]", - "max-w-fit", "max-w-full", "max-w-none", "max-w-xl", "mb-1", "mb-2", + "mb-3", "mb-4", + "mb-6", "mb-8", "md-dropdown", "md:block", @@ -404,9 +420,10 @@ "mt-[2px]", "mx-auto", "my-0", - "my-1", "my-4", "my-6", + "navbar-font", + "navbar-group-font-title", "no-underline", "no-wrap", "not-prose", @@ -416,7 +433,7 @@ "origin-bottom-right", "origin-top-right", "ot-sdk-show-settings", - "outline-none", + "outline-hidden", "overflow-clip", "overflow-hidden", "overflow-x-auto", @@ -447,6 +464,7 @@ "pt-10", "pt-2", "pt-4", + "pt-5", "px-1", "px-2", "px-4", @@ -460,20 +478,22 @@ "right-0", "right-3", "right-8", - "ring-2", - "ring-[1.5px]", - "ring-blue-light-400", - "ring-gray-light-200", + "ring-3-2", + "ring-3-[1.5px]", + "ring-3-blue-light-400", + "ring-3-gray-light-200", "rotate-45", - "rounded", - "rounded-[6px]", - "rounded-b-lg", "rounded-full", "rounded-sm", + "rounded-sm-b-lg", "scale-50", "scale-75", + "scroll-mt-2", "scroll-mt-20", "scroll-mt-36", + "section-card", + "section-card-text", + "section-card-title", "select-none", "self-center", "self-start", @@ -490,38 +510,34 @@ "space-y-2", "space-y-4", "sticky", + "sub-button", + "summary-bar", + "svg", "svg-container", "syntax-light", "systemd-networkd", "text-2xl", - "text-amber-light", "text-base", "text-black", + "text-blue", "text-blue-light", "text-divider-light", - "text-gray-light", - "text-gray-light-200", - "text-gray-light-300", - "text-gray-light-500", - "text-gray-light-600", - "text-gray-light-800", - "text-green-light", + "text-gray", + "text-gray-100", + "text-gray-200", + "text-gray-400", + "text-gray-600", + "text-gray-800", "text-left", "text-lg", "text-magenta-light", - "text-red-light", "text-sm", - "text-violet-light", "text-white", "text-xl", "text-xs", - "to-30%", "to-50%", - "to-75%", - "to-blue-light", - "to-magenta-light-400", - "to-transparent", - "to-white", + "to-blue-200", + "to-blue-500", "toc", "top-0", "top-16", @@ -533,12 +549,10 @@ "transition-transform", "truncate", "underline-offset-2", - "uppercase", "w-2", "w-56", "w-8", "w-[1200px]", - "w-[32px]", "w-fit", "w-full", "w-screen", diff --git a/layouts/_default/_markup/render-blockquote.html b/layouts/_default/_markup/render-blockquote.html index e82786d5e5..3d3a6e60ce 100644 --- a/layouts/_default/_markup/render-blockquote.html +++ b/layouts/_default/_markup/render-blockquote.html @@ -1,41 +1,42 @@ {{- $icons := dict - "caution" "dangerous" - "important" "report" - "note" "info" - "tip" "lightbulb" - "warning" "warning" + "caution" "warning.svg" + "important" "important.svg" + "note" "info.svg" + "tip" "lightbulb.svg" + "warning" "warning.svg" }} -{{- $borders := dict - "caution" "border-red-light dark:border-red-dark" - "important" "border-violet-light dark:border-violet-dark" - "note" "border-blue-light dark:border-blue-dark" - "tip" "border-green-light dark:border-green-dark" - "warning" "border-amber-light dark:border-amber-dark" -}} -{{- $textColors := dict - "caution" "text-red-light dark:text-red-dark" - "important" "text-violet-light dark:text-violet-dark" - "note" "text-blue-light dark:text-blue-dark" - "tip" "text-green-light dark:text-green-dark" - "warning" "text-amber-light dark:text-amber-dark" +{{- $admonitionClasses := dict + "caution" "admonition admonition-danger" + "important" "admonition admonition-note" + "note" "admonition admonition-note" + "tip" "admonition admonition-tip" + "warning" "admonition admonition-warning" }} +{{- $type := cond (index $icons .AlertType) .AlertType "note" }} +{{- $iconFile := index $icons $type }} +{{- $partial := printf "admonitions/icons/%s" $iconFile }} + {{ if eq .Type "alert" }}
-

- {{ $i := index $icons .AlertType }} - {{ partialCached "icon.html" $i $i }} + class="{{ index $admonitionClasses .AlertType }} admonition not-prose"> +

+ + {{- partialCached $partial . }} - {{ i18n .AlertType }} -

- {{ .Text | safeHTML }} + + {{ printf "%s%s" (upper (substr $.AlertType 0 1)) (substr $.AlertType 1) }} + +
+
+ {{ .Text | safeHTML }} +
{{ else }}
- {{ .Text | safeHTML }} + class="admonition not-prose"> + {{ .Text | safeHTML }}
{{ end }} diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index ce6e243cb4..6ad360ef6e 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/layouts/_default/_markup/render-codeblock.html @@ -1,38 +1,65 @@ -
+
{{ with .Attributes.title }} -
{{ . }}
+
+ {{ . }} +
{{ end }}
- - {{ $lang := .Type | default "text" }} {{ $result := transform.Highlight .Inner - $lang .Options }} -
+ {{ $lang := .Type | default "text" }} + {{ $result := transform.Highlight .Inner + $lang .Options + }} +
{{ with .Attributes.collapse }} -
-
- +
+
+ +
+
+ {{ $result }} + +
-
- {{ $result }} - -
-
{{ else }} {{ $result }} {{ end }} diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 7fd16e10d1..d915d3a808 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -14,6 +14,7 @@ {{ $height := $params.Get "h" }} {{ $border := $params.Has "border" }} +
{{ with .Title }} -
{{ . }}
+
{{ . }}
{{ end }}