small observable restyling

nicucalcea · Apr 23, 2024 · 909a5cb · 909a5cb
1 parent 80763d2
commit 909a5cb
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 14 deletions.
diff --git a/_observable/docs/ai/llm-comparison.md b/_observable/docs/ai/llm-comparison.md
@@ -101,7 +101,7 @@ Inputs.table(lmsys_cost, {
 ```js
 function sparkbar(max) {
   return (x) => htl.html`<div style="
-    background: var(--theme-green);
+    background: var(--accent);
     color: white;
     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
     font: 10px/1.6 var(--sans-serif);

diff --git a/_observable/docs/src/style.css b/_observable/docs/src/style.css
@@ -0,0 +1,54 @@
+@import url("observablehq:default.css");
+@import url("observablehq:theme-midnight.css");
+
+:root {
+  --accent: rgb(234, 88, 12);
+  --accent-dark: #261105;
+  --accent-light: rgb(249, 115, 22);
+  --gray-100: rgb(245, 241, 238);
+  --gray-200: rgb(230, 226, 223);
+  --gray-300: rgb(213, 209, 206);
+  --gray-400: rgb(166, 162, 159);
+  --body-bg: #100905;
+  --body-color: rgb(166, 162, 159);
+  --link-color: rgb(250, 246, 243);
+  --input-bg: var(--gray-100);
+  --footer-fg: var(--gray-300);
+  --sidebar-fg: var(--gray-300);
+  --toc-color: var(--accent);
+}
+
+:root {
+  /* --theme-foreground: white; */
+  --theme-background: var(--body-bg);
+  --theme-background-alt: var(--body-bg);
+  --theme-foreground-alt: rgb(166, 162, 159);
+  --theme-foreground-muted: var(--gray-400);
+  /* --theme-foreground-faint: blue; */
+  /* --theme-foreground-fainter - fainter border color, e.g. light gray */
+  /* --theme-foreground-faintest - faintest border color, e.g. almost white */
+  --theme-foreground-focus: var(--accent);
+}
+
+
+/* bottom nav links */
+footer nav a {
+  border: 1px solid var(--accent-dark);
+  padding: 0 .5rem;
+  border: 1px solid var(--accent);
+  border-radius: 9999px;
+  color: var(--accent);
+  font-weight: normal;
+}
+
+
+/* footer */
+#observablehq-footer div a {
+  text-decoration: none;
+  color: var(--gray-400);
+}
+
+#observablehq-footer div a:hover {
+  color: #000;
+  color: var(--gray-300);
+}
diff --git a/docs/ai/llm-comparison.html b/docs/ai/llm-comparison.html
@@ -155,10 +155,10 @@
 ))
 }});
 
-define({id: "2494258d", inputs: ["htl"], outputs: ["sparkbar"], body: (htl) => {
+define({id: "8639f3b0", inputs: ["htl"], outputs: ["sparkbar"], body: (htl) => {
 function sparkbar(max) {
   return (x) => htl.html`<div style="
-    background: var(--theme-green);
+    background: var(--accent);
     color: white;
     text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
     font: 10px/1.6 var(--sans-serif);
@@ -244,7 +244,7 @@ <h2 id="what-do-you-need%3F" tabindex="-1"><a class="observablehq-header-anchor"
 <div id="cell-a51b611c" class="observablehq observablehq--block"></div>
 <div id="cell-02f4f392" class="observablehq observablehq--block"></div>
 <div id="cell-fba4f00e" class="observablehq observablehq--block observablehq--loading"></div>
-<div id="cell-2494258d" class="observablehq observablehq--block"></div>
+<div id="cell-8639f3b0" class="observablehq observablehq--block"></div>
 <p>The score column is calculated by dividing the ELO score by the cost. The higher the score, the better deal you get for the money.</p>
 <br>
 <h3 id="where's-the-sweet-spot%3F" tabindex="-1"><a class="observablehq-header-anchor" href="#where's-the-sweet-spot%3F">Where's the sweet spot?</a></h3>

diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -2,38 +2,38 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://ddj.nicu.md/toolbox/index.html</loc>
-    <lastmod>2024-04-23T22:32:40.295Z</lastmod>
+    <lastmod>2024-04-23T22:59:20.250Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/sources/data-calendar.html</loc>
-    <lastmod>2024-04-23T22:32:39.419Z</lastmod>
+    <lastmod>2024-04-23T22:59:19.391Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/index.html</loc>
-    <lastmod>2024-04-23T22:32:38.636Z</lastmod>
+    <lastmod>2024-04-23T22:59:18.634Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/awards/index.html</loc>
-    <lastmod>2024-04-23T22:32:36.760Z</lastmod>
+    <lastmod>2024-04-23T22:59:15.655Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/ai/google-sheets.html</loc>
-    <lastmod>2024-04-23T22:32:36.102Z</lastmod>
+    <lastmod>2024-04-23T22:59:14.983Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/ai/index.html</loc>
-    <lastmod>2024-04-23T22:32:36.481Z</lastmod>
+    <lastmod>2024-04-23T22:59:15.381Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/city/index.html</loc>
-    <lastmod>2024-04-23T22:32:38.289Z</lastmod>
+    <lastmod>2024-04-23T22:59:18.334Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/sources/academic.html</loc>
-    <lastmod>2024-04-23T22:32:39.024Z</lastmod>
+    <lastmod>2024-04-23T22:59:18.997Z</lastmod>
   </url>
   <url>
     <loc>https://ddj.nicu.md/sources/index.html</loc>
-    <lastmod>2024-04-23T22:32:39.888Z</lastmod>
+    <lastmod>2024-04-23T22:59:19.892Z</lastmod>
   </url>
 </urlset>
diff --git a/style.scss b/style.scss
@@ -131,4 +131,4 @@ blockquote p {
 .nav-footer div a:hover {
   color: #000;
   color: $gray-300;
-}
+}