Skip to content

Commit 793620e

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#1348 from omnipotentchaos/fix/surprise-me-and-sidebar-1279
fix(web-app): resolve hover contrast, sidebar layout shifting, and mobile menu toggle bugs (steam-bell-92#1279)
2 parents 837e84d + d39dbf6 commit 793620e

9 files changed

Lines changed: 45 additions & 42 deletions

File tree

‎web-app/404.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@
1313
<link rel="preconnect" href="https://fonts.googleapis.com">
1414
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1515
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
16-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
17-
integrity="sha384-iYQieczLE1ZYcx91pNAt4whAqKhW2ED8oBkFkXhNRCGF7GcCQBQb0or7TGoBMgo"
18-
crossorigin="anonymous">
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1917
<style>
2018
:root {
2119
--primary: #6366f1;

‎web-app/css/styles.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1948,7 +1948,7 @@ body.sidebar-active .sidebar-dock {
19481948
}
19491949

19501950
/* ── Desktop Sidebar-Aware Project Layout ───────────────────── */
1951-
@media (min-width: 1100px) {
1951+
@media (min-width: 768px) {
19521952
.projects-section {
19531953
max-width: none !important;
19541954
width: 100% !important;
@@ -3576,7 +3576,7 @@ body.sidebar-collapsed .playground-section {
35763576
}
35773577
}
35783578

3579-
@media (min-width: 1100px) {
3579+
@media (min-width: 768px) {
35803580
body.sidebar-active:not(.sidebar-collapsed) .footer {
35813581
padding-left: 296px !important;
35823582
padding-right: 24px !important;
@@ -5560,6 +5560,7 @@ button:focus-visible,
55605560
0 10px 0 rgba(128, 104, 85, 0.08),
55615561
0 14px 28px rgba(0, 0, 0, 0.08);
55625562
background: rgba(255, 255, 255, 0.95);
5563+
color: #0c0f1a;
55635564
}
55645565

55655566
.btn-secondary-hero:active {
@@ -6622,11 +6623,11 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
66226623

66236624
/*
66246625
* Desktop sidebar-aware layout keeps the projects section shifted past the
6625-
* fixed sidebar dock (see the @media (min-width: 1100px) block above for
6626+
* fixed sidebar dock (see the @media (min-width: 768px) block above for
66266627
* padding-left values). The rules below intentionally only apply on mobile,
66276628
* where the sidebar slides in as a drawer and must not push the main column.
66286629
*/
6629-
@media (max-width: 1099px) {
6630+
@media (max-width: 767px) {
66306631
.projects-section {
66316632
padding-left: 0 !important;
66326633
padding-right: 0 !important;
@@ -6641,9 +6642,8 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
66416642

66426643
/* Smooth main-content shift when the sidebar opens, closes, or collapses on
66436644
* desktop. The padding-left values themselves are defined above inside the
6644-
* 1100px media query. */
6645-
@media (min-width: 1100px) {
6646-
6645+
* 768px media query. */
6646+
@media (min-width: 768px) {
66476647
.projects-section,
66486648
.hero-section,
66496649
.hero-timeline-section,

‎web-app/faq.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@
2525
<link rel="preconnect" href="https://fonts.googleapis.com">
2626
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2727
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">
28-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
29-
integrity="sha384-iYQieczLE1ZYcx91pNAt4whAqKhW2ED8oBkFkXhNRCGF7GcCQBQb0or7TGoBMgo"
30-
crossorigin="anonymous">
28+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
3129
<style>
3230
:root {
3331
--bg-main:#060b13; --bg-card:#0a1322; --bg-header:#071227;

‎web-app/games.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,7 @@
6666
</script>
6767

6868
<link rel="stylesheet" href="css/styles.css" />
69-
<link
70-
rel="stylesheet"
71-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
72-
integrity="sha384-iYQieczLE1ZYcx91pNAt4whAqKhW2ED8oBkFkXhNRCGF7GcCQBQb0or7TGoBMgo"
73-
crossorigin="anonymous">
74-
/>
69+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7570
<style>
7671
/* ── Page background ── */
7772
body[data-page="games"] {

‎web-app/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@
4141
<title>Python Mini Projects — Interactive Web Edition</title>
4242
<link href="assets/favicon.svg" rel="icon" type="image/svg+xml" />
4343
<link href="css/styles.css" rel="stylesheet" />
44-
<link rel ="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
45-
crossorigin="anonymous"/>
44+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
4645
</head>
4746
<body class="sidebar-active">
4847
<button aria-label="Switch theme" class="theme-toggle fixed-theme-toggle" id="fixed-theme-toggle" type="button">

‎web-app/js/main.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -388,6 +388,9 @@ document.addEventListener("DOMContentLoaded", function () {
388388

389389
function closeMobileSidebar() {
390390
document.body.classList.remove("sidebar-active");
391+
if (mobileMenuToggle) {
392+
mobileMenuToggle.setAttribute("aria-expanded", "false");
393+
}
391394
if (mainSidebar) mainSidebar.classList.remove("open");
392395
if (mobileSidebarToggle) {
393396
mobileSidebarToggle.setAttribute("aria-expanded", "false");
@@ -396,6 +399,17 @@ document.addEventListener("DOMContentLoaded", function () {
396399
}
397400
}
398401

402+
if (mobileMenuToggle) {
403+
mobileMenuToggle.addEventListener("click", function () {
404+
var isActive = document.body.classList.toggle("sidebar-active");
405+
mobileMenuToggle.setAttribute("aria-expanded", isActive);
406+
});
407+
}
408+
409+
if (window.innerWidth <= 768) {
410+
closeMobileSidebar();
411+
}
412+
399413
if (sidebarMobileClose) {
400414
sidebarMobileClose.addEventListener("click", closeMobileSidebar);
401415
}
@@ -645,6 +659,9 @@ document.addEventListener("DOMContentLoaded", function () {
645659
if (category === pageCategory) {
646660
var grid = document.getElementById("projectsGrid");
647661
if (grid) grid.scrollIntoView({ behavior: "smooth", block: "start" });
662+
if (window.innerWidth <= 768) {
663+
closeMobileSidebar();
664+
}
648665
return;
649666
}
650667
}
@@ -670,6 +687,9 @@ document.addEventListener("DOMContentLoaded", function () {
670687
if (pageCategory && category === pageCategory) {
671688
var grid = document.getElementById("projectsGrid");
672689
if (grid) grid.scrollIntoView({ behavior: "smooth", block: "start" });
690+
if (window.innerWidth <= 768) {
691+
closeMobileSidebar();
692+
}
673693
return;
674694
}
675695

@@ -692,6 +712,9 @@ document.addEventListener("DOMContentLoaded", function () {
692712
block: "start",
693713
});
694714
}
715+
if (window.innerWidth <= 768) {
716+
closeMobileSidebar();
717+
}
695718
});
696719
});
697720

@@ -783,7 +806,7 @@ document.addEventListener("DOMContentLoaded", function () {
783806
console.log('Setting up sidebar observer');
784807

785808
const checkAndToggleSidebar = () => {
786-
if (window.innerWidth < 1100) {
809+
if (window.innerWidth <= 768) {
787810
return;
788811
}
789812
const rect = projectsSection.getBoundingClientRect();
@@ -798,11 +821,13 @@ document.addEventListener("DOMContentLoaded", function () {
798821
// Hide fixed-theme-toggle if sidebar is active
799822

800823
const fixedThemeToggle = document.getElementById("fixed-theme-toggle");
801-
if (showSidebar) {
802-
fixedThemeToggle.style.display = "none";
803-
}
804-
else {
805-
fixedThemeToggle.style.display = "block";
824+
if (fixedThemeToggle) {
825+
if (showSidebar) {
826+
fixedThemeToggle.style.display = "none";
827+
}
828+
else {
829+
fixedThemeToggle.style.display = "block";
830+
}
806831
}
807832

808833
};

‎web-app/math.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,7 @@
6868
</script>
6969

7070
<link rel="stylesheet" href="css/styles.css" />
71-
<link
72-
rel="stylesheet"
73-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
74-
integrity="sha384-iYQieczLE1ZYcx91pNAt4whAqKhW2ED8oBkFkXhNRCGF7GcCQBQb0or7TGoBMgo"
75-
crossorigin="anonymous">
76-
/>
71+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7772
<style>
7873
/* ── Page background ── */
7974
body[data-page="math"] {

‎web-app/privacy-policy.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,7 @@
3838
<link rel="preconnect" href="https://fonts.googleapis.com">
3939
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4040
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">
41-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
42-
integrity="sha384-iYQieczLE1ZYcx91pNAt4whAqKhW2ED8oBkFkXhNRCGF7GcCQBQb0or7TGoBMgo"
43-
crossorigin="anonymous">
41+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
4442

4543
<style>
4644
/* ==========================================================================

‎web-app/utilities.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,7 @@
6666
</script>
6767

6868
<link rel="stylesheet" href="css/styles.css" />
69-
<link
70-
rel="stylesheet"
71-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
72-
integrity="sha384-iYQieczLE1ZYcx91pNAt4whAqKhW2ED8oBkFkXhNRCGF7GcCQBQb0or7TGoBMgo"
73-
crossorigin="anonymous">
74-
/>
69+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7570
<style>
7671
/* ── Page background ── */
7772
body[data-page="utilities"] {

0 commit comments

Comments
 (0)