set font and round corners

lib/Config.rakumod

@@ -5,7 +5,7 @@ use DB::BlogMeta;
 
 unit class Config;
 
-
+# TODO: Support GFM admonitions
 method generate-post(Str:D $title, Str:D $content, BlogMeta:D $meta) {
     my $head = head [
         meta :charset<utf-8>;
@@ -15,6 +15,11 @@ method generate-post(Str:D $title, Str:D $content, BlogMeta:D $meta) {
         # Use Iosevka Alie as the monospace font
         link :rel<stylesheet>,
             :href<https://static.stranger.systems/fonts/IosevkaAlie/IosevkaAile.css>;
+        # Use open sans as the content font
+        link :rel<preconnect> :href<https://fonts.googleapis.com>;
+        link :rel<preconnect> :href<https://fonts.gstatic.com> :crossorigin;
+        link :rel<stylesheet>,
+            :href<https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap>;
         style %?RESOURCES<main.css>.slurp;
         style %?RESOURCES<code.css>.slurp;
         # TODO: Add description

projects/Markdown/MyNewBlog.md

@@ -1,3 +1,23 @@
 # My New Blog
 
 This is a blog that uses a static site generator written in raku!
+
+## A sub headings
+
+With some text under it
+
+### A third layer
+
+Even more text
+
+## Back up
+
+function debug null byte compile syntax error protocol stack overflow cache memory leak parse integer void pointer exception handler runtime deploy code fragment database query optimize algorithm refactor git commit push merge conflict
+
+### Back down
+
+here we go
+
+#### even further
+
+weeeeee

resources/code.css

@@ -8,6 +8,7 @@ code {
 pre > code {
     display: block;
     padding: 1rem;
+    border-radius: 0.55rem / 0.5rem;
 }
 
 .hl-type {

resources/main.css

@@ -2,6 +2,7 @@
     color-scheme: light dark;
     color: light-dark(#474747, #b9b9b9);
     background-color: light-dark(#ebebeb, #252525);
+    font-family: "Open Sans", sans-serif, serif;
 }
 
 body {
@@ -13,14 +14,30 @@ body {
 .post-body {
     width: 66%;
     display: block;
-    padding: 1rem;
+    padding: 3rem;
+    border-radius: 1rem;
     background-color: light-dark(#ffffff, #181818);
 }
 
 .post-body > h1 {
     text-align: center;
+    color: light-dark(#dd0f9d, #eb6eb7);
 }
 
-.post-body > p {
+.post-body > h2 {
-    text-align: justify;
+    text-align: center;
+    color: light-dark(#282828, #dedede);
+}
+
+.post-body > h3 {
+    text-align: center;
+    color: light-dark(#282828, #dedede);
+}
+
+.post-body > h4 {
+    text-align: center;
+    color: light-dark(#282828, #dedede);
+}
+.post-body > p {
+    text-indent: 2ch;
 }