Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move scrollbar into Post Archive component instead of aside

Browse Source
This commit is contained in:
Caleb Braaten 2026-01-20 13:47:55 -08:00
parent 9bf7827aa0
commit 54d5a77329
2 changed files with 62 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/frontend/components/post-archive.tsx
View File

@ -39,39 +39,41 @@ export function PostArchive() {
return ( return (
<div className="postList sheet-background"> <div className="postList sheet-background">
<h3>Posts</h3> <h3>Posts</h3>
<ul className="post-archive"> <div className="archive-container">
{archiveData.map((yearData) => ( <ul className="post-archive">
<li key={yearData.year}> {archiveData.map((yearData) => (
<div className="archive-year" tabIndex={0} role="button" aria-expanded="true"> <li key={yearData.year}>
<span className="archive-toggle expanded">▼</span> <div className="archive-year" tabIndex={0} role="button" aria-expanded="true">
<span>{yearData.year}</span> <span className="archive-toggle expanded">▼</span>
<span className="post-count">{yearData.count}</span> <span>{yearData.year}</span>
</div> <span className="post-count">{yearData.count}</span>
<div className="archive-content expanded"> </div>
<ul className="archive-months"> <div className="archive-content expanded">
{yearData.months.map((monthData) => ( <ul className="archive-months">
<li key={monthData.name}> {yearData.months.map((monthData) => (
<div className="archive-month" tabIndex={0} role="button" aria-expanded="true"> <li key={monthData.name}>
<span className="archive-toggle expanded">▼</span> <div className="archive-month" tabIndex={0} role="button" aria-expanded="true">
<span>{monthData.name}</span> <span className="archive-toggle expanded">▼</span>
<span className="post-count">{monthData.count}</span> <span>{monthData.name}</span>
</div> <span className="post-count">{monthData.count}</span>
<div className="archive-content expanded"> </div>
<ul className="archive-posts"> <div className="archive-content expanded">
{monthData.posts.map((post) => ( <ul className="archive-posts">
<li key={post.href} className="archive-post"> {monthData.posts.map((post) => (
<a href={post.href} tabIndex={-1}>{post.title}</a> <li key={post.href} className="archive-post">
</li> <a href={post.href} tabIndex={-1}>{post.title}</a>
))} </li>
</ul> ))}
</div> </ul>
</li> </div>
))} </li>
</ul> ))}
</div> </ul>
</li> </div>
))} </li>
</ul> ))}
</ul>
</div>
<script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} /> <script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
</div> </div>
) )

28
src/frontend/styles.css
View File

@ -167,7 +167,6 @@ aside {
position: sticky; position: sticky;
top: 0; top: 0;
max-height: 100vh; max-height: 100vh;
overflow-y: auto;
} }
.pagination { .pagination {
@ -612,6 +611,12 @@ h1 {
font-weight: 600; font-weight: 600;
} }
.archive-container {
max-height: 300px;
overflow-y: auto;
padding-right: 5px;
}
.post-archive { .post-archive {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -721,6 +726,27 @@ h1 {
margin-left: auto; margin-left: auto;
} }
/* Custom scrollbar styling for archive container */
.archive-container::-webkit-scrollbar {
width: 6px;
}
.archive-container::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 3px;
}
.archive-container::-webkit-scrollbar-thumb {
background: var(--text-secondary);
border-radius: 3px;
}
.archive-container::-webkit-scrollbar-thumb:hover {
background: var(--text-primary);
}
margin-left: auto;
}
/* Blog Post Styles */ /* Blog Post Styles */
.blog-post { .blog-post {
max-width: 750px; max-width: 750px;