DarkSingularity/KeepItGoingServer
Internal
Public Access
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 1 Wiki Activity

CRITICAL FIX: Move base CSS before media queries

Browse Source 
The sidebar-toggle and mobile-overlay base definitions were placed
AFTER the media queries, causing them to override the responsive
styles. This prevented the hamburger menu from showing and broke
the sidebar drawer functionality.

Fixed by moving base definitions before the Mobile Responsive section.

CSS order is now correct:
1. Base styles (display: none for sidebar-toggle)
2. Media queries (display: flex at 768px)

This allows the media query to properly override the base style.

Updated cache version to v=4.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Keith Smith
2025-12-26 21:18:14 -07:00
co-authored by Claude Sonnet 4.5
parent d83b1e3091
commit f836769ad7
2 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/app.css
+28 -28
View File
@@ -857,6 +857,34 @@ a:hover {
font-size: var(--font-sm);
}
/* Sidebar toggle button (hidden on desktop, shown on mobile) */
.sidebar-toggle {
display: none;
background: none;
border: none;
padding: var(--space-sm);
cursor: pointer;
color: var(--text-secondary);
}
.sidebar-toggle svg {
width: 24px;
height: 24px;
}
/* Mobile overlay */
.mobile-overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 40;
}
.mobile-overlay.visible {
display: block;
}
/* ============================================
Mobile Responsive
============================================ */
@@ -1055,34 +1083,6 @@ a:hover {
display: block;
}
/* Sidebar toggle button (visible on mobile) */
.sidebar-toggle {
display: none;
background: none;
border: none;
padding: var(--space-sm);
cursor: pointer;
color: var(--text-secondary);
}
.sidebar-toggle svg {
width: 24px;
height: 24px;
}
/* Mobile overlay */
.mobile-overlay {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 40;
}
.mobile-overlay.visible {
display: block;
}
/* ============================================
Color Presets (Group Modal)
============================================ */
templates/base.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="icon" type="image/svg+xml" href="{% static 'favicons/favicon.svg' %}">
<link rel="alternate icon" href="{% static 'favicons/favicon.svg' %}" type="image/svg+xml">
<link rel="stylesheet" href="{% static 'css/app.css' %}?v=3">
<link rel="stylesheet" href="{% static 'css/app.css' %}?v=4">
{% block extra_css %}{% endblock %}
</head>
<body>