Highlight <code> elements in a similar manner to Discord

Author: arqunis

src/index.html

@@ -205,7 +205,7 @@ <h4 class="project__documentation__heading">
                                             href="https://serenity-rs.github.io/serenity/current/serenity/index.html"
                                         >
                                             Latest changes on the
-                                            <code>current</code> Git branch
+                                            <code class="code">current</code> Git branch
                                         </a>
                                     </li>
 
@@ -216,7 +216,7 @@ <h4 class="project__documentation__heading">
                                             href="https://serenity-rs.github.io/serenity/next/serenity/index.html"
                                         >
                                             Latest changes on the
-                                            <code>next</code> Git branch
+                                            <code class="code">next</code> Git branch
                                         </a>
                                     </li>
                                 </ul>
@@ -261,7 +261,7 @@ <h4 class="project__documentation__heading">
                                             href="https://serenity-rs.github.io/songbird/current/songbird/index.html"
                                         >
                                             Latest changes on the
-                                            <code>current</code> Git branch
+                                            <code class="code">current</code> Git branch
                                         </a>
                                     </li>
 
@@ -272,7 +272,7 @@ <h4 class="project__documentation__heading">
                                             href="https://serenity-rs.github.io/songbird/next/songbird/index.html"
                                         >
                                             Latest changes on the
-                                            <code>next</code> Git branch
+                                            <code class="code">next</code> Git branch
                                         </a>
                                     </li>
                                 </ul>
@@ -290,7 +290,7 @@ <h3 class="project__heading" id="project-poise">
 
                             <p class="project__description">
                                 It has support for prefix-based commands (e.g.
-                                <code>!ping</code>), as well as Discord's
+                                <code class="code">!ping</code>), as well as Discord's
                                 application commands, which natively integrate
                                 with Discord's client.
                             </p>
@@ -323,7 +323,7 @@ <h4 class="project__documentation__heading">
                                             href="https://serenity-rs.github.io/poise/current/poise/index.html"
                                         >
                                             Latest changes on the
-                                            <code>current</code> Git branch
+                                            <code class="code">current</code> Git branch
                                         </a>
                                     </li>
 
@@ -334,7 +334,7 @@ <h4 class="project__documentation__heading">
                                             href="https://serenity-rs.github.io/poise/next/poise/index.html"
                                         >
                                             Latest changes on the
-                                            <code>next</code> Git branch
+                                            <code class="code">next</code> Git branch
                                         </a>
                                     </li>
                                 </ul>

src/index/style.scss

@@ -1,6 +1,9 @@
 @use "../base/dimensions";
 
 :root {
+    --code-colour: light-dark(hsl(220, 13%, 95%), hsl(220, 7%, 18%));
+    --code-border-colour: light-dark(hsl(220, 13%, 75%), hsl(225, 7%, 38%));
+
     --button-bg-colour: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
     --button-active-colour: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 40%));
     --button-outline-colour: hsl(240, 50%, 50%);
@@ -18,6 +21,23 @@ body {
     margin-inline: auto;
 }
 
+.code {
+    display: inline;
+
+    padding-inline: 0.2em;
+
+    background-color: var(--code-colour);
+
+    border: 1px solid var(--code-border-colour);
+    border-radius: 4px;
+
+    font-family: monospace, monospace;
+
+    white-space: pre-wrap;
+
+    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
+}
+
 .button {
     display: inline-block;