diff --git a/assets/sass/_theme/blocks/links.sass b/assets/sass/_theme/blocks/links.sass new file mode 100644 index 0000000000000000000000000000000000000000..2b22eb0451acb802f02a510132f8d0872f945515 --- /dev/null +++ b/assets/sass/_theme/blocks/links.sass @@ -0,0 +1,48 @@ +.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 diff --git a/assets/sass/_theme/configuration/blocks.sass b/assets/sass/_theme/configuration/blocks.sass index 25331466971a38677f679488fd381897570e1bb0..81391cec2bafb94ecd3285f998a8658a058dd532 100644 --- a/assets/sass/_theme/configuration/blocks.sass +++ b/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 diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass index 19cddbd5fd91ebe1a4fb741efa69f91ab5541037..23c8756c4e5173413bccfa01817c89dd4097d1bd 100644 --- a/assets/sass/_theme/hugo-osuny.sass +++ b/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 diff --git a/config.yaml b/config.yaml index 578ffa2b69d08e71ba28e01384755ce5247fdd97..4298fdfd3a2d51023e234a4b44f2575425723369 100644 --- a/config.yaml +++ b/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 diff --git a/layouts/partials/blocks/templates/links.html b/layouts/partials/blocks/templates/links.html new file mode 100644 index 0000000000000000000000000000000000000000..3bdbc153d28f70abf36c3da06c66a7b8e662604f --- /dev/null +++ b/layouts/partials/blocks/templates/links.html @@ -0,0 +1,40 @@ +{{- $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 -}}