diff --git a/assets/sass/_theme/blocks/agenda.sass b/assets/sass/_theme/blocks/agenda.sass
new file mode 100644
index 0000000000000000000000000000000000000000..b005c94765df87d05177c4827448100a2af82e0d
--- /dev/null
+++ b/assets/sass/_theme/blocks/agenda.sass
@@ -0,0 +1 @@
+// Styled in sections/events
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 6ae85fcc23caa32220742e93066aff50c4ae2972..0b6b3fdaa039a95a67a9f78eee6dacc2129bf99e 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -100,9 +100,9 @@ h6, .h6
h1, .h1,
h2, .h2
a
- text-decoration-thickness: 0
+ text-decoration-color: transparent
&:hover
- text-decoration-thickness: 1px
+ text-decoration-color: inherit
@mixin lead($handle-sidebar: true)
font-family: $lead-font-family
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 988f5b9de3f4a14c15ce981f92d986a063e7862c..ce4e16579215c9c322546f4e84759a88945c19df 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -32,6 +32,7 @@
@import "design-system/top"
// Blocks
+@import "blocks/agenda"
@import "blocks/base"
@import "blocks/datatable"
@import "blocks/call_to_action"
diff --git a/assets/sass/_theme/sections/events.sass b/assets/sass/_theme/sections/events.sass
index d6cfe0f1b02d3517db953aedb1dd76858977fc1a..3637a427ae1612d9a42c5e5d5a5850a7412db89e 100644
--- a/assets/sass/_theme/sections/events.sass
+++ b/assets/sass/_theme/sections/events.sass
@@ -1,4 +1,6 @@
.events__page
+ .lead
+ @include h3
@include media-breakpoint-down(desktop)
.document-content
display: flex
@@ -27,8 +29,6 @@
// Safe spacing if post is empty
.document-content
min-height: 350px
- .lead
- @include h3
.events__section
.archive-link
@@ -37,6 +37,11 @@
display: block
text-align: right
text-decoration: none
+ @include media-breakpoint-down(desktop)
+ .events
+ margin-bottom: $spacing2
+ .archive-link
+ text-align: left
.event-infos
margin-bottom: 0
@@ -77,63 +82,192 @@
li:first-child a
padding-left: 0
-// Also presents in block agenda
+.event
+ a
+ text-decoration: none
+ hgroup .event-title
+ margin-bottom: 0
+ &-subtitle
+ @include h3
+ color: $color-text-alt
+ &-categories
+ @include meta
+ margin-top: $spacing0
+ span + span
+ &::before
+ content: ', '
+ &-time
+ span + span
+ @include icon(arrow-right, before)
+ .media
+ &:empty
+ display: none
+ img
+ display: block
+
.events
- .event
- border-bottom: 1px solid $color-border
- display: flex
- flex-direction: column
- margin-bottom: $spacing1
- padding-bottom: $spacing1
- position: relative
- h2, h3
- @include h3
- margin-bottom: $spacing0
- a
- @include stretched-link
- text-decoration: none
- &-dates
- @include meta
- order: 1
- &-content
- order: 2
- &-time
- span + span
- @include icon(arrow-right, before)
- .media
- order: 0
- @include media-breakpoint-up(md)
- .media
- grid-column: 10 / 13
- @include media-breakpoint-down(md)
- .media
- order: 0
- &-content
- order: 1
+ &--list
+ .event
+ border-bottom: 1px solid $color-border
+ display: flex
+ flex-direction: column
+ margin-bottom: $spacing1
+ padding-bottom: $spacing1
+ position: relative
+ h2, h3
+ @include h3
+ a
+ @include stretched-link
+ text-decoration: none
&-dates
- order: 3
- @include media-breakpoint-up(desktop)
- @include grid
- .media
+ @include h4
+ margin-top: half($spacing0)
+ margin-bottom: half($spacing1)
+ &-content
order: 2
- @include in-page-without-sidebar
+ @include media-breakpoint-down(desktop)
+ @include media-breakpoint-up(md)
+ flex-direction: row
+ gap: $spacing1
+ .media
+ width: col(4)
+ &-content
+ order: 1
+ width: col(8)
+ @include media-breakpoint-down(md)
+ .media
+ max-width: 33%
+ margin-bottom: $spacing0
+ &-content
+ order: 1
+ @include media-breakpoint-up(md)
+ .media
+ grid-column: 10 / 13
+ @include media-breakpoint-up(desktop)
+ @include grid
+ .media
+ order: 2
+ @include in-page-without-sidebar
+ &-dates
+ margin-top: 0
+ order: 0
+ grid-column: 1 / 5
+ > span
+ @include h3
+ margin-bottom: $spacing1
+ &-time
+ margin-top: $spacing0
+ @include meta
+ &-content
+ @include grid(10, desktop, 0)
+ order: 1
+ grid-column: 1 / 11
+ > .event-title, > hgroup, .event-description, .event-categories
+ grid-column: 5 / 11
+ > .event-dates
+ grid-column: 0 / 5
+ grid-row: 1 / 4
+ .media
+ grid-column: 11 / 13
+ @include in-page-with-sidebar
+ @include grid(8)
+ &-content
+ order: 1
+ grid-column: 6 span
+ margin-top: half($spacing0)
+ &-time
+ display: inline
+ &::before
+ content: ' — '
+ .media
+ grid-column: 2 span
+
+ &--grid
+ @include grid(2, md, $spacing2)
+ .event
+ display: flex
+ flex-direction: column
+ position: relative
+ &-content
+ a
+ @include stretched-link
&-dates
- order: 0
- grid-column: 1 / 4
+ @extend .meta
+ margin-top: $spacing0
&-content
- order: 1
- grid-column: 4 / 10
+ h2, h3, hgroup
+ @include h3
+ &-description
+ margin-top: $spacing0
.media
- grid-column: 11 / 13
- @include in-page-with-sidebar
- grid-gap: 0 $grid-gutter
- &-dates
- order: 0
- grid-column: 1 / 10
+ margin-bottom: $spacing0
+ order: -1
+ img
+ aspect-ratio: 1
+ object-fit: cover
+ width: 100%
+ @include media-breakpoint-down(md)
+ .event
+ + .event
+ margin-top: $spacing2
+ @include in-page-without-sidebar
+ @include grid(3, desktop)
+
+ &--large
+ .event
+ display: flex
+ flex-direction: row
+ position: relative
+ grid-gap: $grid-gutter
+ + .event
+ margin-top: $grid-gutter
&-content
- order: 1
- grid-column: 1 / 10
- margin-top: half($spacing0)
- &-time
- display: inline
-
\ No newline at end of file
+ position: relative
+ a
+ @include stretched-link
+ &-dates
+ @include meta
+ margin-top: $spacing0
+ @include media-breakpoint-down(md)
+ @include h4
+ &-content
+ flex: 1
+ h2, h3
+ @include h3
+ .more
+ @include icon("arrow-right", after)
+ margin-top: $spacing1
+ &::after
+ margin-left: half($spacing0)
+ .media
+ order: -1
+ img
+ aspect-ratio: 1
+ object-fit: cover
+ width: 100%
+ @include media-breakpoint-up(desktop)
+ .media
+ width: col(4, 8)
+ &-dates
+ @include h3
+ margin-bottom: $spacing2
+ h2, h3, hgroup
+ @include h2
+ @include media-breakpoint-down(desktop)
+ flex-direction: column
+ grid-gap: 0
+ .media
+ margin-left: calc(-#{$grid-gutter-sm} /2)
+ margin-right: calc(-#{$grid-gutter-sm} /2)
+ aspect-ratio: 1
+ img
+ margin-bottom: $spacing0
+ @include in-page-without-sidebar
+ align-items: center
+ &-dates
+ @include h3
+ &-time
+ @include meta
+ &:not(.event--with-image)
+ width: col(5)
+ margin-left: offset(4)
\ No newline at end of file
diff --git a/config.yaml b/config.yaml
index 843c714c3b9d24bcfcbd7ab64c0f9cbf49ea4216..98147ac6cce0a06e57753bfe7efa5cd3e8b75e53 100644
--- a/config.yaml
+++ b/config.yaml
@@ -48,7 +48,7 @@ params:
default_image: false
date_format: ":date_long"
index:
- show_categories: false
+ show_categories: true
show_author: false
show_description: true
truncate_description: 200 # Set to 0 to disable truncate
diff --git a/layouts/partials/blocks/templates/agenda.html b/layouts/partials/blocks/templates/agenda.html
index 08a8fd2e38df168ed00acb71bea28686b891f41b..b84f2f4610cc8fecee0a346dd31a89198f8cae4d 100644
--- a/layouts/partials/blocks/templates/agenda.html
+++ b/layouts/partials/blocks/templates/agenda.html
@@ -1,9 +1,9 @@
{{- $template := .block.template -}}
{{- $position := .block.position -}}
{{- $title := .block.title -}}
-
-{{- with .block.data }}
- <div class="block block-agenda{{ if $title }} block-with-title{{ end }}">
+{{- with .block.data -}}
+ {{- $layout := .layout | default "list" -}}
+ <div class="block block-agenda{{ if $title }} block-with-title{{ end }} block-agenda--{{- $layout }}">
<div class="container">
<div class="block-content">
{{ if or $title .description }}
@@ -18,16 +18,19 @@
{{ end -}}
</div>
{{ end -}}
-
- <div class="events">
+
+ <div class="events events--{{- $layout -}}">
{{ range .events }}
{{ $event := site.GetPage .file }}
{{ with $event }}
- {{ partial "events/event" (dict "event" . ) }}
- {{ end -}}
- {{ end -}}
+ {{ partial "events/event" (dict
+ "event" .
+ "layout" $layout
+ ) }}
+ {{ end }}
+ {{ end }}
</div>
</div>
</div>
</div>
-{{ end -}}
+{{ end -}}
\ No newline at end of file
diff --git a/layouts/partials/events/event.html b/layouts/partials/events/event.html
index efd43851b71925dca3c57dfc836afaaa1d104ed5..d3c38a59367f0b9f1057642856e07dce83dc8a49 100644
--- a/layouts/partials/events/event.html
+++ b/layouts/partials/events/event.html
@@ -1,65 +1,83 @@
{{ $event := .event }}
-{{- $direction := "" -}}
+{{ $layout := .layout | default "list" }}
{{ $heading := .heading | default "h2" }}
{{ $heading_tag := (dict
- "open" ((printf "<%s itemprop='headline'>" $heading) | safeHTML)
+ "open" ((printf "<%s itemprop='headline' class='event-title'>" $heading) | safeHTML)
"close" ((printf "</%s>" $heading) | safeHTML)
) }}
{{ $index := .index }}
{{ $alternate := .alternate }}
{{ with $event }}
+ <article class="event {{ if .Params.image }}event--with-image{{ end -}}" itemscope itemtype="https://schema.org/Event">
+ <div class="event-content">
+ {{- $title := partial "PrepareHTML" .Title -}}
+ {{ if .Params.subtitle }}
+ <hgroup>
+ {{ end }}
+ {{ $heading_tag.open }}
+ <a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}" itemprop="name">{{ $title }}</a>
+ {{ $heading_tag.close }}
+ {{ if .Params.subtitle }}
+ <p class="event-subtitle">{{ .Params.subtitle }}</p>
+ </hgroup>
+ {{ end }}
-{{ if .Params.image }}
- {{- $direction = partial "GetImageDirection" .Params.image -}}
-{{ end }}
-
-<article class="event" itemscope itemtype="https://schema.org/Event">
- <div class="event-content">
- {{- $title := partial "PrepareHTML" .Title -}}
-
- {{ $heading_tag.open }}
- <a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}" itemprop="name">{{ $title }}</a>
- {{ $heading_tag.close }}
+ {{ if (or .Params.dates.computed.short .Params.dates.from.hour .Params.dates.to.hour) }}
+ <div class="event-dates" itemprop="startDate" content="{{- if .Params.dates.from.day -}}{{ .Params.dates.from.day }}{{- end -}} {{- if .Params.dates.from.hour -}}{{ .Params.dates.from.hour }}{{- end -}}">
+ <span>{{ .Params.dates.computed.short }}</span>
+ {{- if (or .Params.dates.from.hour .Params.dates.to.hour)}}
+ <div class="event-time">
+ {{- if .Params.dates.from.hour }}
+ <span>{{ .Params.dates.from.hour }}</span>
+ {{ end -}}
+ {{- if .Params.dates.to.hour }}
+ <span> {{ .Params.dates.to.hour }}</span>
+ {{ end -}}
+ </div>
+ {{ end -}}
+ </div>
+ {{ end }}
- {{ if site.Params.events.index.show_description }}
- {{- if (partial "GetTextFromHTML" .Params.summary) -}}
- <p itemprop="description">
- {{ if site.Params.events.index.truncate_description }}
- {{ partial "GetTruncateContent" ( dict
- "text" .Params.summary
- "length" site.Params.events.index.truncate_description
- ) }}
- {{ else }}
- {{ partial "PrepareText" .Params.summary }}
- {{ end }}
- </p>
+ {{ if and (site.Params.events.index.show_description) }}
+ {{- if (partial "GetTextFromHTML" .Params.summary) -}}
+ <div class="event-description">
+ <p itemprop="description">
+ {{ if site.Params.events.index.truncate_description }}
+ {{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.events.index.truncate_description
+ ) }}
+ {{ else }}
+ {{ partial "PrepareText" .Params.summary }}
+ {{ end }}
+ </p>
+ </div>
+ {{- end -}}
+
+ {{ if .Params.categories }}
+ <p class="event-categories">
+ {{- range $index, $category := .GetTerms "categories" -}}
+ <span>{{- $category.Title -}}</span>
+ {{- end -}}
+ </p>
+ {{ end }}
{{- end -}}
- {{- end -}}
- </div>
- <div class="event-dates" itemprop="startDate" content="{{- if .Params.dates.from.day -}}{{ .Params.dates.from.day }}{{- end -}} {{- if .Params.dates.from.hour -}}{{ .Params.dates.from.hour }}{{- end -}}">
- {{ .Params.dates.computed.short }}
- <div class="event-time">
- {{ if .Params.dates.from.hour }}
- <span>{{ .Params.dates.from.hour }}</span>
- {{ end }}
- {{ if .Params.dates.to.hour }}
- <span> {{ .Params.dates.to.hour }}</span>
+ {{ if eq $layout "large" }}
+ <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
{{ end }}
</div>
- </div>
-
- <div class="media">
- {{- if .Params.image -}}
- {{- partial "commons/image.html"
- (dict
- "image" .Params.image
- "sizes" site.Params.image_sizes.sections.events.item
- ) -}}
- {{- else if site.Params.events.default_image -}}
- {{- partial "commons/image-default.html" -}}
- {{- end -}}
- </div>
-</article>
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.events.item
+ ) -}}
+ {{- else if site.Params.events.default_image -}}
+ {{- partial "commons/image-default.html" -}}
+ {{- end -}}
+ </div>
+ </article>
{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/events/events.html b/layouts/partials/events/events.html
index a23dbdf6b15d93a7692f88f93c3ea7160815cfd0..9df144c6c0bcfbdfe78eb265355468e7e6fd9ef9 100644
--- a/layouts/partials/events/events.html
+++ b/layouts/partials/events/events.html
@@ -1,8 +1,13 @@
-<div class="events events--{{- site.Params.events.index.layout -}}">
+{{ $layout := site.Params.events.index.layout }}
+
+<div class="events events--{{- $layout -}}">
{{ if not .Pages }}
<p>{{ i18n "events.none" }}</p>
{{ end }}
{{ range .Paginator.Pages }}
- {{ partial "events/event.html" (dict "event" . )}}
+ {{ partial "events/event.html" (dict
+ "event" .
+ "layout" $layout
+ )}}
{{ end }}
</div>