diff --git a/lib/Config.rakumod b/lib/Config.rakumod index 5503bbb..31559d6 100644 --- a/lib/Config.rakumod +++ b/lib/Config.rakumod @@ -48,6 +48,14 @@ method site-header(BlogMeta:D $meta) { ] } +method post-header(Post:D $post) { + header :class, [ + div :class, [ + h1 $post.title; + ] + ] +} + # TODO: Support GFM admonitions method generate-post(Post:D $post, BlogMeta:D $meta) { my $content = $post.render-html; @@ -55,8 +63,11 @@ method generate-post(Post:D $post, BlogMeta:D $meta) { my $body = body [ self.site-header: $meta; - div :class, [ - $content + article :class, [ + self.post-header: $post; + div :class, [ + $content; + ] ] ]; # TODO: Setup footer diff --git a/lib/Pandoc.rakumod b/lib/Pandoc.rakumod index 74048f0..75887e3 100644 --- a/lib/Pandoc.rakumod +++ b/lib/Pandoc.rakumod @@ -92,5 +92,8 @@ sub markdown-first-paragraph(IO::Path:D $file --> Str:D) is export { #| Use pandoc to render a markdown document to html sub markdown-to-html(IO::Path:D $file --> Str:D) is export { - pandoc <-f gfm>, $file + # Remove the header, we'll regenerate it later + my $output = pandoc <-f gfm>, $file; + $output ~~ s:g/''//; + $output } diff --git a/resources/main.css b/resources/main.css index 7d02554..1c2c288 100644 --- a/resources/main.css +++ b/resources/main.css @@ -5,7 +5,7 @@ font-family: "Open Sans", sans-serif, serif; } -body { +body, .post { display: flex; align-items: center; justify-content: center; @@ -26,7 +26,7 @@ body { .site-logo { color: light-dark(#d6000c, #ed4a46); - font-size: 2rem; + font-size: 2.5rem; font-weight: bold; } @@ -36,21 +36,35 @@ body { font-style: italic; } -.post-body { +.post-body, .post-header { width: 66%; display: block; - padding-left: 2rem; - padding-right: 2rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; border-radius: 1rem; background-color: light-dark(#ffffff, #181818); /* text-align: justify; */ } -.post-body > h1 { +.post-header { + padding: 1.5rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.post-title { text-align: center; color: light-dark(#dd0f9d, #eb6eb7); } +.post-title > h1 { + margin-top: 0px; + margin-bottom: 0px; +} + .post-body > h2 { text-align: center; color: light-dark(#282828, #dedede);