Update website

See 51c0b00.
UTAS-Programming-Club · Jan 25, 2025 · c08b0f9 · c08b0f9
1 parent d44933b
commit c08b0f9
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 46 deletions.
diff --git a/about.html b/about.html
@@ -44,15 +44,15 @@ <h1 class="me-auto">Programming Club</h1>
         <!-- TODO: Decide if .navbar-expand-sm would be fine -->
         <nav class="navbar navbar-expand-md" role="navigation">
           <div class="container-fluid ps-2 pe-0 pe-sm-2">
-            <input type="checkbox" id="nav-toggle" hidden>
-            <label for="nav-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
+            <input type="checkbox" id="navbar-pages-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-pages-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
               <span class="navbar-toggler-icon"></span>
             </label>
             <label for="dark-mode-toggle" class="btn btn-link mt-2 d-block d-sm-none" tabindex="0" onclick="ToggleDarkMode()" onkeydown="ToggleDarkMode()">
               <svg class="bi text-bg-warning light-mode-icon"><title>Sun icon</title></svg>
               <svg class="bi bg-white dark-mode-icon"><title>Moon icon</title></svg>
             </label>
-            <div id="navbar-pages" class="navbar-collapse overflow-hidden pt-3">
+            <div id="navbar-pages" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0" aria-label="submenu">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="index.html">Home</a>
@@ -161,13 +161,13 @@ <h3 id="constitution"><span>Constitution</span><a class="ms-2" href="#constituti
       <hr>
       <aside>
         <!-- TODO: Decide on if Memberships text should be removed and then switching to navbar-expand-md? -->
-        <!-- TODO: Support toggling menu without js on mobile -->
         <nav class="navbar navbar-expand-lg">
           <div class="container-fluid">
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSocials" aria-controls="navbarSocials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
+            <input type="checkbox" id="navbar-socials-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-socials-toggle" class="navbar-toggler" tabindex="0" aria-haspopup="true" aria-controls="navbar-socials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
               <span class="navbar-toggler-icon"></span>
-            </button>
-            <div id="navbarSocials" class="collapse navbar-collapse pt-3">
+            </label>
+            <div id="navbar-socials" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="https://campus.hellorubric.com/?s=6055">Rubric Memberships</a>

diff --git a/assets/style.css b/assets/style.css
@@ -28,21 +28,27 @@ body, html {
   mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/></svg>');
 }
 
-#navbar-pages {
-  display: block;
-  overflow: hidden;
+.navbar-collapse {
   max-height: 200px;
   transition: max-height 0.35s ease, padding-top 0.05s ease;
 }
 
-#nav-toggle:not(:checked) ~ #navbar-pages {
-  /* 0px if width < --bs-breakpoint-md, else >= 200px */
-  max-height: round(to-zero, calc(200px + 100vw - var(--bs-breakpoint-md)), 200px);
-  /* 0rem if width < --bs-breakpoint-md, else 1rem */
-  padding-top: calc(round(to-zero, 1000000rem + 100vw - var(--bs-breakpoint-md), 1000000rem) / 1000000) !important;
+.navbar-toggler-state:not(:checked) ~ .navbar-collapse {
+  /* 0px if width < --bs-breakpoint-toggle, else >= 200px */
+  max-height: round(to-zero, calc(200px + 100vw - var(--bs-breakpoint-toggle)), 200px);
+  /* 0rem if width < --bs-breakpoint-toggle, else 1rem */
+  padding-top: calc(round(to-zero, 1000000rem + 100vw - var(--bs-breakpoint-toggle), 1000000rem) / 1000000) !important;
   transition-delay: 0s, 0.30s;
 }
 
+.navbar-expand-md .navbar-collapse {
+  --bs-breakpoint-toggle: var(--bs-breakpoint-md);
+}
+
+.navbar-expand-lg .navbar-collapse {
+  --bs-breakpoint-toggle: var(--bs-breakpoint-lg);
+}
+
 .nav-link {
   line-height: 1rem;
   padding-bottom: 0.05rem;

diff --git a/events.html b/events.html
@@ -44,15 +44,15 @@ <h1 class="me-auto">Programming Club</h1>
         <!-- TODO: Decide if .navbar-expand-sm would be fine -->
         <nav class="navbar navbar-expand-md" role="navigation">
           <div class="container-fluid ps-2 pe-0 pe-sm-2">
-            <input type="checkbox" id="nav-toggle" hidden>
-            <label for="nav-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
+            <input type="checkbox" id="navbar-pages-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-pages-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
               <span class="navbar-toggler-icon"></span>
             </label>
             <label for="dark-mode-toggle" class="btn btn-link mt-2 d-block d-sm-none" tabindex="0" onclick="ToggleDarkMode()" onkeydown="ToggleDarkMode()">
               <svg class="bi text-bg-warning light-mode-icon"><title>Sun icon</title></svg>
               <svg class="bi bg-white dark-mode-icon"><title>Moon icon</title></svg>
             </label>
-            <div id="navbar-pages" class="navbar-collapse overflow-hidden pt-3">
+            <div id="navbar-pages" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0" aria-label="submenu">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="index.html">Home</a>
@@ -98,13 +98,13 @@ <h3 id="movie-nights"><span>Movie Nights</span><a class="ms-2" href="#movie-nigh
       <hr>
       <aside>
         <!-- TODO: Decide on if Memberships text should be removed and then switching to navbar-expand-md? -->
-        <!-- TODO: Support toggling menu without js on mobile -->
         <nav class="navbar navbar-expand-lg">
           <div class="container-fluid">
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSocials" aria-controls="navbarSocials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
+            <input type="checkbox" id="navbar-socials-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-socials-toggle" class="navbar-toggler" tabindex="0" aria-haspopup="true" aria-controls="navbar-socials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
               <span class="navbar-toggler-icon"></span>
-            </button>
-            <div id="navbarSocials" class="collapse navbar-collapse pt-3">
+            </label>
+            <div id="navbar-socials" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="https://campus.hellorubric.com/?s=6055">Rubric Memberships</a>

diff --git a/index.html b/index.html
@@ -44,15 +44,15 @@ <h1 class="me-auto">Programming Club</h1>
         <!-- TODO: Decide if .navbar-expand-sm would be fine -->
         <nav class="navbar navbar-expand-md" role="navigation">
           <div class="container-fluid ps-2 pe-0 pe-sm-2">
-            <input type="checkbox" id="nav-toggle" hidden>
-            <label for="nav-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
+            <input type="checkbox" id="navbar-pages-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-pages-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
               <span class="navbar-toggler-icon"></span>
             </label>
             <label for="dark-mode-toggle" class="btn btn-link mt-2 d-block d-sm-none" tabindex="0" onclick="ToggleDarkMode()" onkeydown="ToggleDarkMode()">
               <svg class="bi text-bg-warning light-mode-icon"><title>Sun icon</title></svg>
               <svg class="bi bg-white dark-mode-icon"><title>Moon icon</title></svg>
             </label>
-            <div id="navbar-pages" class="navbar-collapse overflow-hidden pt-3">
+            <div id="navbar-pages" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0" aria-label="submenu">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" aria-current="page" href="#">Home</a>
@@ -87,13 +87,13 @@ <h3 class="text-center" id="you-dream-it-we-can-help-you-build-it"><span>You dre
       <hr>
       <aside>
         <!-- TODO: Decide on if Memberships text should be removed and then switching to navbar-expand-md? -->
-        <!-- TODO: Support toggling menu without js on mobile -->
         <nav class="navbar navbar-expand-lg">
           <div class="container-fluid">
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSocials" aria-controls="navbarSocials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
+            <input type="checkbox" id="navbar-socials-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-socials-toggle" class="navbar-toggler" tabindex="0" aria-haspopup="true" aria-controls="navbar-socials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
               <span class="navbar-toggler-icon"></span>
-            </button>
-            <div id="navbarSocials" class="collapse navbar-collapse pt-3">
+            </label>
+            <div id="navbar-socials" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="https://campus.hellorubric.com/?s=6055">Rubric Memberships</a>

diff --git a/projects.html b/projects.html
@@ -44,15 +44,15 @@ <h1 class="me-auto">Programming Club</h1>
         <!-- TODO: Decide if .navbar-expand-sm would be fine -->
         <nav class="navbar navbar-expand-md" role="navigation">
           <div class="container-fluid ps-2 pe-0 pe-sm-2">
-            <input type="checkbox" id="nav-toggle" hidden>
-            <label for="nav-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
+            <input type="checkbox" id="navbar-pages-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-pages-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
               <span class="navbar-toggler-icon"></span>
             </label>
             <label for="dark-mode-toggle" class="btn btn-link mt-2 d-block d-sm-none" tabindex="0" onclick="ToggleDarkMode()" onkeydown="ToggleDarkMode()">
               <svg class="bi text-bg-warning light-mode-icon"><title>Sun icon</title></svg>
               <svg class="bi bg-white dark-mode-icon"><title>Moon icon</title></svg>
             </label>
-            <div id="navbar-pages" class="navbar-collapse overflow-hidden pt-3">
+            <div id="navbar-pages" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0" aria-label="submenu">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="index.html">Home</a>
@@ -324,13 +324,13 @@ <h3 id="this-website"><span>This Website</span><a class="ms-2" href="#this-websi
       <hr>
       <aside>
         <!-- TODO: Decide on if Memberships text should be removed and then switching to navbar-expand-md? -->
-        <!-- TODO: Support toggling menu without js on mobile -->
         <nav class="navbar navbar-expand-lg">
           <div class="container-fluid">
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSocials" aria-controls="navbarSocials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
+            <input type="checkbox" id="navbar-socials-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-socials-toggle" class="navbar-toggler" tabindex="0" aria-haspopup="true" aria-controls="navbar-socials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
               <span class="navbar-toggler-icon"></span>
-            </button>
-            <div id="navbarSocials" class="collapse navbar-collapse pt-3">
+            </label>
+            <div id="navbar-socials" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="https://campus.hellorubric.com/?s=6055">Rubric Memberships</a>

diff --git a/websiteabout.html b/websiteabout.html
@@ -44,15 +44,15 @@ <h1 class="me-auto">Programming Club</h1>
         <!-- TODO: Decide if .navbar-expand-sm would be fine -->
         <nav class="navbar navbar-expand-md" role="navigation">
           <div class="container-fluid ps-2 pe-0 pe-sm-2">
-            <input type="checkbox" id="nav-toggle" hidden>
-            <label for="nav-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
+            <input type="checkbox" id="navbar-pages-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-pages-toggle" class="navbar-toggler mt-2" tabindex="0" aria-haspopup="true" aria-controls="navbar-pages" aria-expanded="false" aria-label="Toggle header navigation with pages">
               <span class="navbar-toggler-icon"></span>
             </label>
             <label for="dark-mode-toggle" class="btn btn-link mt-2 d-block d-sm-none" tabindex="0" onclick="ToggleDarkMode()" onkeydown="ToggleDarkMode()">
               <svg class="bi text-bg-warning light-mode-icon"><title>Sun icon</title></svg>
               <svg class="bi bg-white dark-mode-icon"><title>Moon icon</title></svg>
             </label>
-            <div id="navbar-pages" class="navbar-collapse overflow-hidden pt-3">
+            <div id="navbar-pages" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0" aria-label="submenu">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="index.html">Home</a>
@@ -92,11 +92,11 @@ <h2 class="title">About this Website</h2>
 <li>Bootstrap version: v5.3.3</li>
 <li>Bootstrap Icons version: v1.13.3
 <!-- TODO: Parse to local time with js? --></li>
-<li>Last built: 2025-01-25T17:16:14+11:00</li>
-<li>Git commit: 5ad8deee4feef5c9fb131b2c315b7a7ab42b1ca9</li>
+<li>Last built: 2025-01-25T18:56:39+11:00</li>
+<li>Git commit: 51c0b0012767c9bbf36518931d2e3feae7dd0b06</li>
 <li>Git commit author(s): Joshua Wierenga (joshuagit@joshuawierenga.tech)
 <!-- TODO: Parse to local time with js? --></li>
-<li>Git commit time: 2025-01-25T17:15:54+11:00</li>
+<li>Git commit time: 2025-01-25T18:56:04+11:00</li>
 <li>Git commit branch: main</li>
 </ul>
 <p><span class="js-only" hidden="hidden">None: Using a js based dark mode system with full persistance between pages and browser level support. Try without js to see the differences!</span>
@@ -109,13 +109,13 @@ <h2 class="title">About this Website</h2>
       <hr>
       <aside>
         <!-- TODO: Decide on if Memberships text should be removed and then switching to navbar-expand-md? -->
-        <!-- TODO: Support toggling menu without js on mobile -->
         <nav class="navbar navbar-expand-lg">
           <div class="container-fluid">
-            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSocials" aria-controls="navbarSocials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
+            <input type="checkbox" id="navbar-socials-toggle" class="navbar-toggler-state" hidden>
+            <label for="navbar-socials-toggle" class="navbar-toggler" tabindex="0" aria-haspopup="true" aria-controls="navbar-socials" aria-expanded="false" aria-label="Toggle footer navigation with social media links">
               <span class="navbar-toggler-icon"></span>
-            </button>
-            <div id="navbarSocials" class="collapse navbar-collapse pt-3">
+            </label>
+            <div id="navbar-socials" class="navbar-collapse overflow-hidden d-block pt-3">
               <ul class="navbar-nav nav-justified w-100 mb-2 mb-md-0">
                 <li class="nav-item mb-2 px-2">
                   <a class="nav-link pt-1" href="https://campus.hellorubric.com/?s=6055">Rubric Memberships</a>