Make the menu have an x button and do a shakey

tunictracker/tracker/templates/tracker/about/index.html

@@ -1,8 +1,13 @@
 {% load static %}
-<details class="absolute flex p-2 ml-10 space-y-2 rounded-md sm:ml-2 group w-fit h-fit max-w-fit sm:top-4 sm:right-2 top-8 right-10 bg-bluelight-background">
+<div class="absolute inset-x-0 right-0 sm:top-2 top-4">
-    <summary class="flex p-2 content-none min-w-4 min-h-4 group-open:mt-4">
+    <details class="group absolute right-2 open:w-auto open:static w-fit open:mx-4 flex p-2 space-y-2 open:rounded-md h-fit open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
-        <img class="group-open:hidden" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
+        <summary class="flex mt-2 mr-6 sm:m-0 group-open:m-0 content-none group-open:justify-end shake-trigger">
-        <img class="hidden w-8 h-8 group-open:flex group-open:right-2 group-open:top-2 group-open:absolute" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="16" height="16" />
+            <img class="p-2 w-12 h-12 group-open:hidden shake rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
+            <div class="hidden group-open:flex group-open:w-full group-open:flex-col group-open:space-y-2">
+                <p class="flex justify-start w-full text-lg">About this tracker</p>
+                <hr class="flex w-full border-2 border-bluelight-translucent-dark rounded-xl" />
+            </div>
+            <img class="hidden w-10 h-10 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
         </summary>
         <details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
             <summary class="justify-start">Settings</summary>
@@ -13,7 +18,9 @@
                        id="hideDone"
                        class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
                 <label for="hideDone"
-                   class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Hide completed areas</label>
+                       class="my-auto align-top justify-left min-w-fit text-md text-nowrap">
+                    Hide completed areas
+                </label>
             </div>
             <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
                 <input onclick="notices_ur_debug()"
@@ -26,3 +33,4 @@
         </details>
         {% include "tracker/howto/index.html" %}
     </details>
+</div>

tunictracker/tracker/templates/tracker/howto/index.html

@@ -5,15 +5,20 @@
         <summary class="px-2">Setup</summary>
         <ul class="flex flex-col px-4 ml-4 space-y-1 text-sm break-words list-decimal">
             <li>
-                Download the latest release at <a href="https://github.com/spaceglace/TunicTransitionTracker/releases"
+                Download the latest release at <a href="https://github.com/spaceglace/tunic-randomizer/releases"
-    class="underline text-bluelight-link">https://github.com/spaceglace/TunicTransitionTracker/releases</a>, install it how you would the normal randomizer. (which you can refer to <a href="https://github.com/silent-destroyer/tunic-randomizer#installation"
+    class="underline text-bluelight-link">https://github.com/spaceglace/tunic-randomizer/releases</a>, install it how you would the normal randomizer. (which you can refer to <a href="https://github.com/silent-destroyer/tunic-randomizer#installation"
     class="underline text-bluelight-link">here</a>)
             </li>
-            <li>Launch the game, and this site should begin tracking it.</li>
+            <li>
+                Run TUNIC, there should now be an "API Server" button on the quick settings panel.
+                Turn this on, and optionally set it to autoconnect on launch.
+            </li>
+            <li>You should be done, and the tracker should start tracking your game once you start one.</li>
         </ul>
     </details>
-    <details class="overflow-y-scroll max-h-96 py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
+    <details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
         <summary class="px-2">Usage</summary>
+        <div class="overflow-y-scroll max-h-96">
             <ul class="flex flex-col px-4 space-y-2 text-sm list-disc list-inside">
                 <li>
                     You will always be shown the current, total, and remaining checks/entrances in the game left to discover, and a breakdown of the current area you're in.
@@ -55,5 +60,6 @@
                     * Ideally, this would eventually be something more straightforward, like simply listing the path to an area. That will hopefully be added later down the line.
                 </li>
             </div>
+        </div>
     </details>
 </details>