Fix column size and start with something kind of like a vertical rhythm

assets/style.scss

@@ -2,7 +2,7 @@ $font-path: 'ibm-plex';
 
 // the base size of the header svg is 500 * 500, strokes will need to be
 // adjusted for exact pixel sizes
-$logo-size: 208;
+$logo-size: 216;
 $factor: 1 / ($logo-size / 500);
 
 @import 'ibm-plex/css/ibm-plex.scss';
@@ -29,12 +29,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  font-size: 32px;
-  padding: 0 0 24px;
+  font-size: 24px;
+  line-height: 24px;
+  padding: 0 0 32px;
 }
 
 h2 {
-  font-size: 24px;
+  font-size: 20px;
+  line-height: 16px;
   padding: 0 0 16px;
 }
 
@@ -45,6 +47,7 @@ p {
 .ten-print {
   width: $logo-size * 1px;
   height: $logo-size * 1px;
+  display: block;
 
   path {
     stroke: #ff005f;
@@ -60,7 +63,7 @@ main {
   margin: 48px auto 48px 48px;
   grid-gap: 32px;
   // grid-auto-rows: 1fr;
-  // grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-template-areas:
     "header header header header"
     "nav content content content";
@@ -104,4 +107,6 @@ article {
       margin: 0 0 32px;
     }
   }
+
+  article { display: none; }
 }

content/posts/2021-07-07--let-there-be-light.md

@@ -1,6 +1,12 @@
 title: Let There Be Light
 some: frontmatter
 ---
-# Hello World
+# Let There Be Light
 
-This is an example post.
+Hi! My name is Arne and for the first time in over ten years I figured that it is a good idea to put content on my own personal website. I want this to be a home for my interests and projects that I started. Maybe talking about them more will help me get some of them finished.
+
+## Guiding Principles
+
+To make it clear for myself that this is not just *something I do on the web*, I'd like to establish guiding principles on what kind of content should be published here. Feel free to throw rocks at me if I don't follow these principles.
+
+This paragraph only exists for layouting purposes.