akemi/noway.moe
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Markdown: improve heading styles

Browse source
This commit is contained in:
Akemi Izuko 2023-12-29 15:37:47 -07:00
parent eff91d3614
commit 31cd1bd61b
Signed by: akemi
GPG key ID: 8DE0764E1809E9FC
2 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/layouts/BlogPost.astro
View file

@ -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 {

5
src/pages/blog/index.astro
View file

@ -59,15 +59,16 @@ const posts = (await getCollection('blog')).sort(
<main>
<section>
<h1
class="text-center text-4xl"
class="text-center mt-8 mb-4 text-6xl"
style="font-family: var(--font-title);">
Blogs!
</h1>
<p
class="text-center m-6">
class="text-center mb-4 text-xl">
A collection of tutorials and opinionated pieces. Have a
read!
</p>
<hr class="m-4" style="border: 1px solid black;" />
<ul>
{
posts.map((post) => (