Skip to content

Sidebar updates #380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Sidebar updates #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ede6b4c
Sidebar updates
cinxmo Dec 13, 2023
a4e6c54
make opaque
cinxmo Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 6 additions & 14 deletions public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: rgb(242,244,246);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"highlight" refers to the lighter gray color in the back and "focus" refers to the text and left border color
Screenshot 2023-12-13 at 8 53 54 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be called --theme-background-… if it’s a background color. And we already have --theme-background-alt for this purpose.

Speaking of which is looks like --theme-background-alt is broken in production since it’s set to the same color as --theme-background, so code blocks are no longer gray. 😞

Screenshot 2023-12-13 at 6 43 09 PM

--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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -344,7 +336,7 @@ a[href],
}

#observablehq-sidebar {
transition: left 300ms ease;
transition: left 150ms ease;
}

#observablehq-sidebar-backdrop {
Expand Down
2 changes: 1 addition & 1 deletion src/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ ${renderFooter(path, options)}
}

async function renderSidebar(title = "Home", pages: (Page | Section)[], path: string): Promise<Html> {
return html`<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
return html`<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/archives/tar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/archives/zip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/config/closed/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "../_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/config/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "./_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/config/one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "./_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/config/sub/two.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "../_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/config/toc-override.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "./_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/config/toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "./_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/fetches/foo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/fetches/top.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/files/files.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/files/subsection/subfiles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/imports/foo/foo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/missing-file/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/missing-import/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/multi/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/multi/subsection/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "../_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/simple-public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "./_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/simple/simple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}});

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down
2 changes: 1 addition & 1 deletion test/output/build/subtitle/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import "./_observablehq/client.js";

</script>
<input id="observablehq-sidebar-toggle" type="checkbox" title="toggle sidebar">
<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
<nav id="observablehq-sidebar">
<ol>
Expand Down