barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #11 from barrett-ruth/fix/styling

Browse source 
cleanup toc
This commit is contained in:
Barrett Ruth 2025-11-11 15:36:50 -05:00 • committed by GitHub
commit cd2d92ac6f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
public/styles/posts.css
View file

@ -9,7 +9,7 @@ li {
.toc-column { .toc-column {
position: absolute; position: absolute;
left: 2rem; left: calc((100vw - min(65vw, 800px)) / 4 - 100px);
top: 0; top: 0;
width: 200px; width: 200px;
padding-top: 190px; padding-top: 190px;
@ -78,6 +78,9 @@ article h3,
.post-article h3 { .post-article h3 {
font-weight: normal; font-weight: normal;
position: relative; position: relative;
display: flex;
justify-content: space-between;
align-items: center;
} }
article h1, article h1,
@ -124,6 +127,10 @@ article h3::before,
margin-right: 0.5em; margin-right: 0.5em;
} }
.date {
font-size: 0.67em;
}
article img { article img {
display: block; display: block;
margin: 2rem auto; margin: 2rem auto;

8
src/components/TableOfContents.astro
View file

@ -22,7 +22,7 @@ const tocHeadings = headings.filter((h) => h.depth <= 2);
{tocHeadings.map((heading) => ( {tocHeadings.map((heading) => (
<a <a
href={`#${heading.slug}`} href={`#${heading.slug}`}
class={heading.depth === 2 ? "sub" : "main"} class={heading.depth === 1 ? "h1-link" : "h2-link"}
> >
{heading.text} {heading.text}
</a> </a>
@ -49,6 +49,8 @@ const tocHeadings = headings.filter((h) => h.depth <= 2);
flex-direction: column; flex-direction: column;
gap: 0.3rem; gap: 0.3rem;
align-items: flex-start; align-items: flex-start;
margin: 0;
padding: 0;
} }
.toc-nav a { .toc-nav a {
@ -62,11 +64,11 @@ const tocHeadings = headings.filter((h) => h.depth <= 2);
text-decoration: underline; text-decoration: underline;
} }
.toc-nav a.main { .toc-nav a.h1-link {
padding-left: 0; padding-left: 0;
} }
.toc-nav a.sub { .toc-nav a.h2-link {
padding-left: 1.5rem; padding-left: 1.5rem;
} }