Merge pull request #226 from noesya/front/large-post

front/large-post

assets/sass/_theme/blocks/posts.sass

@@ -32,6 +32,85 @@
                 @include grid($block-posts-grid-columns)
                 .media picture img
                     width: 100%
+    &--large
+        @include media-breakpoint-up(sm)
+            article
+                .post-meta
+                    display: inline
+        .post
+            .more
+                @include icon(arrow-right, after, true)
+            .post-author 
+                p::before
+                    display: none
+            @include media-breakpoint-down(desktop)
+                + .post
+                    margin-top: $spacing2
+                &-meta
+                    .post-author 
+                        display: inline-flex
+                        &::after
+                            content: '—'
+                            margin: 0 half($spacing0)
+                    .post-categories
+                        display: flex
+                p[itemprop="articleBody"]
+                    margin-top: 0
+        @include media-breakpoint-up(desktop)
+            .large
+                .post
+                    flex-direction: row
+                    gap: half($grid-gutter)
+                    + .post
+                        margin-top: $spacing2
+                    p[itemprop="articleBody"]
+                        margin-top: $spacing1
+                    &-title
+                        @include h2
+                    .post-meta 
+                        > *
+                            display: inline
+                            &:not(:first-child)::before
+                                content: '—'
+                                margin-right: half($spacing0)
+                        > time
+                            display: inline-block
+                            margin-top: -2px
+                    .post-author
+                        p
+                            display: inline
+                        li
+                            margin-right: $spacing0
+                    .post-categories
+                        li
+                            display: inline-flex
+                            margin-right: $spacing0
+                            padding-bottom: 3px
+                            &:not(:last-child)::after
+                                content: ','
+                            
+        @include in-page-with-sidebar
+            .large
+                .post
+                    @include media-breakpoint-down(xl)
+                        flex-direction: column
+                        gap: unset
+                        p[itemprop="articleBody"]
+                            margin-top: $spacing0
+                    @include media-breakpoint-up(xl)
+                        .media,
+                        .post-content
+                            width: calc(#{col(4, 8)} + #{half($grid-gutter)})
+        @include in-page-without-sidebar
+            .large
+                .post
+                    gap: $grid-gutter
+                    .media
+                        width: col(6)
+                    .post-content
+                        width: col(5)
+                p[itemprop="articleBody"]
+                    margin-top: calc(#{$spacing1} + #{$spacing0})
     &--list
         article
             border-bottom: 1px solid $color-border

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

+{{- $direction := "" -}}
 {{ $heading_level := .heading_level | default 3 }}
-{{ $heading := printf "h%d" $heading_level }}
-<div class="grid">
-  {{ range $post := .posts -}}
-    {{ with site.GetPage (printf "/posts/%s" $post) }}
-      {{ partial "posts/post.html" (dict 
-        "post" .
-        "heading" $heading
-        ) }}
+{{ $heading_tag := partial "GetHeadingTag" (dict 
+        "level" $heading_level
+        "attributes" "class='post-title'"
+)}}
+{{ $index := .index}}
+
+
+<div class="large">
+  {{ range .posts }}
+    {{ with site.GetPage (printf "/posts/%s" .) }}
+
+      {{ if .Params.image }}
+        {{- $direction = partial "GetImageDirection" .Params.image -}}
+      {{ end }}
+
+      <article class='post' itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
+        <div class="post-content">
+          {{- $title := partial "PrepareHTML" .Title -}}
+
+          {{ $heading_tag.open }}
+            <a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a>
+          {{ $heading_tag.close }}
+          
+          <div class="post-meta">
+            {{ if site.Params.posts.index.show_author }}
+              {{- partial "posts/author" . -}}
+            {{ end }}
+            <time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04" }}">{{ .Date | time.Format site.Params.posts.date_format }}</time>
+            {{ if site.Params.posts.index.show_categories }}
+              {{- partial "posts/categories" . -}}
+            {{ end }}
+          </div>
+
+
+          {{ if site.Params.posts.index.show_description }}
+            {{- if (partial "GetTextFromHTML" .Params.summary) -}}
+              {{ if site.Params.posts.index.truncate_description }}
+                <p itemprop="articleBody">{{ partial "GetTruncateContent" ( dict 
+                  "text" .Params.summary
+                  "length" site.Params.posts.index.truncate_description
+                  ) }}</p>
+              {{ else }}
+                <p itemprop="articleBody">{{ partial "PrepareText" .Params.summary }}</p>
+              {{ end }}
+            {{- end -}}
+          {{- end -}}
+          <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
+        </div>
+
+        <div class="media">
+          {{- if .Params.image -}}
+            {{- partial "commons/image.html"
+                  (dict
+                    "image"    .Params.image
+                    "sizes"    site.Params.image_sizes.sections.posts.item
+                  ) -}}
+          {{- else if site.Params.posts.default_image -}}
+            {{- partial "commons/image-default.html" -}}
+          {{- end -}}
+        </div>
+      </article>
     {{ end }}
   {{ end }}
-</div>
+</div>
\ No newline at end of file