Fix the alignment of the post title <h1>

assets/styles/root/002_columns.css

@@ -114,14 +114,6 @@
     grid-column: content-start / content-end;
   }
 
-  header > span.series {
-    margin-inline-start: 0.5em;
-  }
-
-  header > span.series::before {
-    margin-inline-end: 0.25em;
-  }
-
   img {
     height: auto;
     max-width: 100%;
@@ -143,6 +135,18 @@
     grid-column: wide-content-start / wide-content-end;
   }
 
+  main > header > span.series {
+    margin-inline-start: 0.5em;
+  }
+
+  main > header > span.series::before {
+    margin-inline-end: 0.25em;
+  }
+
+  main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+      padding-block-start: 0.5em;
+  }
+
   nav.bulleted>li:first-child::before {
     margin-inline: 0;
   }
@@ -171,7 +175,7 @@
     margin-inline-start: 0;
     margin-block-start: calc(var(--body-item-spacing) / 2);
   }
-
+  
   table {
     border-collapse: collapse;
     margin-inline: auto;
@@ -258,14 +262,6 @@
     grid-column: content-start / content-end;
   }
 
-  .page > header > :is(h1, h2, h3, h4, h5, h6) {
-    grid-column: 1;
-  }
-
-  .page > header > time {
-    grid-column: 2;
-  }
-
   .page > article > * {
     grid-column: gutter-start / gutter-end;
   }

assets/styles/root/050_typography.css

@@ -152,7 +152,9 @@
         font-weight: normal;
     }
 
-    p { line-height: var(--line-height); }
+    p {
+        line-height: var(--line-height);
+    }
 
 
     .title {

content/test/index.md

@@ -12,7 +12,7 @@ tags: ["Test A", "Test B", "テスト"]
 toc: open
 ---
 
-# Body Text
+## Body Text
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
@@ -31,7 +31,7 @@ interdum varius sit amet mattis vulputate enim. Eget nunc lobortis mattis
 aliquam faucibus purus in massa. Amet consectetur adipiscing elit ut aliquam
 purus sit. Tincidunt dui ut ornare lectus sit amet est.
 
-# Code Highlighting
+## Code Highlighting
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore `magna aliqua`.
@@ -58,7 +58,7 @@ int main(int argc, char *argv[])
 Amet consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare
 lectus sit amet est.
 
-# Figures
+## Figures
 
 Iaculis nunc sed augue lacus viverra vitae congue. Non curabitur gravida arcu
 ac. Viverra orci sagittis eu volutpat odio facilisis mauris sit. Scelerisque in
@@ -107,7 +107,7 @@ faucibus nisl tincidunt. Lectus vestibulum mattis ullamcorper velit sed
 ullamcorper morbi tincidunt. Tellus elementum sagittis vitae et leo duis. Nunc
 sed id semper risus in hendrerit gravida.
 
-# Block Quotes
+## Block Quotes
 
 Here's a block quote:
 
@@ -122,7 +122,7 @@ Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Sem viverra
 aliquet eget sit amet tellus cras adipiscing enim. Libero nunc consequat
 interdum varius sit amet mattis vulputate enim.
 
-# Lists
+## Lists
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
@@ -158,30 +158,30 @@ Great! Here's a nested list:
 
 Woah!
 
-# Headers
+## Headers
 
 Here are some headers.
 
-# H1
+### H3
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore `magna aliqua`. Interdum velit laoreet id donec
 ultrices. Augue eget arcu dictum varius duis at consectetur lorem donec. Donec
 ac odio tempor orci dapibus ultrices.
 
-## H2
+#### H4
 
 Et leo duis ut diam. Pellentesque id nibh tortor id aliquet lectus. Ac orci
 `phasellus` egestas tellus rutrum tellus pellentesque eu. Amet commodo nulla
 facilisi nullam vehicula ipsum.
 
-### H3
+##### H5
 
 Posuere urna nec tincidunt praesent semper feugiat nibh. Phasellus vestibulum
 lorem sed risus. Consequat semper viverra nam libero justo laoreet sit amet
 cursus.
 
-#### H4
+###### H6
 
 Ipsum dolor sit amet consectetur adipiscing elit. Molestie ac feugiat sed lectus
 vestibulum mattis ullamcorper velit. Sem viverra aliquet eget sit amet tellus
@@ -190,7 +190,7 @@ vulputate enim. Eget nunc lobortis mattis aliquam faucibus purus in massa. Amet
 consectetur adipiscing elit ut aliquam purus sit. Tincidunt dui ut ornare lectus
 sit amet est.
 
-# {{< ruby Japanese ja >}}日本語{{< /ruby >}}
+## {{< ruby Japanese ja >}}日本語{{< /ruby >}}
 
 Here's some text in {{< ruby Japanese ja >}}日本語{{< /ruby >}} with {{< ruby
 furigana ja >}}ふりがな{{< /ruby >}}.

layouts/partials/content_header.html

@@ -1,16 +1,23 @@
 <header>
-  {{ partial "development/draft_tag.html" . }}
   <h1>{{ .Title }}</h1>
+
   {{ if and (not (eq .Section "about")) .Date }}
     <time>{{ .Date | time.Format "January 2, 2006" }}</time>
   {{ end }}
+
   {{- if .Params.series -}}
     {{- $series := .GetTerms "series" -}}
+
     {{- if gt (len $series) 1 -}}
       {{- errorf "More than one series for %s" .Permalink -}}
     {{- end -}}
+
     {{- with index $series 0 -}}
-      <span class="series"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
+      <span class="series">
+        <a href="{{ .Permalink }}">{{ .Title }}</a>
+      </span>
     {{- end -}}
   {{- end -}}
+
+  {{ partial "development/draft_tag.html" . }}
 </header>

layouts/partials/development/draft_tag.html

@@ -1 +1 @@
-{{ if .Draft }}<span class="draft">d</span>{{ end }}
+{{ if .Draft }}<span class="draft">draft</span>{{ end }}