feat(blog): add table styles to layout and enhance token savings post

Add global CSS rules for markdown tables in BlogPost.astro including
borders, padding, and row hover states. Update the token savings
breakdown table to use an improved format with visual impact scales.
This commit is contained in:
2026-02-28 10:19:03 +01:00
parent 4f97a17ef3
commit cb77a5e7d8
2 changed files with 37 additions and 7 deletions
+30
View File
@@ -195,4 +195,34 @@ const { post } = Astro.props;
color: var(--color-text-secondary);
font-style: italic;
}
.post-content :global(table) {
width: 100%;
border-collapse: collapse;
margin: var(--space-xl) 0;
font-size: 0.95rem;
font-family: var(--font-mono);
}
.post-content :global(th) {
text-align: left;
padding: var(--space-sm) var(--space-md);
border-bottom: 2px solid var(--color-border);
color: var(--color-text);
font-weight: 600;
}
.post-content :global(td) {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.post-content :global(tr:last-child td) {
border-bottom: none;
}
.post-content :global(tr:hover td) {
background: var(--color-bg-elevated);
}
</style>