Merge pull request #418 from osunyorg/links-block

Links block

assets/sass/_theme/blocks/links.sass

+.block-links
+    ul
+        @include list-reset
+        @include grid(2, md)
+        align-items: flex-start
+    li
+        @include icon(link-blank, after, true)
+        background-color: $block-lien-card-background
+        display: flex
+        flex-direction: column-reverse
+        justify-content: flex-end
+        min-height: pxToRem(130)
+        position: relative
+        &::after
+            position: absolute
+            bottom: space(4)
+            right: space(4)
+        .link-content
+            padding: space(4)
+            line-height: 100%
+        a
+            @include stretched-link(before)
+            text-decoration: none
+        p
+            @include small
+            margin-top: space(3)
+        .media
+            aspect-ratio: 16/9
+            position: relative
+            img
+                display: block
+                aspect-ratio: 16/9
+                object-fit: cover
+    @include in-page-without-sidebar
+        .top
+            display: flex
+            gap: var(--grid-gutter)
+            .block-title
+                width: columns(4)
+            .description
+                flex: 1
+                margin-top: 0
+        ul
+            @include grid(3, md)
+    @include media-breakpoint-down(desktop)
+        ul
+            li + li
+                margin-top: $spacing-3
\ No newline at end of file

assets/sass/_theme/configuration/blocks.sass

@@ -103,3 +103,6 @@ $block-image-max-height-without-sidebar: none !default
 
 // Block video
 $block-video-background: var(--color-background-alt) !default
+
+// Block liens
+$block-lien-card-background: var(--color-background-alt) !default
\ No newline at end of file

assets/sass/_theme/hugo-osuny.sass

@@ -53,6 +53,7 @@
 @import blocks/image
 @import blocks/key_figures
 @import blocks/license
+@import blocks/links
 @import blocks/organizations
 @import blocks/pages
 @import blocks/persons

config.yaml

@@ -168,6 +168,10 @@ params:
         mobile:   480x850
         tablet:   768x1360
         desktop:  1920x1920
+      links:
+        mobile:   350
+        tablet:   400
+        desktop:  750
       organizations:
         mobile:   164
         tablet:   216

layouts/partials/blocks/templates/links.html

+{{- $block := .block -}}
+{{- $block_class := partial "GetBlockClass" .block -}}
+
+{{- with .block.data -}}
+  <div class="{{ $block_class }}">
+    <div class="container">
+      <div class="block-content">
+        {{ partial "blocks/top.html" (dict
+          "title" $block.title
+          "heading_level" $block.ranks.self
+          "description" .description
+        )}}
+        
+        <ul class="links">
+          {{- range .links }}
+            <li itemscope itemtype="https://schema.org/WebPage">
+              <div class="link-content">
+                {{- $title := partial "PrepareHTML" .title -}}
+                {{- $url := .url -}}
+                <link itemprop="url" href="{{ .url }}">
+                <a itemprop="relatedLink" href="{{ .url }}" title="{{ $title }}"><span itemprop="name">{{- $title -}}</span></a>
+                <p>{{ .description | safeHTML }}</p>
+              </div>
+              {{- if .image -}}
+                <div class="media">
+                  {{- partial "commons/image.html"
+                    (dict
+                      "image"    .image
+                      "alt"      .alt
+                      "sizes"    site.Params.image_sizes.blocks.links
+                  ) -}}
+                </div>
+              {{- end -}}
+            </li>
+          {{ end -}}
+        </ul>
+      </div>
+    </div>
+  </div>
+{{- end -}}