From 02db8a85c673206f81ffcf6796be731e4cc394bf Mon Sep 17 00:00:00 2001
From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
Date: Thu, 29 Oct 2026 20:00:28 -0400
Subject: [PATCH 1/2] fix(styles): resolve Sonar CSS cascade and transition
 findings

---
 _sass/styles.scss       | 94 +++++++++++++++++++++++++++++------------
 assets/js/projects.js   |  2 +-
 gamepad-tester.html     | 16 +++----
 mouse-tester.html       | 12 +++---
 tests/projects.test.cjs |  8 +++-
 5 files changed, 87 insertions(+), 45 deletions(-)

diff --git a/_sass/styles.scss b/_sass/styles.scss
index 394a17ac..3f063944 100644
--- a/_sass/styles.scss
+++ b/_sass/styles.scss
@@ -70,11 +70,11 @@ body {
 
 .card-body, .card-custom, .card-footer, .card-img-top, .cr-picker-button, .cr-picker-submenu {
     --bs-bg-opacity: 1;
-    background-color: var(--navbar-col) !important;
+    background-color: var(--navbar-col);
 }
 
 .modal-content {
-    background-color: var(--footer-col) !important;
+    background-color: var(--footer-col);
 }
 
 /* in line code */
@@ -101,11 +101,11 @@ code {
 /* shrink logo when navbar shrinks, instead of hiding it */
 .navbar-custom.top-nav-short .avatar-container {
   width: 3.125rem;
-  opacity: 1 !important;
-  visibility: visible !important;
-  transition: none !important;
-  -webkit-transition: none !important;
-  -moz-transition: none !important;
+  opacity: 1;
+  visibility: visible;
+  transition: none;
+  -webkit-transition: none;
+  -moz-transition: none;
 }
 
 /* hide search button */
@@ -118,7 +118,7 @@ code {
     overflow: hidden;
 }
 .hover-zoom img {
-    transition: all 1.5s ease;
+    transition: transform 1.5s ease;
 }
 .hover-zoom:hover img {
     transform: scale(1.1);
@@ -250,12 +250,35 @@ table tr:nth-child(2n) {
 }
 
 /* Gamepad tester */
+.gamepad-tester,
+.mouse-tester {
+  padding-bottom: 1.5rem;
+  padding-top: 1.5rem;
+}
+
+@media (min-width: 992px) {
+  .gamepad-tester,
+  .mouse-tester {
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+  }
+}
+
 .gamepad-tester .container {
   max-width: 82rem;
 }
 
 .gamepad-tester-header {
   max-width: 52rem;
+  text-align: center;
+}
+
+.gamepad-tester-header > h2 {
+  margin-bottom: 0.5rem;
+}
+
+#gamepad-info {
+  margin-top: 0;
 }
 
 .gamepad-kicker,
@@ -282,6 +305,7 @@ table tr:nth-child(2n) {
   color: var(--text-col);
   display: flex;
   gap: 0.75rem;
+  margin-bottom: 0.5rem;
   margin-inline: auto;
   max-width: 46rem;
   padding: 0.8rem 1rem;
@@ -333,6 +357,10 @@ table tr:nth-child(2n) {
   font-size: 0.78rem;
 }
 
+.gamepad-selector-panel {
+  margin-top: 1.5rem;
+}
+
 .gamepad-selector-panel,
 .gamepad-panel {
   background-color: var(--navbar-col);
@@ -725,6 +753,7 @@ table tr:nth-child(2n) {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
+  margin-bottom: 1rem;
   min-height: 1.5rem;
 }
 
@@ -780,6 +809,7 @@ table tr:nth-child(2n) {
 
 .gamepad-browser-warning {
   margin-inline: auto;
+  margin-top: 1rem;
   max-width: 46rem;
 }
 
@@ -870,8 +900,8 @@ table tr:nth-child(2n) {
 /* Fit the complete tester workspace into a typical desktop viewport. */
 @media (min-width: 1200px) {
   .gamepad-tester.has-gamepad {
-    padding-bottom: 1.25rem !important;
-    padding-top: 1.25rem !important;
+    padding-bottom: 1.25rem;
+    padding-top: 1.25rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-tester-header {
@@ -879,7 +909,7 @@ table tr:nth-child(2n) {
     display: flex;
     gap: 1rem;
     max-width: none;
-    text-align: left !important;
+    text-align: left;
   }
 
   .gamepad-tester.has-gamepad .gamepad-kicker,
@@ -891,18 +921,18 @@ table tr:nth-child(2n) {
   .gamepad-tester.has-gamepad .gamepad-tester-header > h2 {
     flex: 0 0 auto;
     font-size: 1.65rem;
-    margin-bottom: 0 !important;
+    margin-bottom: 0;
   }
 
   .gamepad-tester.has-gamepad .gamepad-status {
     flex: 1 1 auto;
-    margin: 0 !important;
+    margin: 0;
     max-width: none;
     padding: 0.65rem 0.85rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-browser-warning {
-    margin-top: 0.75rem !important;
+    margin-top: 0.75rem;
     max-width: none;
     padding: 0.55rem 0.75rem;
   }
@@ -910,7 +940,7 @@ table tr:nth-child(2n) {
   .gamepad-tester.has-gamepad .gamepad-selector-panel {
     display: grid;
     grid-template-columns: 13rem minmax(0, 1fr);
-    margin-top: 0.85rem !important;
+    margin-top: 0.85rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-selector-heading {
@@ -945,7 +975,7 @@ table tr:nth-child(2n) {
     display: grid;
     gap: 0.75rem;
     grid-template-columns: repeat(12, minmax(0, 1fr));
-    margin: 0.75rem 0 0 !important;
+    margin: 0.75rem 0 0;
   }
 
   .gamepad-tester.has-gamepad #gamepad-info > [class*="col-"] {
@@ -1079,7 +1109,7 @@ table tr:nth-child(2n) {
   }
 
   .gamepad-tester.has-gamepad .gamepad-capability {
-    margin-bottom: 0.5rem !important;
+    margin-bottom: 0.5rem;
   }
 
   .gamepad-tester.has-gamepad .gamepad-range-control {
@@ -1177,6 +1207,11 @@ table tr:nth-child(2n) {
 
 .mouse-tester-header {
   max-width: 52rem;
+  text-align: center;
+}
+
+.mouse-tester-header > h2 {
+  margin-bottom: 0.5rem;
 }
 
 .mouse-kicker,
@@ -1203,6 +1238,7 @@ table tr:nth-child(2n) {
   color: var(--text-col);
   display: flex;
   gap: 0.75rem;
+  margin-bottom: 0.5rem;
   margin-inline: auto;
   max-width: 46rem;
   padding: 0.8rem 1rem;
@@ -1267,6 +1303,7 @@ table tr:nth-child(2n) {
 
 .mouse-browser-warning {
   margin-inline: auto;
+  margin-top: 1rem;
   max-width: 46rem;
 }
 
@@ -1281,7 +1318,7 @@ table tr:nth-child(2n) {
 }
 
 .mouse-workspace {
-  margin-top: 1.5rem !important;
+  margin-top: 1.5rem;
 }
 
 .mouse-panel {
@@ -1648,8 +1685,8 @@ table tr:nth-child(2n) {
 
 @media (min-width: 1200px) {
   .mouse-tester {
-    padding-bottom: 1.25rem !important;
-    padding-top: 1.25rem !important;
+    padding-bottom: 1.25rem;
+    padding-top: 1.25rem;
   }
 
   .mouse-tester-header {
@@ -1657,7 +1694,7 @@ table tr:nth-child(2n) {
     display: flex;
     gap: 1rem;
     max-width: none;
-    text-align: left !important;
+    text-align: left;
   }
 
   .mouse-tester-header .mouse-kicker,
@@ -1669,22 +1706,22 @@ table tr:nth-child(2n) {
   .mouse-tester-header > h2 {
     flex: 0 0 auto;
     font-size: 1.65rem;
-    margin-bottom: 0 !important;
+    margin-bottom: 0;
   }
 
   .mouse-status {
     flex: 1 1 auto;
-    margin: 0 !important;
+    margin: 0;
     max-width: none;
     padding: 0.65rem 0.85rem;
   }
 
   .mouse-workspace {
-    margin-top: 0.75rem !important;
+    margin-top: 0.75rem;
   }
 
   .mouse-browser-warning {
-    margin-top: 0.75rem !important;
+    margin-top: 0.75rem;
     max-width: none;
     padding: 0.55rem 0.75rem;
   }
@@ -1825,15 +1862,16 @@ table tr:nth-child(2n) {
 
 .commit-bar-active {
   background-color: rgb(64, 196, 99);
+  opacity: var(--commit-bar-opacity, 1);
 }
 
 .commit-bar-active:hover {
-  opacity: 1 !important;
+  opacity: 1;
 }
 
-/* Override Bootstrap's text-muted to use theme colors */
+/* Supply Bootstrap's text-muted utility with the theme color. */
 .text-muted {
-  color: var(--footer-text-col) !important;
+  --bs-secondary-color: var(--footer-text-col);
 }
 
 /* Theme-aware outline button: dark border/text in light mode, light in dark mode */
diff --git a/assets/js/projects.js b/assets/js/projects.js
index 9c9fceff..865a7d64 100644
--- a/assets/js/projects.js
+++ b/assets/js/projects.js
@@ -112,7 +112,7 @@ function loadCommitActivity(repo, card_footer) {
                     height: ${Math.max(height, 10)}%;
                     border-radius: 1px;
                     transition: all 0.2s ease;
-                    opacity: ${week.total === 0 ? 1 : intensity};
+                    --commit-bar-opacity: ${intensity};
                 `
                 bar.title = `${week.total} commits this week`
                 activity_container.appendChild(bar)
diff --git a/gamepad-tester.html b/gamepad-tester.html
index 8037fc08..64875df9 100644
--- a/gamepad-tester.html
+++ b/gamepad-tester.html
@@ -17,16 +17,16 @@
 </script>
 
 <!-- Gamepad Tester section -->
-<section class="gamepad-tester py-4 py-lg-5" id="GamepadTester">
+<section class="gamepad-tester" id="GamepadTester">
     <div class="container">
-        <header class="gamepad-tester-header mx-auto text-center">
+        <header class="gamepad-tester-header mx-auto">
             <div class="gamepad-kicker mb-2">
                 <i class="fas fa-gamepad" aria-hidden="true"></i>
                 Browser controller diagnostics
             </div>
-            <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
+            <h2 class="display-6 fw-bolder">Gamepad Tester</h2>
             <p class="lead text-muted mb-4">Check buttons, sticks, triggers, axes, and vibration in real time.</p>
-            <div id="gamepad-status" class="alert alert-warning gamepad-status mb-2">
+            <div id="gamepad-status" class="alert alert-warning gamepad-status">
                 <span class="gamepad-status-indicator" aria-hidden="true"></span>
                 <output id="gamepad-status-message" aria-live="polite">No gamepad detected. Connect a gamepad and press any button.</output>
             </div>
@@ -36,7 +36,7 @@ <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
             </p>
         </header>
 
-        <div id="firefox-switch-warning" class="gamepad-browser-warning gamepad-inline-notice mt-3" aria-live="polite" hidden>
+        <div id="firefox-switch-warning" class="gamepad-browser-warning gamepad-inline-notice" aria-live="polite" hidden>
             <i class="fas fa-triangle-exclamation mt-1" aria-hidden="true"></i>
             <span>
                 Firefox versions before 155 can report incorrect buttons and axes for Nintendo Switch controllers.
@@ -45,7 +45,7 @@ <h2 class="display-6 fw-bolder mb-2">Gamepad Tester</h2>
             </span>
         </div>
 
-        <section class="gamepad-selector-panel mt-4" id="gamepad-selector-container" style="display: none;" aria-labelledby="gamepad-selector-heading">
+        <section class="gamepad-selector-panel" id="gamepad-selector-container" style="display: none;" aria-labelledby="gamepad-selector-heading">
             <div class="gamepad-selector-heading">
                 <div>
                     <span class="gamepad-panel-eyebrow">Devices</span>
@@ -56,7 +56,7 @@ <h3 class="h5 mb-0" id="gamepad-selector-heading">Connected controllers</h3>
             <div class="gamepad-selector-grid" id="gamepad-selector"></div>
         </section>
 
-        <div class="row g-4 mt-0" id="gamepad-info" style="display: none;">
+        <div class="row g-4" id="gamepad-info" style="display: none;">
             <div class="col-12">
                 <section class="gamepad-panel gamepad-visual-panel" aria-labelledby="controller-visual-heading">
                     <div class="gamepad-panel-header">
@@ -148,7 +148,7 @@ <h3 class="h5 mb-0" id="vibration-heading">Vibration</h3>
                         </div>
                     </div>
                     <div class="gamepad-panel-body">
-                        <div id="vibration-status" class="gamepad-capability mb-3"></div>
+                        <div id="vibration-status" class="gamepad-capability"></div>
 
                         <div id="dual-rumble-controls" class="d-none">
                             <div class="gamepad-range-control">
diff --git a/mouse-tester.html b/mouse-tester.html
index fcb03c70..305216fb 100644
--- a/mouse-tester.html
+++ b/mouse-tester.html
@@ -10,16 +10,16 @@
 ---
 
 <!-- Mouse Tester section -->
-<section class="mouse-tester py-4 py-lg-5" id="MouseTester">
+<section class="mouse-tester" id="MouseTester">
     <div class="container">
-        <header class="mouse-tester-header mx-auto text-center">
+        <header class="mouse-tester-header mx-auto">
             <div class="mouse-kicker mb-2">
                 <i class="fas fa-computer-mouse" aria-hidden="true"></i>
                 Browser mouse diagnostics
             </div>
-            <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
+            <h2 class="display-6 fw-bolder">Mouse Tester</h2>
             <p class="lead text-muted mb-4">Check buttons, movement, and scrolling in real time.</p>
-            <div id="mouse-status" class="alert alert-warning mouse-status mb-2">
+            <div id="mouse-status" class="alert alert-warning mouse-status">
                 <span class="mouse-status-indicator" aria-hidden="true"></span>
                 <output id="mouse-status-message" aria-live="polite">Move, click, or scroll inside the test area to begin.</output>
             </div>
@@ -29,7 +29,7 @@ <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
             </p>
         </header>
 
-        <div id="firefox-mouse-buttons-warning" class="mouse-browser-warning mouse-inline-notice mt-3" aria-live="polite" hidden>
+        <div id="firefox-mouse-buttons-warning" class="mouse-browser-warning mouse-inline-notice" aria-live="polite" hidden>
             <i class="fas fa-triangle-exclamation mt-1" aria-hidden="true"></i>
             <span>
                 Firefox may use Back and Forward mouse buttons for browser navigation even when this tester detects the button press.
@@ -38,7 +38,7 @@ <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
             </span>
         </div>
 
-        <div class="row g-4 mt-0 mouse-workspace">
+        <div class="row g-4 mouse-workspace">
             <div class="col-xl-7">
                 <section class="mouse-panel mouse-visual-panel h-100" aria-labelledby="mouse-visual-heading">
                     <div class="mouse-panel-header">
diff --git a/tests/projects.test.cjs b/tests/projects.test.cjs
index d403ba5e..368a9803 100644
--- a/tests/projects.test.cjs
+++ b/tests/projects.test.cjs
@@ -110,7 +110,7 @@ describe('project cards', () => {
         globalThis.fetch = jest.fn(url => {
             if (url.endsWith('/readthedocs/projects.json')) return Promise.resolve(response(docs));
             if (url.endsWith('/github/repos.json')) return Promise.resolve(response([...skipped, zero, featured, normal]));
-            if (url.includes('/commitActivity/normal.json')) return Promise.resolve(response([{ total: 0 }, { total: 10 }]));
+            if (url.includes('/commitActivity/normal.json')) return Promise.resolve(response([{ total: 0 }, { total: 5 }, { total: 10 }]));
             if (url.includes('/commitActivity/featured.json')) return Promise.reject(new Error('no activity'));
             if (url.includes('/commitActivity/zero.json')) return Promise.resolve(response([{ total: 0 }]));
             if (url.includes('/languages/normal.json')) return Promise.resolve(response({ 'C++': 90, JavaScript: 10 }));
@@ -131,7 +131,11 @@ describe('project cards', () => {
         expect(document.querySelector('.readthedocs-icon').closest('a').href).toBe('https://docs.lizardbyte.dev/projects/normal');
         expect(document.querySelectorAll('.language-logo')).toHaveLength(2);
         expect(document.querySelector('.language-logo').src).toContain('C%2B%2B.svg');
-        expect(document.querySelectorAll('.commit-bar-active')).toHaveLength(1);
+        const activeBars = document.querySelectorAll('.commit-bar-active');
+        expect(activeBars).toHaveLength(2);
+        expect(Number(activeBars[0].style.getPropertyValue('--commit-bar-opacity'))).toBeCloseTo(0.65);
+        expect(Number(activeBars[1].style.getPropertyValue('--commit-bar-opacity'))).toBe(1);
+        expect(activeBars[0].style.opacity).toBe('');
         expect(document.querySelectorAll('.commit-bar-empty')).toHaveLength(2);
         expect(document.querySelector('a[href="https://app.lizardbyte.dev/normal/"]')).not.toBeNull();
         expect(globalThis.formatNumber).toHaveBeenCalled();

From a6df9da310b244d4cefba63305ebdaefdd19a82b Mon Sep 17 00:00:00 2001
From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>
Date: Thu, 29 Oct 2026 20:02:26 -0400
Subject: [PATCH 2/2] fix(styles): respect reduced motion for image zoom

---
 _sass/styles.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/_sass/styles.scss b/_sass/styles.scss
index 3f063944..a29bbd87 100644
--- a/_sass/styles.scss
+++ b/_sass/styles.scss
@@ -117,8 +117,10 @@ code {
 .hover-zoom {
     overflow: hidden;
 }
-.hover-zoom img {
-    transition: transform 1.5s ease;
+@media (prefers-reduced-motion: no-preference) {
+    .hover-zoom img {
+        transition: transform 1.5s ease;
+    }
 }
 .hover-zoom:hover img {
     transform: scale(1.1);