diff --git a/packages/web/src/assets/logo-dark.svg b/packages/web/src/assets/logo-dark.svg index a4e433958..a15827324 100644 --- a/packages/web/src/assets/logo-dark.svg +++ b/packages/web/src/assets/logo-dark.svg @@ -1,12 +1,18 @@ - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/packages/web/src/assets/logo-light.svg b/packages/web/src/assets/logo-light.svg index cbfcccf51..2a856dcce 100644 --- a/packages/web/src/assets/logo-light.svg +++ b/packages/web/src/assets/logo-light.svg @@ -1,12 +1,18 @@ - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/packages/web/src/assets/logo-ornate-dark.svg b/packages/web/src/assets/logo-ornate-dark.svg index b937be0af..a15827324 100644 --- a/packages/web/src/assets/logo-ornate-dark.svg +++ b/packages/web/src/assets/logo-ornate-dark.svg @@ -1,18 +1,18 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/packages/web/src/assets/logo-ornate-light.svg b/packages/web/src/assets/logo-ornate-light.svg index 789223bc4..2a856dcce 100644 --- a/packages/web/src/assets/logo-ornate-light.svg +++ b/packages/web/src/assets/logo-ornate-light.svg @@ -1,18 +1,18 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/packages/web/src/styles/custom.css b/packages/web/src/styles/custom.css index deff8ae90..3e504ce44 100644 --- a/packages/web/src/styles/custom.css +++ b/packages/web/src/styles/custom.css @@ -1,12 +1,268 @@ :root { - --sl-color-bg-surface: var(--sl-color-bg-nav); - --sl-color-divider: var(--sl-color-gray-5); + --sl-color-bg: hsl(0, 20%, 99%); + --sl-color-gray-5: hsl(0, 1%, 85%); + --sl-nav-gap: 40px; + --sl-color-text: hsl(0, 1%, 39%); + + --color-background: hsl(0, 20%, 99%); + --color-background-weak: hsl(0, 8%, 97%); + --color-background-weak-hover: hsl(0, 8%, 94%); + --color-background-strong: hsl(0, 5%, 12%); + --color-background-strong-hover: hsl(0, 5%, 18%); + --color-background-interactive: hsl(62, 84%, 88%); + --color-background-interactive-weaker: hsl(64, 74%, 95%); + + --color-text: hsl(0, 1%, 39%); + --color-text-weak: hsl(0, 1%, 60%); + --color-text-weaker: hsl(30, 2%, 81%); + --color-text-strong: hsl(0, 5%, 12%); + --color-text-inverted: hsl(0, 20%, 99%); + + --color-border: hsl(30, 2%, 81%); + --color-border-weak: hsl(0, 1%, 85%); + + --color-icon: hsl(0, 1%, 55%); + +} + +body { + color: var(--color-text) !important; + font-size: 14px !important; +} + +body > .page > .main-frame .main-pane > main > .content-panel + .content-panel { + border-top: none !important; +} + +body > .page > header a.site-title img { + height: 2rem !important; +} + +a { + color: var(--color-text-strong) !important; +} + +.right-sidebar { + border-inline-start: none !important; +} + +.right-sidebar-panel { + padding: 24px 0 !important; +} + +.sidebar-content { + padding: 24px 0 !important; +} + +a[aria-current="page"] { + border-left: 2px solid var(--color-background-strong); + background: hsl(0, 8%, 97%) !important; + font-weight: 600 !important; +} + +ul.top-level a[aria-current="page"] > span { + color: var(--color-text-strong) !important; +} + +#starlight__sidebar > div > sl-sidebar-state-persist > ul > li > details > summary { + padding: 0 24px !important; + margin-top: 20px !important; +} + +#starlight__sidebar > div > sl-sidebar-state-persist > ul > li > details > summary:hover { + background: var(--color-background-weak); +} + +#starlight__sidebar > div > sl-sidebar-state-persist > ul > li > details > summary span { + color: var(--color-text-strong) !important; + font-weight: 600 !important; +} + + +.top-level li a { + border-radius: 0; + width: 100%; + padding: 4px 24px !important; +} + +.top-level li a:hover { + background: hsl(0, 8%, 97%) !important; +} + +.right-group { + gap: 40px !important; +} + +.social-icons { + gap: 24px !important; +} + +.social-icons a svg { + height: 18px !important; + width: 18px !important; +} + +site-search > button { + text-transform: none !important; +} + +body > .page > header button[data-open-modal] { + gap: 24px !important; + background: var(--color-background-weak) !important; + border: 1px solid var(--color-border-weak); + padding: 6px 16px !important; + border-radius: 4px; + +} + +site-search > button span { + text-decoration: none !important; +} + +site-search > button > kbd { + font-size: 14px !important; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: var(--color-text-strong) !important; +} + +h1 { + font-size: 26px !important; + text-transform: none !important; + font-weight: 500 !important; + color: var(--color-text-strong) !important; +} + +h2 { + font-size: 22px !important; + text-transform: none !important; + font-weight: 500 !important; + color: var(--color-text-strong) !important; +} + +h3 { + font-size: 18px !important; + text-transform: none !important; + font-weight: 500 !important; + color: var(--color-text-strong) !important; +} + +h4 { + font-size: 16px !important; + text-transform: none !important; + font-weight: 500 !important; + color: var(--color-text-strong) !important; +} + +strong { + font-weight: 500 !important; +} + +ul, ol { + list-style: none !important; + padding: 0 !important; +} + +.sl-markdown-content .tab > [role="tab"][aria-selected="true"] { + border-color: hsl(0, 5%, 12%); +} + +body > .page > header, :root[data-has-sidebar] body > .page > header { + background: hsl(0, 20%, 99%) !important; + padding: 24px !important; +} + +.sl-container { + box-sizing: border-box !important; + width: 100% !important; +} + +.right-sidebar-panel nav, +.right-sidebar-panel h2, +.right-sidebar-panel ul, +.right-sidebar-panel li, +.right-sidebar-panel a { + display: block; + width: 100%; +} + +.sl-container { + max-width: 100% !important; +} + + +.sl-container ul li a { + padding: 4px 24px !important; + width: 100% !important; +} + +.sl-container ul li a:hover { + background: var(--color-background-weak); +} + +.sl-container ul li a[aria-current="true"] { + color: var(--color-text-strong) !important; +} + +.sl-container ul li ul li { + padding: 4px 12px !important; +} + +h2#starlight__on-this-page { + font-size: 14px !important; + color: hsl(0, 1%, 39%) !important; + margin: 0 !important; + font-weight: 400 !important; + padding: 0 24px 12px 24px; +} + +#starlight__on-this-page ul { + color: hsl(0, 1%, 39%) !important; + font-size: 16px !important; +} + +.middle-group .links { + color: hsl(0, 5%, 12%); + text-decoration: none; + text-transform: none; + font-size: 16px; + display: none !important; +} + +.middle-group .links:hover { + text-decoration: underline; + text-underline-offset: 4px; + text-decoration-thickness: 1px; +} + +nav.sidebar ul.top-level > li > details > summary .group-label > span { + margin-top: 24px !important; + color: hsl(0, 5%, 12%) !important; + text-transform: none !important; + font-weight: 500 !important; +} + +.content-panel { + padding: 2rem 3rem !important; +} + +.expressive-code { + margin: 12px 0 56px 0 !important; + border-radius: 6px; + +} + +.expressive-code figure { + background: hsl(0, 8%, 97%) !important; } .expressive-code .frame { box-shadow: none; } + + @media (prefers-color-scheme: dark) { .shiki, .shiki span {