rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header/footer polish, fix dead link, add focus rings

Browse Source 
- Dashboard header shortened to match every other page (was notably
  taller than the rest).
- Files moved before Settings in the bottom nav.
- Removed the header's course-name badge - purely redundant with the
  page's own heading directly below it.
- Fixed a dead link: "Progress" pointed to #stats, but no element
  with that id existed anywhere on the page.
- Added a visible :focus-visible ring across all pages - tabbing
  through the site previously gave no indication of what was focused.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-26 10:14:02 -04:00
co-authored by Claude Sonnet 5
parent becbb0b419
commit 9fb193a07e
9 changed files with 69 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/unsorted.html
+10 -3
View File
@@ -553,6 +553,13 @@
.tab-item.active {
color: var(--accent);
}
/* Visible keyboard-focus ring - see course_dashboard.html for why
:focus-visible (keyboard/switch only, not mouse clicks). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
</style>
</head>
<body>
@@ -709,12 +716,12 @@
<a href="/help" class="tab-item {% if active_tab == 'help' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('help', 20) }}</span><span class="tab-label">Help</span>
</a>
<a href="/settings" class="tab-item {% if active_tab == 'settings' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('settings', 20) }}</span><span class="tab-label">Settings</span>
</a>
<a href="/unsorted" class="tab-item {% if active_tab == 'files' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('folder', 20) }}</span><span class="tab-label">Files</span>
</a>
<a href="/settings" class="tab-item {% if active_tab == 'settings' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('settings', 20) }}</span><span class="tab-label">Settings</span>
</a>
</nav>
<script src="/static/theme.js"></script>