From 03fbcd7067f20e080848f95574b502d36ee8e8e5 Mon Sep 17 00:00:00 2001 From: Parker Henderson Date: Fri, 28 Feb 2025 17:12:43 -0800 Subject: [PATCH 1/4] style header and sidebar --- docs/src/tailwind.css | 100 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css index d694093..db8a745 100644 --- a/docs/src/tailwind.css +++ b/docs/src/tailwind.css @@ -14,3 +14,103 @@ code { white-space: nowrap; } + +/* NAV BAR STYLES */ +.header { + @apply bg-white; +} + +starlight-theme-select label { + @apply text-gray-600; +} + +site-search { + @apply bg-red-50; +} + +site-search button[data-open-modal] { + @apply border border-gray-300 bg-white text-gray-500; + + kbd { + @apply bg-gray-50; + } +} + +/* SIDEBAR STYLES */ +.sidebar-pane { + border-inline-end: 0; +} + +@media (min-width: 50rem) { + :root { + --sl-sidebar-pad-x: 1.25rem; + } +} + +.sidebar-content { + @apply pt-6; + + summary { + @apply gap-1 px-0 flex flex-row justify-between font-bold; + + .caret { + @apply hidden; + } + + @media (min-width: 50rem) { + /* Tweak alignment of group label and caret icon */ + --caret-adjustment: 0.5px; + transform: translateY(var(--caret-adjustment)); + + .group-label { + transform: translateY(calc(-1 * var(--caret-adjustment))); + } + } + } + + li { + border: 0; + --sl-sidebar-item-padding-inline: 0.45rem; + margin: 0; + padding: 0; + } + + .top-level>li+li { + padding: 0; + margin-block: 0; + } + + .top-level>li:has(details) { + margin-block: 0.5rem; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + .large { + @apply px-3 text-sm text-gray-900; + + @media (min-width: 50rem) { + font-size: var(--sl-text-sm); + } + } + + a.large { + @apply text-sm text-gray-900 hover:text-violet-600; + } + + a { + @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-50; + + &[aria-current='page'] { + @apply bg-violet-50 text-violet-600 font-bold; + } + } +} + + From 3ef3583925c1dd9bb490529c1362b4d5db326c2a Mon Sep 17 00:00:00 2001 From: Parker Henderson Date: Fri, 28 Feb 2025 17:38:00 -0800 Subject: [PATCH 2/4] more sidebar tweaks --- docs/src/tailwind.css | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css index db8a745..3d020c3 100644 --- a/docs/src/tailwind.css +++ b/docs/src/tailwind.css @@ -75,25 +75,22 @@ site-search button[data-open-modal] { padding: 0; } - .top-level>li+li { - padding: 0; + .top-level { + display: flex; + flex-direction: column; + gap: 4px; + } + + .top-level>* { margin-block: 0; } .top-level>li:has(details) { margin-block: 0.5rem; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } } .large { - @apply px-3 text-sm text-gray-900; + @apply px-3 text-sm text-gray-400; @media (min-width: 50rem) { font-size: var(--sl-text-sm); @@ -101,14 +98,14 @@ site-search button[data-open-modal] { } a.large { - @apply text-sm text-gray-900 hover:text-violet-600; + @apply text-sm text-gray-900 hover:bg-gray-100; } a { - @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-50; + @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-100; &[aria-current='page'] { - @apply bg-violet-50 text-violet-600 font-bold; + @apply bg-violet-50 text-violet-600; } } } From 1df5a9a8112af1bdb9b4893d75675290920f92bc Mon Sep 17 00:00:00 2001 From: Parker Henderson Date: Fri, 28 Feb 2025 18:01:04 -0800 Subject: [PATCH 3/4] markdown typography style tweaks --- docs/src/tailwind.css | 60 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css index 3d020c3..076af81 100644 --- a/docs/src/tailwind.css +++ b/docs/src/tailwind.css @@ -110,4 +110,64 @@ site-search button[data-open-modal] { } } +/* MARKDOWN CONTENT STYLES */ +.sl-markdown-content { + h1 { + @apply text-3xl font-bold; + } + + h2 { + @apply text-2xl font-bold; + } + + h3 { + @apply text-xl font-bold; + } + + h4 { + @apply text-lg font-bold; + } + + h5 { + @apply text-base font-bold; + } + + h6 { + @apply text-sm font-bold; + } + + p { + @apply text-base leading-normal text-gray-900; + } + + a { + @apply text-violet-600 no-underline hover:underline hover:text-violet-700; + } + + code { + @apply font-mono bg-gray-50 border border-gray-200 px-1.5 py-0.5 text-sm text-gray-600 rounded-md; + } +} + +.content-panel { + border-top: none !important; +} + +/* Next/Previous Page Links */ +.content-panel footer { + .pagination-links > a { + @apply text-sm border-gray-300/50 border shadow-none; + + svg { + @apply hidden; + } + + span { + @apply text-gray-400 text-xs font-bold; + span { + @apply text-base text-gray-900 font-normal; + } + } + } +} \ No newline at end of file From 46173d5ea92ee77a3b6ff46cdb97680f112a498f Mon Sep 17 00:00:00 2001 From: Parker Henderson Date: Fri, 28 Feb 2025 18:14:31 -0800 Subject: [PATCH 4/4] dark theme works now --- docs/src/tailwind.css | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css index 076af81..d4958c5 100644 --- a/docs/src/tailwind.css +++ b/docs/src/tailwind.css @@ -17,28 +17,29 @@ code { /* NAV BAR STYLES */ .header { - @apply bg-white; + @apply bg-white dark:bg-gray-900; } starlight-theme-select label { - @apply text-gray-600; + @apply text-gray-600 dark:text-gray-400; } site-search { - @apply bg-red-50; + @apply bg-red-50 dark:bg-gray-800; } site-search button[data-open-modal] { - @apply border border-gray-300 bg-white text-gray-500; + @apply border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400; kbd { - @apply bg-gray-50; + @apply bg-gray-50 dark:bg-gray-700; } } /* SIDEBAR STYLES */ .sidebar-pane { border-inline-end: 0; + @apply dark:bg-gray-900 bg-white; } @media (min-width: 50rem) { @@ -90,7 +91,7 @@ site-search button[data-open-modal] { } .large { - @apply px-3 text-sm text-gray-400; + @apply px-3 text-sm text-gray-400 dark:text-gray-500; @media (min-width: 50rem) { font-size: var(--sl-text-sm); @@ -98,14 +99,14 @@ site-search button[data-open-modal] { } a.large { - @apply text-sm text-gray-900 hover:bg-gray-100; + @apply text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800; } a { - @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-100; + @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800; &[aria-current='page'] { - @apply bg-violet-50 text-violet-600; + @apply bg-violet-50 text-violet-600 dark:bg-violet-100/10 dark:text-violet-300; } } } @@ -114,39 +115,39 @@ site-search button[data-open-modal] { .sl-markdown-content { h1 { - @apply text-3xl font-bold; + @apply text-3xl font-bold dark:text-white; } h2 { - @apply text-2xl font-bold; + @apply text-2xl font-bold dark:text-white; } h3 { - @apply text-xl font-bold; + @apply text-xl font-bold dark:text-white; } h4 { - @apply text-lg font-bold; + @apply text-lg font-bold dark:text-white; } h5 { - @apply text-base font-bold; + @apply text-base font-bold dark:text-white; } h6 { - @apply text-sm font-bold; + @apply text-sm font-bold dark:text-white; } p { - @apply text-base leading-normal text-gray-900; + @apply text-base leading-normal text-gray-900 dark:text-gray-100; } a { - @apply text-violet-600 no-underline hover:underline hover:text-violet-700; + @apply text-violet-600 dark:text-violet-400 no-underline hover:underline hover:text-violet-700 dark:hover:text-violet-300; } code { - @apply font-mono bg-gray-50 border border-gray-200 px-1.5 py-0.5 text-sm text-gray-600 rounded-md; + @apply font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-1.5 py-0.5 text-sm text-gray-600 dark:text-gray-300 rounded-md; } } @@ -157,16 +158,16 @@ site-search button[data-open-modal] { /* Next/Previous Page Links */ .content-panel footer { .pagination-links > a { - @apply text-sm border-gray-300/50 border shadow-none; + @apply text-sm border-gray-300/50 dark:border-gray-700/50 border shadow-none dark:bg-gray-800; svg { @apply hidden; } span { - @apply text-gray-400 text-xs font-bold; + @apply text-gray-400 dark:text-gray-500 text-xs font-bold; span { - @apply text-base text-gray-900 font-normal; + @apply text-base text-gray-900 dark:text-gray-100 font-normal; } } }