feat: アラートを閉じるボタンを実装 (#77)

Author: 3w36zj6

static/scripts/docs.js

@@ -633,7 +633,7 @@ document.addEventListener("DOMContentLoaded", ()=>{
     const t = document.querySelector("#page-overview > ul");
     t && setUpOnPageNavigation(t),
     setUpCollapsingSidebar(document.querySelector("nav.folding"));
-    //alertClose(document.querySelector("button.close"));
+    alertClose(document.getElementById("closeAlertButton"));
     for (const n of document.querySelectorAll("div.tooltip-context"))
         setUpTooltip(n);
     const e = document.querySelector(".page-end-buttons a.previous")

static/styles/docs-cn.css renamed to static/styles/custom.css

@@ -11,4 +11,12 @@ p {
 
 .alert-content {
   margin: 1em 2em;
-}
+}
+
+.alert > button {
+  position: absolute;
+  top: 1em;
+  right: 0.25em;
+  background: none;
+  border: none;
+}

templates/base_template.html.j2

@@ -27,7 +27,7 @@
   <link rel="manifest" href="/assets/site.webmanifest">
   <link rel="stylesheet" href="/styles/default.css?bust=20230913?d=2023-09-16">
   <link rel="stylesheet" href="/styles/docs.css?bust=20230915?d=2023-09-16">
-  <link rel="stylesheet" href="/styles/docs-cn.css">
+  <link rel="stylesheet" href="/styles/custom.css">
   <link rel="preload" href="/assets/fonts/HKGrotesk-Regular.woff2" as="font">
   <link rel="preload" href="/assets/fonts/HKGrotesk-Bold.woff2" as="font">
   <link rel="preload" href="/assets/fonts/HKGrotesk-SemiBold.woff2" as="font">
@@ -44,6 +44,8 @@
       <br />
       <span>⚠ <b>Warning:</b>   This site provides an unofficial translation of the <a href="https://typst.app/docs/">Typst v0.12.0 documentation</a> by the Japanese Community. Please note that there may be some inaccuracies, untranslated sections or outdated information. We highly recommend referring to <a href="https://typst.app/docs/">the latest official documentation</a> as well. If you find any errors in the content, <a href="https://github.com/typst-jp/typst-jp.github.io">please let us know through our GitHub repository.</a> If you are interested in our community, feel free to join <a href="https://discord.gg/9xF7k4aAuH">our unofficial Discord server, “Kumihan Club.”</a></span>
     </div>
+    <button id="closeAlertButton" class="close"><img alt="Close" src="/assets/icons/16-close-dark.svg"
+          width="16" height="16"></button>
   </div>
   <header class="boring">
     <div><a href="/docs" class="logo-box"><svg width="91" height="35" viewBox="0 0 91 35" role="img"