Asides

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@11.0.0/libertine.css" /> -->
+    href="https://esm.sh/jsr/@celine/libertine@12.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@11.0.0/libertine.css" /> -->
+    href="https://esm.sh/jsr/@celine/libertine@12.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@11.0.0/libertine.css&quot; /&gt;
+  href=&quot;https://esm.sh/jsr/@celine/libertine@12.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": "11.0.0",
+  "version": "12.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@11.0.0/libertine.css" /> -->
+    <!-- href="https://esm.sh/jsr/@celine/libertine@12.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">11.0.0</a>, <time  id="updated">Nov 29 2024</time></td>
+        <td class="width-min"><a href="https://jsr.io/@celine/libertine/versions" id="version">12.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@11.0.0/libertine.css&quot; /&gt;
+  href=&quot;https://esm.sh/jsr/@celine/libertine@12.0.0/libertine.css&quot; /&gt;
 </pre>
 
 <h2><a href="#fonts" id="fonts"></a>Fonts</h2>
@@ -351,9 +351,10 @@ <h2><a href="#elements" id="elements"></a>Elements</h2>
   &lt;blockquote&gt; is used to display a blockquote.
 </blockquote>
 
-<aside>
-  &lt;aside&gt; is used to display content related to the main content.
-</aside>
+<figure>
+  <img src="https://placehold.co/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.
@@ -392,6 +393,38 @@ <h2><a href="#elements" id="elements"></a>Elements</h2>
       ]
     });
   });
+
+</script>
+
+<aside>
+  &lt;aside&gt; is used to display content related to the main content.
+</aside>
+
+<div id="aside-container">
+  <p>
+    An <code>&lt;aside&gt;</code> tag pulls content out of the <code>&lt;main&gt;</code>.
+    <sup id="fnref:2">
+      <a href="#fn:2" class="footnote-ref" role="doc-noteref">(2)</a>
+    </sup>
+  </p>
+  <aside>
+    <p id="fn:2"> <a href="#fnref:2">2</a> This is a &lt;p&gt; inside of the <code>&lt;aside&gt;</code>. It gets additional styling.
+  </aside>
+  <p>
+    When the width of the window is constrained, the <code>&lt;aside&gt;</code> will pull back into the main flow.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+  </p>
+</div>
+
+
+<script type="module" id="aside-display">
+  celine.cell("aside-display", () => {
+    const elem = document.getElementById("aside-container");
+    elem.removeAttribute("id");
+    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
+  });
 </script>
 
 

libertine/libertine.css

@@ -48,11 +48,28 @@ blockquote {
 }
 
 aside {
-  background-color: #f3f3f3;
-  border-left: 4px solid #ccc;
-  margin: 1em 0;
-  padding: 1em;
+  float: right;
+  clear: right;
+  margin-right: calc(-50vw + 26rem);
+  width: calc(50vw - 28rem);
+}
+
+aside p {
+  display: inline-block;
+  max-width: 60ch;
   border-radius: 4px;
+  border: #ddd solid 1px;
+  padding: 0.5ch;
+}
+
+/* below a standard width, the aside collapses to be inline */
+@media (max-width: 80rem) {
+  aside {
+    float: right;
+    clear: right;
+    margin: 1em;
+    width: 30%;
+  }
 }
 
 pre {