fix: fix post metadata positioning (#315)

exampleSite/content/en/posts/hello_geekdoc.md

@@ -4,6 +4,7 @@ type: posts
 date: 2020-01-06
 tags:
   - Documentation
+  - Updates
 ---
 
 This is the first release of the Geekdoc theme.

layouts/partials/posts/metadata.html

@@ -1,4 +1,4 @@
-<span class="no-wrap">
+<span class="flex align-center no-wrap">
   <svg class="icon gdoc_date"><use xlink:href="#gdoc_date"></use></svg>
   <span class="gdoc-post__tag">
     <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
@@ -10,7 +10,7 @@
   </span>
 </span>
 
-<span class="no-wrap">
+<span class="flex align-center no-wrap">
   <svg class="icon gdoc_timer"><use xlink:href="#gdoc_timer"></use></svg>
   <span class="gdoc-post__tag">{{ i18n "posts_read_time" .ReadingTime }}</span>
 </span>
@@ -21,7 +21,7 @@
     {{ $name := . }}
     {{ with $.Site.GetPage (printf "/tags/%s" $name | urlize) }}
       {{ if eq $tc 0 }}
-        <span class="no-wrap">
+        <span class="flex align-center no-wrap">
           <svg class="icon gdoc_bookmark"><use xlink:href="#gdoc_bookmark"></use></svg>
           {{ template "post-tag" dict "name" $name "page" . }}
         </span>
@@ -34,7 +34,7 @@
 {{ end }}
 
 {{ define "post-tag" }}
-  <span class="gdoc-post__tag gdoc-button">
+  <span class="gdoc-post__tag gdoc-button gdoc-button--regular">
     <a
       class="gdoc-button__link"
       href="{{ .page.RelPermalink }}"
@@ -46,7 +46,7 @@
 {{ end }}
 
 {{ define "post-author" }}
-  <span class="gdoc-post__tag gdoc-button">
+  <span class="gdoc-post__tag gdoc-button gdoc-button--regular">
     <a class="gdoc-button__link" href="{{ .page.RelPermalink }}" title="All posts of this author">
       {{ .name }}
     </a>

layouts/posts/list.html

@@ -21,7 +21,9 @@
       </div>
 
       <footer class="gdoc-post__footer">
+        <div class="flex flex-wrap align-center gdoc-post__meta">
           {{ partial "posts/metadata.html" . }}
+        </div>
       </footer>
     </article>
   {{ end }}

layouts/posts/single.html

@@ -1,13 +1,13 @@
 {{ define "main" }}
-  <article class="gdoc-markdown gdoc-post">
+  <article class="gdoc-post">
     <header class="gdoc-post__header">
       <h1 class="gdoc-post__title">{{ .Title }}</h1>
-      <div class="gdoc-post__meta">
+      <div class="flex flex-wrap align-center gdoc-post__meta gdoc-post__meta--head">
         {{ partial "posts/metadata.html" . }}
       </div>
     </header>
-    <div>
+    <section class="gdoc-markdown">
       {{ partial "content" . }}
-    </div>
+    </section>
   </article>
 {{ end }}

layouts/taxonomy/list.html

@@ -21,7 +21,9 @@
       </div>
 
       <footer class="gdoc-post__footer">
+        <div class="flex flex-wrap align-center gdoc-post__meta">
           {{ partial "posts/metadata.html" . }}
+        </div>
       </footer>
     </article>
   {{ end }}

src/sass/_base.scss

@@ -358,6 +358,15 @@ img {
   flex-grow: 1;
   padding: $padding-16 0;
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
   &__header,
   &__footer {
     margin-bottom: $padding-16 * 1.2;
@@ -458,7 +467,7 @@ img {
   }
 
   &__readmore {
-    margin: 1.5rem 0 2rem 0;
+    margin: $padding-16 0;
 
     a,
     a:hover,
@@ -468,26 +477,25 @@ img {
     }
   }
 
-  &__tag {
-    margin: $padding-4 0 !important;
-
-    .gdoc-button__link {
-      padding: $padding-4 $padding-8;
-    }
-  }
-
   &__meta {
-    padding-bottom: $padding-16;
+    span:first-child .icon {
+      margin-left: -5px;
     }
 
-  &__footer,
-  &__meta {
     :not(:first-child).no-wrap {
       margin-left: $padding-8;
     }
 
     .icon {
-      font-size: $font-size-20;
+      font-size: 1.2em;
+    }
+
+    .gdoc-button {
+      margin-left: $padding-4;
+    }
+
+    &--head {
+      padding-bottom: $padding-16;
     }
   }
 

src/sass/_markdown.scss

@@ -7,7 +7,7 @@
 
   &--nested {
     :first-child {
-      margin-top: 0;
+      margin-top: 0 !important;
     }
 
     > pre {
@@ -25,8 +25,6 @@
   h4,
   h5,
   h6 {
-    font-weight: 600;
-
     > code {
       border-top: $border-4 solid var(--accent-color);
       font-size: 0.75em !important;