docs: avoid layout shift due to badges

Author: tonywu6

crates/ferrosaur/README.md

@@ -1,9 +1,13 @@
 # ferrosaur
 
+<div class="badges">
+
 [![crates.io](https://img.shields.io/crates/v/ferrosaur?style=flat-square)](https://crates.io/crates/ferrosaur)
 [![documentation](https://img.shields.io/github/actions/workflow/status/tonywu6/ferrosaur/docs.yml?event=release&style=flat-square&label=docs)](https://tonywu6.github.io/ferrosaur/)
 [![MIT/Apache-2.0 licensed](https://img.shields.io/crates/l/ferrosaur?style=flat-square)](https://github.com/tonywu6/ferrosaur/tree/main/LICENSE-APACHE.md)
 
+</div>
+
 _ferrosaur_ derives statically-typed Rust code — à la [wasm-bindgen] — for
 [`deno_core::JsRuntime`] to interface with your JavaScript code.
 

docs/app/main.css

@@ -71,6 +71,11 @@ body {
       }
     }
 
+    &:has(img) {
+      display: inline-block;
+      text-decoration: none;
+    }
+
     &:has(del:only-child) {
       text-decoration: none;
     }
@@ -317,6 +322,18 @@ body {
   white-space: nowrap;
 }
 
+.badges {
+  overflow: auto hidden;
+
+  > p {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    line-height: 1;
+    white-space: nowrap;
+  }
+}
+
 figure.fig-text {
   display: block;
   padding: 0.6rem;
@@ -368,6 +385,15 @@ figure.fig-text {
       padding-inline: var(--blockquote-padding-inline);
     }
 
+    > .badges {
+      padding-inline: 0;
+
+      > p {
+        width: max-content;
+        margin-inline: var(--blockquote-padding-inline);
+      }
+    }
+
     > ul,
     > ol {
       padding-inline-start: 40px;