safari tweaks

observablehq · Oct 14, 2023 · 91988d0 · 91988d0
1 parent b731643
commit 91988d0
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 48 deletions.
diff --git a/docs/dashboard.css b/docs/dashboard.css
@@ -0,0 +1,40 @@
+@media (prefers-color-scheme: light) {
+  :root {
+    --theme-background: color-mix(in srgb, var(--theme-background-alt) 95%, black);
+    --theme-background-alt: rgb(255, 255, 255);
+  }
+  #observablehq-sidebar {
+    background: var(--theme-background);
+  }
+}
+
+.grid {
+  margin: 1rem 0;
+  display: grid;
+  gap: 1rem;
+  grid-auto-rows: 1fr;
+}
+
+.grid > * {
+  background: var(--theme-background-alt);
+  border: solid 1px var(--theme-foreground-faintest);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  overflow: hidden;
+}
+
+@media (min-width: 640px) {
+  .grid-cols-2, .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@media (min-width: 960px) {
+  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+.grid-colspan-2 { grid-column: span 2; }
+.grid-colspan-3 { grid-column: span 3; }
+.grid-colspan-4 { grid-column: span 4; }
+.grid-rowspan-2 { grid-row: span 2; }
+.grid-rowspan-3 { grid-row: span 3; }
+.grid-rowspan-4 { grid-row: span 4; }
diff --git a/docs/dashboard.md b/docs/dashboard.md
@@ -1,3 +1,5 @@
+<link rel="stylesheet" type="text/css" href="dashboard.css">
+
 # Example dashboard
 
 ```js
@@ -20,9 +22,9 @@ const focus = Generators.observe((notify) => {
 ```
 
 <div class="grid grid-cols-3" style="grid-auto-rows: 85px;">
-  <div style="display: flex; align-items: center;">${resize((width, height) => BigNumber(focus.Close, {width, height, title: "Close", trend: (focus.Close - aapl.at(-2).Close) / aapl.at(-2).Close}))}</div>
-  <div style="display: flex; align-items: center;">${resize((width, height) => BigNumber(focus.Volume, {width, height, title: "Trading volume", format: ".3~s", trend: (focus.Volume - aapl.at(-2).Volume) / aapl.at(-2).Volume}))}</div>
-  <div style="display: flex; align-items: center;">${resize((width, height) => BigNumber(d3.extent(aapl.slice(-90), (d) => d.Close).map((d) => d.toFixed(1)).join("–"), {width, height, title: "90-day range", trend: null}))}</div>
+  <div style="display: flex; align-items: center;">${BigNumber(focus.Close, {width, title: "Close", trend: (focus.Close - aapl.at(-2).Close) / aapl.at(-2).Close})}</div>
+  <div style="display: flex; align-items: center;">${BigNumber(focus.Volume, {width, title: "Trading volume", format: ".3~s", trend: (focus.Volume - aapl.at(-2).Volume) / aapl.at(-2).Volume})}</div>
+  <div style="display: flex; align-items: center;">${BigNumber(d3.extent(aapl.slice(-90), (d) => d.Close).map((d) => d.toFixed(1)).join("–"), {width, title: "90-day range", trend: null})}</div>
 </div>
 
 <div class="grid grid-cols-3">
@@ -107,43 +109,3 @@ function BigNumber(
 </div>`;
 }
 ```
-
-<style type="text/css">
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --theme-background: color-mix(in srgb, var(--theme-background-alt) 95%, black);
-    --theme-background-alt: rgb(255, 255, 255);
-  }
-  #observablehq-sidebar {
-    background: none;
-  }
-}
-
-.grid {
-  margin: 1rem 0;
-  display: grid;
-  grid-auto-rows: 192px;
-  gap: 1rem;
-}
-
-.grid > * {
-  background: var(--theme-background-alt);
-  border: solid 1px var(--theme-foreground-faintest);
-  border-radius: 0.75rem;
-  padding: 1rem;
-  overflow: hidden;
-}
-
-.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-
-.grid-colspan-2 { grid-column: span 2; }
-.grid-colspan-3 { grid-column: span 3; }
-.grid-colspan-4 { grid-column: span 4; }
-.grid-rowspan-2 { grid-row: span 2; }
-.grid-rowspan-3 { grid-row: span 3; }
-.grid-rowspan-4 { grid-row: span 4; }
-
-</style>
diff --git a/public/style.css b/public/style.css
@@ -94,21 +94,22 @@ main {
 #observablehq-sidebar-toggle {
   position: fixed;
   top: 0;
-  bottom: 0;
   left: 0;
+  height: 100%;
+  width: 1rem;
   appearance: none;
   display: flex;
   align-items: center;
   margin: 0;
+  padding: 2px;
   cursor: pointer;
   z-index: 2;
+  color: var(--theme-foreground-faint);
+  font-size: 20px;
 }
 
 #observablehq-sidebar-toggle::before {
   content: "≡";
-  padding: 2px;
-  color: var(--theme-foreground-faint);
-  font-size: 20px;
 }
 
 .observablehq-link a {
@@ -144,13 +145,19 @@ main {
 
 #observablehq-sidebar-toggle:checked + #observablehq-sidebar {
   left: 0;
-  box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
 }
 
 #observablehq-sidebar {
   transition: left 150ms ease;
 }
 
+@media (prefers-color-scheme: dark) {
+  #observablehq-sidebar-toggle:checked + #observablehq-sidebar {
+    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5);
+  }
+}
+
 @media (min-width: calc(640px + 4rem + 0.5rem + 240px + 2rem)) {
   #observablehq-sidebar {
     transition: none;