Skip to content

fix(styles): resolve Sonar CSS cascade and transition findings #510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ReenigneArcher merged 2 commits into from
Oct 30, 2026
Merged

fix(styles): resolve Sonar CSS cascade and transition findings #510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02db8a8
fix(styles): resolve Sonar CSS cascade and transition findings
ReenigneArcher Oct 30, 2026
a6df9da
fix(styles): respect reduced motion for image zoom
ReenigneArcher Oct 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 69 additions & 29 deletions _sass/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 */
Expand All @@ -117,8 +117,10 @@ code {
.hover-zoom {
overflow: hidden;
}
.hover-zoom img {
transition: all 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);
Expand Down Expand Up @@ -250,12 +252,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,
Expand All @@ -282,6 +307,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;
Expand Down Expand Up @@ -333,6 +359,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);
Expand Down Expand Up @@ -725,6 +755,7 @@ table tr:nth-child(2n) {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
min-height: 1.5rem;
}

Expand Down Expand Up @@ -780,6 +811,7 @@ table tr:nth-child(2n) {

.gamepad-browser-warning {
margin-inline: auto;
margin-top: 1rem;
max-width: 46rem;
}

Expand Down Expand Up @@ -870,16 +902,16 @@ 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 {
align-items: center;
display: flex;
gap: 1rem;
max-width: none;
text-align: left !important;
text-align: left;
}

.gamepad-tester.has-gamepad .gamepad-kicker,
Expand All @@ -891,26 +923,26 @@ 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;
}

.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 {
Expand Down Expand Up @@ -945,7 +977,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-"] {
Expand Down Expand Up @@ -1079,7 +1111,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 {
Expand Down Expand Up @@ -1177,6 +1209,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,
Expand All @@ -1203,6 +1240,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;
Expand Down Expand Up @@ -1267,6 +1305,7 @@ table tr:nth-child(2n) {

.mouse-browser-warning {
margin-inline: auto;
margin-top: 1rem;
max-width: 46rem;
}

Expand All @@ -1281,7 +1320,7 @@ table tr:nth-child(2n) {
}

.mouse-workspace {
margin-top: 1.5rem !important;
margin-top: 1.5rem;
}

.mouse-panel {
Expand Down Expand Up @@ -1648,16 +1687,16 @@ 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 {
align-items: center;
display: flex;
gap: 1rem;
max-width: none;
text-align: left !important;
text-align: left;
}

.mouse-tester-header .mouse-kicker,
Expand All @@ -1669,22 +1708,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;
}
Expand Down Expand Up @@ -1825,15 +1864,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 */
Expand Down
2 changes: 1 addition & 1 deletion assets/js/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
16 changes: 8 additions & 8 deletions gamepad-tester.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.
Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
12 changes: 6 additions & 6 deletions mouse-tester.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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.
Expand All @@ -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">
Expand Down
Loading
Loading