Merge pull request #369 from osunyorg/mixin-article

Mixin article : harden item title style

assets/sass/_theme/blocks/posts.sass

@@ -10,7 +10,7 @@
         @include grid($block-posts-grid-columns, desktop)
     article
         @include author-and-time-side-to-side
-        [itemprop=headline]
+        .post-title
             a
                 @include stretched-link
                 text-decoration: none
@@ -134,7 +134,7 @@
                     display: flex
                     flex-direction: column
                     padding-top: $spacing-2
-                    [itemprop=headline]
+                    .post-title
                         margin-bottom: 0
                     .post-categories
                         margin-bottom: 0
@@ -180,7 +180,7 @@
 
     &--highlight
         .highlight-post
-            [itemprop=headline]
+            .post-title
                 margin-bottom: $spacing-2
             .media
                 margin-bottom: $spacing-2
@@ -207,11 +207,11 @@
 
         @include media-breakpoint-up(desktop)
             .highlight
-                [itemprop=headline]
+                .post-title
                     @include h2
             .list
                 article
-                    [itemprop=headline]
+                    .post-title
                         @include h4
 
         @include in-page-with-sidebar
@@ -227,7 +227,7 @@
             .list
                 article
                     @include grid(8, desktop, 0, 0)
-                    [itemprop=headline]
+                    .post-title
                         grid-column: 1 / 7
                     .post-categories
                         grid-column: 1 / 7
@@ -323,7 +323,7 @@
         @include in-page-with-sidebar
             .post
                 width: columns(3)
-                [itemprop="headline"]
+                .post-title
                     @include h4
             .carousel
                 .actions-arrows

assets/sass/_theme/sections/posts.sass

 .post
     @include article
+    .post-title
+        @include h3
+        a
+            @include stretched-link
+            display: block
+            text-decoration: none
     time
         color: $post-time-color
         display: inline-block
@@ -19,7 +25,7 @@
             margin-bottom: $spacing-3
             padding-bottom: $spacing-3
             flex-direction: row
-            [itemprop=headline] + p
+            .post-title + p
                 margin-top: $spacing-2
             @include media-breakpoint-up(desktop)
                 @include grid
@@ -51,7 +57,7 @@
                     time
                         font-size: $h5-size
                 .post-content
-                    [itemprop=headline],
+                    .post-title,
                     > p
                         max-width: columns(6)
     .posts--grid

assets/sass/_theme/sections/programs.sass

 .program
     @include article
+    h2, h3, .program-title
+        @include article-title
 
 div.programs,
 section.programs

assets/sass/_theme/sections/projects.sass

 .project
     @include article(auto)
+    .project-title
+        @include article-title
 
 .projects__section,
 .projects_categories__term

assets/sass/_theme/sections/volumes.sass

 .volume
     @include article
+    .volume-title
+        @include article-title
     .suptitle
         @include meta
 

assets/sass/_theme/utils/shame.sass

-
 @mixin visually-hidden
     clip: rect(0,0,0,0) !important
     border: 0 !important
@@ -32,12 +31,6 @@
             object-fit: cover
             @if $aspect-ratio
                 aspect-ratio: $aspect-ratio
-    h2, h3, [itemprop=headline],  [itemprop=name]
-        @include h3
-        a
-            @include stretched-link
-            display: block
-            text-decoration: none
     p + time
             margin-top: $spacing-2
     .post-categories, .project-categories
@@ -59,6 +52,13 @@
         color: var(--color-text-alt)
         display: block
 
+@mixin article-title
+    @include h3
+    a
+        @include stretched-link
+        display: block
+        text-decoration: none
+
 @mixin list-section
     @include list-reset
     > li

layouts/partials/blocks/templates/pages.html

@@ -22,7 +22,7 @@
       {{ $title = .Title }}
     {{ end }}
     {{ if .Params.bodyclass }}
-      {{- $page_class = printf "block-page-%s" .Params.bodyclass }}
+      {{- $page_class = printf "block-%s" .Params.bodyclass }}
     {{ end }}
     {{ if $show_main_description }}
       {{- $main_description = partial "GetTruncateContent" ( dict 

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

 {{ $heading_level := .heading_level | default 3 }}
 {{ $heading := printf "h%d" $heading_level }}
 {{ $heading_tag := (dict 
-  "open" ((printf "<%s itemprop='headline'>" $heading) | safeHTML)
+  "open" ((printf "<%s class='post-title' itemprop='headline'>" $heading) | safeHTML)
   "close" ((printf "</%s>" $heading) | safeHTML)
   ) }}
 <div class="highlight">

layouts/partials/posts/post.html

@@ -2,7 +2,7 @@
 {{- $direction := "" -}}
 {{ $heading := .heading | default "h2" }}
 {{ $heading_tag := (dict 
-    "open" ((printf "<%s itemprop='headline'>" $heading) | safeHTML)
+    "open" ((printf "<%s class='post-title' itemprop='headline'>" $heading) | safeHTML)
     "close" ((printf "</%s>" $heading) | safeHTML)
     ) }}
 {{ $index := .index}}

layouts/partials/projects/project.html

 {{ $project := .project }}
 {{ $heading := .heading | default "h2" }}
 {{ $heading_tag := (dict 
-    "open" ((printf "<%s itemprop='name'>" $heading) | safeHTML)
+    "open" ((printf "<%s class='project-title' itemprop='name'>" $heading) | safeHTML)
     "close" ((printf "</%s>" $heading) | safeHTML)
     ) }}
 

layouts/partials/volumes/volume.html

 <article class="volume" itemscope itemtype="https://schema.org/Book https://schema.org/PublicationVolume">
   <hgroup>
     <p class="suptitle" itemprop="volumeNumber">{{ i18n "volumes.volume_number" (dict "Number" .Params.Number) }}</p>
-    <h2><a href="{{ .Permalink }}" title="{{ i18n "commons.more_aria" (dict "Title" .Title) }}" itemprop="name">{{ partial "PrepareHTML" .Title }}</a></h2>
+    <h2 class="volume-title"><a href="{{ .Permalink }}" title="{{ i18n "commons.more_aria" (dict "Title" .Title) }}" itemprop="name">{{ partial "PrepareHTML" .Title }}</a></h2>
   </hgroup>
   <div class="media">
     {{- if .Params.image -}}