thatonelutenist/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Seperate out title into seperate visual block

Browse source
This commit is contained in:
Nathan McCarty 2025-02-04 22:24:37 -05:00
parent e833e18748
commit e7fdf59618
3 changed files with 37 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
lib/Config.rakumod
View file

@ -48,6 +48,14 @@ method site-header(BlogMeta:D $meta) {
] ]
} }
method post-header(Post:D $post) {
header :class<post-header>, [
div :class<post-title>, [
h1 $post.title;
]
]
}
# TODO: Support GFM admonitions # TODO: Support GFM admonitions
method generate-post(Post:D $post, BlogMeta:D $meta) { method generate-post(Post:D $post, BlogMeta:D $meta) {
my $content = $post.render-html; my $content = $post.render-html;
@ -55,8 +63,11 @@ method generate-post(Post:D $post, BlogMeta:D $meta) {
my $body = my $body =
body [ body [
self.site-header: $meta; self.site-header: $meta;
div :class<post-body>, [ article :class<post>, [
$content self.post-header: $post;
div :class<post-body>, [
$content;
]
] ]
]; ];
# TODO: Setup footer # TODO: Setup footer

5
lib/Pandoc.rakumod
View file

@ -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 #| Use pandoc to render a markdown document to html
sub markdown-to-html(IO::Path:D $file --> Str:D) is export { 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/'<h1' .* '</h1>'//;
$output
} }

26
resources/main.css
View file

@ -5,7 +5,7 @@
font-family: "Open Sans", sans-serif, serif; font-family: "Open Sans", sans-serif, serif;
} }
body { body, .post {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -26,7 +26,7 @@ body {
.site-logo { .site-logo {
color: light-dark(#d6000c, #ed4a46); color: light-dark(#d6000c, #ed4a46);
font-size: 2rem; font-size: 2.5rem;
font-weight: bold; font-weight: bold;
} }
@ -36,21 +36,35 @@ body {
font-style: italic; font-style: italic;
} }
.post-body { .post-body, .post-header {
width: 66%; width: 66%;
display: block; display: block;
padding-left: 2rem; padding-left: 1.5rem;
padding-right: 2rem; padding-right: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 1rem; border-radius: 1rem;
background-color: light-dark(#ffffff, #181818); background-color: light-dark(#ffffff, #181818);
/* text-align: justify; */ /* text-align: justify; */
} }
.post-body > h1 { .post-header {
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
.post-title {
text-align: center; text-align: center;
color: light-dark(#dd0f9d, #eb6eb7); color: light-dark(#dd0f9d, #eb6eb7);
} }
.post-title > h1 {
margin-top: 0px;
margin-bottom: 0px;
}
.post-body > h2 { .post-body > h2 {
text-align: center; text-align: center;
color: light-dark(#282828, #dedede); color: light-dark(#282828, #dedede);