diff --git a/Makefile b/Makefile index 700ba6f1..045484a8 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,4 @@ BIOME_BASE_CMD := $(if $(shell which biome),biome,npx @biomejs/biome@2.2.2) -BIOME_CONFIG_PATH := --config-path="biome.json" WRITE_FLAG := --write .PHONY: list help @@ -26,11 +25,11 @@ ifeq ($(BIOME_ARGS), write) endif biome-format: - $(BIOME_BASE_CMD) format $(BIOME_CONFIG_PATH) $(FLAG) + $(BIOME_BASE_CMD) format $(FLAG) biome-lint: - $(BIOME_BASE_CMD) lint $(BIOME_CONFIG_PATH) $(FLAG) + $(BIOME_BASE_CMD) lint $(FLAG) biome-all: - $(BIOME_BASE_CMD) check $(BIOME_CONFIG_PATH) $(FLAG) + $(BIOME_BASE_CMD) check $(FLAG) setup-pre-commit: @if ! command -v pre-commit &> /dev/null; then \ diff --git a/assets/css/v2/highlight.css b/assets/css/v2/highlight.css index b9765f93..7a9bf5b5 100644 --- a/assets/css/v2/highlight.css +++ b/assets/css/v2/highlight.css @@ -1,88 +1,291 @@ -/* Generated using: hugo gen chromastyles --style=tango */ - -/* Background */ .bg { background-color:#f8f8f8; } -/* PreWrapper */ .chroma { background-color:#f8f8f8; } -/* Other */ .chroma .x { color:#000 } -/* Error */ .chroma .err { color:#a40000 } -/* CodeLine */ .chroma .cl { } -/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } -/* 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:#dfdfdf } -/* 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 } -/* Line */ .chroma .line { display:flex; } -/* Keyword */ .chroma .k { color:#204a87;font-weight:bold } -/* KeywordConstant */ .chroma .kc { color:#204a87;font-weight:bold } -/* KeywordDeclaration */ .chroma .kd { color:#204a87;font-weight:bold } -/* KeywordNamespace */ .chroma .kn { color:#204a87;font-weight:bold } -/* KeywordPseudo */ .chroma .kp { color:#204a87;font-weight:bold } -/* KeywordReserved */ .chroma .kr { color:#204a87;font-weight:bold } -/* KeywordType */ .chroma .kt { color:#204a87;font-weight:bold } -/* Name */ .chroma .n { color:#000 } -/* NameAttribute */ .chroma .na { color:#c4a000 } -/* NameBuiltin */ .chroma .nb { color:#204a87 } -/* NameBuiltinPseudo */ .chroma .bp { color:#3465a4 } -/* NameClass */ .chroma .nc { color:#000 } -/* NameConstant */ .chroma .no { color:#000 } -/* NameDecorator */ .chroma .nd { color:#5c35cc;font-weight:bold } -/* NameEntity */ .chroma .ni { color:#ce5c00 } -/* NameException */ .chroma .ne { color:#c00;font-weight:bold } -/* NameFunction */ .chroma .nf { color:#000 } -/* NameFunctionMagic */ .chroma .fm { color:#000 } -/* NameLabel */ .chroma .nl { color:#f57900 } -/* NameNamespace */ .chroma .nn { color:#000 } -/* NameOther */ .chroma .nx { color:#000 } -/* NameProperty */ .chroma .py { color:#000 } -/* NameTag */ .chroma .nt { color:#204a87;font-weight:bold } -/* NameVariable */ .chroma .nv { color:#000 } -/* NameVariableClass */ .chroma .vc { color:#000 } -/* NameVariableGlobal */ .chroma .vg { color:#000 } -/* NameVariableInstance */ .chroma .vi { color:#000 } -/* NameVariableMagic */ .chroma .vm { color:#000 } -/* Literal */ .chroma .l { color:#000 } -/* LiteralDate */ .chroma .ld { color:#000 } -/* LiteralString */ .chroma .s { color:#4e9a06 } -/* LiteralStringAffix */ .chroma .sa { color:#4e9a06 } -/* LiteralStringBacktick */ .chroma .sb { color:#4e9a06 } -/* LiteralStringChar */ .chroma .sc { color:#4e9a06 } -/* LiteralStringDelimiter */ .chroma .dl { color:#4e9a06 } -/* LiteralStringDoc */ .chroma .sd { color:#8f5902;font-style:italic } -/* LiteralStringDouble */ .chroma .s2 { color:#4e9a06 } -/* LiteralStringEscape */ .chroma .se { color:#4e9a06 } -/* LiteralStringHeredoc */ .chroma .sh { color:#4e9a06 } -/* LiteralStringInterpol */ .chroma .si { color:#4e9a06 } -/* LiteralStringOther */ .chroma .sx { color:#4e9a06 } -/* LiteralStringRegex */ .chroma .sr { color:#4e9a06 } -/* LiteralStringSingle */ .chroma .s1 { color:#4e9a06 } -/* LiteralStringSymbol */ .chroma .ss { color:#4e9a06 } -/* LiteralNumber */ .chroma .m { color:#0000cf;font-weight:bold } -/* LiteralNumberBin */ .chroma .mb { color:#0000cf;font-weight:bold } -/* LiteralNumberFloat */ .chroma .mf { color:#0000cf;font-weight:bold } -/* LiteralNumberHex */ .chroma .mh { color:#0000cf;font-weight:bold } -/* LiteralNumberInteger */ .chroma .mi { color:#0000cf;font-weight:bold } -/* LiteralNumberIntegerLong */ .chroma .il { color:#0000cf;font-weight:bold } -/* LiteralNumberOct */ .chroma .mo { color:#0000cf;font-weight:bold } -/* Operator */ .chroma .o { color:#ce5c00;font-weight:bold } -/* OperatorWord */ .chroma .ow { color:#204a87;font-weight:bold } -/* Punctuation */ .chroma .p { color:#000;font-weight:bold } -/* Comment */ .chroma .c { color:#8f5902;font-style:italic } -/* CommentHashbang */ .chroma .ch { color:#8f5902;font-style:italic } -/* CommentMultiline */ .chroma .cm { color:#8f5902;font-style:italic } -/* CommentSingle */ .chroma .c1 { color:#8f5902;font-style:italic } -/* CommentSpecial */ .chroma .cs { color:#8f5902;font-style:italic } -/* CommentPreproc */ .chroma .cp { color:#8f5902;font-style:italic } -/* CommentPreprocFile */ .chroma .cpf { color:#8f5902;font-style:italic } -/* Generic */ .chroma .g { color:#000 } -/* GenericDeleted */ .chroma .gd { color:#a40000 } -/* GenericEmph */ .chroma .ge { color:#000;font-style:italic } -/* GenericError */ .chroma .gr { color:#ef2929 } -/* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold } -/* GenericInserted */ .chroma .gi { color:#00a000 } -/* GenericOutput */ .chroma .go { color:#000;font-style:italic } -/* GenericPrompt */ .chroma .gp { color:#8f5902 } -/* GenericStrong */ .chroma .gs { color:#000;font-weight:bold } -/* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold } -/* GenericTraceback */ .chroma .gt { color:#a40000;font-weight:bold } -/* GenericUnderline */ .chroma .gl { color:#000;text-decoration:underline } -/* TextWhitespace */ .chroma .w { color:#f8f8f8;text-decoration:underline } +/* Background */ +.bg { + background-color: light-dark(#f8f8f8, #0d1117); +} + +/* PreWrapper */ +.chroma { + color: light-dark(#000, #e6edf3); + background-color: light-dark(#f8f8f8, #0d1117); +} + +/* Other */ +.chroma .x { + color: light-dark(#000, inherit); +} + +/* Error */ +.chroma .err { + color: light-dark(#a40000, #f85149); +} + +/* CodeLine */ +.chroma .cl { } + +/* LineLink */ +.chroma .lnlinks { + outline: none; + text-decoration: none; + color: inherit; +} + +/* 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: light-dark(#dfdfdf, #6e7681); +} + +/* 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: light-dark(#7f7f7f, #737679); +} + +/* 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: light-dark(#7f7f7f, #6e7681); +} + +/* Line */ +.chroma .line { + display: flex; +} + +/* Keyword */ +.chroma .k, +.chroma .kc, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr, +.chroma .kt { + color: light-dark(#204a87, #ff7b72); + font-weight: bold; +} + +/* Name */ +.chroma .n, +.chroma .nc, +.chroma .no, +.chroma .nf, +.chroma .fm, +.chroma .nn, +.chroma .nx, +.chroma .py, +.chroma .nv, +.chroma .vc, +.chroma .vg, +.chroma .vi, +.chroma .vm { + color: light-dark(#000, #79c0ff); +} + +/* NameAttribute */ +.chroma .na { + color: light-dark(#c4a000, inherit); +} + +/* NameBuiltin */ +.chroma .nb { + color: light-dark(#204a87, inherit); +} + +/* NameBuiltinPseudo */ +.chroma .bp { + color: light-dark(#3465a4, inherit); +} + +/* NameClass */ +.chroma .nc { + font-weight: light-dark(normal, bold); +} + +/* NameConstant */ +.chroma .no { + font-weight: light-dark(normal, bold); +} + +/* NameDecorator */ +.chroma .nd { + color: light-dark(#5c35cc, #d2a8ff); + font-weight: bold; +} + +/* NameEntity */ +.chroma .ni { + color: light-dark(#ce5c00, #ffa657); +} + +/* NameException */ +.chroma .ne { + color: light-dark(#c00, #f0883e); + font-weight: bold; +} + +/* NameLabel */ +.chroma .nl { + color: light-dark(#f57900, #79c0ff); + font-weight: light-dark(normal, bold); +} + +/* NameTag */ +.chroma .nt { + color: light-dark(#204a87, #7ee787); + font-weight: bold; +} + +/* LiteralString */ +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .dl, +.chroma .sd, +.chroma .s2, +.chroma .se, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .sr, +.chroma .s1, +.chroma .ss { + color: light-dark(#4e9a06, #a5d6ff); +} + +/* LiteralNumber */ +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, +.chroma .mo { + color: light-dark(#0000cf, #a5d6ff); + font-weight: bold; +} + +/* Operator */ +.chroma .o, +.chroma .ow { + color: light-dark(#ce5c00, #ff7b72); + font-weight: bold; +} + +/* Punctuation */ +.chroma .p { + color: light-dark(#000, inherit); + font-weight: bold; +} + +/* Comment */ +.chroma .c, +.chroma .ch, +.chroma .cm, +.chroma .c1, +.chroma .cs, +.chroma .cp, +.chroma .cpf { + color: light-dark(#8f5902, #8b949e); + font-style: italic; +} + +/* CommentSpecial */ +.chroma .cs, +.chroma .cp, +.chroma .cpf { + font-weight: light-dark(normal, bold); +} + +/* GenericDeleted */ +.chroma .gd { + color: light-dark(#a40000, #ffa198); + background-color: light-dark(inherit, #490202); +} + +/* GenericEmph */ +.chroma .ge { + color: light-dark(#000, inherit); + font-style: italic; +} + +/* GenericError */ +.chroma .gr { + color: light-dark(#ef2929, #ffa198); +} + +/* GenericHeading */ +.chroma .gh { + color: light-dark(#000080, #79c0ff); + font-weight: bold; +} + +/* GenericInserted */ +.chroma .gi { + color: light-dark(#00a000, #56d364); + background-color: light-dark(inherit, #0f5323); +} + +/* GenericOutput */ +.chroma .go { + color: light-dark(#000, #8b949e); + font-style: italic; +} + +/* GenericPrompt */ +.chroma .gp { + color: light-dark(#8f5902, #8b949e); +} + +/* GenericStrong */ +.chroma .gs { + color: light-dark(#000, inherit); + font-weight: bold; +} + +/* GenericSubheading */ +.chroma .gu { + color: light-dark(#800080, #79c0ff); + font-weight: bold; +} + +/* GenericTraceback */ +.chroma .gt { + color: light-dark(#a40000, #ff7b72); + font-weight: bold; +} + +/* GenericUnderline */ +.chroma .gl { + color: light-dark(#000, inherit); + text-decoration: underline; +} + +/* TextWhitespace */ +.chroma .w { + color: light-dark(#f8f8f8, #6e7681); + text-decoration: underline; +} diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index b2d9b766..fc782c51 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -129,7 +129,57 @@ textarea:not([rows]) { font-display: swap; } +/* Handle theme switching that can't be dont with the light-dark function */ +:root[data-theme="light"] { + color-scheme: light; +} +:root[data-theme="dark"] { + color-scheme: dark; +} + +/* card */ +:root[data-theme="light"] { + --card-border: 1px solid var(--color-codeblock-border); + --card-shadow: 3px 3px 0px oklch(var(--color-shadow)); + + --blockquote-border: 1px solid var(--color-codeblock-border); + --blockquote-shadow: 3px 3px 0px oklch(var(--color-shadow)); + + --icon-light: block; + --icon-dark: none; +} +:root[data-theme="dark"] { + --card-border: 1px solid var(--color-codeblock-border); + --card-shadow: none; + + --blockquote-border: 1px solid var(--color-codeblock-border); + --blockquote-shadow: none; + + --icon-dark: block; + --icon-light: none; + + blockquote.note::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + right: -4px; + bottom: -4px; + pointer-events: none; + z-index: -1; + outline: 1px dashed var(--color-codeblock-border); + outline-offset: -1px; + } + + blockquote.note { + outline: 3px solid var(--color-background); + outline-offset: -4px; + } +} + :root { + color-scheme: light dark; + /* Coveo color overrides */ /* More info: https://docs.coveo.com/en/atomic/latest/usage/themes-and-visual-customization/ */ @@ -171,11 +221,12 @@ textarea:not([rows]) { --color-brand-300: 0.84 0.0699 157.51; --color-brand-200: 0.91 0.0406 157.72; --color-brand-100: 0.98 0.0107 158.85; - --color-background: 1 0 0; - --color-foreground: 0 0 0; + --color-background: light-dark(oklch(1 0 0), oklch(0.1 0.194 147.7)); + --color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0 / 0.9)); --color-shadow: 0.86 0 0; + --code-color: light-dark(oklch(0 0 0), oklch(1 0 0)); - --color-footer-text: 0 0 0 / 65%; + --color-footer-text: light-dark(oklch(0 0 0 / 65%), oklch(1 0 0 / 65%)); --color-product-title: 0.64 0 0; --color-tabs-inactive-border: 0 0 0 / 20%; --color-brand-bay-blue: 0.5307 0.128959 243.2508; @@ -195,9 +246,12 @@ textarea:not([rows]) { /* Codeblock */ --margin-codeblock: 1.5rem var(--overflow-gutter-extension); - --color-inline_codeblock-border: 0.85 0 0; - --color-inline_codeblock-background: 0.98 0 0; - --color-codeblock-border: 0.63 0 0; + --color-inline_codeblock-border: light-dark(oklch(0.85 0 0), oklch(0.85 0 0)); + --color-inline_codeblock-background: light-dark( + oklch(0.98 0 0), + oklch(0.02 0 0) + ); + --color-codeblock-border: light-dark(oklch(0.63 0 0), oklch(0.9821 0 0)); --color-codeblock-background: 1 0 0; --color-codeblock-highlight: 0.99 0.0479 105.97; --codeblock-comment-diff: 2rem; @@ -243,7 +297,7 @@ textarea:not([rows]) { --overflow-gutter-extension: -1rem; /* Product Selector */ - --product-selector-background: 0.98 0 0; + --product-selector-background: light-dark(oklch(0.98 0 0), oklch(0.22 0 0)); /* vars for the primary grid setup */ --grid-content: minmax(34rem, 50rem); @@ -312,6 +366,7 @@ textarea:not([rows]) { --sidebar-item-padding-lr: 0.75rem; --sidebar-item-padding-tb: 0.25rem; --content-max-width: 88rem; + --color-sidebar-link: light-dark(oklch(0 0 0 / 75%), oklch(1 0 0 / 95%)); --main-col: minmax(34rem, 50rem); --side-col: minmax(18rem, 26rem); @@ -417,6 +472,7 @@ ol li:last-child { "sidebar footer"; min-height: 100vh; min-width: var(--grid-min-width); + background-color: var(--color-background); @media (max-width: 68rem) { grid-template-columns: 1fr; @@ -505,7 +561,7 @@ ol li:last-child { grid-area: header; display: flex; border-bottom: 1px solid oklch(var(--color-divider)); - background: oklch(var(--color-background)); + background: var(--color-background); position: sticky; top: 0; z-index: 2; @@ -533,7 +589,7 @@ ol li:last-child { width: 100%; &::part(wrapper) { - border-color: oklch(var(--color-codeblock-border)); + border-color: var(--color-codeblock-border); } &::part(submit-button-wrapper) { @@ -547,7 +603,7 @@ ol li:last-child { } &::part(suggestions-wrapper) { - border-color: oklch(var(--color-codeblock-border)); + border-color: var(--color-codeblock-border); } } } @@ -600,7 +656,10 @@ ol li:last-child { width: 336px; .header__control--sidebar { - color: oklch(var(--color-foreground)); + display: flex; + gap: 1rem; + + color: var(--color-foreground); .header__control--sidebar--open { display: none; @@ -610,6 +669,20 @@ ol li:last-child { display: unset; cursor: pointer; } + + .header__control--theme { + background: none; + border: none; + cursor: pointer; + + .header__control--theme--light { + display: var(--icon-light); + } + + .header__control--theme--dark { + display: var(--icon-dark); + } + } } } @@ -632,7 +705,7 @@ ol li:last-child { text-align: center; text-decoration: none; cursor: pointer; - background-color: oklch(var(--color-background)); + background-color: var(--color-background); font-size: var(--font-step--1); color: oklch(var(--color-brand-bay-blue)); font-weight: 500; @@ -646,8 +719,8 @@ ol li:last-child { .dropdown-content { position: absolute; - background-color: oklch(var(--color-background)); - border: oklch(var(--color-foreground)) 1px solid; + background-color: var(--color-background); + border: var(--color-foreground) 1px solid; box-shadow: 3px 3px 0px oklch(var(--color-shadow)); z-index: 20; right: 0; @@ -678,6 +751,7 @@ ol li:last-child { } .content { + background-color: var(--color-background); .last-modified { margin: 1rem 0 0 0; font-size: 0.875rem; @@ -724,7 +798,7 @@ ol li:last-child { .header__sidebar__panel, .sidebar__panel { cursor: pointer; - color: oklch(var(--color-foreground)); + color: var(--color-foreground); label { cursor: pointer; } @@ -748,7 +822,7 @@ ol li:last-child { height: calc(110vh - var(--header-height)); border-right: 1px solid oklch(var(--color-divider)); overflow: hidden; - background: oklch(var(--color-background)); + background: var(--color-background); box-sizing: border-box; transform: translateX(0); padding: 0 0 var(--space-s) var(--space-s); @@ -767,7 +841,7 @@ ol li:last-child { height: fit-content; position: sticky; top: 0; - background: oklch(var(--color-background)); + background: var(--color-background); z-index: 1; .sidebar__img { @@ -783,7 +857,7 @@ ol li:last-child { width: 100%; padding-top: 1rem; padding-right: var(--sidebar-item-padding-lr); - color: oklch(var(--color-foreground)); + color: var(--color-foreground); text-decoration-color: oklch(var(--color-brand) / 0.3); & button:hover * { color: oklch(var(--color-brand)); @@ -837,7 +911,7 @@ ol li:last-child { padding-inline-start: 1rem; align-content: center; font-size: var(--font-step-0); - color: oklch(var(--color-background)); + color: var(--color-background); background-color: oklch(var(--color-brand)); height: 2.5rem; @@ -901,7 +975,7 @@ ol li:last-child { .header__control { .header__control--sidebar { - color: oklch(var(--color-foreground)); + color: var(--color-foreground); .header__control--sidebar--open { display: none; @@ -1017,7 +1091,7 @@ ol li:last-child { .footer-f5-trademark p { margin: 0; - color: oklch(var(--color-footer-text)); + color: var(--color-footer-text); } .footer-useful-links { @@ -1027,7 +1101,7 @@ ol li:last-child { } .footer-useful-links a { - color: oklch(var(--color-footer-text)); + color: var(--color-footer-text); text-decoration: none; } @@ -1433,7 +1507,7 @@ atomic-search-interface#search-standalone-header { .header-search-box { &::part(wrapper) { - border-color: oklch(var(--color-codeblock-border)); + border-color: var(--color-codeblock-border); border-radius: 0; } @@ -1444,7 +1518,7 @@ atomic-search-interface#search-standalone-header { &::part(suggestions-wrapper) { border-radius: 0; - border-color: oklch(var(--color-codeblock-border)); + border-color: var(--color-codeblock-border); width: calc(100% + 2px); margin-inline-start: -1px; } @@ -1550,7 +1624,7 @@ nav.sidebar.sidebar__mobile-open { padding: 0.25rem 0.5rem; border-radius: 5px 0 0 5px; font-weight: 500; - color: oklch(var(--color-foreground)); + color: var(--color-foreground); &:hover { background-color: oklch(var(--color-brand) / 0.06); @@ -1619,7 +1693,7 @@ nav.sidebar.sidebar__mobile-open { } a { - color: oklch(var(--color-foreground)); + color: var(--color-foreground); text-decoration: none; } @@ -1664,7 +1738,7 @@ p { .breadcrumb-layout { position: relative; - background-color: white; + background-color: var(--color-background); .sidebar__mobile__toggle { display: none; @@ -1672,7 +1746,7 @@ p { } .breadcrumb { - color: oklch(var(--color-foreground)); + color: var(--color-foreground); text-decoration: none; font-size: 0.875rem; margin: 0; @@ -1780,14 +1854,14 @@ a:hover { .content__reading-time { font-size: var(--font-step--1); - color: oklch(var(--color-footer-text)); + color: var(--color-footer-text); } } .headerlink { text-decoration: none; - color: oklch(var(--color-foreground)); + color: var(--color-foreground); } .headerlink::before { @@ -1835,15 +1909,15 @@ a:hover { } .card { - border: 1px solid oklch(var(--color-codeblock-border)); - box-shadow: 3px 3px 0px oklch(var(--color-shadow)); + border: var(--card-border); + box-shadow: var(--card-shadow); padding: 1rem; order: 2; } } .card { - color: oklch(var(--color-foreground)); + color: var(--color-foreground); text-decoration: none; .card-container { @@ -1873,7 +1947,7 @@ a:hover { &:hover { box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4); - text-decoration-color: oklch(var(--color-background)); + text-decoration-color: var(--color-background); border: 1px solid oklch(var(--color-brand) / 0.8); } } @@ -1975,8 +2049,7 @@ table.table { border: var(--table-line-height) solid oklch(var(--table-color-divider)); border-top: var(--table-line-height) dashed oklch(var(--table-color-divider)); - border-bottom: var(--table-line-height) solid - oklch(var(--color-foreground)); + border-bottom: var(--table-line-height) solid var(--color-foreground); } tr:nth-child(even) td { @@ -1999,13 +2072,13 @@ table hr { /* MARK: Callouts */ blockquote { - border: 1px solid oklch(var(--color-foreground)); + background-color: var(--color-background); + border: var(--blockquote-border); padding: 1rem; height: fit-content; margin: var(--margin-callout); /* Expand into the gutter */ - /* solid 3px drop shadow */ - box-shadow: 3px 3px 0px oklch(var(--color-shadow)); + box-shadow: var(--blockquote-shadow); &:has(.code-block) .code-block:not(:has(.single-line)) { /* Removes negative margins from multi-line codeblocks */ @@ -2020,6 +2093,7 @@ blockquote { blockquote.note { position: relative; z-index: 0; + overflow: visible; } blockquote.note:before { @@ -2032,7 +2106,7 @@ blockquote.note:before { margin: -1.625rem 0 0 -0.25rem; padding: 0 0.25rem; display: block; - background-color: oklch(var(--color-background)); + background-color: var(--color-background); z-index: 999; } @@ -2217,14 +2291,17 @@ li:has(> div > blockquote) { */ code { font-family: "JetBrainsMono", monospace; + /* We want to use the same colour for codeblocks, regardless of theme*/ + color: var(--code-color); } /* Inline Codeblock */ code:not(pre code) { - border: solid 1px oklch(var(--color-inline_codeblock-border)); + color: var(--color-foreground); + border: solid 1px var(--color-inline_codeblock-border); border-radius: 0.25rem; padding: 0 0.25rem; - background-color: oklch(var(--color-inline_codeblock-background)); + background-color: var(--color-inline_codeblock-background); font-size: 0.875rem; } @@ -2297,9 +2374,10 @@ a:has(code:not(pre code)) { .code-type { display: inline-block; height: 1.5rem; - border-top: 1px solid oklch(var(--color-codeblock-border)); - border-left: 1px solid oklch(var(--color-codeblock-border)); - border-right: 1px solid oklch(var(--color-codeblock-border)); + color: var(--code-color); + border-top: 1px solid var(--color-codeblock-border); + border-left: 1px solid var(--color-codeblock-border); + border-right: 1px solid var(--color-codeblock-border); text-transform: uppercase; padding: 0.15rem 0.5rem; font-size: 0.75rem; @@ -2317,12 +2395,12 @@ a:has(code:not(pre code)) { } .code-copy-button { - background-color: oklch(var(--color-background)); - border: 1px solid oklch(var(--color-foreground)); + background-color: var(--color-background); + border: 1px solid var(--color-foreground); padding: 4px 6px; cursor: pointer; font-size: 12px; - color: oklch(var(--color-foreground)); + color: var(--color-foreground); display: none; position: absolute; margin-block-start: 8px; @@ -2342,7 +2420,7 @@ a:has(code:not(pre code)) { } .code-content { - border: 1px solid oklch(var(--color-codeblock-border)); + border: 1px solid var(--color-codeblock-border); overflow-x: scroll; scrollbar-width: none; line-height: 150%; @@ -2440,11 +2518,11 @@ hr { position: fixed; top: 0; left: 0; - background-color: oklch(var(--color-background)); - color: oklch(var(--color-foreground)); + background-color: var(--color-background); + color: var(--color-foreground); padding: 1rem 1rem; font-size: 1rem; - border: 2px solid oklch(var(--color-foreground)); + border: 2px solid var(--color-foreground); z-index: 1000; text-decoration: none; border-radius: 0; diff --git a/biome.json b/biome.json index 263e8cbb..497355e2 100644 --- a/biome.json +++ b/biome.json @@ -1,6 +1,5 @@ { "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json", - "root": false, "vcs": { "enabled": true, "clientKind": "git", diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4eabd547..68d98713 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -35,6 +35,56 @@ 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-K5HG9JT'); + diff --git a/layouts/partials/favicon.html b/layouts/partials/favicon.html index 9f807bb3..ea2b200f 100644 --- a/layouts/partials/favicon.html +++ b/layouts/partials/favicon.html @@ -1 +1 @@ - + diff --git a/layouts/partials/footer-v2.html b/layouts/partials/footer-v2.html index f695a939..b52cbb7e 100644 --- a/layouts/partials/footer-v2.html +++ b/layouts/partials/footer-v2.html @@ -1,6 +1,6 @@
- F5 logo + F5 logo

©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 4e099998..b6cb6766 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,7 +3,7 @@
@@ -236,7 +236,7 @@

F5 logo ©2025 F5, Inc. All rights reserved. diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 18f95d68..640e8a58 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -9,6 +9,14 @@ +

{{ if ( not ( in .Site.Params.buildtype "package" ) ) }} diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index b98fd8ca..41ceac7c 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -24,14 +24,14 @@ {{ end }} - + - + {{ if .Page.Lastmod }} diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index aa7b07eb..aa8278ad 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -41,7 +41,7 @@ {{- if $title -}}
{{- if $brandIcon -}} - + {{- else if $icon -}} {{ partial "lucide" (dict "context" . "icon" $icon) }} {{- end -}}