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 (
<div className="postList sheet-background">
<h3>Posts</h3>
<ul className="post-archive">
{archiveData.map((yearData) => (
<li key={yearData.year}>
<div className="archive-year" tabIndex={0} role="button" aria-expanded="true">
<span className="archive-toggle expanded">▼</span>
<span>{yearData.year}</span>
<span className="post-count">{yearData.count}</span>
</div>
<div className="archive-content expanded">
<ul className="archive-months">
{yearData.months.map((monthData) => (
<li key={monthData.name}>
<div className="archive-month" tabIndex={0} role="button" aria-expanded="true">
<span className="archive-toggle expanded">▼</span>
<span>{monthData.name}</span>
<span className="post-count">{monthData.count}</span>
</div>
<div className="archive-content expanded">
<ul className="archive-posts">
{monthData.posts.map((post) => (
<li key={post.href} className="archive-post">
<a href={post.href} tabIndex={-1}>{post.title}</a>
</li>
))}
</ul>
</div>
</li>
))}
</ul>
</div>
</li>
))}
</ul>
<div className="archive-container">
<ul className="post-archive">
{archiveData.map((yearData) => (
<li key={yearData.year}>
<div className="archive-year" tabIndex={0} role="button" aria-expanded="true">
<span className="archive-toggle expanded">▼</span>
<span>{yearData.year}</span>
<span className="post-count">{yearData.count}</span>
</div>
<div className="archive-content expanded">
<ul className="archive-months">
{yearData.months.map((monthData) => (
<li key={monthData.name}>
<div className="archive-month" tabIndex={0} role="button" aria-expanded="true">
<span className="archive-toggle expanded">▼</span>
<span>{monthData.name}</span>
<span className="post-count">{monthData.count}</span>
</div>
<div className="archive-content expanded">
<ul className="archive-posts">
{monthData.posts.map((post) => (
<li key={post.href} className="archive-post">
<a href={post.href} tabIndex={-1}>{post.title}</a>
</li>
))}
</ul>
</div>
</li>
))}
</ul>
</div>
</li>
))}
</ul>
</div>
<script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
</div>
)

28
src/frontend/styles.css
View File

@ -167,7 +167,6 @@ aside {
position: sticky;
top: 0;
max-height: 100vh;
overflow-y: auto;
}
.pagination {
@ -612,6 +611,12 @@ h1 {
font-weight: 600;
}
.archive-container {
max-height: 300px;
overflow-y: auto;
padding-right: 5px;
}
.post-archive {
list-style: none;
padding: 0;
@ -721,6 +726,27 @@ h1 {
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 {
max-width: 750px;