diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 9800874..b045e97 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,1495 +1,6 @@ -.content h1 { - margin-top: 0.5rem; - font-size: 2.25rem; - font-weight: 700; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} -:is(html[class~="dark"] .content h1) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - .content h2 { - margin-top: 2.5rem; - border-bottom-width: 1px; - border-color: rgb(229 229 229 / 0.7); - padding-bottom: 0.25rem; - font-size: 1.875rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} - @media (prefers-contrast: more) { - .content h2 { - --tw-border-opacity: 1; - border-color: rgb(163 163 163 / var(--tw-border-opacity)); - } -} - :is(html[class~="dark"] .content h2) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.1); - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - @media (prefers-contrast: more) { - :is(html[class~="dark"] .content h2) { - --tw-border-opacity: 1; - border-color: rgb(163 163 163 / var(--tw-border-opacity)); - } -} - .content h3 { - margin-top: 2rem; - font-size: 1.5rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} - :is(html[class~="dark"] .content h3) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - .content h4 { - margin-top: 2rem; - font-size: 1.25rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} - :is(html[class~="dark"] .content h4) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - .content h5 { - margin-top: 2rem; - font-size: 1.125rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} - :is(html[class~="dark"] .content h5) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - .content h6 { - margin-top: 2rem; - font-size: 1rem; - font-weight: 600; - letter-spacing: -0.015em; - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} - :is(html[class~="dark"] .content h6) { - --tw-text-opacity: 1; - color: rgb(241 245 249 / var(--tw-text-opacity)); -} - .content p { - margin-top: 1.5rem; - line-height: 1.75rem; -} - .content p:first-child { - margin-top: 0px; -} - .content a { - --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); - text-decoration-line: underline; - text-decoration-thickness: from-font; - text-underline-position: from-font; -} - .content .not-prose a { - color: currentColor; - text-decoration-line: none; -} - .content blockquote { - margin-top: 1.5rem; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - font-style: italic; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - .content blockquote:first-child { - margin-top: 0px; -} - :is([dir="ltr"] .content blockquote) { - border-left-width: 2px; - padding-left: 1.5rem; -} - :is([dir="rtl"] .content blockquote) { - border-right-width: 2px; - padding-right: 1.5rem; -} - :is(html[class~="dark"] .content blockquote) { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - .content pre:not(.code-block pre) { - margin-bottom: 1rem; - overflow-x: auto; - border-radius: 0.75rem; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); - padding-top: 1rem; - padding-bottom: 1rem; - font-size: .9em; - font-weight: 500; - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; -} - @media (prefers-contrast: more) { - .content pre:not(.code-block pre) { - border-width: 1px; - border-color: hsl(var(--primary-hue) 100% 24% / 0.2); - --tw-contrast: contrast(1.5); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - } -} - :is(html[class~="dark"] .content pre:not(.code-block pre)) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); -} - @media (prefers-contrast: more) { - :is(html[class~="dark"] .content pre:not(.code-block pre)) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.4); - } -} - .content code:not(.code-block code) { - overflow-wrap: break-word; - border-radius: 0.375rem; - border-width: 1px; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); - --tw-border-opacity: 0.04; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - --tw-bg-opacity: 0.03; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: .25em; - padding-right: .25em; - font-size: .9em; -} - :is(html[class~="dark"] .content code:not(.code-block code)) { - border-color: rgb(255 255 255 / 0.1); - background-color: rgb(255 255 255 / 0.1); -} - .content table:not(.code-block table) { - margin-top: 1.5rem; - display: block; - overflow-x: auto; - padding: 0px; -} - .content table:not(.code-block table):first-child { - margin-top: 0px; -} - .content table:not(.code-block table) tr { - margin: 0px; - border-top-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - padding: 0px; -} - .content table:not(.code-block table) tr:nth-child(even) { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - :is(html[class~="dark"] .content table:not(.code-block table) tr) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - :is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) { - background-color: rgb(75 85 99 / 0.2); -} - .content table:not(.code-block table) th { - margin: 0px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - font-weight: 600; -} - :is(html[class~="dark"] .content table:not(.code-block table) th) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - .content table:not(.code-block table) td { - margin: 0px; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - :is(html[class~="dark"] .content table:not(.code-block table) td) { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - .content ol { - margin-top: 1.5rem; - list-style-type: decimal; -} - .content ol:first-child { - margin-top: 0px; -} - :is([dir="ltr"] .content ol) { - margin-left: 1.5rem; -} - :is([dir="rtl"] .content ol) { - margin-right: 1.5rem; -} - .content ol li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .content ul { - margin-top: 1.5rem; - list-style-type: disc; -} - .content ul:first-child { - margin-top: 0px; -} - :is([dir="ltr"] .content ul) { - margin-left: 1.5rem; -} - :is([dir="rtl"] .content ul) { - margin-right: 1.5rem; -} - .content ul li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .content .not-prose ul, .content .not-prose ol { - margin: 0px; - list-style-type: none; -} - .content .not-prose ul li, .content .not-prose ol li { - margin: 0px; -} - .content kbd { - overflow-wrap: break-word; - border-radius: 0.375rem; - border-width: 1px; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); - --tw-border-opacity: 0.04; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - --tw-bg-opacity: 0.03; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: .25em; - padding-right: .25em; - font-size: .9em; -} - :is(html[class~="dark"] .content kbd) { - border-color: rgb(255 255 255 / 0.1); - background-color: rgb(255 255 255 / 0.1); -} - .content pre:not(.code-block pre).mermaid { - border-radius: 0px; - background-color: transparent; -} - :is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) { - background-color: transparent; -} - .content img { - margin-left: auto; - margin-right: auto; - margin-top: 1rem; - margin-bottom: 1rem; - border-radius: 0.375rem; -} - .content .not-prose img { - margin: 0px; - border-radius: 0px; -} - .content figure figcaption { - margin-top: 0.5rem; - display: block; - text-align: center; - font-size: .875rem; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - :is(html[class~="dark"] .content figure figcaption) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - .content .footnotes { - margin-top: 3rem; - font-size: .875rem; -} - -.subheading-anchor { - opacity: 0; - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -:is([dir="ltr"] .subheading-anchor) { - margin-left: 0.25rem; -} - -:is([dir="rtl"] .subheading-anchor) { - margin-right: 0.25rem; -} - -span:target + .subheading-anchor, - :hover > .subheading-anchor, - .subheading-anchor:focus { - opacity: 1; -} - -span + .subheading-anchor, - :hover > .subheading-anchor { - text-decoration-line: none !important; -} - -.subheading-anchor:after { - padding-left: 0.25rem; - padding-right: 0.25rem; - --tw-content: '#'; - content: var(--tw-content); - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] .subheading-anchor):after { - --tw-text-opacity: 1; - color: rgb(64 64 64 / var(--tw-text-opacity)); -} - -span:target + .subheading-anchor:after { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] span:target + .subheading-anchor):after { - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity)); -} - -article.typesetting-article { - font-size: 17px; - font-feature-settings: - 'rlig' 1, - 'calt' 1; -} - -article.typesetting-article h1 { - margin-top: 1.5rem; - margin-bottom: 1rem; - text-align: center; - font-size: 2.5rem; -} - -article.typesetting-article h2 { - border-style: none; -} - -article.typesetting-article a { - text-decoration-line: none; -} - -article.typesetting-article a:hover { - text-decoration-line: underline; -} - -article.typesetting-article p { - line-height: 2rem; -} - -article.typesetting-article code { - border-style: none; -} - -:is(html[class~="dark"] article.typesetting-article code) { - --tw-bg-opacity: 1; - background-color: rgb(64 64 64 / var(--tw-bg-opacity)); -} - -:is(html[class~="dark"] article.typesetting-article pre code) { - background-color: transparent; -} - -article.typesetting-article .subheading-anchor + a { - text-decoration-line: none; -} - -article.typesetting-article .subheading-anchor + a::after { - content: var(--tw-content); - display: none; -} - -article.typesetting-article .subheading-anchor + a:hover { - text-decoration-line: none; -} - -article details > summary::-webkit-details-marker { - display: none; -} - -article details > summary::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E"); - height: 1.2em; - width: 1.2em; - vertical-align: -4px; - } - -/* Code syntax highlight */ - -/* Light theme for syntax highlight */ - -/* Generated using `hugo gen chromastyles --style=github` */ - -.highlight { - /* Background .bg { background-color: #ffffff; } */ - /* PreWrapper .chroma { background-color: #ffffff; } */ - /* Other .chroma .x { } */ - /* CodeLine .chroma .cl { } */ - /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ - /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ - /* LineHighlight .chroma .hl { background-color: #ffffcc } */ - /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ - /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ - /* Name .chroma .n { } */ - /* NameFunctionMagic .chroma .fm { } */ - /* NameOther .chroma .nx { } */ - /* NameProperty .chroma .py { } */ - /* NameVariableMagic .chroma .vm { } */ - /* Literal .chroma .l { } */ - /* LiteralDate .chroma .ld { } */ - /* Punctuation .chroma .p { } */ - /* Generic .chroma .g { } */ -} - -/* Error */ - -.highlight .chroma .err { color: #a61717; background-color: #e3d2d2 } - -/* LineLink */ - -.highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - -/* Line */ - -.highlight .chroma .line { display: flex; } - -/* Keyword */ - -.highlight .chroma .k { color: #000000; font-weight: bold } - -/* KeywordConstant */ - -.highlight .chroma .kc { color: #000000; font-weight: bold } - -/* KeywordDeclaration */ - -.highlight .chroma .kd { color: #000000; font-weight: bold } - -/* KeywordNamespace */ - -.highlight .chroma .kn { color: #000000; font-weight: bold } - -/* KeywordPseudo */ - -.highlight .chroma .kp { color: #000000; font-weight: bold } - -/* KeywordReserved */ - -.highlight .chroma .kr { color: #000000; font-weight: bold } - -/* KeywordType */ - -.highlight .chroma .kt { color: #445588; font-weight: bold } - -/* NameAttribute */ - -.highlight .chroma .na { color: #008080 } - -/* NameBuiltin */ - -.highlight .chroma .nb { color: #0086b3 } - -/* NameBuiltinPseudo */ - -.highlight .chroma .bp { color: #999999 } - -/* NameClass */ - -.highlight .chroma .nc { color: #445588; font-weight: bold } - -/* NameConstant */ - -.highlight .chroma .no { color: #008080 } - -/* NameDecorator */ - -.highlight .chroma .nd { color: #3c5d5d; font-weight: bold } - -/* NameEntity */ - -.highlight .chroma .ni { color: #800080 } - -/* NameException */ - -.highlight .chroma .ne { color: #990000; font-weight: bold } - -/* NameFunction */ - -.highlight .chroma .nf { color: #990000; font-weight: bold } - -/* NameLabel */ - -.highlight .chroma .nl { color: #990000; font-weight: bold } - -/* NameNamespace */ - -.highlight .chroma .nn { color: #555555 } - -/* NameTag */ - -.highlight .chroma .nt { color: #000080 } - -/* NameVariable */ - -.highlight .chroma .nv { color: #008080 } - -/* NameVariableClass */ - -.highlight .chroma .vc { color: #008080 } - -/* NameVariableGlobal */ - -.highlight .chroma .vg { color: #008080 } - -/* NameVariableInstance */ - -.highlight .chroma .vi { color: #008080 } - -/* LiteralString */ - -.highlight .chroma .s { color: #dd1144 } - -/* LiteralStringAffix */ - -.highlight .chroma .sa { color: #dd1144 } - -/* LiteralStringBacktick */ - -.highlight .chroma .sb { color: #dd1144 } - -/* LiteralStringChar */ - -.highlight .chroma .sc { color: #dd1144 } - -/* LiteralStringDelimiter */ - -.highlight .chroma .dl { color: #dd1144 } - -/* LiteralStringDoc */ - -.highlight .chroma .sd { color: #dd1144 } - -/* LiteralStringDouble */ - -.highlight .chroma .s2 { color: #dd1144 } - -/* LiteralStringEscape */ - -.highlight .chroma .se { color: #dd1144 } - -/* LiteralStringHeredoc */ - -.highlight .chroma .sh { color: #dd1144 } - -/* LiteralStringInterpol */ - -.highlight .chroma .si { color: #dd1144 } - -/* LiteralStringOther */ - -.highlight .chroma .sx { color: #dd1144 } - -/* LiteralStringRegex */ - -.highlight .chroma .sr { color: #009926 } - -/* LiteralStringSingle */ - -.highlight .chroma .s1 { color: #dd1144 } - -/* LiteralStringSymbol */ - -.highlight .chroma .ss { color: #990073 } - -/* LiteralNumber */ - -.highlight .chroma .m { color: #009999 } - -/* LiteralNumberBin */ - -.highlight .chroma .mb { color: #009999 } - -/* LiteralNumberFloat */ - -.highlight .chroma .mf { color: #009999 } - -/* LiteralNumberHex */ - -.highlight .chroma .mh { color: #009999 } - -/* LiteralNumberInteger */ - -.highlight .chroma .mi { color: #009999 } - -/* LiteralNumberIntegerLong */ - -.highlight .chroma .il { color: #009999 } - -/* LiteralNumberOct */ - -.highlight .chroma .mo { color: #009999 } - -/* Operator */ - -.highlight .chroma .o { color: #000000; font-weight: bold } - -/* OperatorWord */ - -.highlight .chroma .ow { color: #000000; font-weight: bold } - -/* Comment */ - -.highlight .chroma .c { color: #999988; font-style: italic } - -/* CommentHashbang */ - -.highlight .chroma .ch { color: #999988; font-style: italic } - -/* CommentMultiline */ - -.highlight .chroma .cm { color: #999988; font-style: italic } - -/* CommentSingle */ - -.highlight .chroma .c1 { color: #999988; font-style: italic } - -/* CommentSpecial */ - -.highlight .chroma .cs { color: #999999; font-weight: bold; font-style: italic } - -/* CommentPreproc */ - -.highlight .chroma .cp { color: #999999; font-weight: bold; font-style: italic } - -/* CommentPreprocFile */ - -.highlight .chroma .cpf { color: #999999; font-weight: bold; font-style: italic } - -/* GenericDeleted */ - -.highlight .chroma .gd { color: #000000; background-color: #ffdddd } - -/* GenericEmph */ - -.highlight .chroma .ge { color: #000000; font-style: italic } - -/* GenericError */ - -.highlight .chroma .gr { color: #aa0000 } - -/* GenericHeading */ - -.highlight .chroma .gh { color: #999999 } - -/* GenericInserted */ - -.highlight .chroma .gi { color: #000000; background-color: #ddffdd } - -/* GenericOutput */ - -.highlight .chroma .go { color: #888888 } - -/* GenericPrompt */ - -.highlight .chroma .gp { color: #555555 } - -/* GenericStrong */ - -.highlight .chroma .gs { font-weight: bold } - -/* GenericSubheading */ - -.highlight .chroma .gu { color: #aaaaaa } - -/* GenericTraceback */ - -.highlight .chroma .gt { color: #aa0000 } - -/* GenericUnderline */ - -.highlight .chroma .gl { text-decoration: underline } - -/* TextWhitespace */ - -.highlight .chroma .w { color: #bbbbbb } - -.dark .highlight { - /* Background .bg { color: #c9d1d9; background-color: #0d1117; } - /* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */ - /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ - /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ - /* LineHighlight .chroma .hl { background-color: #ffffcc } */ - /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */ - /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */ -} - -/* Other */ - -.dark .highlight .chroma .x { } - -/* Error */ - -.dark .highlight .chroma .err { color: #f85149 } - -/* CodeLine */ - -.dark .highlight .chroma .cl { } - -/* LineLink */ - -.dark .highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } - -/* Line */ - -.dark .highlight .chroma .line { display: flex; } - -/* Keyword */ - -.dark .highlight .chroma .k { color: #ff7b72 } - -/* KeywordConstant */ - -.dark .highlight .chroma .kc { color: #79c0ff } - -/* KeywordDeclaration */ - -.dark .highlight .chroma .kd { color: #ff7b72 } - -/* KeywordNamespace */ - -.dark .highlight .chroma .kn { color: #ff7b72 } - -/* KeywordPseudo */ - -.dark .highlight .chroma .kp { color: #79c0ff } - -/* KeywordReserved */ - -.dark .highlight .chroma .kr { color: #ff7b72 } - -/* KeywordType */ - -.dark .highlight .chroma .kt { color: #ff7b72 } - -/* Name */ - -.dark .highlight .chroma .n { } - -/* NameAttribute */ - -.dark .highlight .chroma .na { } - -/* NameBuiltin */ - -.dark .highlight .chroma .nb { } - -/* NameBuiltinPseudo */ - -.dark .highlight .chroma .bp { } - -/* NameClass */ - -.dark .highlight .chroma .nc { color: #f0883e; font-weight: bold } - -/* NameConstant */ - -.dark .highlight .chroma .no { color: #79c0ff; font-weight: bold } - -/* NameDecorator */ - -.dark .highlight .chroma .nd { color: #d2a8ff; font-weight: bold } - -/* NameEntity */ - -.dark .highlight .chroma .ni { color: #ffa657 } - -/* NameException */ - -.dark .highlight .chroma .ne { color: #f0883e; font-weight: bold } - -/* NameFunction */ - -.dark .highlight .chroma .nf { color: #d2a8ff; font-weight: bold } - -/* NameFunctionMagic */ - -.dark .highlight .chroma .fm { } - -/* NameLabel */ - -.dark .highlight .chroma .nl { color: #79c0ff; font-weight: bold } - -/* NameNamespace */ - -.dark .highlight .chroma .nn { color: #ff7b72 } - -/* NameOther */ - -.dark .highlight .chroma .nx { } - -/* NameProperty */ - -.dark .highlight .chroma .py { color: #79c0ff } - -/* NameTag */ - -.dark .highlight .chroma .nt { color: #7ee787 } - -/* NameVariable */ - -.dark .highlight .chroma .nv { color: #79c0ff } - -/* NameVariableClass */ - -.dark .highlight .chroma .vc { } - -/* NameVariableGlobal */ - -.dark .highlight .chroma .vg { } - -/* NameVariableInstance */ - -.dark .highlight .chroma .vi { } - -/* NameVariableMagic */ - -.dark .highlight .chroma .vm { } - -/* Literal */ - -.dark .highlight .chroma .l { color: #a5d6ff } - -/* LiteralDate */ - -.dark .highlight .chroma .ld { color: #79c0ff } - -/* LiteralString */ - -.dark .highlight .chroma .s { color: #a5d6ff } - -/* LiteralStringAffix */ - -.dark .highlight .chroma .sa { color: #79c0ff } - -/* LiteralStringBacktick */ - -.dark .highlight .chroma .sb { color: #a5d6ff } - -/* LiteralStringChar */ - -.dark .highlight .chroma .sc { color: #a5d6ff } - -/* LiteralStringDelimiter */ - -.dark .highlight .chroma .dl { color: #79c0ff } - -/* LiteralStringDoc */ - -.dark .highlight .chroma .sd { color: #a5d6ff } - -/* LiteralStringDouble */ - -.dark .highlight .chroma .s2 { color: #a5d6ff } - -/* LiteralStringEscape */ - -.dark .highlight .chroma .se { color: #79c0ff } - -/* LiteralStringHeredoc */ - -.dark .highlight .chroma .sh { color: #79c0ff } - -/* LiteralStringInterpol */ - -.dark .highlight .chroma .si { color: #a5d6ff } - -/* LiteralStringOther */ - -.dark .highlight .chroma .sx { color: #a5d6ff } - -/* LiteralStringRegex */ - -.dark .highlight .chroma .sr { color: #79c0ff } - -/* LiteralStringSingle */ - -.dark .highlight .chroma .s1 { color: #a5d6ff } - -/* LiteralStringSymbol */ - -.dark .highlight .chroma .ss { color: #a5d6ff } - -/* LiteralNumber */ - -.dark .highlight .chroma .m { color: #a5d6ff } - -/* LiteralNumberBin */ - -.dark .highlight .chroma .mb { color: #a5d6ff } - -/* LiteralNumberFloat */ - -.dark .highlight .chroma .mf { color: #a5d6ff } - -/* LiteralNumberHex */ - -.dark .highlight .chroma .mh { color: #a5d6ff } - -/* LiteralNumberInteger */ - -.dark .highlight .chroma .mi { color: #a5d6ff } - -/* LiteralNumberIntegerLong */ - -.dark .highlight .chroma .il { color: #a5d6ff } - -/* LiteralNumberOct */ - -.dark .highlight .chroma .mo { color: #a5d6ff } - -/* Operator */ - -.dark .highlight .chroma .o { color: #ff7b72; font-weight: bold } - -/* OperatorWord */ - -.dark .highlight .chroma .ow { color: #ff7b72; font-weight: bold } - -/* Punctuation */ - -.dark .highlight .chroma .p { } - -/* Comment */ - -.dark .highlight .chroma .c { color: #8b949e; font-style: italic } - -/* CommentHashbang */ - -.dark .highlight .chroma .ch { color: #8b949e; font-style: italic } - -/* CommentMultiline */ - -.dark .highlight .chroma .cm { color: #8b949e; font-style: italic } - -/* CommentSingle */ - -.dark .highlight .chroma .c1 { color: #8b949e; font-style: italic } - -/* CommentSpecial */ - -.dark .highlight .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } - -/* CommentPreproc */ - -.dark .highlight .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } - -/* CommentPreprocFile */ - -.dark .highlight .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } - -/* Generic */ - -.dark .highlight .chroma .g { } - -/* GenericDeleted */ - -.dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 } - -/* GenericEmph */ - -.dark .highlight .chroma .ge { font-style: italic } - -/* GenericError */ - -.dark .highlight .chroma .gr { color: #ffa198 } - -/* GenericHeading */ - -.dark .highlight .chroma .gh { color: #79c0ff; font-weight: bold } - -/* GenericInserted */ - -.dark .highlight .chroma .gi { color: #56d364; background-color: #0f5323 } - -/* GenericOutput */ - -.dark .highlight .chroma .go { color: #8b949e } - -/* GenericPrompt */ - -.dark .highlight .chroma .gp { color: #8b949e } - -/* GenericStrong */ - -.dark .highlight .chroma .gs { font-weight: bold } - -/* GenericSubheading */ - -.dark .highlight .chroma .gu { color: #79c0ff } - -/* GenericTraceback */ - -.dark .highlight .chroma .gt { color: #ff7b72 } - -/* GenericUnderline */ - -.dark .highlight .chroma .gl { text-decoration: underline } - -/* TextWhitespace */ - -.dark .highlight .chroma .w { color: #6e7681 } - -.code-block { - font-size: .9em; - line-height: 1.25rem; -} - -.code-block pre { - overflow-x: auto; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); - font-size: .9em; - font-weight: 500; - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; -} - -@media (prefers-contrast: more) { - .code-block pre { - border-width: 1px; - border-color: hsl(var(--primary-hue) 100% 24% / 0.2); - --tw-contrast: contrast(1.5); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); - } -} - -:is(html[class~="dark"] .code-block pre) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); -} - -@media (prefers-contrast: more) { - :is(html[class~="dark"] .code-block pre) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.4); - } -} - -.code-block .filename { - position: absolute; - top: 0px; - z-index: 1; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - font-size: .75rem; - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] .code-block .filename) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.code-block pre:not(.lntable pre) { - margin-bottom: 1rem; - border-radius: 0.75rem; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.code-block div:nth-of-type(2) pre { - padding-top: 3rem; - padding-bottom: 1rem; -} - -.chroma .lntable { - margin: 0px; - display: block; - width: auto; - overflow: auto; - border-radius: 0.75rem; -} - -.chroma .lntable pre { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.chroma .ln, - .chroma .lnt:not(.hl > .lnt), - .chroma .hl { - min-width: 2.6rem; - padding-left: 1rem; - padding-right: 1rem; - --tw-text-opacity: 1; - color: rgb(82 82 82 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] - .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] - .chroma .hl) { - --tw-text-opacity: 1; - color: rgb(212 212 212 / var(--tw-text-opacity)); -} - -.chroma .lntd { - padding: 0px; - vertical-align: top; -} - -.chroma .lntd:last-of-type { - width: 100%; -} - -/* LineHighlight */ - -.chroma .hl { - display: block; - width: 100%; - background-color: hsl(var(--primary-hue) 100% 32% / 0.1); -} - -.hextra-cards { - grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)); -} - -.hextra-card img { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.hextra-card:hover svg { - color: currentColor; -} - -.hextra-card svg { - width: 1.5rem; - color: #00000033; - transition: color 0.3s ease; -} - -.hextra-card p { - margin-top: 0.5rem; -} - -.dark .hextra-card svg { - color: #ffffff66; -} - -.dark .hextra-card:hover svg { - color: currentColor; -} - -.steps h3 { - counter-increment: step; -} - -.steps h3:before { - position: absolute; - height: 33px; - width: 33px; - border-width: 4px; - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -:is(html[class~="dark"] .steps h3):before { - --tw-border-opacity: 1; - border-color: rgb(17 17 17 / var(--tw-border-opacity)); - --tw-bg-opacity: 1; - background-color: rgb(38 38 38 / var(--tw-bg-opacity)); -} - -.steps h3:before { - border-radius: 9999px; - text-align: center; - text-indent: -1px; - font-size: 1rem; - font-weight: 400; - --tw-text-opacity: 1; - color: rgb(163 163 163 / var(--tw-text-opacity)); - margin-top: 3px; - margin-left: -41px; - content: counter(step); -} - -.search-wrapper li { - margin-left: 0.625rem; - margin-right: 0.625rem; - overflow-wrap: break-word; - border-radius: 0.375rem; - --tw-text-opacity: 1; - color: rgb(31 41 55 / var(--tw-text-opacity)); -} - -@media (prefers-contrast: more) { - .search-wrapper li { - border-width: 1px; - border-color: transparent; - } -} - -:is(html[class~="dark"] .search-wrapper li) { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -.search-wrapper li a { - display: block; - scroll-margin: 3rem; - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.search-wrapper li .title { - font-size: 1rem; - font-weight: 600; - line-height: 1.25rem; -} - -.search-wrapper li .active { - border-radius: 0.375rem; - background-color: hsl(var(--primary-hue) 100% 50% / 0.1); -} - -@media (prefers-contrast: more) { - .search-wrapper li .active { - --tw-border-opacity: 1; - border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); - } -} - -.search-wrapper .no-result { - display: block; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - padding: 2rem; - text-align: center; - font-size: .875rem; - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -.search-wrapper .prefix { - margin-left: 0.625rem; - margin-right: 0.625rem; - margin-bottom: 0.5rem; - margin-top: 1.5rem; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - border-bottom-width: 1px; - border-color: rgb(0 0 0 / 0.1); - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-bottom: 0.375rem; - font-size: .75rem; - font-weight: 600; - text-transform: uppercase; - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.search-wrapper .prefix:first-child { - margin-top: 0px; -} - -@media (prefers-contrast: more) { - .search-wrapper .prefix { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); - } -} - -:is(html[class~="dark"] .search-wrapper .prefix) { - border-color: rgb(255 255 255 / 0.2); - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - -@media (prefers-contrast: more) { - :is(html[class~="dark"] .search-wrapper .prefix) { - --tw-border-opacity: 1; - border-color: rgb(249 250 251 / var(--tw-border-opacity)); - --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); - } -} - -.search-wrapper .excerpt { - margin-top: 0.25rem; - overflow: hidden; - text-overflow: ellipsis; - font-size: .875rem; - line-height: 1.35rem; - --tw-text-opacity: 1; - color: rgb(75 85 99 / var(--tw-text-opacity)); -} - -:is(html[class~="dark"] .search-wrapper .excerpt) { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - -@media (prefers-contrast: more) { - :is(html[class~="dark"] .search-wrapper .excerpt) { - --tw-text-opacity: 1; - color: rgb(249 250 251 / var(--tw-text-opacity)); - } -} - -.search-wrapper .excerpt { - display: -webkit-box; - line-clamp: 1; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - } - -.search-wrapper .match { - --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); -} - -@media (max-width: 767px) { - .sidebar-container { - position: fixed; - top: 0px; - bottom: 0px; - z-index: 15; - width: 100%; - overscroll-behavior: contain; - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding-top: calc(var(--navbar-height)); - } - :is(html[class~="dark"] .sidebar-container) { - --tw-bg-opacity: 1; - background-color: rgb(17 17 17 / var(--tw-bg-opacity)); - } - .sidebar-container { - transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); - will-change: transform, opacity; - contain: layout style; - backface-visibility: hidden; - } -} - -.sidebar-container li > div { - height: 0px; -} - -.sidebar-container li.open > div { - height: auto; -} - -.sidebar-container li.open > a > span > svg > path { - --tw-rotate: 90deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -nav .search-wrapper { - display: none; -} - -@media (min-width: 768px) { - nav .search-wrapper { - display: inline-block; - } -} - -.hamburger-menu svg g { - transform-origin: center; - transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); -} - -.hamburger-menu svg path { - opacity: 1; - transition: - transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s, - opacity 0.2s ease 0.2s; - } - -.hamburger-menu svg.open path { - transition: - transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), - opacity 0s ease 0.2s; - } - -.hamburger-menu svg.open g { - transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; - } - -.hamburger-menu svg.open > path { - opacity: 0; -} - -.hamburger-menu svg.open > g:nth-of-type(1) { - --tw-rotate: 45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hamburger-menu svg.open > g:nth-of-type(1) path { - transform: translate3d(0, 4px, 0); - } - -.hamburger-menu svg.open > g:nth-of-type(2) { - --tw-rotate: -45deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.hamburger-menu svg.open > g:nth-of-type(2) path { - transform: translate3d(0, -4px, 0); - } - -/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */ - /* +! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +*//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ @@ -1798,7 +309,6 @@ menu { /* Reset default styling for dialogs. */ - dialog { padding: 0; } @@ -1839,7 +349,6 @@ button, /* Make sure disabled buttons don't get the pointer cursor. */ - :disabled { cursor: default; } @@ -1873,7 +382,6 @@ video { } /* Make elements with the HTML hidden attribute stay hidden by default */ - [hidden] { display: none; } @@ -1977,7 +485,6 @@ video { --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } - .sr-only { position: absolute; width: 1px; @@ -1989,1099 +496,843 @@ video { white-space: nowrap; border-width: 0; } - .pointer-events-none { pointer-events: none; } - .absolute { position: absolute; } - .relative { position: relative; } - .sticky { position: sticky; } - .inset-x-0 { left: 0px; right: 0px; } - .inset-y-0 { top: 0px; bottom: 0px; } - .bottom-0 { bottom: 0px; } - .left-\[24px\] { left: 24px; } - .left-\[36px\] { left: 36px; } - .right-0 { right: 0px; } - .top-0 { top: 0px; } - .top-16 { top: 4rem; } - .top-8 { top: 2rem; } - .top-\[40\%\] { top: 40%; } - .top-full { top: 100%; } - .z-20 { z-index: 20; } - .z-\[-1\] { z-index: -1; } - .order-last { order: 9999; } - .m-\[11px\] { margin: 11px; } - .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } - .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } - .mx-4 { margin-left: 1rem; margin-right: 1rem; } - .mx-auto { margin-left: auto; margin-right: auto; } - .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } - .my-1\.5 { margin-top: 0.375rem; margin-bottom: 0.375rem; } - .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } - .-mb-0 { margin-bottom: -0px; } - .-mb-0\.5 { margin-bottom: -0.125rem; } - .-ml-2 { margin-left: -0.5rem; } - .-mr-2 { margin-right: -0.5rem; } - .-mt-20 { margin-top: -5rem; } - .mb-10 { margin-bottom: 2.5rem; } - .mb-12 { margin-bottom: 3rem; } - .mb-16 { margin-bottom: 4rem; } - .mb-2 { margin-bottom: 0.5rem; } - .mb-4 { margin-bottom: 1rem; } - .mb-8 { margin-bottom: 2rem; } - .ml-1 { margin-left: 0.25rem; } - .ml-4 { margin-left: 1rem; } - .mr-2 { margin-right: 0.5rem; } - .mt-1 { margin-top: 0.25rem; } - .mt-1\.5 { margin-top: 0.375rem; } - .mt-12 { margin-top: 3rem; } - .mt-16 { margin-top: 4rem; } - .mt-2 { margin-top: 0.5rem; } - .mt-4 { margin-top: 1rem; } - .mt-5 { margin-top: 1.25rem; } - .mt-6 { margin-top: 1.5rem; } - .mt-8 { margin-top: 2rem; } - .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } - .block { display: block; } - .inline-block { display: inline-block; } - .inline { display: inline; } - .flex { display: flex; } - .inline-flex { display: inline-flex; } - .table { display: table; } - .grid { display: grid; } - .hidden { display: none; } - .aspect-auto { aspect-ratio: auto; } - .h-0 { height: 0px; } - .h-16 { height: 4rem; } - .h-2 { height: 0.5rem; } - .h-4 { height: 1rem; } - .h-5 { height: 1.25rem; } - .h-7 { height: 1.75rem; } - .h-\[18px\] { height: 18px; } - .h-full { height: 100%; } - .max-h-64 { max-height: 16rem; } - .max-h-\[calc\(100vh-var\(--navbar-height\)-env\(safe-area-inset-bottom\)\)\] { max-height: calc(100vh - var(--navbar-height) - env(safe-area-inset-bottom)); } - .max-h-\[min\(calc\(50vh-11rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] { max-height: min(calc(50vh - 11rem - env(safe-area-inset-bottom)),400px); } - .min-h-\[100px\] { min-height: 100px; } - .min-h-\[calc\(100vh-var\(--navbar-height\)\)\] { min-height: calc(100vh - var(--navbar-height)); } - .w-2 { width: 0.5rem; } - .w-3 { width: 0.75rem; } - .w-3\.5 { width: 0.875rem; } - .w-4 { width: 1rem; } - .w-64 { width: 16rem; } - .w-\[110\%\] { width: 110%; } - .w-\[180\%\] { width: 180%; } - .w-full { width: 100%; } - .w-max { width: -moz-max-content; width: max-content; } - .w-screen { width: 100vw; } - .min-w-0 { min-width: 0px; } - .min-w-\[18px\] { min-width: 18px; } - .min-w-\[24px\] { min-width: 24px; } - .min-w-full { min-width: 100%; } - .max-w-6xl { max-width: 72rem; } - .max-w-\[50\%\] { max-width: 50%; } - .max-w-\[90rem\] { max-width: 90rem; } - .max-w-\[min\(calc\(100vw-2rem\)\2c calc\(100\%\+20rem\)\)\] { max-width: min(calc(100vw - 2rem),calc(100% + 20rem)); } - .max-w-none { max-width: none; } - .max-w-screen-xl { max-width: 1280px; } - .shrink-0 { flex-shrink: 0; } - .grow { flex-grow: 1; } - .origin-center { transform-origin: center; } - .cursor-default { cursor: default; } - .cursor-pointer { cursor: pointer; } - .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } - .scroll-my-6 { scroll-margin-top: 1.5rem; scroll-margin-bottom: 1.5rem; } - .scroll-py-6 { scroll-padding-top: 1.5rem; scroll-padding-bottom: 1.5rem; } - .list-none { list-style-type: none; } - .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } - .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } - .flex-col { flex-direction: column; } - .items-start { align-items: flex-start; } - .items-center { align-items: center; } - .justify-start { justify-content: flex-start; } - .justify-end { justify-content: flex-end; } - .justify-center { justify-content: center; } - .justify-between { justify-content: space-between; } - .justify-items-start { justify-items: start; } - .gap-1 { gap: 0.25rem; } - .gap-2 { gap: 0.5rem; } - .gap-4 { gap: 1rem; } - .overflow-auto { overflow: auto; } - .overflow-hidden { overflow: hidden; } - .overflow-x-auto { overflow-x: auto; } - .overflow-y-auto { overflow-y: auto; } - .overflow-x-hidden { overflow-x: hidden; } - .overscroll-contain { overscroll-behavior: contain; } - .text-ellipsis { text-overflow: ellipsis; } - .whitespace-nowrap { white-space: nowrap; } - .break-words { overflow-wrap: break-word; } - .rounded { border-radius: 0.25rem; } - .rounded-3xl { border-radius: 1.5rem; } - .rounded-full { border-radius: 9999px; } - .rounded-lg { border-radius: 0.5rem; } - .rounded-md { border-radius: 0.375rem; } - .rounded-sm { border-radius: 0.125rem; } - .rounded-xl { border-radius: 0.75rem; } - .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } - .border { border-width: 1px; } - .border-b { border-bottom-width: 1px; } - .border-b-2 { border-bottom-width: 2px; } - .border-l { border-left-width: 1px; } - .border-t { border-top-width: 1px; } - .border-black\/5 { border-color: rgb(0 0 0 / 0.05); } - .border-blue-200 { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity)); } - .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } - .border-orange-100 { --tw-border-opacity: 1; border-color: rgb(255 237 213 / var(--tw-border-opacity)); } - .border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity)); } - .border-transparent { border-color: transparent; } - .border-yellow-100 { --tw-border-opacity: 1; border-color: rgb(254 249 195 / var(--tw-border-opacity)); } - .bg-black\/\[\.05\] { background-color: rgb(0 0 0 / .05); } - .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } - .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } - .bg-neutral-50 { --tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity)); } - .bg-orange-50 { --tw-bg-opacity: 1; background-color: rgb(255 247 237 / var(--tw-bg-opacity)); } - .bg-primary-100 { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity)); } - .bg-primary-400 { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity)); } - .bg-primary-600 { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); } - .bg-primary-700\/5 { background-color: hsl(var(--primary-hue) 100% 39% / 0.05); } - .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } - .bg-transparent { background-color: transparent; } - .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } - .bg-yellow-50 { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } - .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } - .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } - .from-gray-800 { --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - .from-gray-900 { --tw-gradient-from: #111827 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - .to-gray-600 { --tw-gradient-to: #4b5563 var(--tw-gradient-to-position); } - .bg-clip-text { -webkit-background-clip: text; background-clip: text; } - .p-0 { padding: 0px; } - .p-0\.5 { padding: 0.125rem; } - .p-1 { padding: 0.25rem; } - .p-1\.5 { padding: 0.375rem; } - .p-2 { padding: 0.5rem; } - .p-4 { padding: 1rem; } - .p-6 { padding: 1.5rem; } - .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } - .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } - .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } - .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } - .px-4 { padding-left: 1rem; padding-right: 1rem; } - .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } - .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } - .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } - .py-12 { padding-top: 3rem; padding-bottom: 3rem; } - .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } - .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } - .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } - .py-4 { padding-top: 1rem; padding-bottom: 1rem; } - -.pb-6 { - padding-bottom: 1.5rem; -} - .pb-8 { padding-bottom: 2rem; } - .pb-\[env\(safe-area-inset-bottom\)\] { padding-bottom: env(safe-area-inset-bottom); } - .pb-px { padding-bottom: 1px; } - .pl-5 { padding-left: 1.25rem; } - .pl-6 { padding-left: 1.5rem; } - .pl-\[max\(env\(safe-area-inset-left\)\2c 1\.5rem\)\] { padding-left: max(env(safe-area-inset-left),1.5rem); } - .pr-4 { padding-right: 1rem; } - .pr-\[calc\(env\(safe-area-inset-right\)-1\.5rem\)\] { padding-right: calc(env(safe-area-inset-right) - 1.5rem); } - .pr-\[max\(env\(safe-area-inset-right\)\2c 1\.5rem\)\] { padding-right: max(env(safe-area-inset-right),1.5rem); } - .pt-1 { padding-top: 0.25rem; } - .pt-4 { padding-top: 1rem; } - .pt-6 { padding-top: 1.5rem; } - .pt-8 { padding-top: 2rem; } - .text-left { text-align: left; } - .text-center { text-align: center; } - .align-text-bottom { vertical-align: text-bottom; } - .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } - .text-2xl { font-size: 1.5rem; } - .text-4xl { font-size: 2.25rem; } - .text-\[10px\] { font-size: 10px; } - .text-base { font-size: 1rem; } - .text-lg { font-size: 1.125rem; } - .text-sm { font-size: .875rem; } - .text-xl { font-size: 1.25rem; } - .text-xs { font-size: .75rem; } - .font-bold { font-weight: 700; } - .font-extrabold { font-weight: 800; } - .font-medium { font-weight: 500; } - .font-normal { font-weight: 400; } - .font-semibold { font-weight: 600; } - .capitalize { text-transform: capitalize; } - .leading-5 { line-height: 1.25rem; } - .leading-6 { line-height: 1.5rem; } - .leading-7 { line-height: 1.75rem; } - .leading-tight { line-height: 1.25; } - .tracking-tight { letter-spacing: -0.015em; } - .text-\[color\:hsl\(var\(--primary-hue\)\2c 100\%\2c 50\%\)\] { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 50% / var(--tw-text-opacity)); } - .text-blue-900 { --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity)); } - .text-current { color: currentColor; } - .text-gray-100 { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } - .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); } - .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } - .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } - .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } - .text-orange-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity)); } - .text-primary-800 { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity)); } - .text-red-900 { --tw-text-opacity: 1; color: rgb(127 29 29 / var(--tw-text-opacity)); } - .text-slate-900 { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity)); } - .text-transparent { color: transparent; } - .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } - .text-yellow-900 { --tw-text-opacity: 1; color: rgb(113 63 18 / var(--tw-text-opacity)); } - .underline { text-decoration-line: underline; } - .no-underline { text-decoration-line: none; } - .decoration-from-font { text-decoration-thickness: from-font; } - .underline-offset-2 { text-underline-offset: 2px; } - .opacity-0 { opacity: 0; } - .opacity-50 { opacity: 0.5; } - .opacity-80 { opacity: 0.8; } - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-\[0_-12px_16px_\#fff\] { --tw-shadow: 0 -12px 16px #fff; --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-\[0_-12px_16px_white\] { --tw-shadow: 0 -12px 16px white; --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c \.02\)\2c 0_1px_0_rgba\(0\2c 0\2c 0\2c \.06\)\] { --tw-shadow: 0 2px 4px rgba(0,0,0,.02),0 1px 0 rgba(0,0,0,.06); --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color), 0 1px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .shadow-gray-100 { --tw-shadow-color: #f3f4f6; --tw-shadow: var(--tw-shadow-colored); } - .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } - .ring-black\/5 { --tw-ring-color: rgb(0 0 0 / 0.05); } - .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -3089,64 +1340,1181 @@ video { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .duration-200 { transition-duration: 200ms; } - .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } - .\[-webkit-tap-highlight-color\:transparent\] { -webkit-tap-highlight-color: transparent; } - .\[-webkit-touch-callout\:none\] { -webkit-touch-callout: none; } - .\[counter-reset\:step\] { counter-reset: step; } - .\[hyphens\:auto\] { -webkit-hyphens: auto; hyphens: auto; } - .\[text-underline-position\:from-font\] { text-underline-position: from-font; } - .\[word-break\:break-word\] { word-break: break-word; } +.content h1 { + margin-top: 0.5rem; + font-size: 2.25rem; + font-weight: 700; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .content h1) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +.content h2 { + margin-top: 2.5rem; + border-bottom-width: 1px; + border-color: rgb(229 229 229 / 0.7); + padding-bottom: 0.25rem; + font-size: 1.875rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} +@media (prefers-contrast: more) { + .content h2 { + --tw-border-opacity: 1; + border-color: rgb(163 163 163 / var(--tw-border-opacity)); + } +} +:is(html[class~="dark"] .content h2) { + border-color: hsl(var(--primary-hue) 100% 94% / 0.1); + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +@media (prefers-contrast: more) { + + :is(html[class~="dark"] .content h2) { + --tw-border-opacity: 1; + border-color: rgb(163 163 163 / var(--tw-border-opacity)); + } +} +.content h3 { + margin-top: 2rem; + font-size: 1.5rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .content h3) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +.content h4 { + margin-top: 2rem; + font-size: 1.25rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .content h4) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +.content h5 { + margin-top: 2rem; + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .content h5) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +.content h6 { + margin-top: 2rem; + font-size: 1rem; + font-weight: 600; + letter-spacing: -0.015em; + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .content h6) { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity)); +} +.content p { + margin-top: 1.5rem; + line-height: 1.75rem; +} +.content p:first-child { + margin-top: 0px; +} +.content a { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + text-decoration-line: underline; + text-decoration-thickness: from-font; + text-underline-position: from-font; +} +.content .not-prose a { + color: currentColor; + text-decoration-line: none; +} +.content blockquote { + margin-top: 1.5rem; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + font-style: italic; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.content blockquote:first-child { + margin-top: 0px; +} +:is([dir="ltr"] .content blockquote) { + border-left-width: 2px; + padding-left: 1.5rem; +} +:is([dir="rtl"] .content blockquote) { + border-right-width: 2px; + padding-right: 1.5rem; +} +:is(html[class~="dark"] .content blockquote) { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +.content pre:not(.code-block pre) { + margin-bottom: 1rem; + overflow-x: auto; + border-radius: 0.75rem; + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + padding-top: 1rem; + padding-bottom: 1rem; + font-size: .9em; + font-weight: 500; + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; +} +@media (prefers-contrast: more) { + + .content pre:not(.code-block pre) { + border-width: 1px; + border-color: hsl(var(--primary-hue) 100% 24% / 0.2); + --tw-contrast: contrast(1.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + } +} +:is(html[class~="dark"] .content pre:not(.code-block pre)) { + background-color: hsl(var(--primary-hue) 100% 77% / 0.1); +} +@media (prefers-contrast: more) { + + :is(html[class~="dark"] .content pre:not(.code-block pre)) { + border-color: hsl(var(--primary-hue) 100% 94% / 0.4); + } +} +.content code:not(.code-block code) { + overflow-wrap: break-word; + border-radius: 0.375rem; + border-width: 1px; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + --tw-border-opacity: 0.04; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.03; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: .25em; + padding-right: .25em; + font-size: .9em; +} +:is(html[class~="dark"] .content code:not(.code-block code)) { + border-color: rgb(255 255 255 / 0.1); + background-color: rgb(255 255 255 / 0.1); +} +.content table:not(.code-block table) { + margin-top: 1.5rem; + display: block; + overflow-x: auto; + padding: 0px; +} +.content table:not(.code-block table):first-child { + margin-top: 0px; +} +.content table:not(.code-block table) tr { + margin: 0px; + border-top-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding: 0px; +} +.content table:not(.code-block table) tr:nth-child(even) { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} +:is(html[class~="dark"] .content table:not(.code-block table) tr) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} +:is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) { + background-color: rgb(75 85 99 / 0.2); +} +.content table:not(.code-block table) th { + margin: 0px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-weight: 600; +} +:is(html[class~="dark"] .content table:not(.code-block table) th) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} +.content table:not(.code-block table) td { + margin: 0px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +:is(html[class~="dark"] .content table:not(.code-block table) td) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); +} +.content ol { + margin-top: 1.5rem; + list-style-type: decimal; +} +.content ol:first-child { + margin-top: 0px; +} +:is([dir="ltr"] .content ol) { + margin-left: 1.5rem; +} +:is([dir="rtl"] .content ol) { + margin-right: 1.5rem; +} +.content ol li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.content ul { + margin-top: 1.5rem; + list-style-type: disc; +} +.content ul:first-child { + margin-top: 0px; +} +:is([dir="ltr"] .content ul) { + margin-left: 1.5rem; +} +:is([dir="rtl"] .content ul) { + margin-right: 1.5rem; +} +.content ul li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.content .not-prose ul, .content .not-prose ol { + margin: 0px; + list-style-type: none; +} +.content .not-prose ul li, .content .not-prose ol li { + margin: 0px; +} +.content kbd { + overflow-wrap: break-word; + border-radius: 0.375rem; + border-width: 1px; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); + --tw-border-opacity: 0.04; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + --tw-bg-opacity: 0.03; + padding-top: 0.125rem; + padding-bottom: 0.125rem; + padding-left: .25em; + padding-right: .25em; + font-size: .9em; +} +:is(html[class~="dark"] .content kbd) { + border-color: rgb(255 255 255 / 0.1); + background-color: rgb(255 255 255 / 0.1); +} +.content pre:not(.code-block pre).mermaid { + border-radius: 0px; + background-color: transparent; +} +:is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) { + background-color: transparent; +} +.content img { + margin-left: auto; + margin-right: auto; + margin-top: 1rem; + margin-bottom: 1rem; + border-radius: 0.375rem; +} +.content .not-prose img { + margin: 0px; + border-radius: 0px; +} +.content figure figcaption { + margin-top: 0.5rem; + display: block; + text-align: center; + font-size: .875rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .content figure figcaption) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +.content .footnotes { + margin-top: 3rem; + font-size: .875rem; +} +.subheading-anchor { + opacity: 0; + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +:is([dir="ltr"] .subheading-anchor) { + margin-left: 0.25rem; +} +:is([dir="rtl"] .subheading-anchor) { + margin-right: 0.25rem; +} +span:target + .subheading-anchor, + :hover > .subheading-anchor, + .subheading-anchor:focus { + opacity: 1; +} +span + .subheading-anchor, + :hover > .subheading-anchor { + text-decoration-line: none !important; +} +.subheading-anchor:after { + padding-left: 0.25rem; + padding-right: 0.25rem; + --tw-content: '#'; + content: var(--tw-content); + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .subheading-anchor):after { + --tw-text-opacity: 1; + color: rgb(64 64 64 / var(--tw-text-opacity)); +} +span:target + .subheading-anchor:after { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] span:target + .subheading-anchor):after { + --tw-text-opacity: 1; + color: rgb(115 115 115 / var(--tw-text-opacity)); +} +article.typesetting-article { + font-size: 17px; + font-feature-settings: + 'rlig' 1, + 'calt' 1; +} +article.typesetting-article h1 { + margin-top: 1.5rem; + margin-bottom: 1rem; + text-align: center; + font-size: 2.5rem; +} +article.typesetting-article h2 { + border-style: none; +} +article.typesetting-article a { + text-decoration-line: none; +} +article.typesetting-article a:hover { + text-decoration-line: underline; +} +article.typesetting-article p { + line-height: 2rem; +} +article.typesetting-article code { + border-style: none; +} +:is(html[class~="dark"] article.typesetting-article code) { + --tw-bg-opacity: 1; + background-color: rgb(64 64 64 / var(--tw-bg-opacity)); +} +:is(html[class~="dark"] article.typesetting-article pre code) { + background-color: transparent; +} +article.typesetting-article .subheading-anchor + a { + text-decoration-line: none; +} +article.typesetting-article .subheading-anchor + a::after { + content: var(--tw-content); + display: none; +} +article.typesetting-article .subheading-anchor + a:hover { + text-decoration-line: none; +} +article details > summary::-webkit-details-marker { + display: none; +} +article details > summary::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E"); + height: 1.2em; + width: 1.2em; + vertical-align: -4px; + } +/* Code syntax highlight */ +/* Light theme for syntax highlight */ +/* Generated using `hugo gen chromastyles --style=github` */ +.highlight { + /* Background .bg { background-color: #ffffff; } */ + /* PreWrapper .chroma { background-color: #ffffff; } */ + /* Other .chroma .x { } */ + /* CodeLine .chroma .cl { } */ + /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ + /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ + /* LineHighlight .chroma .hl { background-color: #ffffcc } */ + /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ + /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } */ + /* Name .chroma .n { } */ + /* NameFunctionMagic .chroma .fm { } */ + /* NameOther .chroma .nx { } */ + /* NameProperty .chroma .py { } */ + /* NameVariableMagic .chroma .vm { } */ + /* Literal .chroma .l { } */ + /* LiteralDate .chroma .ld { } */ + /* Punctuation .chroma .p { } */ + /* Generic .chroma .g { } */ +} +/* Error */ +.highlight .chroma .err { color: #a61717; background-color: #e3d2d2 } +/* LineLink */ +.highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* Line */ +.highlight .chroma .line { display: flex; } +/* Keyword */ +.highlight .chroma .k { color: #000000; font-weight: bold } +/* KeywordConstant */ +.highlight .chroma .kc { color: #000000; font-weight: bold } +/* KeywordDeclaration */ +.highlight .chroma .kd { color: #000000; font-weight: bold } +/* KeywordNamespace */ +.highlight .chroma .kn { color: #000000; font-weight: bold } +/* KeywordPseudo */ +.highlight .chroma .kp { color: #000000; font-weight: bold } +/* KeywordReserved */ +.highlight .chroma .kr { color: #000000; font-weight: bold } +/* KeywordType */ +.highlight .chroma .kt { color: #445588; font-weight: bold } +/* NameAttribute */ +.highlight .chroma .na { color: #008080 } +/* NameBuiltin */ +.highlight .chroma .nb { color: #0086b3 } +/* NameBuiltinPseudo */ +.highlight .chroma .bp { color: #999999 } +/* NameClass */ +.highlight .chroma .nc { color: #445588; font-weight: bold } +/* NameConstant */ +.highlight .chroma .no { color: #008080 } +/* NameDecorator */ +.highlight .chroma .nd { color: #3c5d5d; font-weight: bold } +/* NameEntity */ +.highlight .chroma .ni { color: #800080 } +/* NameException */ +.highlight .chroma .ne { color: #990000; font-weight: bold } +/* NameFunction */ +.highlight .chroma .nf { color: #990000; font-weight: bold } +/* NameLabel */ +.highlight .chroma .nl { color: #990000; font-weight: bold } +/* NameNamespace */ +.highlight .chroma .nn { color: #555555 } +/* NameTag */ +.highlight .chroma .nt { color: #000080 } +/* NameVariable */ +.highlight .chroma .nv { color: #008080 } +/* NameVariableClass */ +.highlight .chroma .vc { color: #008080 } +/* NameVariableGlobal */ +.highlight .chroma .vg { color: #008080 } +/* NameVariableInstance */ +.highlight .chroma .vi { color: #008080 } +/* LiteralString */ +.highlight .chroma .s { color: #dd1144 } +/* LiteralStringAffix */ +.highlight .chroma .sa { color: #dd1144 } +/* LiteralStringBacktick */ +.highlight .chroma .sb { color: #dd1144 } +/* LiteralStringChar */ +.highlight .chroma .sc { color: #dd1144 } +/* LiteralStringDelimiter */ +.highlight .chroma .dl { color: #dd1144 } +/* LiteralStringDoc */ +.highlight .chroma .sd { color: #dd1144 } +/* LiteralStringDouble */ +.highlight .chroma .s2 { color: #dd1144 } +/* LiteralStringEscape */ +.highlight .chroma .se { color: #dd1144 } +/* LiteralStringHeredoc */ +.highlight .chroma .sh { color: #dd1144 } +/* LiteralStringInterpol */ +.highlight .chroma .si { color: #dd1144 } +/* LiteralStringOther */ +.highlight .chroma .sx { color: #dd1144 } +/* LiteralStringRegex */ +.highlight .chroma .sr { color: #009926 } +/* LiteralStringSingle */ +.highlight .chroma .s1 { color: #dd1144 } +/* LiteralStringSymbol */ +.highlight .chroma .ss { color: #990073 } +/* LiteralNumber */ +.highlight .chroma .m { color: #009999 } +/* LiteralNumberBin */ +.highlight .chroma .mb { color: #009999 } +/* LiteralNumberFloat */ +.highlight .chroma .mf { color: #009999 } +/* LiteralNumberHex */ +.highlight .chroma .mh { color: #009999 } +/* LiteralNumberInteger */ +.highlight .chroma .mi { color: #009999 } +/* LiteralNumberIntegerLong */ +.highlight .chroma .il { color: #009999 } +/* LiteralNumberOct */ +.highlight .chroma .mo { color: #009999 } +/* Operator */ +.highlight .chroma .o { color: #000000; font-weight: bold } +/* OperatorWord */ +.highlight .chroma .ow { color: #000000; font-weight: bold } +/* Comment */ +.highlight .chroma .c { color: #999988; font-style: italic } +/* CommentHashbang */ +.highlight .chroma .ch { color: #999988; font-style: italic } +/* CommentMultiline */ +.highlight .chroma .cm { color: #999988; font-style: italic } +/* CommentSingle */ +.highlight .chroma .c1 { color: #999988; font-style: italic } +/* CommentSpecial */ +.highlight .chroma .cs { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreproc */ +.highlight .chroma .cp { color: #999999; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ +.highlight .chroma .cpf { color: #999999; font-weight: bold; font-style: italic } +/* GenericDeleted */ +.highlight .chroma .gd { color: #000000; background-color: #ffdddd } +/* GenericEmph */ +.highlight .chroma .ge { color: #000000; font-style: italic } +/* GenericError */ +.highlight .chroma .gr { color: #aa0000 } +/* GenericHeading */ +.highlight .chroma .gh { color: #999999 } +/* GenericInserted */ +.highlight .chroma .gi { color: #000000; background-color: #ddffdd } +/* GenericOutput */ +.highlight .chroma .go { color: #888888 } +/* GenericPrompt */ +.highlight .chroma .gp { color: #555555 } +/* GenericStrong */ +.highlight .chroma .gs { font-weight: bold } +/* GenericSubheading */ +.highlight .chroma .gu { color: #aaaaaa } +/* GenericTraceback */ +.highlight .chroma .gt { color: #aa0000 } +/* GenericUnderline */ +.highlight .chroma .gl { text-decoration: underline } +/* TextWhitespace */ +.highlight .chroma .w { color: #bbbbbb } +.dark .highlight { + /* Background .bg { color: #c9d1d9; background-color: #0d1117; } + /* PreWrapper .chroma { color: #c9d1d9; background-color: #0d1117; } */ + /* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ + /* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } */ + /* LineHighlight .chroma .hl { background-color: #ffffcc } */ + /* LineNumbersTable .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c } */ + /* LineNumbers .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 } */ +} +/* Other */ +.dark .highlight .chroma .x { } +/* Error */ +.dark .highlight .chroma .err { color: #f85149 } +/* CodeLine */ +.dark .highlight .chroma .cl { } +/* LineLink */ +.dark .highlight .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } +/* Line */ +.dark .highlight .chroma .line { display: flex; } +/* Keyword */ +.dark .highlight .chroma .k { color: #ff7b72 } +/* KeywordConstant */ +.dark .highlight .chroma .kc { color: #79c0ff } +/* KeywordDeclaration */ +.dark .highlight .chroma .kd { color: #ff7b72 } +/* KeywordNamespace */ +.dark .highlight .chroma .kn { color: #ff7b72 } +/* KeywordPseudo */ +.dark .highlight .chroma .kp { color: #79c0ff } +/* KeywordReserved */ +.dark .highlight .chroma .kr { color: #ff7b72 } +/* KeywordType */ +.dark .highlight .chroma .kt { color: #ff7b72 } +/* Name */ +.dark .highlight .chroma .n { } +/* NameAttribute */ +.dark .highlight .chroma .na { } +/* NameBuiltin */ +.dark .highlight .chroma .nb { } +/* NameBuiltinPseudo */ +.dark .highlight .chroma .bp { } +/* NameClass */ +.dark .highlight .chroma .nc { color: #f0883e; font-weight: bold } +/* NameConstant */ +.dark .highlight .chroma .no { color: #79c0ff; font-weight: bold } +/* NameDecorator */ +.dark .highlight .chroma .nd { color: #d2a8ff; font-weight: bold } +/* NameEntity */ +.dark .highlight .chroma .ni { color: #ffa657 } +/* NameException */ +.dark .highlight .chroma .ne { color: #f0883e; font-weight: bold } +/* NameFunction */ +.dark .highlight .chroma .nf { color: #d2a8ff; font-weight: bold } +/* NameFunctionMagic */ +.dark .highlight .chroma .fm { } +/* NameLabel */ +.dark .highlight .chroma .nl { color: #79c0ff; font-weight: bold } +/* NameNamespace */ +.dark .highlight .chroma .nn { color: #ff7b72 } +/* NameOther */ +.dark .highlight .chroma .nx { } +/* NameProperty */ +.dark .highlight .chroma .py { color: #79c0ff } +/* NameTag */ +.dark .highlight .chroma .nt { color: #7ee787 } +/* NameVariable */ +.dark .highlight .chroma .nv { color: #79c0ff } +/* NameVariableClass */ +.dark .highlight .chroma .vc { } +/* NameVariableGlobal */ +.dark .highlight .chroma .vg { } +/* NameVariableInstance */ +.dark .highlight .chroma .vi { } +/* NameVariableMagic */ +.dark .highlight .chroma .vm { } +/* Literal */ +.dark .highlight .chroma .l { color: #a5d6ff } +/* LiteralDate */ +.dark .highlight .chroma .ld { color: #79c0ff } +/* LiteralString */ +.dark .highlight .chroma .s { color: #a5d6ff } +/* LiteralStringAffix */ +.dark .highlight .chroma .sa { color: #79c0ff } +/* LiteralStringBacktick */ +.dark .highlight .chroma .sb { color: #a5d6ff } +/* LiteralStringChar */ +.dark .highlight .chroma .sc { color: #a5d6ff } +/* LiteralStringDelimiter */ +.dark .highlight .chroma .dl { color: #79c0ff } +/* LiteralStringDoc */ +.dark .highlight .chroma .sd { color: #a5d6ff } +/* LiteralStringDouble */ +.dark .highlight .chroma .s2 { color: #a5d6ff } +/* LiteralStringEscape */ +.dark .highlight .chroma .se { color: #79c0ff } +/* LiteralStringHeredoc */ +.dark .highlight .chroma .sh { color: #79c0ff } +/* LiteralStringInterpol */ +.dark .highlight .chroma .si { color: #a5d6ff } +/* LiteralStringOther */ +.dark .highlight .chroma .sx { color: #a5d6ff } +/* LiteralStringRegex */ +.dark .highlight .chroma .sr { color: #79c0ff } +/* LiteralStringSingle */ +.dark .highlight .chroma .s1 { color: #a5d6ff } +/* LiteralStringSymbol */ +.dark .highlight .chroma .ss { color: #a5d6ff } +/* LiteralNumber */ +.dark .highlight .chroma .m { color: #a5d6ff } +/* LiteralNumberBin */ +.dark .highlight .chroma .mb { color: #a5d6ff } +/* LiteralNumberFloat */ +.dark .highlight .chroma .mf { color: #a5d6ff } +/* LiteralNumberHex */ +.dark .highlight .chroma .mh { color: #a5d6ff } +/* LiteralNumberInteger */ +.dark .highlight .chroma .mi { color: #a5d6ff } +/* LiteralNumberIntegerLong */ +.dark .highlight .chroma .il { color: #a5d6ff } +/* LiteralNumberOct */ +.dark .highlight .chroma .mo { color: #a5d6ff } +/* Operator */ +.dark .highlight .chroma .o { color: #ff7b72; font-weight: bold } +/* OperatorWord */ +.dark .highlight .chroma .ow { color: #ff7b72; font-weight: bold } +/* Punctuation */ +.dark .highlight .chroma .p { } +/* Comment */ +.dark .highlight .chroma .c { color: #8b949e; font-style: italic } +/* CommentHashbang */ +.dark .highlight .chroma .ch { color: #8b949e; font-style: italic } +/* CommentMultiline */ +.dark .highlight .chroma .cm { color: #8b949e; font-style: italic } +/* CommentSingle */ +.dark .highlight .chroma .c1 { color: #8b949e; font-style: italic } +/* CommentSpecial */ +.dark .highlight .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreproc */ +.dark .highlight .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic } +/* CommentPreprocFile */ +.dark .highlight .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic } +/* Generic */ +.dark .highlight .chroma .g { } +/* GenericDeleted */ +.dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 } +/* GenericEmph */ +.dark .highlight .chroma .ge { font-style: italic } +/* GenericError */ +.dark .highlight .chroma .gr { color: #ffa198 } +/* GenericHeading */ +.dark .highlight .chroma .gh { color: #79c0ff; font-weight: bold } +/* GenericInserted */ +.dark .highlight .chroma .gi { color: #56d364; background-color: #0f5323 } +/* GenericOutput */ +.dark .highlight .chroma .go { color: #8b949e } +/* GenericPrompt */ +.dark .highlight .chroma .gp { color: #8b949e } +/* GenericStrong */ +.dark .highlight .chroma .gs { font-weight: bold } +/* GenericSubheading */ +.dark .highlight .chroma .gu { color: #79c0ff } +/* GenericTraceback */ +.dark .highlight .chroma .gt { color: #ff7b72 } +/* GenericUnderline */ +.dark .highlight .chroma .gl { text-decoration: underline } +/* TextWhitespace */ +.dark .highlight .chroma .w { color: #6e7681 } +.code-block { + font-size: .9em; + line-height: 1.25rem; +} +.code-block pre { + overflow-x: auto; + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + font-size: .9em; + font-weight: 500; + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; +} +@media (prefers-contrast: more) { + + .code-block pre { + border-width: 1px; + border-color: hsl(var(--primary-hue) 100% 24% / 0.2); + --tw-contrast: contrast(1.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + } +} +:is(html[class~="dark"] .code-block pre) { + background-color: hsl(var(--primary-hue) 100% 77% / 0.1); +} +@media (prefers-contrast: more) { + + :is(html[class~="dark"] .code-block pre) { + border-color: hsl(var(--primary-hue) 100% 94% / 0.4); + } +} +.code-block .filename { + position: absolute; + top: 0px; + z-index: 1; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; + background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + font-size: .75rem; + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .code-block .filename) { + background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} +.code-block pre:not(.lntable pre) { + margin-bottom: 1rem; + border-radius: 0.75rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; +} +.code-block div:nth-of-type(2) pre { + padding-top: 3rem; + padding-bottom: 1rem; +} +.chroma .lntable { + margin: 0px; + display: block; + width: auto; + overflow: auto; + border-radius: 0.75rem; +} +.chroma .lntable pre { + padding-top: 1rem; + padding-bottom: 1rem; +} +.chroma .ln, + .chroma .lnt:not(.hl > .lnt), + .chroma .hl { + min-width: 2.6rem; + padding-left: 1rem; + padding-right: 1rem; + --tw-text-opacity: 1; + color: rgb(82 82 82 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .chroma .ln),:is(html[class~="dark"] + .chroma .lnt:not(.hl > .lnt)),:is(html[class~="dark"] + .chroma .hl) { + --tw-text-opacity: 1; + color: rgb(212 212 212 / var(--tw-text-opacity)); +} +.chroma .lntd { + padding: 0px; + vertical-align: top; +} +.chroma .lntd:last-of-type { + width: 100%; +} +/* LineHighlight */ +.chroma .hl { + display: block; + width: 100%; + background-color: hsl(var(--primary-hue) 100% 32% / 0.1); +} +.hextra-cards { + grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)); +} +.hextra-card img { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.hextra-card:hover svg { + color: currentColor; +} +.hextra-card svg { + width: 1.5rem; + color: #00000033; + transition: color 0.3s ease; +} +.hextra-card p { + margin-top: 0.5rem; +} +.dark .hextra-card svg { + color: #ffffff66; +} +.dark .hextra-card:hover svg { + color: currentColor; +} +.steps h3 { + counter-increment: step; +} +.steps h3:before { + position: absolute; + height: 33px; + width: 33px; + border-width: 4px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} +:is(html[class~="dark"] .steps h3):before { + --tw-border-opacity: 1; + border-color: rgb(17 17 17 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(38 38 38 / var(--tw-bg-opacity)); +} +.steps h3:before { + border-radius: 9999px; + text-align: center; + text-indent: -1px; + font-size: 1rem; + font-weight: 400; + --tw-text-opacity: 1; + color: rgb(163 163 163 / var(--tw-text-opacity)); + margin-top: 3px; + margin-left: -41px; + content: counter(step); +} +.search-wrapper li { + margin-left: 0.625rem; + margin-right: 0.625rem; + overflow-wrap: break-word; + border-radius: 0.375rem; + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +@media (prefers-contrast: more) { + + .search-wrapper li { + border-width: 1px; + border-color: transparent; + } +} +:is(html[class~="dark"] .search-wrapper li) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +.search-wrapper li a { + display: block; + scroll-margin: 3rem; + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.search-wrapper li .title { + font-size: 1rem; + font-weight: 600; + line-height: 1.25rem; +} +.search-wrapper li .active { + border-radius: 0.375rem; + background-color: hsl(var(--primary-hue) 100% 50% / 0.1); +} +@media (prefers-contrast: more) { + + .search-wrapper li .active { + --tw-border-opacity: 1; + border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); + } +} +.search-wrapper .no-result { + display: block; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + padding: 2rem; + text-align: center; + font-size: .875rem; + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +.search-wrapper .prefix { + margin-left: 0.625rem; + margin-right: 0.625rem; + margin-bottom: 0.5rem; + margin-top: 1.5rem; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border-bottom-width: 1px; + border-color: rgb(0 0 0 / 0.1); + padding-left: 0.625rem; + padding-right: 0.625rem; + padding-bottom: 0.375rem; + font-size: .75rem; + font-weight: 600; + text-transform: uppercase; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} +.search-wrapper .prefix:first-child { + margin-top: 0px; +} +@media (prefers-contrast: more) { + + .search-wrapper .prefix { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); + } +} +:is(html[class~="dark"] .search-wrapper .prefix) { + border-color: rgb(255 255 255 / 0.2); + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} +@media (prefers-contrast: more) { + + :is(html[class~="dark"] .search-wrapper .prefix) { + --tw-border-opacity: 1; + border-color: rgb(249 250 251 / var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); + } +} +.search-wrapper .excerpt { + margin-top: 0.25rem; + overflow: hidden; + text-overflow: ellipsis; + font-size: .875rem; + line-height: 1.35rem; + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} +:is(html[class~="dark"] .search-wrapper .excerpt) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} +@media (prefers-contrast: more) { + + :is(html[class~="dark"] .search-wrapper .excerpt) { + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); + } +} +.search-wrapper .excerpt { + display: -webkit-box; + line-clamp: 1; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + } +.search-wrapper .match { + --tw-text-opacity: 1; + color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); +} +@media (max-width: 767px) { + .sidebar-container { + position: fixed; + top: 0px; + bottom: 0px; + z-index: 15; + width: 100%; + overscroll-behavior: contain; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding-top: calc(var(--navbar-height)); + } + :is(html[class~="dark"] .sidebar-container) { + --tw-bg-opacity: 1; + background-color: rgb(17 17 17 / var(--tw-bg-opacity)); + } + .sidebar-container { + transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); + will-change: transform, opacity; + contain: layout style; + backface-visibility: hidden; + } +} +.sidebar-container li > div { + height: 0px; +} +.sidebar-container li.open > div { + height: auto; +} +.sidebar-container li.open > a > span > svg > path { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +nav .search-wrapper { + display: none; +} +@media (min-width: 768px) { + + nav .search-wrapper { + display: inline-block; + } +} +@supports ( + ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) +) { + .nav-container-blur { + background-color: rgb(255 255 255 / .85); + --tw-backdrop-blur: blur(12px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + :is(html[class~="dark"] .nav-container-blur) { + background-color: rgb(17 17 17 / 0.8) !important; + } +} +.hamburger-menu svg g { + transform-origin: center; + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); +} +.hamburger-menu svg path { + opacity: 1; + transition: + transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s, + opacity 0.2s ease 0.2s; + } +.hamburger-menu svg.open path { + transition: + transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), + opacity 0s ease 0.2s; + } +.hamburger-menu svg.open g { + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; + } +.hamburger-menu svg.open > path { + opacity: 0; +} +.hamburger-menu svg.open > g:nth-of-type(1) { + --tw-rotate: 45deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.hamburger-menu svg.open > g:nth-of-type(1) path { + transform: translate3d(0, 4px, 0); + } +.hamburger-menu svg.open > g:nth-of-type(2) { + --tw-rotate: -45deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.hamburger-menu svg.open > g:nth-of-type(2) path { + transform: translate3d(0, -4px, 0); + } html { font-size: 1rem; -webkit-font-smoothing: antialiased; @@ -3154,1003 +2522,893 @@ html { font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1; -webkit-tap-highlight-color: transparent; } - body { width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] body) { --tw-bg-opacity: 1; background-color: rgb(17 17 17 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - :root { --primary-hue: 212deg; --navbar-height: 4rem; --menu-height: 3.75rem; } - .dark { --primary-hue: 204deg; } - .placeholder\:text-gray-500::-moz-placeholder { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } - .placeholder\:text-gray-500::placeholder { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } - .before\:pointer-events-none::before { content: var(--tw-content); pointer-events: none; } - .before\:absolute::before { content: var(--tw-content); position: absolute; } - .before\:inset-0::before { content: var(--tw-content); inset: 0px; } - .before\:inset-y-1::before { content: var(--tw-content); top: 0.25rem; bottom: 0.25rem; } - .before\:mr-1::before { content: var(--tw-content); margin-right: 0.25rem; } - .before\:inline-block::before { content: var(--tw-content); display: inline-block; } - .before\:w-px::before { content: var(--tw-content); width: 1px; } - .before\:bg-gray-200::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } - .before\:opacity-25::before { content: var(--tw-content); opacity: 0.25; } - .before\:transition-transform::before { content: var(--tw-content); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } - .before\:content-\[\'\#\'\]::before { --tw-content: '#'; content: var(--tw-content); } - .before\:content-\[\'\'\]::before { --tw-content: ''; content: var(--tw-content); } - .before\:content-\[\\\"\\\"\]::before { --tw-content: \"\"; content: var(--tw-content); } - .first\:mt-0:first-child { margin-top: 0px; } - .last-of-type\:mb-0:last-of-type { margin-bottom: 0px; } - .hover\:border-gray-200:hover { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } - .hover\:border-gray-300:hover { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } - .hover\:border-gray-400:hover { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity)); } - .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } - .hover\:bg-gray-800\/5:hover { background-color: rgb(31 41 55 / 0.05); } - .hover\:bg-primary-50:hover { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity)); } - .hover\:bg-primary-700:hover { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity)); } - .hover\:bg-slate-50:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } - .hover\:text-black:hover { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } - .hover\:text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } - .hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } - .hover\:text-primary-600:hover { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - .hover\:opacity-60:hover { opacity: 0.6; } - .hover\:opacity-75:hover { opacity: 0.75; } - .hover\:shadow-lg:hover { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .hover\:shadow-gray-100:hover { --tw-shadow-color: #f3f4f6; --tw-shadow: var(--tw-shadow-colored); } - .focus\:bg-white:focus { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } - .focus\:ring-4:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } - .focus\:ring-primary-300:focus { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--primary-hue) 100% 77% / var(--tw-ring-opacity)); } - .active\:bg-gray-400\/20:active { background-color: rgb(156 163 175 / 0.2); } - .active\:opacity-50:active { opacity: 0.5; } - .active\:shadow-sm:active { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - .active\:shadow-gray-200:active { --tw-shadow-color: #e5e7eb; --tw-shadow: var(--tw-shadow-colored); } - .group[open] .group-open\:before\:rotate-90::before { content: var(--tw-content); --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - .group\/code:hover .group-hover\/code\:opacity-100 { opacity: 1; } - .group\/copybtn.copied .group-\[\.copied\]\/copybtn\:block { display: block; } - .group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hidden { display: none; } - .data-\[state\=selected\]\:block[data-state=selected] { display: block; } - .data-\[state\=closed\]\:hidden[data-state=closed] { display: none; } - .data-\[state\=open\]\:hidden[data-state=open] { display: none; } - .data-\[state\=selected\]\:border-primary-500[data-state=selected] { --tw-border-opacity: 1; border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); } - .data-\[state\=selected\]\:text-primary-600[data-state=selected] { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - .group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden { display: none; } - .group[data-theme=light] .group-data-\[theme\=light\]\:hidden { display: none; } - :is([dir="ltr"] .ltr\:right-1) { right: 0.25rem; } - :is([dir="ltr"] .ltr\:right-1\.5) { right: 0.375rem; } - :is([dir="ltr"] .ltr\:right-3) { right: 0.75rem; } - :is([dir="ltr"] .ltr\:-mr-4) { margin-right: -1rem; } - :is([dir="ltr"] .ltr\:ml-3) { margin-left: 0.75rem; } - :is([dir="ltr"] .ltr\:ml-auto) { margin-left: auto; } - :is([dir="ltr"] .ltr\:mr-auto) { margin-right: auto; } - :is([dir="ltr"] .ltr\:rotate-180) { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - :is([dir="ltr"] .ltr\:pl-12) { padding-left: 3rem; } - :is([dir="ltr"] .ltr\:pl-16) { padding-left: 4rem; } - :is([dir="ltr"] .ltr\:pl-3) { padding-left: 0.75rem; } - :is([dir="ltr"] .ltr\:pl-4) { padding-left: 1rem; } - :is([dir="ltr"] .ltr\:pl-8) { padding-left: 2rem; } - :is([dir="ltr"] .ltr\:pr-0) { padding-right: 0px; } - :is([dir="ltr"] .ltr\:pr-2) { padding-right: 0.5rem; } - :is([dir="ltr"] .ltr\:pr-4) { padding-right: 1rem; } - :is([dir="ltr"] .ltr\:pr-9) { padding-right: 2.25rem; } - :is([dir="ltr"] .ltr\:text-right) { text-align: right; } - :is([dir="ltr"] .ltr\:before\:left-0)::before { content: var(--tw-content); left: 0px; } - :is([dir="rtl"] .rtl\:left-1) { left: 0.25rem; } - :is([dir="rtl"] .rtl\:left-1\.5) { left: 0.375rem; } - :is([dir="rtl"] .rtl\:left-3) { left: 0.75rem; } - :is([dir="rtl"] .rtl\:-ml-4) { margin-left: -1rem; } - :is([dir="rtl"] .rtl\:ml-auto) { margin-left: auto; } - :is([dir="rtl"] .rtl\:mr-3) { margin-right: 0.75rem; } - :is([dir="rtl"] .rtl\:mr-auto) { margin-right: auto; } - :is([dir="rtl"] .rtl\:-rotate-180) { --tw-rotate: -180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - :is([dir="rtl"] .rtl\:pl-2) { padding-left: 0.5rem; } - :is([dir="rtl"] .rtl\:pl-4) { padding-left: 1rem; } - :is([dir="rtl"] .rtl\:pl-9) { padding-left: 2.25rem; } - :is([dir="rtl"] .rtl\:pr-12) { padding-right: 3rem; } - :is([dir="rtl"] .rtl\:pr-16) { padding-right: 4rem; } - :is([dir="rtl"] .rtl\:pr-3) { padding-right: 0.75rem; } - :is([dir="rtl"] .rtl\:pr-4) { padding-right: 1rem; } - :is([dir="rtl"] .rtl\:pr-8) { padding-right: 2rem; } - :is([dir="rtl"] .rtl\:text-left) { text-align: left; } - :is([dir="rtl"] .rtl\:before\:right-0)::before { content: var(--tw-content); right: 0px; } - :is([dir="rtl"] .rtl\:before\:rotate-180)::before { content: var(--tw-content); --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - @media (prefers-contrast: more) { + .contrast-more\:border { border-width: 1px; } + .contrast-more\:border-t { border-top-width: 1px; } + .contrast-more\:border-current { border-color: currentColor; } + .contrast-more\:border-gray-900 { --tw-border-opacity: 1; border-color: rgb(17 24 39 / var(--tw-border-opacity)); } + .contrast-more\:border-neutral-400 { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } + .contrast-more\:border-primary-500 { --tw-border-opacity: 1; border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); } + .contrast-more\:border-transparent { border-color: transparent; } + .contrast-more\:font-bold { font-weight: 700; } + .contrast-more\:text-current { color: currentColor; } + .contrast-more\:text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } + .contrast-more\:text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } + .contrast-more\:text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } + .contrast-more\:underline { text-decoration-line: underline; } + .contrast-more\:shadow-\[0_0_0_1px_\#000\] { --tw-shadow: 0 0 0 1px #000; --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + .contrast-more\:shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + .contrast-more\:hover\:border-gray-900:hover { --tw-border-opacity: 1; border-color: rgb(17 24 39 / var(--tw-border-opacity)); } } - :is(html[class~="dark"] .dark\:block) { display: block; } - :is(html[class~="dark"] .dark\:hidden) { display: none; } - :is(html[class~="dark"] .dark\:border-blue-200\/30) { border-color: rgb(191 219 254 / 0.3); } - :is(html[class~="dark"] .dark\:border-gray-100\/20) { border-color: rgb(243 244 246 / 0.2); } - :is(html[class~="dark"] .dark\:border-neutral-700) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:border-neutral-800) { --tw-border-opacity: 1; border-color: rgb(38 38 38 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:border-orange-400\/30) { border-color: rgb(251 146 60 / 0.3); } - :is(html[class~="dark"] .dark\:border-red-200\/30) { border-color: rgb(254 202 202 / 0.3); } - :is(html[class~="dark"] .dark\:border-white\/10) { border-color: rgb(255 255 255 / 0.1); } - :is(html[class~="dark"] .dark\:border-yellow-200\/30) { border-color: rgb(254 240 138 / 0.3); } - :is(html[class~="dark"] .dark\:bg-blue-900\/30) { background-color: rgb(30 58 138 / 0.3); } - :is(html[class~="dark"] .dark\:bg-dark) { --tw-bg-opacity: 1; background-color: rgb(17 17 17 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-dark\/50) { background-color: rgb(17 17 17 / 0.5); } - :is(html[class~="dark"] .dark\:bg-gray-50\/10) { background-color: rgb(249 250 251 / 0.1); } - :is(html[class~="dark"] .dark\:bg-neutral-800) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-neutral-900) { --tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-orange-400\/20) { background-color: rgb(251 146 60 / 0.2); } - :is(html[class~="dark"] .dark\:bg-primary-300\/10) { background-color: hsl(var(--primary-hue) 100% 77% / 0.1); } - :is(html[class~="dark"] .dark\:bg-primary-400\/10) { background-color: hsl(var(--primary-hue) 100% 66% / 0.1); } - :is(html[class~="dark"] .dark\:bg-primary-600) { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:bg-red-900\/30) { background-color: rgb(127 29 29 / 0.3); } - :is(html[class~="dark"] .dark\:bg-yellow-700\/30) { background-color: rgb(161 98 7 / 0.3); } - :is(html[class~="dark"] .dark\:from-gray-100) { --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } - :is(html[class~="dark"] .dark\:to-gray-400) { --tw-gradient-to: #9ca3af var(--tw-gradient-to-position); } - :is(html[class~="dark"] .dark\:text-blue-200) { --tw-text-opacity: 1; color: rgb(191 219 254 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-100) { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-200) { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-300) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-400) { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-gray-50) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-neutral-200) { --tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-neutral-400) { --tw-text-opacity: 1; color: rgb(163 163 163 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-orange-300) { --tw-text-opacity: 1; color: rgb(253 186 116 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-primary-600) { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-red-200) { --tw-text-opacity: 1; color: rgb(254 202 202 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-slate-100) { --tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:text-yellow-200) { --tw-text-opacity: 1; color: rgb(254 240 138 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:opacity-80) { opacity: 0.8; } - :is(html[class~="dark"] .dark\:shadow-\[0_-12px_16px_\#111\]) { --tw-shadow: 0 -12px 16px #111; --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - :is(html[class~="dark"] .dark\:shadow-\[0_-1px_0_rgba\(255\2c 255\2c 255\2c \.1\)_inset\]) { --tw-shadow: 0 -1px 0 rgba(255,255,255,.1) inset; --tw-shadow-colored: inset 0 -1px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - :is(html[class~="dark"] .dark\:shadow-none) { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - :is(html[class~="dark"] .dark\:ring-white\/20) { --tw-ring-color: rgb(255 255 255 / 0.2); } - :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::-moz-placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:before\:bg-neutral-800)::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:before\:invert)::before { content: var(--tw-content); --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } - :is(html[class~="dark"] .dark\:hover\:border-gray-600:hover) { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:border-neutral-500:hover) { --tw-border-opacity: 1; border-color: rgb(115 115 115 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:border-neutral-800:hover) { --tw-border-opacity: 1; border-color: rgb(38 38 38 / var(--tw-border-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-gray-100\/5:hover) { background-color: rgb(243 244 246 / 0.05); } - :is(html[class~="dark"] .dark\:hover\:bg-neutral-700:hover) { --tw-bg-opacity: 1; background-color: rgb(64 64 64 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) { --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) { --tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) { background-color: hsl(var(--primary-hue) 100% 94% / 0.05); } - :is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) { --tw-bg-opacity: 1; background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover { background-color: hsl(var(--primary-hue) 100% 50% / 0.1); } - :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-gray-200:hover) { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-gray-300:hover) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-gray-50:hover) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-neutral-50:hover) { --tw-text-opacity: 1; color: rgb(250 250 250 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:text-white:hover) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } - :is(html[class~="dark"] .hover\:dark\:text-primary-600):hover { --tw-text-opacity: 1; color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); } - :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } - :is(html[class~="dark"] .dark\:focus\:bg-dark:focus) { --tw-bg-opacity: 1; background-color: rgb(17 17 17 / var(--tw-bg-opacity)); } - :is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) { --tw-ring-opacity: 1; --tw-ring-color: hsl(var(--primary-hue) 100% 32% / var(--tw-ring-opacity)); } - @media (prefers-contrast: more) { + :is(html[class~="dark"] .contrast-more\:dark\:border-current) { border-color: currentColor; } + :is(html[class~="dark"] .contrast-more\:dark\:border-gray-50) { --tw-border-opacity: 1; border-color: rgb(249 250 251 / var(--tw-border-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:border-neutral-400) { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) { --tw-border-opacity: 1; border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); } + :is(html[class~="dark"] .dark\:contrast-more\:border-neutral-400) { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:text-current) { color: currentColor; } + :is(html[class~="dark"] .contrast-more\:dark\:text-gray-100) { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:text-gray-300) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:text-gray-50) { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity)); } + :is(html[class~="dark"] .contrast-more\:dark\:shadow-\[0_0_0_1px_\#fff\]) { --tw-shadow: 0 0 0 1px #fff; --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + :is(html[class~="dark"] .contrast-more\:dark\:shadow-none) { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } + :is(html[class~="dark"] .contrast-more\:dark\:hover\:border-gray-50:hover) { --tw-border-opacity: 1; border-color: rgb(249 250 251 / var(--tw-border-opacity)); } } - @media print { + .print\:hidden { display: none; } + .print\:bg-transparent { background-color: transparent; } } - @media not all and (min-width: 1280px) { + .max-xl\:hidden { display: none; } } - @media not all and (min-width: 1024px) { + .max-lg\:min-h-\[340px\] { min-height: 340px; } } - @media not all and (min-width: 768px) { + .max-md\:hidden { display: none; } + .max-md\:min-h-\[340px\] { min-height: 340px; } + .max-md\:\[transform\:translate3d\(0\2c -100\%\2c 0\)\] { transform: translate3d(0,-100%,0); } } - @media (min-width: 640px) { + .sm\:block { display: block; } + .sm\:flex { display: flex; } + .sm\:w-\[110\%\] { width: 110%; } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:items-start { align-items: flex-start; } + .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; } + .sm\:text-xl { font-size: 1.25rem; } } - @media (min-width: 768px) { + .md\:sticky { position: sticky; } + .md\:top-16 { top: 4rem; } + .md\:inline-block { display: inline-block; } + .md\:hidden { display: none; } + .md\:aspect-\[1\.1\/1\] { aspect-ratio: 1.1/1; } + .md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] { height: calc(100vh - var(--navbar-height) - var(--menu-height)); } + .md\:max-h-\[min\(calc\(100vh-5rem-env\(safe-area-inset-bottom\)\)\2c 400px\)\] { max-height: min(calc(100vh - 5rem - env(safe-area-inset-bottom)),400px); } + .md\:w-64 { width: 16rem; } + .md\:shrink-0 { flex-shrink: 0; } + .md\:justify-start { justify-content: flex-start; } + .md\:self-start { align-self: flex-start; } + .md\:px-12 { padding-left: 3rem; padding-right: 3rem; } + .md\:pt-12 { padding-top: 3rem; } + .md\:text-5xl { font-size: 3rem; } + .md\:text-lg { font-size: 1.125rem; } + .md\:text-sm { font-size: .875rem; } + :is([dir="ltr"] .ltr\:md\:left-auto) { left: auto; } + :is([dir="rtl"] .rtl\:md\:right-auto) { right: auto; } } - @media (min-width: 1024px) { + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } - @media (min-width: 1280px) { + .xl\:block { display: block; } diff --git a/assets/css/components/navbar.css b/assets/css/components/navbar.css index 01dc81a..8bca91d 100644 --- a/assets/css/components/navbar.css +++ b/assets/css/components/navbar.css @@ -4,6 +4,14 @@ nav { } } +@supports ( + (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) +) { + .nav-container-blur { + @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80; + } +} + .hamburger-menu svg { g { @apply origin-center; diff --git a/assets/css/styles.css b/assets/css/styles.css index ac80cae..7713e4b 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,3 +1,5 @@ +@import "tailwind.css"; + @import "typography.css"; @import "highlight.css"; @import "components/cards.css"; @@ -6,10 +8,6 @@ @import "components/sidebar.css"; @import "components/navbar.css"; -@tailwind base; -@tailwind components; -@tailwind utilities; - html { @apply text-base antialiased; font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1; diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/assets/css/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 7ea4a0f..b584439 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -407,6 +407,8 @@ "mx-auto", "my-1.5", "my-2", + "nav-container", + "nav-container-blur", "next-error-h1", "no-underline", "not-prose", @@ -428,7 +430,6 @@ "p-2", "p-4", "p-6", - "pb-6", "pb-8", "pb-[env(safe-area-inset-bottom)]", "pb-px", diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 7778c02..3d0da93 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -5,8 +5,8 @@ {{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}} -
-
+
+