diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index a4bb8cc..a56be37 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -83,19 +83,34 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; } .prose h1 { font-size: 40px; - border-bottom: 2px solid #000; margin-bottom: calc(var(--font-size) / 3); } + .prose h1:after { /* Psuedo-element prevents extending to padding */ + content: ""; + display: block; + border-bottom: 2px solid #000; + } .prose h2 { font-size: 30px; + } + .prose h2:after { /* Psuedo-element prevents extending to padding */ + content: ""; + display: block; border-bottom: 1px solid #aaa; } .prose h3 { font-size: 26px; } - .prose h4, .prose h5, .prose h6 { + .prose h4 { font-size: 22px; } + .prose h5 { + font-size: 20px; + } + .prose h6 { + color: #888; + font-size: 18px; + } /**** Paragraphs ****/ .prose p { diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index ae5851b..cff601b 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -59,15 +59,16 @@ const posts = (await getCollection('blog')).sort(

Blogs!

+ class="text-center mb-4 text-xl"> A collection of tutorials and opinionated pieces. Have a read!

+