marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scroll-to-top visible class + reading progress dark mode

Browse Source 
- Wire visible state to className in ScrollToTop component
- Replace hard-coded rgba with color-mix() for theme-aware background
- Dark mode reading progress uses 15% ink color mix
This commit is contained in:
Krishna Ayyalasomayajula
2026-06-01 22:48:18 -05:00
parent 5ac5605933
commit 06481d0c26
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/globals.css
View File

@@ -396,16 +396,13 @@ html.dark code[data-theme*=" "] span {
/* === Reading progress vertical bar === */ /* === Reading progress vertical bar === */
.reading-progress { .reading-progress {
position: fixed; position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
right: 12px; width: 3px; height: 60px;
top: 50%; background: color-mix(in oklch, var(--color-ink) 8%, transparent);
transform: translateY(-50%); border-radius: 2px; z-index: 9998; overflow: hidden;
width: 3px; }
height: 60px; .dark .reading-progress {
background: rgba(0, 0, 0, 0.08); background: color-mix(in oklch, var(--color-ink) 15%, transparent);
border-radius: 2px;
z-index: 9998;
overflow: hidden;
} }
.reading-progress-fill { .reading-progress-fill {
width: 100%; width: 100%;

2
components/ui/ScrollToTop.tsx
View File

@@ -19,7 +19,7 @@ export function ScrollToTop() {
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
whileHover={{ scale: 1.1 }} whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
className="scroll-to-top" className={`scroll-to-top ${visible ? 'visible' : ''}`}
aria-label="Scroll to top" aria-label="Scroll to top"
> >
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg>