From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 8 Apr 2023 03:32:20 +0000 (-0700)
Subject: Style <code> in the same way as <pre>
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=16979a827f920ff7f0ca55674dd78c2214d31446;p=css-for-line-clamp-ellipsis

Style <code> in the same way as <pre>
---

diff --git a/index.html b/index.html
index 66edb1e..c4183d3 100644
--- a/index.html
+++ b/index.html
@@ -52,12 +52,28 @@
       inline-size: min(80ch, 100% - 16px);
     }
 
-    pre {
+    pre,
+    code {
       background: hsl(216deg 50% 90%);
-      padding: 8px;
       border-radius: 4px;
       border: 1px solid hsl(216deg 50% 75%);
       overflow: auto;
+      transition: background-color 500ms, filter 800ms;
+    }
+
+    pre {
+      padding: 8px;
+    }
+
+    code {
+      padding-block: 2px;
+      padding-inline: 4px;
+    }
+
+    :is(pre, code):is(:hover, :focus-within) {
+      background: hsl(216deg 50% 87%);
+      filter: drop-shadow(0 0 8px hsl(216deg 50% 90%));
+      transition: background-color 200ms, filter 300ms;
     }
 
     .line-clamp {