diff --git a/assets/css/blocks.css b/assets/css/blocks.css
new file mode 100644
index 0000000..52e002e
--- /dev/null
+++ b/assets/css/blocks.css
@@ -0,0 +1,224 @@
+/*
+Blocks should be used for larger state and layout changes.
+In this case, we handle the difference from our "normal" content layout,
+homepage, redocly pages, and list pages.
+*/
+
+/* Homepage */
+.homepage {
+ --content-max-width: 120rem;
+
+ .homepage-heading {
+ grid-column: 1 / -1;
+ font-size: 1.5rem;
+ font-weight: 500;
+ margin: 2rem 0rem;
+ }
+
+ .homepage-section {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
+ gap: 1.5rem;
+
+ justify-content: center;
+ max-width: 98rem;
+ margin: 0 auto;
+ padding-bottom: 2rem;
+
+ a {
+ color: oklch(var(--color-foreground));
+ text-decoration-color: oklch(var(--color-background));
+
+ &:hover {
+ text-decoration-color: oklch(var(--color-background));
+ }
+ }
+
+ .homepage-heading {
+ grid-column: 1 / -1;
+ margin: 1rem 0rem;
+ }
+ }
+
+ /* Styling for items */
+ .homepage-item {
+ background: oklch(var(--color-background));
+ border: 1px solid oklch(var(--color-codeblock-border));
+ box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+ min-height: 11rem;
+ padding: 1rem 2rem 2rem 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ cursor: pointer;
+
+ &:hover {
+ box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
+ text-decoration-color: oklch(var(--color-background));
+ border: 1px solid oklch(var(--color-brand) / 0.8);
+ }
+ }
+
+ .homepage-item-heading {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ .homepage-item-logo {
+ margin-right: 0.5rem;
+ }
+
+ .homepage-item-logo img {
+ height: 40px;
+ width: auto;
+ display: block;
+ }
+
+ .homepage-item-text {
+ font-size: 1.1rem;
+ font-weight: 600;
+ line-height: 1.2;
+ margin: 0;
+ padding: 0;
+ /* Hack to make text line-up with logos */
+ transform: translateY(-6px);
+ }
+
+ .homepage-item-content {
+ line-height: 1.5rem;
+ }
+}
+
+/* List page */
+.list-page {
+ --flow-gap: 0.5rem;
+
+ h2 {
+ font-size: 1.5rem;
+ }
+
+ hr {
+ margin: 1rem 0;
+ }
+}
+
+/* Handles different flow-gap of list page */
+.list-page.text-content {
+ grid-template-rows: calc(70px + var(--flow-gap)) max-content;
+}
+
+/* OTHER TODO SORT */
+
+/* breadcrumbs */
+nav {
+ display: flex;
+ align-items: center;
+
+ .logo {
+ height: 3rem;
+ width: 3rem;
+ }
+
+ .links a {
+ margin: 0 0 0 1rem;
+ }
+}
+
+/* Breadcrumb */
+.breadcrumb-layout {
+ position: relative;
+ background-color: --color-background;
+
+ .sidebar__mobile__toggle {
+ display: none;
+ }
+}
+
+.breadcrumb {
+ color: oklch(var(--color-foreground));
+ text-decoration: none;
+ font-size: 0.875rem;
+ margin: 0;
+}
+
+.breadcrumb .active {
+ font-weight: 600;
+}
+
+.breadcrumb ol {
+ list-style: none;
+ padding: 0;
+ display: block;
+
+ > * {
+ display: inline;
+ line-height: 25px;
+ }
+}
+
+.breadcrumb li:after {
+ padding: 0 0.25rem;
+ content: "\E1D7";
+}
+
+/* MARK: Catalog
+*/
+.catalog {
+ .catalog__table {
+ padding-bottom: 2rem;
+ }
+}
+
+/* MARK: Images
+*/
+figure {
+ margin: 0;
+}
+
+img,
+.figure-bitmap {
+ display: inline-block;
+ width: auto;
+ max-width: 100%;
+ height: auto;
+ max-height: 100%;
+}
+
+/* Logo */
+.f5-logo-footer {
+ height: 32px;
+ width: 32px;
+}
+
+/* HR Lines */
+hr {
+ /* Move to gutter */
+ width: calc(100% + 2rem);
+ margin-left: -1rem;
+
+ border: 1px solid oklch(var(--color-divider));
+}
+
+@media print {
+ .qualtrics-feedback {
+ visibility: hidden;
+ }
+}
+
+.not-found-container {
+ display: flex;
+ flex-direction: column;
+ margin-top: 10vh;
+
+ .info-header {
+ font-size: var(--font-step-2);
+ }
+
+ .info-desc {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3xs);
+ font-size: var(--font-step--1);
+ }
+}
diff --git a/assets/css/components/callouts.css b/assets/css/components/callouts.css
new file mode 100644
index 0000000..3542a72
--- /dev/null
+++ b/assets/css/components/callouts.css
@@ -0,0 +1,129 @@
+blockquote {
+ border: 1px solid oklch(var(--color-foreground));
+ padding: 1rem;
+ margin: 0 -1rem;
+
+ /* solid 3px drop shadow */
+ box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+
+ &:has(.code-block) .code-block:not(:has(.single-line)) {
+ /* Removes negative margins from multi-line codeblocks */
+ margin: 0;
+ }
+
+ .callout-content {
+ margin: 0;
+ }
+}
+
+blockquote.note {
+ position: relative;
+ z-index: 0;
+}
+
+blockquote.note:before {
+ content: attr(data-title);
+ font-size: 1rem;
+ font-weight: 600;
+ font-variation-settings: "wght" 600;
+
+ position: absolute;
+ margin: -1.625rem 0 0 -0.25rem;
+ padding: 0 0.25rem;
+ display: block;
+ background-color: oklch(var(--color-background));
+ z-index: 999;
+}
+
+blockquote p:first-child {
+ margin: 0 auto 1rem auto;
+}
+
+blockquote p:last-child {
+ margin: 0 auto;
+}
+
+/* Maintain the split column for as long as possible */
+@media (min-width: 67rem) {
+ blockquote.side-callout {
+ grid-column: 2 !important;
+ align-self: start;
+ }
+}
+
+blockquote > div > * {
+ margin: 0 0 var(--flow-gap) 0;
+}
+
+blockquote ol,
+blockquote ul {
+ margin: 0 0 1rem 1rem;
+}
+
+li > blockquote {
+ margin: var(--flow-gap) 0 0 0;
+}
+
+blockquote.call-out {
+ --padding: 0.75rem;
+ padding: var(--padding);
+
+ .call-out-type {
+ display: block;
+ font-weight: 500;
+ margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
+ calc(-1 * var(--padding));
+
+ padding: 0.25rem var(--padding);
+ }
+
+ br {
+ display: none;
+ }
+}
+
+blockquote.caution {
+ --color-shadow: var(--color-callout-caution-shadow);
+ border: 1px solid oklch(var(--color-callout-caution));
+
+ .call-out-type {
+ background-color: oklch(var(--color-callout-caution-shadow));
+ border-bottom: 1px solid oklch(var(--color-callout-caution));
+ }
+ .call-out-type .feather {
+ color: oklch(var(--color-callout-caution));
+ }
+}
+
+blockquote.warning {
+ --color-shadow: var(--color-callout-warning-shadow);
+ border: 1px solid oklch(var(--color-callout-warning));
+
+ .call-out-type {
+ background-color: oklch(var(--color-callout-warning-shadow));
+ border-bottom: 1px solid oklch(var(--color-callout-warning));
+ }
+ .call-out-type .feather {
+ color: oklch(var(--color-callout-warning));
+ }
+}
+
+blockquote.important {
+ --color-shadow: var(--color-callout-important-shadow);
+ border: 1px solid oklch(var(--color-callout-important));
+
+ .call-out-type {
+ background-color: oklch(var(--color-callout-important-shadow));
+ border-bottom: 1px solid oklch(var(--color-callout-important));
+ }
+}
+
+li:has(> div > blockquote) {
+ blockquote {
+ margin: 0;
+ }
+
+ div:has(blockquote) {
+ margin-bottom: 0.5rem;
+ }
+}
diff --git a/assets/css/components/code-block.css b/assets/css/components/code-block.css
new file mode 100644
index 0000000..2666921
--- /dev/null
+++ b/assets/css/components/code-block.css
@@ -0,0 +1,145 @@
+code {
+ font-family: "JetBrainsMono", monospace;
+}
+
+/* Inline Codeblock */
+code:not(pre code) {
+ border: solid 1px oklch(var(--color-inline_codeblock-border));
+ border-radius: 0.25rem;
+ padding: 0 0.25rem;
+ background-color: oklch(var(--color-inline_codeblock-background));
+ font-size: 0.875rem;
+}
+
+/* Inline Code (link) */
+a code:not(pre code) {
+ border: solid 1px oklch(var(--color-brand) / 0.3);
+ border-bottom: solid 2px oklch(var(--color-brand) / 0.3);
+
+ /* transition: border 0.15s ease-in-out; */
+}
+
+a code:not(pre code):hover {
+ border: solid 1px oklch(var(--color-brand) / 0.8);
+ border-bottom: solid 2px oklch(var(--color-brand) / 0.8);
+}
+
+a:has(code:not(pre code)) {
+ text-decoration: none;
+}
+
+/* Regular Codeblock */
+.highlight {
+ padding: 0 1rem 0 1rem;
+ position: relative;
+ flex: 1;
+
+ code .cl {
+ position: relative;
+ }
+}
+
+.code-block {
+ position: relative;
+
+ tr::after {
+ display: none;
+ }
+
+ .line .w {
+ /* White-space */
+ text-decoration: none !important;
+ }
+}
+
+.code-block .code-header:not(:has(.code-type)) {
+ /* Remove margin for codeblocks without a type */
+ margin-top: -1.5rem;
+}
+
+.highlight-v2 {
+ border: 1px solid oklch(var(--color-codeblock-border));
+ overflow-x: scroll;
+ scrollbar-width: none;
+ line-height: 150%;
+ padding: 1rem 0;
+ /* margin: 1.5rem 0 0.25rem 0; */
+}
+
+.highlight code {
+ font-size: 0.875rem;
+}
+
+.highlight-v2.single-line {
+ display: flex;
+ align-items: center;
+ border: 1px solid oklch(var(--color-codeblock-border));
+ overflow-x: scroll;
+ line-height: 1;
+}
+
+.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));
+ text-transform: uppercase;
+ padding: 0.15rem 0.5rem;
+ font-size: 0.75rem;
+ z-index: 999;
+ background-color: oklch(var(--color-bg-light));
+ margin: 0 0 -1px 0;
+}
+
+.code-container {
+ box-shadow: 2px 2px 0px oklch(var(--color-codeblock-shadow));
+}
+
+ol .code-block,
+ul .code-block {
+ margin: 0.75rem 0;
+}
+
+.code-container:hover {
+ .code-copy-button {
+ display: block;
+ }
+}
+
+.code-copy-button {
+ background-color: oklch(var(--color-background));
+ border: 1px solid oklch(var(--color-foreground));
+ padding: 4px 6px;
+ cursor: pointer;
+ font-size: 12px;
+ color: oklch(var(--color-foreground));
+ display: none;
+ position: absolute;
+ margin-top: 8px;
+ right: 1rem;
+ z-index: 1;
+ --color-codeblock-shadow: 0 0 0;
+ box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
+}
+
+.code-copy-button:hover {
+ box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
+}
+
+.code-copy-button:focus {
+ outline: none;
+ box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
+}
+
+.next-prev-icon {
+ display: flex;
+ list-style-type: none;
+ padding: 0;
+}
+
+.highlight code .hl {
+ width: fit-content;
+ min-width: 100%;
+ background-color: oklch(var(--color-codeblock-highlight));
+}
diff --git a/assets/css/components/coveo.css b/assets/css/components/coveo.css
new file mode 100644
index 0000000..d4be60d
--- /dev/null
+++ b/assets/css/components/coveo.css
@@ -0,0 +1,121 @@
+#search-v2 {
+ display: inline-block !important;
+ width: 95vw;
+ grid-column: 1 / -1;
+ --atomic-primary: oklch(var(--color-brand));
+ --atomic-primary-ring: oklch(var(--color-brand));
+ --atomic-primary-light: oklch(var(--color-brand));
+ --atomic-border-radius-lg: 0;
+ --atomic-border-radius-md: 0;
+ --atomic-border-radius: 0;
+ --atomic-font-family: var(--font-family);
+
+ atomic-search-box {
+ z-index: 0;
+ }
+}
+
+atomic-search-interface {
+ height: fit-content;
+}
+
+.header-search-box {
+ &::part(wrapper) {
+ border-radius: 0;
+ border-color: oklch(var(--color-foreground));
+ }
+
+ &::part(suggestions-wrapper) {
+ border-radius: 0;
+ border-color: oklch(var(--color-foreground));
+ width: calc(100% + 2px);
+ margin-left: -1px;
+ }
+
+ &::part(submit-button-wrapper) {
+ --atomic-primary: var(--atomic-neutral-dark);
+ }
+}
+
+atomic-refine-toggle {
+ display: none;
+}
+
+@media (max-width: 1024px) {
+ atomic-refine-toggle {
+ display: block;
+ }
+}
+
+atomic-query-summary {
+ /* Show duration */
+ &::part(duration) {
+ display: inline-block !important;
+ }
+}
+
+atomic-search-layout {
+ grid-template-areas:
+ "atomic-section-search"
+ "atomic-section-status"
+ "atomic-section-facets"
+ "atomic-section-main";
+
+ grid-template-columns: minmax(50%, 100%) !important;
+
+ @media (min-width: 1024px) {
+ grid-template-areas:
+ "atomic-section-search atomic-section-status"
+ "atomic-section-facets atomic-section-main "
+ "atomic-section-facets . " !important;
+
+ grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
+ column-gap: calc(1.5rem + 2rem) !important;
+ }
+}
+
+atomic-search-layout atomic-layout-section[section="status"] {
+ /* Override Coveo's width to be full */
+ max-width: 100%;
+ display: block;
+ width: 100%;
+}
+
+atomic-search-layout atomic-layout-section[section="search"] {
+ /* Override Coveo's width to be full */
+ width: 100% !important;
+ max-width: 100% !important;
+}
+
+.atomic-full-summary-and-sort {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: 1rem;
+ justify-content: space-between;
+
+ @media (min-width: 480px) {
+ flex-direction: row;
+ align-items: center;
+ }
+
+ atomic-sort-dropdown::part(label) {
+ margin-left: 0;
+ }
+}
+
+#atomic-search-box-xqtsq-popup {
+ z-index: 9999;
+}
+
+body:not(:has(.main-layout)) header atomic-search-interface {
+ /* Show on landing pages */
+ display: block;
+}
+
+@media (max-width: 88rem) {
+ /* Show on pages with sidebar if it is hidden */
+ body:has(.sidebar-layout) header atomic-search-interface {
+ display: block;
+ }
+}
diff --git a/assets/css/components/details.css b/assets/css/components/details.css
new file mode 100644
index 0000000..3f46ddb
--- /dev/null
+++ b/assets/css/components/details.css
@@ -0,0 +1,15 @@
+details summary {
+ color: oklch(var(--color-brand));
+ transition: text-decoration-color 0.15s ease-in-out;
+ text-decoration: underline;
+ text-decoration-color: oklch(var(--color-brand) / 0.3);
+
+ & ~ * {
+ margin-top: 1rem;
+ }
+}
+
+details summary:hover {
+ text-decoration-color: oklch(var(--color-brand) / 0.8);
+ cursor: pointer;
+}
diff --git a/assets/css/components/footer.css b/assets/css/components/footer.css
new file mode 100644
index 0000000..4e37521
--- /dev/null
+++ b/assets/css/components/footer.css
@@ -0,0 +1,48 @@
+.footer {
+ grid-area: footer;
+ padding: var(--space-l);
+ background-color: oklch(var(--color-footer));
+ margin-top: auto;
+}
+
+.footer-layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ font-size: 0.875rem;
+ gap: 24px;
+}
+
+.footer-f5-trademark {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.footer-f5-trademark p {
+ margin: 0;
+ color: oklch(var(--color-footer-text));
+}
+
+.footer-useful-links {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 18px;
+}
+
+.footer-useful-links a {
+ color: oklch(var(--color-footer-text));
+ text-decoration: none;
+}
+
+@media (min-width: 814px) {
+ .footer-layout {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ font-size: 0.875rem;
+ }
+
+ .footer-useful-links {
+ gap: 4px;
+ }
+}
diff --git a/assets/css/components/header.css b/assets/css/components/header.css
new file mode 100644
index 0000000..0d5f07a
--- /dev/null
+++ b/assets/css/components/header.css
@@ -0,0 +1,99 @@
+.header {
+ grid-area: header;
+ display: flex;
+ padding: 0 var(--space-s);
+ border-bottom: 1px solid oklch(var(--color-divider));
+
+ background: rgba(255, 255, 255, 0.5);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ position: sticky;
+ top: 0;
+ z-index: 1;
+
+ .header-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+
+ .header__img {
+ height: 2rem;
+ padding-left: 12px;
+ }
+
+ .header__search {
+ display: block;
+ width: 14rem;
+ /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
+ transform: translateY(0);
+ overflow: hidden;
+ }
+
+ .header__product-selector {
+ width: 10rem;
+ background: rgba(0, 0, 0, 0);
+ color: oklch(var(--color-foreground));
+ text-decoration-color: oklch(var(--color-brand) / 0.3);
+ & :hover {
+ color: oklch(var(--color-brand));
+ }
+
+ .product-selector__button {
+ display: flex;
+ align-items: center;
+ background: rgba(0, 0, 0, 0);
+ border: none;
+ width: 16rem;
+ font-weight: 500;
+ cursor: pointer;
+ color: oklch(var(--color-foreground));
+ text-decoration-color: oklch(var(--color-brand) / 0.3);
+ transition: color 0.15s ease-in-out;
+
+ & :hover {
+ color: oklch(var(--color-brand));
+ }
+ }
+ }
+
+ > ul {
+ padding: 0;
+ }
+ }
+
+ .dropdown-content {
+ position: absolute;
+ background-color: oklch(var(--color-background));
+ border: oklch(var(--color-foreground)) 1px solid;
+ box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+ z-index: 1;
+ right: 0;
+ display: none;
+ width: 400px;
+ max-width: 80vw;
+ margin-right: 1rem;
+ }
+
+ .dropdown-content ul {
+ padding: 20px 10px;
+ }
+
+ .nav-item-explore {
+ margin: 0;
+ }
+
+ .navbar-button {
+ padding: 0.5rem 0.5rem;
+ border: none;
+ border-radius: 0.25rem;
+ text-align: center;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+ ul {
+ list-style: none;
+ }
+}
diff --git a/assets/css/components/highlight.css b/assets/css/components/highlight.css
new file mode 100644
index 0000000..052449d
--- /dev/null
+++ b/assets/css/components/highlight.css
@@ -0,0 +1,312 @@
+/* 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;
+}
+
+/* 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;
+}
diff --git a/assets/css/components/product-landing.css b/assets/css/components/product-landing.css
new file mode 100644
index 0000000..73bcd3a
--- /dev/null
+++ b/assets/css/components/product-landing.css
@@ -0,0 +1,86 @@
+/* Landing page cards */
+.text-content .card-layout {
+ grid-column: 1;
+
+ .card-section {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ strong {
+ font-weight: 500;
+ }
+
+ /* Hide all the cards past 3 if it is a featured card section */
+ &.featured-section {
+ .card-section-content.card-grid
+ > *:nth-child(n + 4 of div.card-container) {
+ display: none;
+ }
+ }
+ }
+}
+
+/* Optional grid layout */
+.card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
+ gap: 1.5rem;
+
+ .card-container {
+ border: 1px solid oklch(var(--color-codeblock-border));
+ box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+ padding: 1rem;
+
+ &.featured-card {
+ /* If there is a need for a featured card, only the featured card should be full length */
+ grid-column: 1 / -1;
+
+ /* If there is a featured card AND two cards, the last one should be full length */
+ ~ .card-container:nth-child(2n):last-child {
+ grid-column: 1 / -1;
+ }
+ }
+ }
+
+ /* If there is no featured card, last card that is the 3rd one should be full width */
+ &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
+ grid-column: 1 / -1;
+ }
+}
+
+.card-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-bottom: 1rem;
+
+ .card-header {
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+
+ .card-brand-icon {
+ height: 20px;
+ width: auto;
+ }
+
+ h2 {
+ padding: 0;
+ margin: 0;
+ font-size: 1rem;
+ }
+ }
+}
+
+.list-header-container {
+ display: flex;
+ gap: 1.5rem;
+ align-items: center;
+ justify-content: start;
+
+ img {
+ width: auto;
+ height: 3.5rem;
+ }
+}
diff --git a/assets/css/components/product-selector.css b/assets/css/components/product-selector.css
new file mode 100644
index 0000000..18b17e4
--- /dev/null
+++ b/assets/css/components/product-selector.css
@@ -0,0 +1,53 @@
+.product-selector {
+ /* should appear above search box on smaller displays */
+ z-index: 11;
+ display: none;
+ position: absolute;
+ top: 0;
+ margin-top: calc(var(--header-height) - 1rem);
+ padding: 1rem 1.5rem;
+ background-color: oklch(var(--color-background));
+ border: oklch(var(--color-foreground)) 1px solid;
+ box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+}
+
+.product-name {
+ padding-right: var(--space-s);
+}
+
+.product-selector-button-icon {
+ color: black;
+
+ svg {
+ color: black;
+ stroke: currentColor;
+ }
+}
+
+button:has(~ .product-selector[style*="block"])
+ > .product-selector-button-icon {
+ transition: transform 0.1s ease-in-out;
+ transform: rotate(90deg);
+}
+
+button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
+ transition: transform 0.1s ease-in-out;
+ transform: rotate(0deg);
+}
+.product-selector p {
+ font-size: 0.75rem;
+ color: oklch(var(--color-product-title));
+ display: inline;
+}
+
+.product-selector ul {
+ padding-left: 0;
+ margin-top: 0;
+ list-style-type: none;
+}
+
+.product-selector a {
+ text-decoration: none;
+ color: oklch(var(--color-foreground));
+ font-size: 1rem;
+}
diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
new file mode 100644
index 0000000..c4dd390
--- /dev/null
+++ b/assets/css/components/sidebar.css
@@ -0,0 +1,317 @@
+/* sidebar toggling */
+#sidebar-panel:checked ~ .grid-container {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "content"
+ "footer";
+
+ .sidebar {
+ display: none;
+ }
+
+ .header__sidebar__panel {
+ display: flex;
+ align-self: center;
+ }
+
+ .header {
+ .header__logo-small {
+ display: unset;
+ }
+ }
+}
+
+/* sidebar layout */
+
+.header__sidebar__panel,
+.sidebar__panel {
+ cursor: pointer;
+ color: var(--color-foreground);
+ label {
+ cursor: pointer;
+ }
+
+ :hover {
+ color: oklch(var(--color-brand));
+ }
+}
+
+.header__sidebar__panel {
+ display: none;
+}
+
+.sidebar {
+ grid-area: sidebar;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: var(--sidebar-width);
+ /* for sticky header, this needs to be calculated to avoid extra whitespace */
+ height: calc(110vh - var(--header-height));
+ border-right: 1px solid oklch(var(--color-divider));
+ overflow: hidden;
+ background: oklch(var(--color-background));
+ box-sizing: border-box;
+ transform: translateX(0);
+ padding: 0 0 var(--space-s) var(--space-s);
+
+ .sidebar__container {
+ display: grid;
+ grid-template-rows: var(--header-height) 1fr;
+ height: 100%;
+
+ .sidebar__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: sticky;
+ top: 0;
+ background: oklch(var(--color-background));
+ z-index: 1;
+ padding: 0 2.25rem 0 var(--sidebar-item-padding-lr);
+
+ .sidebar__img {
+ height: 2rem;
+ }
+ }
+
+ .sidebar__content {
+ overflow-y: auto;
+ min-height: 0;
+ /* allows space for scrollbar */
+ width: calc(var(--sidebar-width) - 1rem);
+ scrollbar-gutter: stable;
+ }
+ }
+
+ .sidebar__search {
+ display: none;
+ }
+}
+
+/* This is our "mobile" or no sidebar breakpoint */
+@media (max-width: 68rem) {
+ #sidebar-panel:checked ~ .grid-container {
+ .sidebar {
+ /* Above search */
+ z-index: 11;
+ display: block;
+ transform: translateX(0);
+ border-bottom: 1px solid oklch(var(--color-divider));
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ .sidebar__content__wrapper {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .sidebar__search {
+ display: unset;
+ width: calc(var(--sidebar-width) - 4rem);
+ margin-left: 1rem;
+ }
+ }
+ }
+
+ .header {
+ .header__logo-small {
+ display: unset;
+ img {
+ margin: 0;
+ }
+ }
+ .header-container {
+ .header__search {
+ display: none;
+ }
+ }
+ }
+
+ .header__product-selector {
+ display: none;
+ }
+
+ .header__sidebar__panel {
+ display: flex;
+ align-items: center;
+ }
+
+ .sidebar {
+ grid-area: sidebar;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: var(--sidebar-width, 16rem);
+ transform: translateX(-100%);
+ }
+
+ .sidebar-button {
+ display: block;
+ margin-bottom: 1rem;
+ padding: 0.5rem 1rem;
+ background: #000;
+ color: #fff;
+ cursor: pointer;
+ }
+}
+
+nav.sidebar.sidebar__mobile-open {
+ display: block;
+}
+
+.sidebar {
+ grid-area: sidebar;
+ --color-foreground: oklch(0 0 0 / 0.75);
+
+ .sidebar__container,
+ .sidebar__container button,
+ .sidebar__container ul,
+ .sidebar__container li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ font-weight: 400;
+ font-size: 0.875rem;
+ }
+
+ .sidebar__container {
+ width: var(--sidebar-width);
+ }
+
+ .sidebar__container button {
+ padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
+ justify-content: space-between;
+ }
+
+ .sidebar__content {
+ padding: 0.5rem 0 0.4rem 0;
+ margin-right: 0.25rem;
+ }
+
+ .sidebar__ul {
+ padding-left: 0;
+ }
+
+ .sidebar__children {
+ padding-left: 1rem;
+ }
+
+ .sidebar__toggle {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ cursor: pointer;
+ background: none;
+ border: none;
+ width: 100%;
+ text-align: left;
+ padding: 0.25rem 0.5rem;
+ border-radius: 5px 0 0 5px;
+ font-weight: 500;
+ color: var(--color-foreground);
+
+ &:hover {
+ background-color: oklch(var(--color-brand) / 0.06);
+ color: oklch(var(--color-brand) / 1);
+ }
+ }
+
+ .sidebar__container button.sidebar__toggle--ancestor {
+ font-weight: 600;
+ }
+
+ .sidebar__chevron {
+ display: flex;
+ align-items: flex-end;
+ }
+
+ .sidebar__chevron svg {
+ stroke-width: 1.5;
+ width: 1rem;
+ height: 1rem;
+ }
+
+ .sidebar__chevron--open {
+ transform: rotate(90deg);
+ }
+
+ .sidebar__toggle:not(:has(.sidebar__chevron)) {
+ padding-left: 2rem;
+ }
+
+ .sidebar__link {
+ display: block;
+ padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
+ margin: 2px 0 2px 0;
+ border-radius: 5px 0 0 5px;
+ color: oklch(0 0 0 / 0.75);
+ text-decoration: none;
+ transition:
+ background-color 0.2s ease,
+ color 0.2s ease;
+
+ &:hover {
+ background-color: oklch(var(--color-brand) / 0.08);
+ color: oklch(var(--color-brand));
+ }
+ }
+
+ .sidebar__link--current,
+ .sidebar__toggle.sidebar__link--current {
+ color: oklch(var(--color-brand) / 1);
+ background-color: oklch(var(--color-brand) / 0.1);
+ font-weight: 600;
+ display: flex;
+ justify-self: stretch;
+ width: auto;
+ box-sizing: border-box;
+ }
+
+ .sidebar__toc {
+ #TableOfContents {
+ padding: 0 0.75rem 0 0;
+ margin: 0.5rem 0.25rem 0.5rem 0.8rem;
+ border-left: 1px solid var(--color-divider);
+ color: oklch(0 0 0 / 0.75);
+
+ &[hidden] {
+ display: none;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ &:empty {
+ display: none;
+ }
+
+ li {
+ padding: 0.25rem 0.75rem;
+ }
+
+ /* handles bug in hugo where non-rendered headers cause empty li */
+ /* https://github.com/gohugoio/hugo/issues/7128 */
+ li:empty {
+ display: none;
+ }
+
+ li:first-child {
+ padding-top: 0;
+ }
+
+ ul ul li:first-child {
+ padding-top: 0.75rem;
+ }
+
+ li:last-child {
+ padding-bottom: 0;
+ }
+ }
+ }
+}
diff --git a/assets/css/components/tables.css b/assets/css/components/tables.css
new file mode 100644
index 0000000..74d6f4e
--- /dev/null
+++ b/assets/css/components/tables.css
@@ -0,0 +1,67 @@
+/* MARK: Tables
+*/
+table {
+ position: relative;
+ z-index: 0;
+
+ td {
+ padding: var(--table-row-space-between) 0;
+ }
+
+ th {
+ font-weight: bold;
+ text-align: start;
+ vertical-align: top;
+ padding-bottom: var(--table-header-bottom-spacing);
+ }
+
+ tr {
+ position: relative;
+ }
+
+ tr::after {
+ content: "";
+ position: absolute;
+ border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
+ bottom: 0;
+ left: calc(-1 * var(--overflow-gutter-extension));
+ width: calc(100% + (2 * var(--overflow-gutter-extension)));
+ }
+}
+
+.md-table-scroll-x {
+ overflow-x: auto;
+ width: 100%;
+}
+
+.narrow table {
+ min-width: 100%;
+ margin: var(--table-top-bottom-spacing) 0;
+ border-collapse: collapse;
+}
+
+.wide table {
+ margin: var(--table-top-bottom-spacing) 0;
+ border-collapse: collapse;
+}
+
+.narrow table th,
+.narrow table td {
+ padding-left: var(--table-min-column-spacing-narrow);
+}
+
+.wide table th,
+.wide table td {
+ padding-left: var(--table-min-column-spacing-wide);
+}
+
+table th:first-child,
+table td:first-child {
+ padding-left: 0;
+}
+
+table hr {
+ color: oklch(var(--color-divider));
+ border: none;
+ border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
+}
diff --git a/assets/css/components/tabs.css b/assets/css/components/tabs.css
new file mode 100644
index 0000000..b714e46
--- /dev/null
+++ b/assets/css/components/tabs.css
@@ -0,0 +1,73 @@
+/* MARK: Tabs
+*/
+.tabs-container {
+ width: calc(100% + 2rem);
+ margin-left: -1rem;
+
+ input[type="radio"] {
+ display: none;
+ }
+
+ .tab-labels {
+ display: flex;
+ position: relative;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ scrollbar-width: none;
+ white-space: nowrap;
+ margin: 0;
+ padding-left: 2rem;
+
+ > :not(:last-child) {
+ border-right: none;
+ }
+
+ li {
+ list-style: none;
+ border: 1px solid oklch(var(--color-tabs-inactive-border));
+ border-bottom: 1px solid oklch(var(--color-foreground));
+ color: oklch(var(--color-brand));
+ padding: 10px;
+ margin: 0;
+ position: relative;
+
+ label {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .tab-content {
+ display: none;
+ margin-top: 1rem;
+ margin-left: 0;
+ width: 100%;
+
+ padding: 1rem;
+ border-bottom: 1px solid oklch(var(--color-foreground));
+
+ & > * {
+ margin: 0 0 var(--flow-gap) 0;
+ }
+ }
+
+ .tab-labels::before {
+ content: "";
+ position: absolute;
+ display: block;
+ bottom: 0;
+ left: 0;
+ width: 2rem;
+ border-bottom: 1px solid oklch(var(--color-foreground));
+ }
+
+ .tab-labels::after {
+ content: "";
+ position: relative;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ border-bottom: 1px solid oklch(var(--color-foreground));
+ }
+}
diff --git a/assets/css/global/layout.css b/assets/css/global/layout.css
new file mode 100644
index 0000000..2e86670
--- /dev/null
+++ b/assets/css/global/layout.css
@@ -0,0 +1,170 @@
+/* The "default" content view grid */
+.grid-container {
+ display: grid;
+ grid-template-columns: var(--sidebar-width) 1fr;
+ grid-template-rows: var(--header-height) 1fr auto;
+ grid-template-areas:
+ "sidebar header"
+ "sidebar content"
+ "sidebar footer";
+ min-height: 100vh;
+ min-width: var(--grid-min-width);
+
+ @media (max-width: 68rem) {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "sidebar header"
+ "sidebar content"
+ "sidebar footer";
+
+ .text-content {
+ margin-top: 1rem;
+ }
+
+ .breadcrumb-layout {
+ border-bottom: 1px solid oklch(var(--color-divider));
+ align-items: center;
+ padding: var(--space-xs) 0;
+ }
+ }
+ .content {
+ padding: 0 var(--space-s) 2rem;
+ }
+
+ .header__logo {
+ display: none;
+ }
+
+ .header__logo-small {
+ display: none;
+ }
+}
+
+/* Homepage specific layout */
+.grid-container:has(.homepage) {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "content"
+ "footer";
+
+ .header__logo {
+ display: unset;
+ }
+
+ .sidebar,
+ .header__product-selector,
+ .header__sidebar__panel,
+ .header__logo-small {
+ display: none;
+ }
+}
+
+/* Search specific layout */
+.grid-container:has(.search) {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "header"
+ "content"
+ "footer";
+
+ .sidebar {
+ display: none;
+ }
+
+ .header__logo {
+ display: unset;
+ }
+}
+
+@media (min-width: 88em) {
+ .header__logo {
+ display: unset;
+ }
+
+ .text-content {
+ grid-template-columns: var(--grid-content) var(--grid-side-callout);
+ grid-template-rows: 3rem max-content;
+ column-gap: var(--grid-column-gutter);
+ }
+
+ .text-content > :not(.wide) {
+ grid-column: 1;
+ }
+
+ .content-layout {
+ display: grid;
+ grid-template-columns: 1fr minmax(
+ auto,
+ calc(
+ var(--grid-content) +
+ var(--grid-side-callout) +
+ var(--grid-column-gutter)
+ )
+ ) 1fr;
+ column-gap: var(--grid-column-gutter);
+ }
+
+ .navbar atomic-search-interface {
+ margin: 0;
+ display: block;
+ }
+}
+
+/* Main content block to render documentation */
+.content {
+ grid-area: content;
+ justify-self: center;
+ padding: 0 var(--space-l) 2rem var(--space-l);
+ max-width: var(--content-max-width);
+
+ /* Allow redocly to fill the entire container */
+ &.content__redocly {
+ justify-self: unset;
+ max-width: unset;
+ }
+}
+
+.content-layout {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr;
+ z-index: 1;
+}
+
+#searchbox {
+ width: 24rem;
+ display: none;
+ grid-column: 1;
+}
+
+.breadcrumb-layout {
+ grid-column: 1 / -1;
+}
+
+.text-content {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: var(--grid-content-mobile);
+ column-gap: var(--grid-column-gutter);
+ margin-top: 2rem;
+ grid-auto-rows: max-content;
+ row-gap: var(--flow-gap);
+ justify-content: center;
+}
+
+.text-content > :not(.wide) {
+ grid-column: 1 / -1;
+}
+
+.text-content .wide {
+ grid-column: 1 / -1;
+}
+
+.text-content table {
+ width: 100%;
+}
+
+main {
+ margin: 0 var(--space-s) var(--space-s) var(--space-s);
+}
diff --git a/assets/css/global/reset.css b/assets/css/global/reset.css
new file mode 100644
index 0000000..e08c162
--- /dev/null
+++ b/assets/css/global/reset.css
@@ -0,0 +1,123 @@
+/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+ -moz-text-size-adjust: none;
+ -webkit-text-size-adjust: none;
+ text-size-adjust: none;
+ overflow-y: scroll;
+ scroll-behavior: smooth;
+ font-optical-sizing: auto;
+ font-weight: 300;
+ font-style: normal;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ scroll-margin-top: 1.5rem;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+ margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+ list-style: none;
+}
+
+/* Set core body defaults */
+body {
+ min-height: 100vh;
+ line-height: 1.5;
+ margin: 0;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+ line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+ text-wrap: balance;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+ max-width: 100%;
+ display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+ min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+ scroll-margin-block: 5ex;
+}
+
+ul,
+ol {
+ padding: 0;
+ margin: 0.5rem 0 0.5rem 1rem;
+}
+
+ul li,
+ol li {
+ margin: 0.5rem 0 0.5rem 0;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+ padding: 0 0 0 1rem;
+}
+
+ul li:last-child,
+ol li:last-child {
+ margin-bottom: 0;
+}
diff --git a/assets/css/global/tokens.css b/assets/css/global/tokens.css
new file mode 100644
index 0000000..79844f2
--- /dev/null
+++ b/assets/css/global/tokens.css
@@ -0,0 +1,160 @@
+:root {
+ /* webfonts */
+ font-family: var(--font-family);
+ font-feature-settings:
+ "liga" on,
+ "calt" on;
+
+ /* fallback to slightly thinner font on browsers without variable 'wght' support */
+ font-weight: 350;
+
+ /* base rem = 16px by default, left as percentage for screen readers */
+ font-size: 100%;
+ --font-family:
+ "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+ /* Utilities */
+ /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+ /* ALWAYS use for fonts */
+ --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
+ --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
+ --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
+ --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+ --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
+ --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
+ --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
+ --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
+ --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
+
+ /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+ /* ALWAYS use for horizontal spacing */
+ --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
+ --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
+ --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
+ --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+ --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
+ --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
+ --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
+ --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
+ --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
+
+ /* One-up pairs */
+ --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
+ --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
+ --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
+ --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
+ --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
+ --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
+ --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
+ --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
+
+ /* Custom pairs */
+ --space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);
+
+ /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+ --grid-max-width: 69.75rem;
+ --grid-min-width: 34rem;
+ --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
+ --grid-columns: 12;
+
+ /* Colors */
+ --color-brand: 56.6% 0.194 147.7;
+ --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-shadow: 0.86 0 0;
+
+ /* Footer */
+ --color-footer: 0.23 0 0;
+ --color-footer-text: 0.91 0 0;
+ --color-product-title: 0.64 0 0;
+ --color-tabs-inactive-border: 0 0 0 / 20%;
+
+ --color-divider: 0.85 0 0;
+
+ /* Main grid setup */
+ --grid-content: minmax(34rem, 50rem);
+ --grid-content-mobile: minmax(20rem, 50rem);
+ --grid-side-callout: minmax(18rem, 26rem);
+ --grid-column-gutter: 3.5rem;
+
+ /* Header */
+ --header-height: 4rem;
+
+ /* Sidebar */
+ --sidebar-width: 22rem;
+ --sidebar-item-padding-lr: 0.75rem;
+ --sidebar-item-padding-tb: 0.25rem;
+
+ /* Content */
+ --content-max-width: 88rem;
+
+ /* Code block */
+ --color-inline_codeblock-border: 0.85 0 0;
+ --color-inline_codeblock-background: 0.98 0 0;
+ --codeblock-comment-diff: 2rem;
+ --codeblock-comment-space-between: 10px;
+ --codeblock-horizontal-line-length: 2rem;
+ --codeblock-horizontal-line-overflow: 0.25rem;
+ --codeblock-border-thickness: 1px;
+ --codeblock-code-section-padding-left: 1rem;
+ --codeblock-line-box-side-length: 4px;
+ --code-copy-icon-height: 1rem;
+ --code-copy-icon-width: 1rem;
+ --color-codeblock-border: 0.63 0 0;
+ --color-codeblock-shadow: 0.92 0 0;
+ --color-codeblock-background: 1 0 0;
+ --color-codeblock-highlight: 0.99 0.0479 105.97;
+
+ /* Callouts */
+ --color-callout-warning: 0.65 0.188 24;
+ --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
+ --color-callout-caution: 0.8 0.1613 71.21;
+ --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
+ --color-callout-important: 0.36 0 0;
+ --color-callout-important-shadow: 0.23 0 0 / 7.06%;
+
+ /* Tables */
+ --table-top-bottom-spacing: 1rem;
+ --table-row-space-between: 1.5rem;
+ --table-min-column-spacing-narrow: 1.5rem;
+ --table-min-column-spacing-wide: 0.75rem;
+ --table-header-bottom-spacing: 1rem;
+ --table-line-height: 1px;
+
+ /* Misc spacing */
+ --overflow-gutter-extension: 1rem;
+ --flow-gap: 1rem;
+}
+
+@supports (font-variation-settings: normal) {
+ :root {
+ --font-family:
+ InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+ sans-serif;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ .breadcrumb {
+ font-variation-settings: "wght" 500;
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.breadcrumb {
+ font-weight: 500;
+}
diff --git a/assets/css/global/typography.css b/assets/css/global/typography.css
new file mode 100644
index 0000000..070bf31
--- /dev/null
+++ b/assets/css/global/typography.css
@@ -0,0 +1,133 @@
+/* Regular */
+@font-face {
+ font-family: "JetBrainsMono";
+ font-style: normal;
+ font-weight: 400; /* regular weight */
+ src: url("/css/fonts/jetbrainsmono/JetBrainsMono-Light.woff2") format("woff2");
+ font-display: swap;
+}
+
+/* Italic */
+@font-face {
+ font-family: "JetBrainsMono";
+ font-style: italic;
+ font-weight: 400;
+ src: url("/css/fonts/jetbrainsmono/JetBrainsMono-Italic.woff2")
+ format("woff2");
+ font-display: swap;
+}
+
+/* Bold */
+@font-face {
+ font-family: "JetBrainsMono";
+ font-style: normal;
+ font-weight: 700;
+ src: url("/css/fonts/jetbrainsmono/JetBrainsMono-SemiBold.woff2")
+ format("woff2");
+ font-display: swap;
+}
+
+/* Bold Italic */
+@font-face {
+ font-family: "JetBrainsMono";
+ font-style: italic;
+ font-weight: 700;
+ src: url("/css/fonts/jetbrainsmono/JetBrainsMono-BoldItalic.woff2")
+ format("woff2");
+ font-display: swap;
+}
+
+p {
+ font-weight: 350;
+ margin: 0;
+ line-height: 1.5rem;
+}
+
+a {
+ color: oklch(var(--color-brand));
+ text-decoration-color: oklch(var(--color-brand) / 0.3);
+ transition: text-decoration-color 0.15s ease-in-out;
+}
+
+a:hover {
+ text-decoration-color: oklch(var(--color-brand) / 0.8);
+}
+
+h1 {
+ font-size: 2rem;
+ margin: 0 0 1rem 0;
+}
+
+h2 {
+ font-size: 1.5rem;
+ margin: 1rem 0 0.75rem 0;
+}
+
+h2:target,
+h3:target,
+h4:target,
+h5:target,
+h6:target {
+ color: oklch(var(--color-brand));
+
+ .headerlink::before {
+ display: block !important;
+ }
+}
+
+h2:has(a),
+h3:has(a),
+h4:has(a),
+h5:has(a),
+h6:has(a) {
+ width: calc(100% + 1rem);
+ margin-left: -1rem;
+ padding-left: 1rem;
+ position: relative;
+}
+
+h2:has(a):hover {
+ .headerlink::before {
+ display: block;
+ }
+}
+
+h3:has(a):hover {
+ .headerlink::before {
+ display: block;
+ }
+}
+
+h4:has(a):hover {
+ .headerlink::before {
+ display: block;
+ }
+}
+
+h5:has(a):hover {
+ .headerlink::before {
+ display: block;
+ }
+}
+
+h6:has(a):hover {
+ .headerlink::before {
+ display: block;
+ }
+}
+
+.headerlink {
+ text-decoration: none;
+
+ color: oklch(var(--color-foreground));
+}
+
+.headerlink::before {
+ position: absolute;
+ content: "#";
+ margin-left: -1.5rem;
+ opacity: 20%;
+ display: none;
+ bottom: 0;
+ color: oklch(var(--color-brand));
+}
diff --git a/assets/css/inter/inter.css b/assets/css/inter/inter.css
index f4644a5..2ac7356 100644
--- a/assets/css/inter/inter.css
+++ b/assets/css/inter/inter.css
@@ -16,52 +16,52 @@ Usage example:
font-style: normal;
font-weight: 100 900;
font-display: swap;
- src: url('font-files/InterVariable.woff2?v=4.0') format('woff2');
+ src: url('css/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
}
@font-face {
font-family: InterVariable;
font-style: italic;
font-weight: 100 900;
font-display: swap;
- src: url('font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+ src: url('css/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
}
/* legacy name "Inter var" (Oct 2023) */
- @font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable.woff2?v=4.0') format('woff2'); }
- @font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable-Italic.woff2?v=4.0') format('woff2'); }
+ @font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('css/inter/font-files/InterVariable.woff2?v=4.0') format('woff2'); }
+ @font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('css/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2'); }
/* static fonts */
- @font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("font-files/Inter-Thin.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("font-files/Inter-ThinItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("font-files/Inter-ExtraLight.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("font-files/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("font-files/Inter-Light.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("font-files/Inter-LightItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("font-files/Inter-Regular.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("font-files/Inter-Italic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("font-files/Inter-Medium.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("font-files/Inter-MediumItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("font-files/Inter-SemiBold.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("font-files/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("font-files/Inter-Bold.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("font-files/Inter-BoldItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("font-files/Inter-ExtraBold.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("font-files/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("font-files/Inter-Black.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("font-files/Inter-BlackItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("font-files/InterDisplay-Thin.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("font-files/InterDisplay-ThinItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("font-files/InterDisplay-ExtraLight.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("font-files/InterDisplay-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("font-files/InterDisplay-Light.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("font-files/InterDisplay-LightItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("font-files/InterDisplay-Regular.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("font-files/InterDisplay-Italic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("font-files/InterDisplay-Medium.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("font-files/InterDisplay-MediumItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("font-files/InterDisplay-SemiBold.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("font-files/InterDisplay-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("font-files/InterDisplay-Bold.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("font-files/InterDisplay-BoldItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("font-files/InterDisplay-ExtraBold.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("font-files/InterDisplay-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("font-files/InterDisplay-Black.woff2?v=4.0") format("woff2"); }
- @font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("font-files/InterDisplay-BlackItalic.woff2?v=4.0") format("woff2"); }
\ No newline at end of file
+ @font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("css/inter/font-files/Inter-Thin.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("css/inter/font-files/Inter-ThinItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("css/inter/font-files/Inter-ExtraLight.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("css/inter/font-files/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("css/inter/font-files/Inter-Light.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("css/inter/font-files/Inter-LightItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("css/inter/font-files/Inter-Regular.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("css/inter/font-files/Inter-Italic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("css/inter/font-files/Inter-Medium.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("css/inter/font-files/Inter-MediumItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("css/inter/font-files/Inter-SemiBold.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("css/inter/font-files/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("css/inter/font-files/Inter-Bold.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("css/inter/font-files/Inter-BoldItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("css/inter/font-files/Inter-ExtraBold.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("css/inter/font-files/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("css/inter/font-files/Inter-Black.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("css/inter/font-files/Inter-BlackItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("css/inter/font-files/InterDisplay-Thin.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("css/inter/font-files/InterDisplay-ThinItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("css/inter/font-files/InterDisplay-ExtraLight.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("css/inter/font-files/InterDisplay-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("css/inter/font-files/InterDisplay-Light.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("css/inter/font-files/InterDisplay-LightItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("css/inter/font-files/InterDisplay-Regular.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("css/inter/font-files/InterDisplay-Italic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("css/inter/font-files/InterDisplay-Medium.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("css/inter/font-files/InterDisplay-MediumItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("css/inter/font-files/InterDisplay-SemiBold.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("css/inter/font-files/InterDisplay-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("css/inter/font-files/InterDisplay-Bold.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("css/inter/font-files/InterDisplay-BoldItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("css/inter/font-files/InterDisplay-ExtraBold.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("css/inter/font-files/InterDisplay-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("css/inter/font-files/InterDisplay-Black.woff2?v=4.0") format("woff2"); }
+ @font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("css/inter/font-files/InterDisplay-BlackItalic.woff2?v=4.0") format("woff2"); }
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
new file mode 100644
index 0000000..17f9271
--- /dev/null
+++ b/assets/css/utilities.css
@@ -0,0 +1,61 @@
+/* MARK: Accessibility
+*/
+
+.skip-link {
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: oklch(var(--color-background));
+ color: oklch(var(--color-foreground));
+ padding: 1rem 1rem;
+ font-size: 1rem;
+ border: 2px solid oklch(var(--color-foreground));
+ z-index: 1000;
+ text-decoration: none;
+ border-radius: 0;
+ box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+ opacity: 0;
+ pointer-events: none;
+}
+
+.skip-link:focus {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+/* ref https://piccalil.li/blog/visually-hidden/ */
+.visually-hidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: auto;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ white-space: nowrap;
+}
+
+.feather {
+ width: 1.8ch;
+ height: 1.8ch;
+ stroke: currentColor;
+ fill: none;
+ stroke-width: 2;
+ stroke-linecap: square;
+ stroke-linejoin: square;
+ vertical-align: sub;
+ margin: 0;
+}
+
+.lucide {
+ width: 1.5rem;
+ height: 1.5rem;
+ stroke: currentColor;
+ fill: none;
+ stroke-width: 2;
+ stroke-linecap: square;
+ stroke-linejoin: square;
+ vertical-align: sub;
+ margin: 0;
+}
diff --git a/assets/css/v2/highlight.css b/assets/css/v2/highlight.css
deleted file mode 100644
index b9765f9..0000000
--- a/assets/css/v2/highlight.css
+++ /dev/null
@@ -1,88 +0,0 @@
-/* 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 }
diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
deleted file mode 100644
index e0008af..0000000
--- a/assets/css/v2/style.css
+++ /dev/null
@@ -1,2053 +0,0 @@
-/* MARK: Reset
-*/
-/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
-
-/* Box sizing rules */
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-/* Prevent font size inflation */
-html {
- -moz-text-size-adjust: none;
- -webkit-text-size-adjust: none;
- text-size-adjust: none;
- overflow-y: scroll;
-}
-
-/* Remove default margin in favour of better control in authored CSS */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
- margin-block-end: 0;
-}
-
-/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role="list"],
-ol[role="list"] {
- list-style: none;
-}
-
-/* Set core body defaults */
-body {
- min-height: 100vh;
- line-height: 1.5;
- margin: 0;
-}
-
-/* Set shorter line heights on headings and interactive elements */
-h1,
-h2,
-h3,
-h4,
-button,
-input,
-label {
- line-height: 1.1;
-}
-
-/* Balance text wrapping on headings */
-h1,
-h2,
-h3,
-h4 {
- text-wrap: balance;
-}
-
-/* Make images easier to work with */
-img,
-picture {
- max-width: 100%;
- display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
- font: inherit;
-}
-
-/* Make sure textareas without a rows attribute are not tiny */
-textarea:not([rows]) {
- min-height: 10em;
-}
-
-/* Anything that has been anchored to should have extra scroll margin */
-:target {
- scroll-margin-block: 5ex;
-}
-
-/* END RESET */
-
-/* Regular */
-@font-face {
- font-family: "JetBrainsMono";
- font-style: normal;
- font-weight: 400; /* regular weight */
- src: url("../fonts/jetbrainsmono/JetBrainsMono-Light.woff2") format("woff2");
- font-display: swap;
-}
-
-/* Italic */
-@font-face {
- font-family: "JetBrainsMono";
- font-style: italic;
- font-weight: 400;
- src: url("../fonts/jetbrainsmono/JetBrainsMono-Italic.woff2") format("woff2");
- font-display: swap;
-}
-
-/* Bold */
-@font-face {
- font-family: "JetBrainsMono";
- font-style: normal;
- font-weight: 700;
- src: url("../fonts/jetbrainsmono/JetBrainsMono-SemiBold.woff2")
- format("woff2");
- font-display: swap;
-}
-
-/* Bold Italic */
-@font-face {
- font-family: "JetBrainsMono";
- font-style: italic;
- font-weight: 700;
- src: url("../fonts/jetbrainsmono/JetBrainsMono-BoldItalic.woff2")
- format("woff2");
- font-display: swap;
-}
-
-:root {
- /* webfonts */
- font-family: var(--font-family);
- font-feature-settings:
- "liga" on,
- "calt" on;
-
- /* fallback to slightly thinner font on browsers without variable 'wght' support */
- font-weight: 350;
-
- /* base rem = 16px by default, left as percentage for screen readers */
- font-size: 100%;
-
- /* MARK: Variables
- */
- --font-family:
- "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
- Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
- --color-brand: 56.6% 0.194 147.7;
- --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-shadow: 0.86 0 0;
- --color-inline_codeblock-border: 0.85 0 0;
- --color-inline_codeblock-background: 0.98 0 0;
- --color-codeblock-border: 0.63 0 0;
- --color-codeblock-shadow: 0.92 0 0;
- --color-codeblock-background: 1 0 0;
- --color-codeblock-highlight: 0.99 0.0479 105.97;
- --color-footer: 0.23 0 0;
- --color-footer-text: 0.91 0 0;
- --color-product-title: 0.64 0 0;
- --color-tabs-inactive-border: 0 0 0 / 20%;
- --color-callout-warning: 0.65 0.188 24;
- --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
- --color-callout-caution: 0.8 0.1613 71.21;
- --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
- --color-callout-important: 0.36 0 0;
- --color-callout-important-shadow: 0.23 0 0 / 7.06%;
- --color-divider: 0.85 0 0;
-
- /* vars for the primary grid setup */
- --grid-sidebar: 24rem;
- --grid-sidebar-gutter: 3rem;
- --grid-content: minmax(34rem, 50rem);
- --grid-content-mobile: minmax(20rem, 50rem);
- --grid-side-callout: minmax(18rem, 26rem);
- --grid-column-gutter: 3.5rem;
-
- --code-copy-icon-height: 1rem;
- --code-copy-icon-width: 1rem;
- --breadcrumb-max-height: 54px;
- --sidebar-margin: 1.5rem;
- --sidebar-line-box-side-length: 8px;
- --sidebar-line-box-top: 6px;
- --sidebar-line-box-left: 12px;
- --sidebar-line-width: 11.5px;
- --sidebar-mobile-top-displacement: 5rem;
- --side-gutter-width: 20rem;
- --table-top-bottom-spacing: 1rem;
- --table-row-space-between: 1.5rem;
- --table-min-column-spacing-narrow: 1.5rem;
- --table-min-column-spacing-wide: 0.75rem;
- --table-header-bottom-spacing: 1rem;
- --table-line-height: 1px;
- --codeblock-comment-diff: 2rem;
- --codeblock-comment-space-between: 10px;
- --codeblock-horizontal-line-length: 2rem;
- --codeblock-horizontal-line-overflow: 0.25rem;
- --codeblock-border-thickness: 1px;
- --codeblock-code-section-padding-left: 1rem;
- --codeblock-line-box-side-length: 4px;
- --overflow-gutter-extension: 1rem;
-
- --flow-gap: 1rem;
-
- /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
- /* ALWAYS use for fonts */
- --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
- --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
- --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
- --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
- --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
- --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
- --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
- --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
- --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
-
- /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
- /* ALWAYS use for horizontal spacing */
- --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
- --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
- --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
- --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
- --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
- --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
- --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
- --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
- --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
-
- /* One-up pairs */
- --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
- --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
- --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
- --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
- --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
- --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
- --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
- --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
-
- /* Custom pairs */
- --space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);
-
- /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
- --grid-max-width: 69.75rem;
- --grid-min-width: 34rem;
- --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
- --grid-columns: 12;
-
- --header-height: 4rem;
-
- --sidebar-width: 22rem;
- --sidebar-item-padding-lr: 0.75rem;
- --sidebar-item-padding-tb: 0.25rem;
- --content-max-width: 88rem;
-
- --main-col: minmax(34rem, 50rem);
- --side-col: minmax(18rem, 26rem);
-}
-
-@supports (font-variation-settings: normal) {
- :root {
- --font-family:
- InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
- Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
- sans-serif;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- .breadcrumb {
- font-variation-settings: "wght" 500;
- }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.breadcrumb {
- font-weight: 500;
-}
-
-html {
- scroll-behavior: smooth;
- font-optical-sizing: auto;
- font-weight: 300;
- font-style: normal;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- scroll-margin-top: 1.5rem;
-}
-
-/* MARK: Header
-*/
-p {
- font-weight: 350;
-}
-
-ul,
-ol {
- padding: 0;
- margin: 0.5rem 0 0.5rem 1rem;
-}
-
-ul li,
-ol li {
- margin: 0.5rem 0 0.5rem 0;
-}
-
-ul ul,
-ul ol,
-ol ul,
-ol ol {
- padding: 0 0 0 1rem;
-}
-
-ul li:last-child,
-ol li:last-child {
- margin-bottom: 0;
-}
-
-/* MARK: Layout
-*/
-
-.grid-container {
- display: grid;
- grid-template-columns: var(--sidebar-width) 1fr;
- grid-template-rows: var(--header-height) 1fr auto;
- grid-template-areas:
- "sidebar header"
- "sidebar content"
- "sidebar footer";
- min-height: 100vh;
- min-width: var(--grid-min-width);
-
- @media (max-width: 68rem) {
- grid-template-columns: 1fr;
- grid-template-areas:
- "sidebar header"
- "sidebar content"
- "sidebar footer";
-
- .text-content {
- margin-top: 1rem;
- }
-
- .breadcrumb-layout {
- border-bottom: 1px solid oklch(var(--color-divider));
- align-items: center;
- padding: var(--space-xs) 0;
- }
- }
- .content {
- padding: 0 var(--space-s) 2rem;
- }
-
- .header__logo {
- display: none;
- }
-
- .header__logo-small {
- display: none;
- }
-}
-
-/* Homepage specific layout */
-.grid-container:has(.homepage) {
- grid-template-columns: 1fr;
- grid-template-areas:
- "header"
- "content"
- "footer";
-
- .header__logo {
- display: unset;
- }
-
- .sidebar,
- .header__product-selector,
- .header__sidebar__panel,
- .header__logo-small {
- display: none;
- }
-}
-
-/* Search specific layout */
-.grid-container:has(.search) {
- grid-template-columns: 1fr;
- grid-template-areas:
- "header"
- "content"
- "footer";
-
- .sidebar {
- display: none;
- }
-
- .header__logo {
- display: unset;
- }
-}
-
-.header {
- grid-area: header;
- display: flex;
- padding: 0 var(--space-s);
- border-bottom: 1px solid oklch(var(--color-divider));
-
- background: rgba(255, 255, 255, 0.5);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- position: sticky;
- top: 0;
- z-index: 1;
-
- .header-container {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- align-items: center;
- width: 100%;
-
- .header__img {
- height: 2rem;
- padding-left: 12px;
- }
-
- .header__search {
- display: block;
- width: 14rem;
- /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
- transform: translateY(0);
- overflow: hidden;
- }
-
- .header__product-selector {
- width: 10rem;
- background: rgba(0, 0, 0, 0);
- color: oklch(var(--color-foreground));
- text-decoration-color: oklch(var(--color-brand) / 0.3);
- & :hover {
- color: oklch(var(--color-brand));
- }
-
- .product-selector__button {
- display: flex;
- align-items: center;
- background: rgba(0, 0, 0, 0);
- border: none;
- width: 16rem;
- font-weight: 500;
- cursor: pointer;
- color: oklch(var(--color-foreground));
- text-decoration-color: oklch(var(--color-brand) / 0.3);
- transition: color 0.15s ease-in-out;
-
- & :hover {
- color: oklch(var(--color-brand));
- }
- }
- }
-
- > ul {
- padding: 0;
- }
- }
-
- .dropdown-content {
- position: absolute;
- background-color: oklch(var(--color-background));
- border: oklch(var(--color-foreground)) 1px solid;
- box-shadow: 3px 3px 0px oklch(var(--color-shadow));
- z-index: 1;
- right: 0;
- display: none;
- width: 400px;
- max-width: 80vw;
- margin-right: 1rem;
- }
-
- .dropdown-content ul {
- padding: 20px 10px;
- }
-
- .nav-item-explore {
- margin: 0;
- }
-
- .navbar-button {
- padding: 0.5rem 0.5rem;
- border: none;
- border-radius: 0.25rem;
- text-align: center;
- text-decoration: none;
- cursor: pointer;
- }
-
- ul {
- list-style: none;
- }
-}
-
-.content {
- grid-area: content;
- justify-self: center;
- padding: 0 var(--space-l) 2rem var(--space-l);
- max-width: var(--content-max-width);
-
- /* Allow redocly to fill the entire container */
- &.content__redocly {
- justify-self: unset;
- max-width: unset;
- }
-}
-
-.footer {
- grid-area: footer;
- padding: var(--space-l);
- background-color: oklch(var(--color-footer));
- margin-top: auto;
-}
-
-/* sidebar toggling */
-#sidebar-panel:checked ~ .grid-container {
- grid-template-columns: 1fr;
- grid-template-areas:
- "header"
- "content"
- "footer";
-
- .sidebar {
- display: none;
- }
-
- .header__sidebar__panel {
- display: flex;
- align-self: center;
- }
-
- .header {
- .header__logo-small {
- display: unset;
- }
- }
-}
-
-/* sidebar layout */
-
-.header__sidebar__panel,
-.sidebar__panel {
- cursor: pointer;
- color: var(--color-foreground);
- label {
- cursor: pointer;
- }
-
- :hover {
- color: oklch(var(--color-brand));
- }
-}
-
-.header__sidebar__panel {
- display: none;
-}
-
-.sidebar {
- grid-area: sidebar;
- position: fixed;
- top: 0;
- left: 0;
- width: var(--sidebar-width);
- /* for sticky header, this needs to be calculated to avoid extra whitespace */
- height: calc(110vh - var(--header-height));
- border-right: 1px solid oklch(var(--color-divider));
- overflow: hidden;
- background: oklch(var(--color-background));
- box-sizing: border-box;
- transform: translateX(0);
- padding: 0 0 var(--space-s) var(--space-s);
-
- .sidebar__container {
- display: grid;
- grid-template-rows: var(--header-height) 1fr;
- height: 100%;
-
- .sidebar__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: sticky;
- top: 0;
- background: oklch(var(--color-background));
- z-index: 1;
- padding: 0 2.25rem 0 var(--sidebar-item-padding-lr);
-
- .sidebar__img {
- height: 2rem;
- }
- }
-
- .sidebar__content {
- overflow-y: auto;
- min-height: 0;
- /* allows space for scrollbar */
- width: calc(var(--sidebar-width) - 1rem);
- scrollbar-gutter: stable;
- }
- }
-
- .sidebar__search {
- display: none;
- }
-}
-
-/* This is our "mobile" or no sidebar breakpoint */
-@media (max-width: 68rem) {
- #sidebar-panel:checked ~ .grid-container {
- .sidebar {
- /* Above search */
- z-index: 11;
- display: block;
- transform: translateX(0);
- border-bottom: 1px solid oklch(var(--color-divider));
-
- position: fixed;
- top: 0;
- left: 0;
-
- .sidebar__content__wrapper {
- display: flex;
- flex-direction: column;
- }
-
- .sidebar__search {
- display: unset;
- width: calc(var(--sidebar-width) - 4rem);
- margin-left: 1rem;
- }
- }
- }
-
- .header {
- .header__logo-small {
- display: unset;
- img {
- margin: 0;
- }
- }
- .header-container {
- .header__search {
- display: none;
- }
- }
- }
-
- .header__product-selector {
- display: none;
- }
-
- .header__sidebar__panel {
- display: flex;
- align-items: center;
- }
-
- .sidebar {
- grid-area: sidebar;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: var(--sidebar-width, 16rem);
- transform: translateX(-100%);
- }
-
- .sidebar-button {
- display: block;
- margin-bottom: 1rem;
- padding: 0.5rem 1rem;
- background: #000;
- color: #fff;
- cursor: pointer;
- }
-}
-
-/* MARK: Footer
-*/
-
-.footer-layout {
- display: grid;
- grid-template-columns: 1fr;
- font-size: 0.875rem;
- gap: 24px;
-}
-
-.footer-f5-trademark {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 12px;
-}
-
-.footer-f5-trademark p {
- margin: 0;
- color: oklch(var(--color-footer-text));
-}
-
-.footer-useful-links {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 18px;
-}
-
-.footer-useful-links a {
- color: oklch(var(--color-footer-text));
- text-decoration: none;
-}
-
-@media (min-width: 814px) {
- .footer-layout {
- display: grid;
- grid-template-columns: 1fr 1fr;
- font-size: 0.875rem;
- }
-
- .footer-useful-links {
- gap: 4px;
- }
-}
-
-/* breadcrumbs */
-nav {
- display: flex;
- align-items: center;
-
- .logo {
- height: 3rem;
- width: 3rem;
- }
-
- .links a {
- margin: 0 0 0 1rem;
- }
-}
-
-/* MARK: Homepage
-*/
-
-.homepage {
- --content-max-width: 120rem;
-
- .homepage-heading {
- grid-column: 1 / -1;
- font-size: 1.5rem;
- font-weight: 500;
- margin: 2rem 0rem;
- }
-
- .homepage-section {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
- gap: 1.5rem;
-
- justify-content: center;
- max-width: 98rem;
- margin: 0 auto;
- padding-bottom: 2rem;
-
- a {
- color: oklch(var(--color-foreground));
- text-decoration-color: oklch(var(--color-background));
-
- &:hover {
- text-decoration-color: oklch(var(--color-background));
- }
- }
-
- .homepage-heading {
- grid-column: 1 / -1;
- margin: 1rem 0rem;
- }
- }
-
- /* Styling for items */
- .homepage-item {
- background: oklch(var(--color-background));
- border: 1px solid oklch(var(--color-codeblock-border));
- box-shadow: 3px 3px 0px oklch(var(--color-shadow));
- min-height: 11rem;
- padding: 1rem 2rem 2rem 2rem;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- cursor: pointer;
-
- &:hover {
- box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
- text-decoration-color: oklch(var(--color-background));
- border: 1px solid oklch(var(--color-brand) / 0.8);
- }
- }
-
- .homepage-item-heading {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- }
-
- .homepage-item-logo {
- margin-right: 0.5rem;
- }
-
- .homepage-item-logo img {
- height: 40px;
- width: auto;
- display: block;
- }
-
- .homepage-item-text {
- font-size: 1.1rem;
- font-weight: 600;
- line-height: 1.2;
- margin: 0;
- padding: 0;
- /* Hack to make text line-up with logos */
- transform: translateY(-6px);
- }
-
- .homepage-item-content {
- line-height: 1.5rem;
- }
-}
-
-/* MARK: Main content
-*/
-
-.content-layout {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr;
- z-index: 1;
-}
-
-#searchbox {
- width: 24rem;
- display: none;
- grid-column: 1;
-}
-
-.breadcrumb-layout {
- grid-column: 1 / -1;
-}
-
-.text-content {
- grid-column: 1 / -1;
- display: grid;
- grid-template-columns: var(--grid-content-mobile);
- column-gap: var(--grid-column-gutter);
- margin-top: 2rem;
- grid-auto-rows: max-content;
- row-gap: var(--flow-gap);
- justify-content: center;
-}
-
-.text-content > :not(.wide) {
- grid-column: 1 / -1;
-}
-
-.text-content .wide {
- grid-column: 1 / -1;
-}
-
-.text-content table {
- width: 100%;
-}
-
-main {
- margin: 0 var(--space-s) var(--space-s) var(--space-s);
-}
-
-@media (min-width: 88em) {
- .header__logo {
- display: unset;
- }
-
- .text-content {
- grid-template-columns: var(--grid-content) var(--grid-side-callout);
- grid-template-rows: 3rem max-content;
- column-gap: var(--grid-column-gutter);
- }
-
- .text-content > :not(.wide) {
- grid-column: 1;
- }
-
- .content-layout {
- display: grid;
- grid-template-columns: 1fr minmax(
- auto,
- calc(
- var(--grid-content) +
- var(--grid-side-callout) +
- var(--grid-column-gutter)
- )
- ) 1fr;
- column-gap: var(--grid-column-gutter);
- }
-
- .navbar atomic-search-interface {
- margin: 0;
- display: block;
- }
-}
-
-.list-page {
- --flow-gap: 0.5rem;
-
- h2 {
- font-size: 1.5rem;
- }
-
- hr {
- margin: 1rem 0;
- }
-}
-
-/* Handles different flow-gap of list page */
-.list-page.text-content {
- grid-template-rows: calc(70px + var(--flow-gap)) max-content;
-}
-
-/* MARK: Coveo
-*/
-#search-v2 {
- display: inline-block !important;
- width: 95vw;
- grid-column: 1 / -1;
- --atomic-primary: oklch(var(--color-brand));
- --atomic-primary-ring: oklch(var(--color-brand));
- --atomic-primary-light: oklch(var(--color-brand));
- --atomic-border-radius-lg: 0;
- --atomic-border-radius-md: 0;
- --atomic-border-radius: 0;
- --atomic-font-family: var(--font-family);
-
- atomic-search-box {
- z-index: 0;
- }
-}
-
-atomic-search-interface {
- height: fit-content;
-}
-
-.header-search-box {
- &::part(wrapper) {
- border-radius: 0;
- border-color: oklch(var(--color-foreground));
- }
-
- &::part(suggestions-wrapper) {
- border-radius: 0;
- border-color: oklch(var(--color-foreground));
- width: calc(100% + 2px);
- margin-left: -1px;
- }
-
- &::part(submit-button-wrapper) {
- --atomic-primary: var(--atomic-neutral-dark);
- }
-}
-
-atomic-refine-toggle {
- display: none;
-}
-
-@media (max-width: 1024px) {
- atomic-refine-toggle {
- display: block;
- }
-}
-
-atomic-query-summary {
- /* Show duration */
- &::part(duration) {
- display: inline-block !important;
- }
-}
-
-atomic-search-layout {
- grid-template-areas:
- "atomic-section-search"
- "atomic-section-status"
- "atomic-section-facets"
- "atomic-section-main";
-
- grid-template-columns: minmax(50%, 100%) !important;
-
- @media (min-width: 1024px) {
- grid-template-areas:
- "atomic-section-search atomic-section-status"
- "atomic-section-facets atomic-section-main "
- "atomic-section-facets . " !important;
-
- grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
- column-gap: calc(1.5rem + 2rem) !important;
- }
-}
-
-atomic-search-layout atomic-layout-section[section="status"] {
- /* Override Coveo's width to be full */
- max-width: 100%;
- display: block;
- width: 100%;
-}
-
-atomic-search-layout atomic-layout-section[section="search"] {
- /* Override Coveo's width to be full */
- width: 100% !important;
- max-width: 100% !important;
-}
-
-.atomic-full-summary-and-sort {
- display: flex;
- flex-direction: column;
- align-items: start;
- gap: 1rem;
- justify-content: space-between;
-
- @media (min-width: 480px) {
- flex-direction: row;
- align-items: center;
- }
-
- atomic-sort-dropdown::part(label) {
- margin-left: 0;
- }
-}
-
-#atomic-search-box-xqtsq-popup {
- z-index: 9999;
-}
-
-body:not(:has(.main-layout)) header atomic-search-interface {
- /* Show on landing pages */
- display: block;
-}
-
-@media (max-width: 88rem) {
- /* Show on pages with sidebar if it is hidden */
- body:has(.sidebar-layout) header atomic-search-interface {
- display: block;
- }
-}
-
-/* MARK: Product Selector
-*/
-
-.product-selector {
- /* should appear above search box on smaller displays */
- z-index: 11;
- display: none;
- position: absolute;
- top: 0;
- margin-top: calc(var(--header-height) - 1rem);
- padding: 1rem 1.5rem;
- background-color: oklch(var(--color-background));
- border: oklch(var(--color-foreground)) 1px solid;
- box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-}
-
-.product-name {
- padding-right: var(--space-s);
-}
-
-.product-selector-button-icon {
- color: black;
-
- svg {
- color: black;
- stroke: currentColor;
- }
-}
-
-button:has(~ .product-selector[style*="block"])
- > .product-selector-button-icon {
- transition: transform 0.1s ease-in-out;
- transform: rotate(90deg);
-}
-
-button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
- transition: transform 0.1s ease-in-out;
- transform: rotate(0deg);
-}
-.product-selector p {
- font-size: 0.75rem;
- color: oklch(var(--color-product-title));
- display: inline;
-}
-
-.product-selector ul {
- padding-left: 0;
- margin-top: 0;
- list-style-type: none;
-}
-
-.product-selector a {
- text-decoration: none;
- color: oklch(var(--color-foreground));
- font-size: 1rem;
-}
-
-/* MARK: Sidebar - Content
-*/
-
-nav.sidebar.sidebar__mobile-open {
- display: block;
-}
-
-.sidebar {
- grid-area: sidebar;
- --color-foreground: oklch(0 0 0 / 0.75);
-
- .sidebar__container,
- .sidebar__container button,
- .sidebar__container ul,
- .sidebar__container li {
- margin: 0;
- padding: 0;
- list-style: none;
- font-weight: 400;
- font-size: 0.875rem;
- }
-
- .sidebar__container {
- width: var(--sidebar-width);
- }
-
- .sidebar__container button {
- padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
- justify-content: space-between;
- }
-
- .sidebar__content {
- padding: 0.5rem 0 0.4rem 0;
- margin-right: 0.25rem;
- }
-
- .sidebar__ul {
- padding-left: 0;
- }
-
- .sidebar__children {
- padding-left: 1rem;
- }
-
- .sidebar__toggle {
- display: flex;
- align-items: center;
- gap: 0.25rem;
- cursor: pointer;
- background: none;
- border: none;
- width: 100%;
- text-align: left;
- padding: 0.25rem 0.5rem;
- border-radius: 5px 0 0 5px;
- font-weight: 500;
- color: var(--color-foreground);
-
- &:hover {
- background-color: oklch(var(--color-brand) / 0.06);
- color: oklch(var(--color-brand) / 1);
- }
- }
-
- .sidebar__container button.sidebar__toggle--ancestor {
- font-weight: 600;
- }
-
- .sidebar__chevron {
- display: flex;
- align-items: flex-end;
- }
-
- .sidebar__chevron svg {
- stroke-width: 1.5;
- width: 1rem;
- height: 1rem;
- }
-
- .sidebar__chevron--open {
- transform: rotate(90deg);
- }
-
- .sidebar__toggle:not(:has(.sidebar__chevron)) {
- padding-left: 2rem;
- }
-
- .sidebar__link {
- display: block;
- padding: var(--sidebar-item-padding-tb) var(--sidebar-item-padding-lr);
- margin: 2px 0 2px 0;
- border-radius: 5px 0 0 5px;
- color: oklch(0 0 0 / 0.75);
- text-decoration: none;
- transition:
- background-color 0.2s ease,
- color 0.2s ease;
-
- &:hover {
- background-color: oklch(var(--color-brand) / 0.08);
- color: oklch(var(--color-brand));
- }
- }
-
- .sidebar__link--current,
- .sidebar__toggle.sidebar__link--current {
- color: oklch(var(--color-brand) / 1);
- background-color: oklch(var(--color-brand) / 0.1);
- font-weight: 600;
- display: flex;
- justify-self: stretch;
- width: auto;
- box-sizing: border-box;
- }
-
- .sidebar__toc {
- #TableOfContents {
- padding: 0 0.75rem 0 0;
- margin: 0.5rem 0.25rem 0.5rem 0.8rem;
- border-left: 1px solid var(--color-divider);
- color: oklch(0 0 0 / 0.75);
-
- &[hidden] {
- display: none;
- }
-
- a {
- text-decoration: none;
- }
-
- &:empty {
- display: none;
- }
-
- li {
- padding: 0.25rem 0.75rem;
- }
-
- /* handles bug in hugo where non-rendered headers cause empty li */
- /* https://github.com/gohugoio/hugo/issues/7128 */
- li:empty {
- display: none;
- }
-
- li:first-child {
- padding-top: 0;
- }
-
- ul ul li:first-child {
- padding-top: 0.75rem;
- }
-
- li:last-child {
- padding-bottom: 0;
- }
- }
- }
-}
-
-/* Details/Summary */
-details summary {
- color: oklch(var(--color-brand));
- transition: text-decoration-color 0.15s ease-in-out;
- text-decoration: underline;
- text-decoration-color: oklch(var(--color-brand) / 0.3);
-
- & ~ * {
- margin-top: 1rem;
- }
-}
-
-details summary:hover {
- text-decoration-color: oklch(var(--color-brand) / 0.8);
- cursor: pointer;
-}
-
-/* MARK: Content
-*/
-
-p {
- margin: 0;
- line-height: 1.5rem;
-}
-
-.breadcrumb-layout {
- position: relative;
- background-color: white;
-
- .sidebar__mobile__toggle {
- display: none;
- }
-}
-
-.breadcrumb {
- color: oklch(var(--color-foreground));
- text-decoration: none;
- font-size: 0.875rem;
- margin: 0;
-}
-
-.breadcrumb .active {
- font-weight: 600;
-}
-
-.breadcrumb ol {
- list-style: none;
- padding: 0;
- display: block;
-
- > * {
- display: inline;
- line-height: 25px;
- }
-}
-
-.breadcrumb li:after {
- padding: 0 0.25rem;
- content: "\E1D7";
-}
-
-a {
- color: oklch(var(--color-brand));
- text-decoration-color: oklch(var(--color-brand) / 0.3);
- transition: text-decoration-color 0.15s ease-in-out;
-}
-
-a:hover {
- text-decoration-color: oklch(var(--color-brand) / 0.8);
-}
-
-h1 {
- font-size: 2rem;
- margin: 0 0 1rem 0;
-}
-
-h2 {
- font-size: 1.5rem;
- margin: 1rem 0 0.75rem 0;
-}
-
-h2:target,
-h3:target,
-h4:target,
-h5:target,
-h6:target {
- color: oklch(var(--color-brand));
-
- .headerlink::before {
- display: block !important;
- }
-}
-
-h2:has(a),
-h3:has(a),
-h4:has(a),
-h5:has(a),
-h6:has(a) {
- width: calc(100% + 1rem);
- margin-left: -1rem;
- padding-left: 1rem;
- position: relative;
-}
-
-h2:has(a):hover {
- .headerlink::before {
- display: block;
- }
-}
-
-h3:has(a):hover {
- .headerlink::before {
- display: block;
- }
-}
-
-h4:has(a):hover {
- .headerlink::before {
- display: block;
- }
-}
-
-h5:has(a):hover {
- .headerlink::before {
- display: block;
- }
-}
-
-h6:has(a):hover {
- .headerlink::before {
- display: block;
- }
-}
-
-.headerlink {
- text-decoration: none;
-
- color: oklch(var(--color-foreground));
-}
-
-.headerlink::before {
- position: absolute;
- content: "#";
- margin-left: -1.5rem;
- opacity: 20%;
- display: none;
- bottom: 0;
- color: oklch(var(--color-brand));
-}
-
-/* Landing page cards */
-.text-content .card-layout {
- grid-column: 1;
-
- .card-section {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-
- strong {
- font-weight: 500;
- }
-
- /* Hide all the cards past 3 if it is a featured card section */
- &.featured-section {
- .card-section-content.card-grid
- > *:nth-child(n + 4 of div.card-container) {
- display: none;
- }
- }
- }
-}
-
-/* Optional grid layout */
-.card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
- gap: 1.5rem;
-
- .card-container {
- border: 1px solid oklch(var(--color-codeblock-border));
- box-shadow: 3px 3px 0px oklch(var(--color-shadow));
- padding: 1rem;
-
- &.featured-card {
- /* If there is a need for a featured card, only the featured card should be full length */
- grid-column: 1 / -1;
-
- /* If there is a featured card AND two cards, the last one should be full length */
- ~ .card-container:nth-child(2n):last-child {
- grid-column: 1 / -1;
- }
- }
- }
-
- /* If there is no featured card, last card that is the 3rd one should be full width */
- &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
- grid-column: 1 / -1;
- }
-}
-
-.card-container {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- margin-bottom: 1rem;
-
- .card-header {
- display: flex;
- flex-direction: row;
- gap: 0.5rem;
-
- .card-brand-icon {
- height: 20px;
- width: auto;
- }
-
- h2 {
- padding: 0;
- margin: 0;
- font-size: 1rem;
- }
- }
-}
-
-.list-header-container {
- display: flex;
- gap: 1.5rem;
- align-items: center;
- justify-content: start;
-
- img {
- width: auto;
- height: 3.5rem;
- }
-}
-
-/* MARK: Tables
-*/
-table {
- position: relative;
- z-index: 0;
-
- td {
- padding: var(--table-row-space-between) 0;
- }
-
- th {
- font-weight: bold;
- text-align: start;
- vertical-align: top;
- padding-bottom: var(--table-header-bottom-spacing);
- }
-
- tr {
- position: relative;
- }
-
- tr::after {
- content: "";
- position: absolute;
- border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
- bottom: 0;
- left: calc(-1 * var(--overflow-gutter-extension));
- width: calc(100% + (2 * var(--overflow-gutter-extension)));
- }
-}
-
-.md-table-scroll-x {
- overflow-x: auto;
- width: 100%;
-}
-
-.narrow table {
- min-width: 100%;
- margin: var(--table-top-bottom-spacing) 0;
- border-collapse: collapse;
-}
-
-.wide table {
- margin: var(--table-top-bottom-spacing) 0;
- border-collapse: collapse;
-}
-
-.narrow table th,
-.narrow table td {
- padding-left: var(--table-min-column-spacing-narrow);
-}
-
-.wide table th,
-.wide table td {
- padding-left: var(--table-min-column-spacing-wide);
-}
-
-table th:first-child,
-table td:first-child {
- padding-left: 0;
-}
-
-table hr {
- color: oklch(var(--color-divider));
- border: none;
- border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
-}
-
-/* MARK: Callouts
-*/
-blockquote {
- border: 1px solid oklch(var(--color-foreground));
- padding: 1rem;
- margin: 0 -1rem;
-
- /* solid 3px drop shadow */
- box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-
- &:has(.code-block) .code-block:not(:has(.single-line)) {
- /* Removes negative margins from multi-line codeblocks */
- margin: 0;
- }
-
- .callout-content {
- margin: 0;
- }
-}
-
-blockquote.note {
- position: relative;
- z-index: 0;
-}
-
-blockquote.note:before {
- content: attr(data-title);
- font-size: 1rem;
- font-weight: 600;
- font-variation-settings: "wght" 600;
-
- position: absolute;
- margin: -1.625rem 0 0 -0.25rem;
- padding: 0 0.25rem;
- display: block;
- background-color: oklch(var(--color-background));
- z-index: 999;
-}
-
-blockquote p:first-child {
- margin: 0 auto 1rem auto;
-}
-
-blockquote p:last-child {
- margin: 0 auto;
-}
-
-/* Maintain the split column for as long as possible */
-@media (min-width: 67rem) {
- blockquote.side-callout {
- grid-column: 2 !important;
- align-self: start;
- }
-}
-
-blockquote > div > * {
- margin: 0 0 var(--flow-gap) 0;
-}
-
-blockquote ol,
-blockquote ul {
- margin: 0 0 1rem 1rem;
-}
-
-li > blockquote {
- margin: var(--flow-gap) 0 0 0;
-}
-
-blockquote.call-out {
- --padding: 0.75rem;
- padding: var(--padding);
-
- .call-out-type {
- display: block;
- font-weight: 500;
- margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding)
- calc(-1 * var(--padding));
-
- padding: 0.25rem var(--padding);
- }
-
- br {
- display: none;
- }
-}
-
-blockquote.caution {
- --color-shadow: var(--color-callout-caution-shadow);
- border: 1px solid oklch(var(--color-callout-caution));
-
- .call-out-type {
- background-color: oklch(var(--color-callout-caution-shadow));
- border-bottom: 1px solid oklch(var(--color-callout-caution));
- }
- .call-out-type .feather {
- color: oklch(var(--color-callout-caution));
- }
-}
-
-blockquote.warning {
- --color-shadow: var(--color-callout-warning-shadow);
- border: 1px solid oklch(var(--color-callout-warning));
-
- .call-out-type {
- background-color: oklch(var(--color-callout-warning-shadow));
- border-bottom: 1px solid oklch(var(--color-callout-warning));
- }
- .call-out-type .feather {
- color: oklch(var(--color-callout-warning));
- }
-}
-
-blockquote.important {
- --color-shadow: var(--color-callout-important-shadow);
- border: 1px solid oklch(var(--color-callout-important));
-
- .call-out-type {
- background-color: oklch(var(--color-callout-important-shadow));
- border-bottom: 1px solid oklch(var(--color-callout-important));
- }
-}
-
-li:has(> div > blockquote) {
- blockquote {
- margin: 0;
- }
-
- div:has(blockquote) {
- margin-bottom: 0.5rem;
- }
-}
-
-/* MARK: Tabs
-*/
-.tabs-container {
- width: calc(100% + 2rem);
- margin-left: -1rem;
-
- input[type="radio"] {
- display: none;
- }
-
- .tab-labels {
- display: flex;
- position: relative;
- overflow-x: scroll;
- overflow-y: hidden;
- scrollbar-width: none;
- white-space: nowrap;
- margin: 0;
- padding-left: 2rem;
-
- > :not(:last-child) {
- border-right: none;
- }
-
- li {
- list-style: none;
- border: 1px solid oklch(var(--color-tabs-inactive-border));
- border-bottom: 1px solid oklch(var(--color-foreground));
- color: oklch(var(--color-brand));
- padding: 10px;
- margin: 0;
- position: relative;
-
- label {
- cursor: pointer;
- }
- }
- }
-
- .tab-content {
- display: none;
- margin-top: 1rem;
- margin-left: 0;
- width: 100%;
-
- padding: 1rem;
- border-bottom: 1px solid oklch(var(--color-foreground));
-
- & > * {
- margin: 0 0 var(--flow-gap) 0;
- }
- }
-
- .tab-labels::before {
- content: "";
- position: absolute;
- display: block;
- bottom: 0;
- left: 0;
- width: 2rem;
- border-bottom: 1px solid oklch(var(--color-foreground));
- }
-
- .tab-labels::after {
- content: "";
- position: relative;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- border-bottom: 1px solid oklch(var(--color-foreground));
- }
-}
-
-/* MARK: Codeblocks
-*/
-code {
- font-family: "JetBrainsMono", monospace;
-}
-
-/* Inline Codeblock */
-code:not(pre code) {
- border: solid 1px oklch(var(--color-inline_codeblock-border));
- border-radius: 0.25rem;
- padding: 0 0.25rem;
- background-color: oklch(var(--color-inline_codeblock-background));
- font-size: 0.875rem;
-}
-
-/* Inline Code (link) */
-a code:not(pre code) {
- border: solid 1px oklch(var(--color-brand) / 0.3);
- border-bottom: solid 2px oklch(var(--color-brand) / 0.3);
-
- /* transition: border 0.15s ease-in-out; */
-}
-
-a code:not(pre code):hover {
- border: solid 1px oklch(var(--color-brand) / 0.8);
- border-bottom: solid 2px oklch(var(--color-brand) / 0.8);
-}
-
-a:has(code:not(pre code)) {
- text-decoration: none;
-}
-
-/* Regular Codeblock */
-.highlight {
- padding: 0 1rem 0 1rem;
- position: relative;
- flex: 1;
-
- code .cl {
- position: relative;
- }
-}
-
-.code-block {
- position: relative;
-
- tr::after {
- display: none;
- }
-
- .line .w {
- /* White-space */
- text-decoration: none !important;
- }
-}
-
-.code-block .code-header:not(:has(.code-type)) {
- /* Remove margin for codeblocks without a type */
- margin-top: -1.5rem;
-}
-
-.highlight-v2 {
- border: 1px solid oklch(var(--color-codeblock-border));
- overflow-x: scroll;
- scrollbar-width: none;
- line-height: 150%;
- padding: 1rem 0;
- /* margin: 1.5rem 0 0.25rem 0; */
-}
-
-.highlight code {
- font-size: 0.875rem;
-}
-
-.highlight-v2.single-line {
- display: flex;
- align-items: center;
- border: 1px solid oklch(var(--color-codeblock-border));
- overflow-x: scroll;
- line-height: 1;
-}
-
-.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));
- text-transform: uppercase;
- padding: 0.15rem 0.5rem;
- font-size: 0.75rem;
- z-index: 999;
- background-color: oklch(var(--color-bg-light));
- margin: 0 0 -1px 0;
-}
-
-.code-container {
- box-shadow: 2px 2px 0px oklch(var(--color-codeblock-shadow));
-}
-
-ol .code-block,
-ul .code-block {
- margin: 0.75rem 0;
-}
-
-.code-container:hover {
- .code-copy-button {
- display: block;
- }
-}
-
-.code-copy-button {
- background-color: oklch(var(--color-background));
- border: 1px solid oklch(var(--color-foreground));
- padding: 4px 6px;
- cursor: pointer;
- font-size: 12px;
- color: oklch(var(--color-foreground));
- display: none;
- position: absolute;
- margin-top: 8px;
- right: 1rem;
- z-index: 1;
- --color-codeblock-shadow: 0 0 0;
- box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
-}
-
-.code-copy-button:hover {
- box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
-}
-
-.code-copy-button:focus {
- outline: none;
- box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
-}
-
-.next-prev-icon {
- display: flex;
- list-style-type: none;
- padding: 0;
-}
-
-.highlight code .hl {
- width: fit-content;
- min-width: 100%;
- background-color: oklch(var(--color-codeblock-highlight));
-}
-
-/* MARK: Catalog
-*/
-.catalog {
- .catalog__table {
- padding-bottom: 2rem;
- }
-}
-
-/* MARK: Images
-*/
-figure {
- margin: 0;
-}
-
-img,
-.figure-bitmap {
- display: inline-block;
- width: auto;
- max-width: 100%;
- height: auto;
- max-height: 100%;
-}
-
-/* Logo */
-.f5-logo-footer {
- height: 32px;
- width: 32px;
-}
-
-/* HR Lines */
-hr {
- /* Move to gutter */
- width: calc(100% + 2rem);
- margin-left: -1rem;
-
- border: 1px solid oklch(var(--color-divider));
-}
-
-.feather {
- width: 1.8ch;
- height: 1.8ch;
- stroke: currentColor;
- fill: none;
- stroke-width: 2;
- stroke-linecap: square;
- stroke-linejoin: square;
- vertical-align: sub;
- margin: 0;
-}
-
-.lucide {
- width: 1.5rem;
- height: 1.5rem;
- stroke: currentColor;
- fill: none;
- stroke-width: 2;
- stroke-linecap: square;
- stroke-linejoin: square;
- vertical-align: sub;
- margin: 0;
-}
-
-/* MARK: Accessibility
-*/
-
-.skip-link {
- position: fixed;
- top: 0;
- left: 0;
- background-color: oklch(var(--color-background));
- color: oklch(var(--color-foreground));
- padding: 1rem 1rem;
- font-size: 1rem;
- border: 2px solid oklch(var(--color-foreground));
- z-index: 1000;
- text-decoration: none;
- border-radius: 0;
- box-shadow: 3px 3px 0px oklch(var(--color-shadow));
- opacity: 0;
- pointer-events: none;
-}
-
-.skip-link:focus {
- opacity: 1;
- pointer-events: auto;
-}
-
-@media print {
- .qualtrics-feedback {
- visibility: hidden;
- }
-}
-
-.not-found-container {
- display: flex;
- flex-direction: column;
- margin-top: 10vh;
-
- .info-header {
- font-size: var(--font-step-2);
- }
-
- .info-desc {
- display: flex;
- flex-direction: column;
- gap: var(--space-3xs);
- font-size: var(--font-step--1);
- }
-}
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html
index 003fabf..558186c 100644
--- a/layouts/partials/styles.html
+++ b/layouts/partials/styles.html
@@ -1,11 +1,27 @@
-{{ $style := resources.Get "css/v2/style.css" | minify | fingerprint "sha512" }}
-
-{{ $cssInter := resources.Get "css/inter/inter.css" | minify | fingerprint "sha512" }}
-
+{{- $styles := slice
+ (resources.Get "css/global/reset.css")
+ (resources.Get "css/inter/inter.css")
+ (resources.Get "css/global/typography.css")
+ (resources.Get "css/global/tokens.css")
+ (resources.Get "css/global/layout.css")
+ (resources.Get "css/blocks.css")
+ (resources.Get "css/utilities.css")
+-}}
+
+{{- $componentStyles := resources.Match "css/components/*.css" | resources.Concat "components.css" -}}
+
+{{- /* combine all styles */ -}}
+{{- $allStyles := $styles | append $componentStyles | resources.Concat "styles.css" | minify | fingerprint "sha512" -}}
+
+
+
-{{ $cssHighlight := resources.Get "css/v2/highlight.css" | minify | fingerprint "sha512"}}
-