Add on-click image carousel

internal/webserver/static/styles.css

@@ -2,7 +2,7 @@
     --color-twitter-text-gray: #536171;
     --color-twitter-blue: #1b95e0;  /* hsl(203, 78%, 49%) */
     --color-twitter-blue-light: #7cc5f6; /* hsl(204, 87%, 73%) */
-    --color-twitter-blue-extra-light: hsl(204, 95%, 92%);
+    --color-twitter-blue-extra-light: hsl(204, 95%, 85%);
     --color-twitter-off-white: #f7f9f9; /* hsl(180, 14%, 97%) */
     --color-twitter-off-white-dark: #dae5e5; /* hsl(180, 17%, 88%) */
     --color-outline-gray: #dcdcdc;
@@ -138,6 +138,32 @@ ul.inline-dotted-list li:last-child:after {
     filter: invert(54%) sepia(17%) saturate(4210%) hue-rotate(176deg) brightness(89%) contrast(98%);
 }
 
+dialog#image_carousel {
+    border-radius: 2em;
+    border: 0.3em solid var(--color-twitter-blue);
+    box-shadow: 0 0 1em var(--color-twitter-blue);
+    outline: none;
+    overflow: visible;
+    padding: 1.4em;
+}
+dialog#image_carousel a.close-button {
+    position: absolute;
+    right: -1.3em;
+    top: -1.5em;
+
+    width: 1em;
+    line-height: 1em;
+    font-size: 2em;
+    justify-content: center;
+    border: 0.1em solid black;
+}
+dialog#image_carousel a.close-button:not(:hover):not(:active) {
+    background-color: var(--color-twitter-blue-extra-light);
+}
+dialog::backdrop {
+    background: hsla(204, 87%, 73%, 0.3); /* based on --color-twitter-blue-light */
+}
+
 .quoted-tweet {
     margin: 1em 0;
 }

internal/webserver/tpl/includes/base.tpl

@@ -27,6 +27,10 @@
       <main>
         {{template "main" .}}
       </main>
+      <dialog id="image_carousel">
+        <a class="quick-link close-button" onclick="image_carousel.close()">X</a>
+        <img src="">
+      </dialog>
     </body>
   </html>
 {{end}}

internal/webserver/tpl/tweet_page_includes/single_tweet.tpl

@@ -67,6 +67,8 @@
             {{if (gt (len $main_tweet.Images) 1)}}
               style="max-width: 45%"
             {{end}}
+            hx-trigger="click consume"
+            onclick="image_carousel.querySelector('img').src = this.src; image_carousel.showModal();"
           />
         {{end}}
         {{range $main_tweet.Videos}}