add categories to posts

assets/sass/_theme/_utils.sass

@@ -101,6 +101,7 @@
         padding-right: $grid-gutter
 
 @mixin grid($cols: 12, $breakpoint: false, $gap-y: $grid-gutter, $gap-x: $grid-gutter)
+    word-break: break-word
     @if $breakpoint
         @include media-breakpoint-up($breakpoint)
             display: grid
@@ -183,9 +184,9 @@
             object-fit: cover
     h1
         @include h3
-    a
-        @include stretched-link
-        text-decoration: none
+        a
+            @include stretched-link
+            text-decoration: none
     p
         + time
             margin-top: $spacing0

assets/sass/_theme/blocks/posts.sass

@@ -113,7 +113,6 @@
             margin-top: half($spacing3)
             border-top: 1px solid $color-border
             article
-                @include article
                 border-bottom: 1px solid $color-border
                 position: relative
                 padding-bottom: half($spacing3)
@@ -139,7 +138,10 @@
                     @include grid(8, desktop, 0, 0)
                     h1
                         grid-column: 1 / 7
+                    .post-categories
+                        grid-column: 1 / 7
                     time
+                        grid-row: 1
                         grid-column: 7 / 9
                         text-align: right
                         order: 2

assets/sass/_theme/sections/posts.sass

@@ -2,6 +2,20 @@
     @include article($post-media-background)
     time
         color: $post-time-color
+    .post-categories
+        @include meta
+        margin-top: $spacing0
+        margin-bottom: $spacing0
+        position: relative
+        display: flex
+        flex-wrap: wrap
+        gap: 0 $spacing0
+        z-index: 2
+        a
+            @include link($color-accent)
+        li
+            margin: 0
+
 
 .posts__section,
 .authors__term,

layouts/partials/blocks/templates/posts/highlight.html

@@ -15,11 +15,14 @@
       <div class="list">
         {{ range after 1 . }}
           {{ with site.GetPage (printf "/posts/%s" .) }}
-            <article>
+            <article class="post">
               {{- $title := partial "PrepareHTML" .Title -}}
               <h1 itemprop="headline"><a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a></h1>
+              {{ if site.Params.posts.list.show_categories }}
+                {{- partial "posts/categories" . -}}
+              {{ end }}
               {{- if (partial "GetTextFromHTML" .Params.description_short) -}}
-              <p itemprop="articleBody">{{ partial "PrepareHTML" .Params.description_short }}</p>
+                <p itemprop="articleBody">{{ partial "PrepareHTML" .Params.description_short }}</p>
               {{- end -}}
               <time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04" }}">{{ .Date | time.Format ":date_long" }}</time>
             </article>

layouts/partials/posts/post.html

@@ -2,13 +2,14 @@
   <div class="post-content">
     {{- $title := partial "PrepareHTML" .Title -}}
     <h1 itemprop="headline"><a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a></h1>
+    {{ if $.Site.Params.posts.list.show_categories }}
+      {{- partial "posts/categories" . -}}
+    {{ end }}
     {{- if (partial "GetTextFromHTML" .Params.description_short) -}}
       <p itemprop="articleBody">{{ partial "PrepareHTML" .Params.description_short }}</p>
     {{- end -}}
+    
     <time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04" }}">{{ .Date | time.Format ":date_long" }}</time>
-    {{ if $.Site.Params.posts.list.show_categories }}
-      {{- partial "posts/categories" . -}}
-    {{ end }}
   </div>
   <div class="media">
     {{- if .Params.image -}}