From ede6b4c455798672dae9e9d598c2997fb3d4ec0a Mon Sep 17 00:00:00 2001 From: Cindy <37343722+cinxmo@users.noreply.github.com> Date: Wed, 13 Dec 2023 13:09:01 -0500 Subject: [PATCH 1/2] Sidebar updates --- public/style.css | 20 ++++++------------- src/render.ts | 2 +- test/output/build/archives/tar.html | 2 +- test/output/build/archives/zip.html | 2 +- test/output/build/config/closed/page.html | 2 +- test/output/build/config/index.html | 2 +- test/output/build/config/one.html | 2 +- test/output/build/config/sub/two.html | 2 +- test/output/build/config/toc-override.html | 2 +- test/output/build/config/toc.html | 2 +- test/output/build/fetches/foo.html | 2 +- test/output/build/fetches/top.html | 2 +- test/output/build/files/files.html | 2 +- .../build/files/subsection/subfiles.html | 2 +- test/output/build/imports/foo/foo.html | 2 +- test/output/build/missing-file/index.html | 2 +- test/output/build/missing-import/index.html | 2 +- test/output/build/multi/index.html | 2 +- test/output/build/multi/subsection/index.html | 2 +- test/output/build/simple-public/index.html | 2 +- test/output/build/simple/simple.html | 2 +- test/output/build/subtitle/index.html | 2 +- 22 files changed, 27 insertions(+), 35 deletions(-) diff --git a/public/style.css b/public/style.css index cebccfb23..b9e122875 100644 --- a/public/style.css +++ b/public/style.css @@ -1,27 +1,19 @@ :root { --theme-background: rgb(255, 255, 255); --theme-background-alt: rgb(255, 255, 255); - --theme-foreground: #1C1C1C; - --theme-foreground-highlight: #001B440D; + --theme-foreground: #1c1c1c; + --theme-foreground-highlight: #001b440d; --theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background)); --theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 70%, var(--theme-background)); --theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background)); --theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background)); - --theme-foreground-faintest: #E2E2E2; - --theme-foreground-focus: #3B5FC0; + --theme-foreground-faintest: #e2e2e2; + --theme-foreground-focus: #3b5fc0; --monospace: Menlo, Consolas, monospace; --monospace-font: 14px/1.5 var(--monospace); --serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; color-scheme: light dark; - - --black-dark-gray: #454545; - --black-light-gray: #E2E2E2; - --black-mid-gray: #6E6E6E; - --black-near-black: #1C1C1C; - --black-white: #FFFFFF; - --blue-blue: #3B5FC0; - --down-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='%23454545' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); --sidebar-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='%23929292' stroke-width='2'/%3E%3Crect x='2' y='2' fill='%23929292' height='12' rx='.5' width='2'/%3E%3C/svg%3E"); --sidebar-toggle-close: translate(0,-5px) rotate(180deg); @@ -251,7 +243,7 @@ body { @media (max-width: calc(640px + 4rem + 272px + 2rem)) { #observablehq-sidebar-toggle { - transition: left 300ms ease; + transition: left 150ms ease; } #observablehq-sidebar-toggle:indeterminate { top: 0; @@ -344,7 +336,7 @@ a[href], } #observablehq-sidebar { - transition: left 300ms ease; + transition: left 150ms ease; } #observablehq-sidebar-backdrop { diff --git a/src/render.ts b/src/render.ts index ef998bf6f..052c2e79e 100644 --- a/src/render.ts +++ b/src/render.ts @@ -95,7 +95,7 @@ ${renderFooter(path, options)} } async function renderSidebar(title = "Home", pages: (Page | Section)[], path: string): Promise { - return html` + return html`