From 26e7cf9fb1cbe47d9a91f91473b10a8fff12704f Mon Sep 17 00:00:00 2001
From: Eldred Habert <me@eldred.fr>
Date: Sat, 14 Dec 2024 10:50:38 +0100
Subject: [PATCH] Style the `samp` element like `code`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Following Pico's philosophy of “give semantic HTML good styling”,
this element has semantics close to but slightly different from `<code>`,
and so I believe should be styled similarly.
---
 scss/content/_code.scss | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/scss/content/_code.scss b/scss/content/_code.scss
index a16afd07..9579009d 100644
--- a/scss/content/_code.scss
+++ b/scss/content/_code.scss
@@ -21,7 +21,8 @@
     font-family: var(#{$css-var-prefix}font-family); // 1
   }
 
-  #{$parent-selector} pre code {
+  #{$parent-selector} pre code,
+  #{$parent-selector} pre samp {
     font-size: inherit;
     font-family: inherit;
   }
@@ -37,7 +38,8 @@
 
   #{$parent-selector} pre,
   #{$parent-selector} code,
-  #{$parent-selector} kbd {
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
     border-radius: var(#{$css-var-prefix}border-radius);
     background: var(#{$css-var-prefix}code-background-color);
     color: var(#{$css-var-prefix}code-color);
@@ -46,7 +48,8 @@
   }
 
   #{$parent-selector} code,
-  #{$parent-selector} kbd {
+  #{$parent-selector} kbd,
+  #{$parent-selector} samp {
     display: inline-block;
     padding: 0.375rem;
   }
@@ -56,7 +59,8 @@
     margin-bottom: var(#{$css-var-prefix}spacing);
     overflow-x: auto;
 
-    > code {
+    > code,
+    > samp {
       display: block;
       padding: var(#{$css-var-prefix}spacing);
       background: none;