Better figures

bibhtml/index.html

@@ -37,7 +37,7 @@
     href="https://esm.sh/jsr/@celine/[email protected]/cell.css" />
   <link 
     rel="stylesheet" 
-    href="https://esm.sh/jsr/@celine/libertine@10.1.0/libertine.css" /> -->
+    href="https://esm.sh/jsr/@celine/libertine@11.0.0/libertine.css" /> -->
 
   <meta property="og:image" content="https://maxbo.me/celine/bibhtml/static/og.png">
   <meta name="twitter:image" content="https://maxbo.me/celine/bibhtml/static/og.png">

index.html

@@ -26,7 +26,7 @@
     href="https://esm.sh/jsr/@celine/[email protected]/cell.css" />
   <link 
     rel="stylesheet" 
-    href="https://esm.sh/jsr/@celine/libertine@10.1.0/libertine.css" /> -->
+    href="https://esm.sh/jsr/@celine/libertine@11.0.0/libertine.css" /> -->
 
   <meta name="theme-color" content="#ffffff">
 
@@ -255,7 +255,7 @@ <h2><a href="#installation" id="installation"></a>Installation</h2>
 <pre class="echo" style="margin-bottom: 1ch;">
 &lt;link 
   rel=&quot;stylesheet&quot; 
-  href=&quot;https://esm.sh/jsr/@celine/libertine@10.1.0/libertine.css&quot; /&gt;
+  href=&quot;https://esm.sh/jsr/@celine/libertine@11.0.0/libertine.css&quot; /&gt;
 </pre>
 
 <h2><a href="#demo" id="demo"></a>Demo: Observable Plot + SQLite</h2>

libertine/deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@celine/libertine",
-  "version": "10.1.0",
+  "version": "11.0.0",
   "license": "MIT",
   "exports": "./mod.ts"
 }

libertine/index.html

@@ -36,7 +36,7 @@
     href="https://esm.sh/jsr/@celine/[email protected]/cell.css" />
   <link 
     rel="stylesheet"  -->
-    <!-- href="https://esm.sh/jsr/@celine/libertine@10.1.0/libertine.css" /> -->
+    <!-- href="https://esm.sh/jsr/@celine/libertine@11.0.0/libertine.css" /> -->
 
   <script type="module">
     import { CelineModule, registerScriptReevaluationOnBlur } from 'https://esm.sh/jsr/@celine/[email protected]';
@@ -91,7 +91,7 @@ <h1>@celine/libertine</h1>
         <th>JSR</th>
         <td class="width-auto"><a href="https://jsr.io/@celine/libertine">jsr.io/<wbr>@celine/<wbr>libertine</a> + <a href="https://jsr.io/@celine/libertine/doc">/docs</a></td>
         <th>Version</th>
-        <td class="width-min"><a href="https://jsr.io/@celine/libertine/versions" id="version">10.1.0</a>, <time  id="updated">Nov 29 2024</time></td>
+        <td class="width-min"><a href="https://jsr.io/@celine/libertine/versions" id="version">11.0.0</a>, <time  id="updated">Nov 29 2024</time></td>
       </tr>
       <script type="module">
         fetch("https://npm.jsr.io/@jsr/celine__libertine")
@@ -113,7 +113,7 @@ <h2><a href="#installation" id="installation"></a>Installation</h2>
 <pre class="echo" style="margin-bottom: 1ch;" id="import">
 &lt;link 
   rel=&quot;stylesheet&quot; 
-  href=&quot;https://esm.sh/jsr/@celine/libertine@10.1.0/libertine.css&quot; /&gt;
+  href=&quot;https://esm.sh/jsr/@celine/libertine@11.0.0/libertine.css&quot; /&gt;
 </pre>
 
 <h2><a href="#fonts" id="fonts"></a>Fonts</h2>
@@ -322,20 +322,29 @@ <h2><a href="#classes" id="classes"></a>Classes</h2>
 
 <h2><a href="#elements" id="elements"></a>Elements</h2>
 
+
+<p>
+  <code>&lt;code&gt;</code> is used to display inline code.
+</p>
+
 <p>
   <code>&lt;main&gt;</code> applies a <code>max-width</code> and <code>margin: 0 auto</code> to center content.
 </p>
 
 <p>
-  <abbr>&lt;abbr&gt;</abbr> is used to display an abbreviation.
+  <abbr>HTML</abbr> <code>&lt;abbr&gt;</code> is used to display an abbreviation.
 </p>
 
 <p>
-  <code>&lt;code&gt;</code> is used to display inline code.
+  <kbd>Esc</kbd> <code>&lt;kbd&gt;</code> is used to display keyboard buttons.
 </p>
 
 <p>
-  <kbd>&lt;kbd&gt;</kbd> is used to display keyboard buttons.
+  <time datetime="2018-07-07">July 7</time>. The <code>&lt;time&gt;</code> element is used to display a date or time.
+</p>
+
+<p>
+  <output>&lt;output&gt;</output> is used to display the result of a calculation.
 </p>
 
 <blockquote>
@@ -346,20 +355,46 @@ <h2><a href="#elements" id="elements"></a>Elements</h2>
   &lt;aside&gt; is used to display content related to the main content.
 </aside>
 
-<figure>
-  <img src="https://via.placeholder.com/150" alt="Placeholder image">
-  <figcaption>This is &lt;figcaption&gt; in a &lt;figure&gt;.</figcaption>
-</figure>
-
 <pre>
   &lt;pre&gt; is used to display preformatted text.
 </pre>
 
 <pre>
-<code>&lt;code&gt; inside of a &lt;pre&gt; has syntax highlighting
+<code>&lt;code&gt; inside of a &lt;pre&gt; is used to apply syntax highlighting.
 console.log("Hello, world!");</code>
 </pre>
 
+<figure>
+  <img src="https://picsum.photos/300/200" alt="Placeholder image">
+  <figcaption>&lt;figcaption&gt; is used to annotate a &lt;figure&gt;.</figcaption>
+</figure>
+
+<figure class="card">
+  <img src="https://picsum.photos/300/200" alt="Placeholder image">
+  <figcaption>Add the <code>.card</code> class to <code>&lt;figure&gt;</code> for an alternate styling.</figcaption>
+</figure>
+
+<p>
+  Parameterizing Observable Plot's <a href="https://observablehq.com/plot/features/plots"><code>className</code> option</a> with <code>"card"</code>
+  will set <code>class="card-figure"</code> on the <code>&lt;figure&gt;</code> element. Thus, the <code>.card</code> class is also aliased to <code>.card-figure</code></a>
+</p>
+
+<script id="plot-example" class="echo reflect" type="module" contenteditable="true">
+  import * as Plot from 'https://esm.run/@observablehq/[email protected]';
+
+  celine.cell("plot-example", () => {
+    return Plot.plot({
+      className: 'card',
+      title: htl.html`<h3>Card plot demo</h3>`,
+      caption: "Squiggly line go up",
+      marks: [
+        Plot.lineY([1, 4, 3, 2, 5])
+      ]
+    });
+  });
+</script>
+
+
 <h3><a id="silcrow" href="#silcrow"></a>Headers / silcrow</h3>
 
 <div id="silcrow-container"><h1><a id="h1" href="#h1"></a>h1</h1>

libertine/libertine.css

@@ -69,6 +69,29 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 0.5ch;
 }
 
+figure.card,
+figure.card-figure {
+  display: inline-block;
+  margin: 1em;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  background-color: #f3f3f3f3;
+}
+
+figure.card figcaption,
+figure.card-figure figcaption {
+  padding-top: 0.5em;
+}
+
+output {
+  font-family: monospace;
+}
+
+time {
+  font-variant: small-caps;
+  font-family: 'Libertinus Sans'
+}
+
 /* Silcrow styling */
 h1 > a[href^="#"], 
 h2 > a[href^="#"],