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

diff --git a/index.html b/index.html
index 66edb1e75a7868bd36bf82d3de9c793336d0c7bb..c4183d324eda33ce832f2a84cadd55604a3c7d6b 100644 (file)
--- 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 {