Clip web button wrapper overflow on x-axis

src/_includes/global/navbar.njk

@@ -1,145 +1,97 @@
-{# Accessible hamburger menu code based on:
-https://kalechips.net/projects/snippets/burger #}
-
 {% set navLinksEl %}
-{%- if tags and tags.includes("shrine pages") %}
-    <li>
-        <a {% if currentUrl === shrineHomeUrl %}aria-current="page"{% endif %} href="{{ shrineHomeUrl }}">Shrine Home</a>
-    </li>
-{%- endif -%}
-{% block navbarLinks %}{% endblock %}
-{%- if tags and tags.includes("shrine pages") %}
-    <li><a href="/shrines/">Shrine Directory</a></li>
-    <li><a href="/">Main Site</a></li>
-{%- endif -%}
+    {%- if tags and tags.includes("shrine pages") %}
+        <li>
+            <a {% if currentUrl === shrineHomeUrl %}aria-current="page"{% endif %} href="{{ shrineHomeUrl }}">Shrine Home</a>
+        </li>
+    {%- endif -%}
+    {% block navbarLinks %}{% endblock %}
+    {%- if tags and tags.includes("shrine pages") %}
+        <li><a href="/shrines/">Shrine Directory</a></li>
+        <li><a href="/">Main Site</a></li>
+    {%- endif -%}
 {% endset %}
 
 <nav class="navbar" aria-labelledby="top-level-nav-title">
-    <h2 class="visually-hidden" id="top-level-nav-title">Top Level Navigation Bar</h2>
-    <details class="navbar__burger">
-        <summary class="navbar__toggle" id="navbar-toggle">
-            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            Navigation
-        </summary>
-        <nav class="navbar__menu" aria-labelledby="hamburger-nav-title">
-            <h3 class="visually-hidden" id="hamburger-nav-title">Hamburger Menu</h3>
-            <ul class="navbar__menu--links">
-                {{ navLinksEl | safe }}
-                <li class="skip"><a href="#navbar-toggle">Close Menu</a></li>
-            </ul>
-        </nav>
-    </details>
-    <ul class="navbar__links">
-        {{ navLinksEl | safe }}
-    </ul>
+    <h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
+    <ul class="navbar__menu navbar__links">{{ navLinksEl | safe }}</ul>
+    <button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
+        <svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
+        Navigation
+    </button>
 </nav>
+<div popover id="nav-menu" class="navbar__popover">
+    <ul class="navbar__menu">{{ navLinksEl | safe }}</ul>
+</div>
 
 {%- css %}
-    :root {
-        --icon-burger: url(/assets/icons/burger.svg);
-        --icon-close: url(/assets/icons/close.svg);
-        --sz-icon: 2.5rem;
-    }
-
     .navbar {
         background: var(--clr-navbar-bg);
         width: 100%;
         z-index: 998;
         position: sticky;
         top: 0;
+        padding: 0.6em;
     }
 
-    .navbar__toggle {
-        color: var(--clr-navbar-link);
-        font-size: 1.25rem;
-        font-weight: 700;
-    }
-
-    .navbar__toggle {
-        list-style-type: none;
-        display: flex;
-        align-items: center;
-        gap: 0.3em;
-        padding: 0.4em 0.6em;
-        background-color: inherit;
-    }
-
-    .navbar__toggle::-webkit-details-marker { display: none; }
-
-    .navbar__toggle:focus,
-    .navbar a:focus {
-        outline: 0.15em solid var(--clr-navbar-link);
-    }
-
-    .navbar a:focus { outline-offset: 0.1em; }
-
-    .navbar__menu--links,
-    .navbar__links {
+    .navbar__menu {
         list-style-type: "";
-        flex-wrap: wrap;
-        gap: 1em;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        gap: 1.5em;
+        text-align: center;
     }
 
-    .navbar__menu--links a,
-    .navbar__links a {
+    .navbar__menu a {
         color: var(--clr-navbar-link);
         text-decoration: none;
         cursor: pointer;
-        display: block;
+        display: inline-block;
     }
 
-    .navbar__menu--links {
+    .navbar__menu a:hover { color: var(--clr-link-hover); }
+    .navbar__menu a:focus { outline-offset: 0.2em; }
+    .navbar__links { display: none; }
+
+    .navbar__toggle {
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+        border: none;
+        padding: 0;
+        font-size: 1.25rem;
+        font-weight: 700;
         display: flex;
-        padding: 0 1em;
+        align-items: center;
+        gap: 0.3em;
     }
 
-    .skip a {
-        position: absolute;
-        left: -10000px;
-        top: auto;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
+    .navbar__toggle svg { fill: currentColor; }
+
+    .navbar__toggle:focus,
+    .navbar__menu a:focus { outline-offset: 0.1em; }
+    .navbar__toggle:focus,
+    .navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
+
+    .navbar__popover {
+        background-color: var(--clr-navbar-bg);
+        border: 0.15em solid var(--clr-navbar-link);
+        padding: 2em 3em;
     }
 
-    .skip a:focus {
-        position: static;
-        width: auto;
-        height: auto;
+    .navbar__popover::backdrop {
+        background-color: black;
+        opacity: 0.5;
     }
 
-    .navbar__links {
-        display: none;
-        padding: 0.2em 0 0 0;
-    }
-
-    .navbar__links a:hover { color: var(--clr-link-hover); }
-    .navbar__links a:focus { outline-offset: 0.2em; }
-
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
-        .navbar { padding: 0 0.6em; }
-        .navbar__burger { display: none; }
+        .navbar { padding: 1em 0.6em; }
         .navbar__toggle { display: none; }
 
         .navbar__links {
             display: flex;
             justify-content: space-evenly;
             gap: 0.5em;
-            padding: 0;
         }
     }
-{% endcss %}
-
-{%- js %}
-    const navbarBurger = document.querySelector(".navbar__burger");
-    navbarBurger.addEventListener("keydown", (event) => {
-        if (event.key == "Escape") {
-            navbarBurger.removeAttribute("open");
-            navbarBurger.ariaExpanded = false;
-            document.querySelector(".navbar__toggle").focus();
-        }
-    });
-{% endjs %}
+{% endcss %}

src/assets/css/components.css

@@ -159,6 +159,7 @@ p + .adoptables { margin-top: 1em; }
     list-style-type: "";
     padding: 0;
     margin: 0;
+    overflow-x: clip;
 }
 
 /* Tabs */

src/assets/css/general.css

@@ -81,8 +81,6 @@ blockquote > * + :not([class]),
 .c-blockquote__attribution { margin-top: var(--sz-paragraph-margin); }
 
 button:hover { cursor: pointer; }
-
-button:focus,
 details:focus { outline-offset: 0.2em; }
 
 figure {
@@ -98,10 +96,12 @@ figcaption {
     margin-top: 0.2em;
 }
 
-code { font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
+code {
+    font-family: var(--ff-monospace), ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    word-break: break-word;
+}
 
 :not(pre) > code { padding: 0.125em 0.25em; }
-
 :not(pre) > code,
 pre { background-color: var(--clr-code-bg); }
 

src/assets/css/pridesymbols.css

@@ -199,7 +199,7 @@
 }
 
 .flag-disability {
-    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='651.83px' height='300px' viewBox='-90.33 0 651.83 300' enable-background='new -90.33 0 651.83 300' xml:space='preserve' %3E%3Cpolygon fill='%233BB07D' stroke='%233BB07D' stroke-width='0.3514' stroke-miterlimit='10' points='561.5,300 162.902,0.664 112.268,0.664 510.867,300 '/%3E%3Cpolygon fill='%237BC2E0' stroke='%237BC2E0' stroke-width='0.3514' stroke-miterlimit='10' points='510.711,300 112.113,0.664 61.478,0.664 460.078,300 '/%3E%3Cpolygon fill='%23E8E8E8' stroke='%23E8E8E8' stroke-width='0.3514' stroke-miterlimit='10' points='460.077,300 61.478,0.664 8.094,0.664 406.693,300 '/%3E%3Cpolygon fill='%23EEDE77' stroke='%23EEDE77' stroke-width='0.3514' stroke-miterlimit='10' points='406.692,300 8.095,0.664 -41.016,0.664 357.584,300 '/%3E%3Cpolygon fill='%23CF7280' stroke='%23CF7280' stroke-width='0.3514' stroke-miterlimit='10' points='357.378,300 -41.22,0.664 -90.33,0.664 308.27,300 '/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E");
     background-color: #595959;
     background-repeat: no-repeat;
     background-size: auto 100%;

src/assets/css/utility.css

@@ -2,7 +2,6 @@
 .bold-text { font-weight: 700; }
 .center-text { text-align: center; }
 .inline-img { display: inline-block; }
-.break-word { word-break: break-word; }
 
 .center-el {
     display: grid;

src/changelogs/logs/2024/2024-07-20.md

@@ -0,0 +1,5 @@
+---
+date: 2024-07-20
+---
+
+* Remake the mobile version of navigation menu by using the HTML [`popover`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) attirbutes, allowing the navigation menu to be dismissed without JavaScript

src/index.njk

@@ -128,6 +128,11 @@ by Ann Magill (2021)") }}
             <a href="https://foreverliketh.is/">Previous Site</a>,
             <a href="https://www.write-on.org/">Next Site</a>
         </li>
+        <li>
+            <a href="https://ghostring.neocities.org/">Ghostring</a>:
+            <a href="https://ghostring.neocities.org/leilukin/previous">Previous Site</a>,
+            <a href="https://ghostring.neocities.org/leilukin/next">Next Site</a>
+        </li>
         <li>
             <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a>:
             <a href="https://xn--sr8hvo.ws/previous">Previous Site</a>,
@@ -158,11 +163,6 @@ by Ann Magill (2021)") }}
 
     <p>Pending webring membership:</p>
     <ul>
-        <li>
-            <a href="https://ghostring.neocities.org/">Ghostring</a>:
-            <a href="https://ghostring.neocities.org/leilukin/previous">Previous Site</a>,
-            <a href="https://ghostring.neocities.org/leilukin/next">Next Site</a>
-        </li>
         <li>
             <a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a>:
             <a href="https://loop.graycot.dev/webring.html?action=list">Members</a>,

src/shrines/starwarskotor/articles/faq-same-gender-romance-mods.md

@@ -1,7 +1,7 @@
 ---
 articleTitle: "Frequently Asked Questions (FAQ) for My Star Wars: KotOR Same-Gender Romance Mods"
 date: 2021-09-25
-updated: 2024-05-24
+updated: 2024-07-20
 desc: "Frequently asked questions for my same-gender romance mods for Star Wars: Knights of the Old Republic series."
 tags: kotor both articles
 categories: ["star wars kotor", "star wars kotor 2", "video game mods"]
@@ -16,15 +16,15 @@ This article compiles the frequently asked questions I have received for my same
 PLEASE READ THIS ARTICLE BEFORE ASKING QUESTIONS ABOUT MY ROMANCE MODS!{.center-text style="font-size: 1.8rem; font-weight: 700; margin-top: 1em;"}
 
 My same-gender romance mods for KotOR 1 include:
-* [Carth Onasi and Male PC Romance](https://deadlystream.com/files/file/2140-carth-onasi-and-male-pc-romance/)
+* [Carth Onasi and Male PC Romance](/projects/videogamemods/kotor1/#carth-onasi-and-male-pc-romance)
 
 My same-gender romance mods for KotOR 2 include:
-* [Alternate Revan Romances REDUX](https://deadlystream.com/files/file/1004-alternate-revan-romances-redux/)
-* [Atton Rand and Male Exile Romance](https://deadlystream.com/files/file/972-atton-rand-and-male-exile-romance/)
-* [Dahnis Flirt Option for Female PC](https://deadlystream.com/files/file/1400-dahnis-flirt-option-for-female-pc/)
-* [Darth Sion and Male Exile Mod](https://deadlystream.com/files/file/996-darth-sion-and-male-exile-mod/)
-* [Handmaiden and Female Exile – Disciple and Male Exile Romance](https://deadlystream.com/files/file/977-handmaiden-and-female-exile-disciple-and-male-exile-romance/)
-* [Visas Marr and Female Exile Romance](https://deadlystream.com/files/file/968-visas-marr-and-female-exile-romance/)
+* [Alternate Revan Romances REDUX](/projects/videogamemods/kotor2/#visas-marr-and-female-exile-romance)
+* [Atton Rand and Male Exile Romance](/projects/videogamemods/kotor2/#atton-rand-and-male-exile-romance)
+* [Dahnis Flirt Option for Female PC](/projects/videogamemods/kotor2/#dahnis-flirt-option-for-female-pc)
+* [Darth Sion and Male Exile Mod](/projects/videogamemods/kotor2/#darth-sion-and-male-exile-mod)
+* [Handmaiden and Female Exile – Disciple and Male Exile Romance](/projects/videogamemods/kotor2/#handmaiden-and-female-exile-disciple-and-male-exile-romance)
+* [Visas Marr and Female Exile Romance](/projects/videogamemods/kotor2/#visas-marr-and-female-exile-romance)
 
 I have also compiled a [list of all the same-gender romance mods](/shrines/starwarskotor/resources/kotor-same-gender-romance-mods) various modders had created throughout the history of KotOR modding.
 
@@ -36,7 +36,7 @@ Please make sure you have downloaded and installed the latest version of my mods
 
 When you are asking for technical support, please provide details for the issues you encountered: when and how did your problem start happening and what mods you have installed. Simply saying "mod doesn't work" DOES NOT help the mod author to figure out the cause of your issue. When I ask you for more details, please answer my questions honestly, so I can identify how to solve your problems. Telling me ALL the mods you use will help me greatly in figuring out if your issue was caused by mod conflict or not.
 
-If you play KotOR 2 on Steam, **make sure there are no leftover Steam Workshop folders in your Steam directory**, because Steam Workshop mods will likely conflict with my mods, and even unsubscribing Steam Workshop mods does not always remove all Workshop mod files completely. To check for any leftover Steam Workshop files, go to the Steam Workshop folder in your Steam directory ([`/\Steam\SteamApps\Workshop\`]{.break-word}), and delete all the sub-folders in the Steam Workshop folder if they are present.
+If you play KotOR 2 on Steam, **make sure there are no leftover Steam Workshop folders in your Steam directory**, because Steam Workshop mods will likely conflict with my mods, and even unsubscribing Steam Workshop mods does not always remove all Workshop mod files completely. To check for any leftover Steam Workshop files, go to the Steam Workshop folder in your Steam directory (`/\Steam\SteamApps\Workshop\`), and delete all the sub-folders in the Steam Workshop folder if they are present.
 
 ### When I installed your mod, I got the error message: <i>"[ERROR] Unhandled exception: Access violation at address [a bunch of numbers]. Write of address [a bunch of numbers] (0)"</i>.
 
@@ -62,11 +62,11 @@ For example, for Handmaiden and Female Exile – Disciple and Male Exile Romance
 If you cannot find those .mod files in your Modules folder, your issue might be caused by your computer registering two different installation locations for {% cite "KotOR 2" %}. I suggest you check out [this guide on how to make sure your computer recognize the version of {% cite "KotOR 2" %} game where you want to install KotOR 2 mods on](https://steamcommunity.com/sharedfiles/filedetails/?id=779622644). While the guide focuses on Steam version of {% cite "KotOR 2" %}, you could edit the registry to make your computer properly recognise the installation location of your {% cite "KotOR 2" %} game.
 
 Here are the default installation locations of {% cite "KotOR 2" %} depending on the game version:
-* Steam (32-bit Windows): [`C:\Program Files\Steam\steamapps\common\Knights of the Old Republic II`]{.break-word}
-* Steam (64-bit Windows): [`C:\Program Files (x86)\Steam\steamapps\common\Knights of the Old Republic II`]{.break-word}
-* Retail CD (32-bit Windows): [`C:\Program Files\LucasArts\SWKotOR2\`]{.break-word}
-* Retail CD (64-bit Windows): [`C:\Program Files (x86)\LucasArts\SWKotOR2\`]{.break-word}
-* Steam (32-bit Windows): [`C:\GOG Games\Star Wars - KotOR2`]{.break-word}
+* Steam (32-bit Windows): `C:\Program Files\Steam\steamapps\common\Knights of the Old Republic II`
+* Steam (64-bit Windows): `C:\Program Files (x86)\Steam\steamapps\common\Knights of the Old Republic II`
+* Retail CD (32-bit Windows): `C:\Program Files\LucasArts\SWKotOR2\`
+* Retail CD (64-bit Windows): `C:\Program Files (x86)\LucasArts\SWKotOR2\`
+* Steam (32-bit Windows): `C:\GOG Games\Star Wars - KotOR2`
 
 If you do not know if you have Windows 64-bit or 32-bit, [refer this article to find out](https://www.lifewire.com/am-i-running-a-32-bit-or-64-bit-version-of-windows-2624475).
 
@@ -157,7 +157,7 @@ If Handmaiden does not join your female Exile's party when you are using my Hand
 
 * **You did not install my mod correctly**. Either you get errors when installing the “Default Installation” option, or you did not install DarthTyren's PartySwap mod first before installing the “PartySwap Compatible” option of my mod.
 * **You have a `holorec.dlg` file in the Override folder**, either from a mod you are using or a mod you previously used. If there is a `holorec.dlg` in your Override folder, delete it.
-* **You may have some leftover Steam Workshop folders in your Steam directory** that overrides the portion where Handmaiden is supposed to join your party. To solve this, go to the Steam Workshop folder in your Steam directory ([`/\Steam\SteamApps\Workshop\`]{.break-word}), and delete all the sub-folders in the Steam Workshop folder.
+* **You may have some leftover Steam Workshop folders in your Steam directory** that overrides the portion where Handmaiden is supposed to join your party. To solve this, go to the Steam Workshop folder in your Steam directory (`/\Steam\SteamApps\Workshop\`), and delete all the sub-folders in the Steam Workshop folder.
 * Similar to the above, **you may have some leftover files from a mod you used in your previous playthrough** in your {% cite "KotOR 2" %} game directory that interferes the portion where Handmaiden is supposed to join your party. The best way to solve this is to uninstall your game, delete your {% cite "KotOR 2" %} game folder entirely, and then re-install the game and the mods you want to use.
 
 ### Can you make your mod so you always recruit Handmaiden or Disciple only regardless of the Exile's gender?

src/statements/colophon.md

@@ -1,7 +1,7 @@
 ---
 title: Colophon
 keyword: colophon page
-updated: 2024-07-18
+updated: 2024-07-20
 toc: true
 eleventyNavigation:
     order: 14
@@ -54,7 +54,6 @@ Due to this website being a static site, JavaScript is used to create dynamic an
         * [{% cite "Star Wars: Knights of the Old Republic" %}](/shrines/starwarskotor)
         * [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts)
     * Birthdays of characters from {% cite "A Summer’s End — Hong Kong 1986" %} on its shrine.
-* When this site is viewed on mobile devices, the navigation bar's hamburger menu uses JavaScript to enable using the Escape key to close the navigation manu.
 * Scott O'Hara's [ARIA Tooltips](https://github.com/scottaohara/a11y_tooltips) script is used to implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for [1.4.13: Content on Hover or Focus (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), by allowing visitors to see tooltips on keyboard focus and dismiss tooltips by pressing the Escape key.
 * Zach Leatherman's [details-utils](https://www.npmjs.com/package/@zachleat/details-utils) JavaScript package is used to automatically expand sidebar table of contents on wide screens.
 * [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.