diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 06f3807c777818c97187f029bf162eb2414517a9..0d55a256d36ff8e346d330b4427531f498dcb940 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -71,9 +71,11 @@ $spacing3: 64px !default
$spacing4: 128px !default
$spacing5: 256px !default
+// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
+
// Grid
$grid-gutter: $spacing3 !default
-$grid-max-width: 1980px
+$grid-max-width: 1980px !default
$grid-gutter-sm: $spacing1 !default
// Z-index
@@ -99,7 +101,7 @@ $body-overlay-color: rgba(0, 0, 0, 0.3) !default
// Footer
$footer-color: $main-color !default
-$footer-background-color: darken($main-background-color, 2.5) !default
+$footer-background-color: color-contrast($main-background-color, 3%) !default
// Hero
$hero-height: 375px !default
@@ -146,13 +148,13 @@ $block-call-to-action-button-color: invert($block-call-to-action-color) !default
// Block definitions
$definition-border-color: $main-border-color !default
-$definition-border-color-hovered: darken($definition-border-color, 100) !default
+$definition-border-color-hovered: color-contrast($definition-border-color, 100%) !default
// Block pages
-$block-pages-card-background: lighten($main-background-color, 1) !default
+$block-pages-card-background: color-contrast($main-background-color, 10%) !default
$block-pages-card-page-background: white !default
$block-pages-card-page-color: $main-color !default
-$block-pages-card-page-background-hover: darken($main-background-color, 100) !default
+$block-pages-card-page-background-hover: color-contrast($main-background-color, 100%) !default
$block-pages-card-page-color-hover: white !default
// Block timeline
@@ -160,8 +162,8 @@ $block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default
// Block testimonials
-$block-testimonials-xl-font-size: px2rem(50) !default
-$block-testimonials-xl-line-height: px2rem(55) !default
+$block-testimonials-xl-font-size: $h1-size !default
+$block-testimonials-xl-line-height: px2rem(65) !default
$block-testimonials-xl-font-size-long-text: px2rem(36) !default
$block-testimonials-xl-line-height-long-text: px2rem(39.6) !default
$block-testimonials-font-size: px2rem(24) !default
@@ -170,16 +172,18 @@ $block-testimonials-pagination-background: $main-border-color !default
$block-testimonials-pagination-progress-background: $main-color !default
// Block key_figures
-$block-key_figures-number-font-size: px2rem(60)
+$block-key_figures-number-font-size: px2rem(60) !default
// Sections
-$widget-media-background: darken($main-background-color, 2) !default
-$widget-title-size: $h4-size !default
-$widget-title-size-md: $h4-size-md !default
-$post-media-background: $widget-media-background !default
+$article-title-size: $h4-size !default
+$article-title-size-md: $h4-size-md !default
+$article-media-background: color-contrast($main-background-color, 3%) !default
+$article-title-size: $h4-size !default
+
+$post-media-background: $article-media-background !default
$post-media-aspect-ratio: 50% !default
-$post-categories-color: lighten($main-color, 2) !default
-$post-time-color: lighten($main-color, 2) !default
+$post-categories-color: color-contrast($main-color, 20%) !default
+$post-time-color: color-contrast($main-color, 20%) !default
// Table of content
$toc-color: $main-color !default
diff --git a/assets/sass/_theme/_default_configuration.sass b/assets/sass/_theme/_default_configuration.sass
deleted file mode 100644
index 5e116ca9c354c58041b3a8e195a3fbbc7e1739d9..0000000000000000000000000000000000000000
--- a/assets/sass/_theme/_default_configuration.sass
+++ /dev/null
@@ -1,94 +0,0 @@
-$icons: ()
-$icons: map-merge($icons, ("arrow": "\e905"))
-$icons: map-merge($icons, ("arrow-first": "\e906"))
-$icons: map-merge($icons, ("arrow-last": "\e907"))
-$icons: map-merge($icons, ("arrow-left": "\e908"))
-$icons: map-merge($icons, ("arrow-right": "\e909"))
-$icons: map-merge($icons, ("burger": "\e902"))
-$icons: map-merge($icons, ("caret": "\e904"))
-$icons: map-merge($icons, ("caret-bottom": "\e911"))
-$icons: map-merge($icons, ("caret-left": "\e912"))
-$icons: map-merge($icons, ("caret-right": "\e913"))
-$icons: map-merge($icons, ("caret-top": "\e914"))
-$icons: map-merge($icons, ("close": "\e90e"))
-$icons: map-merge($icons, ("download": "\e900"))
-$icons: map-merge($icons, ("eye": "\e901"))
-$icons: map-merge($icons, ("link-blank": "\e903"))
-$icons: map-merge($icons, ("play": "\e910"))
-$icons: map-merge($icons, ("pause": "\e90f"))
-$icons: map-merge($icons, ("social": "\e915"))
-$icons: map-merge($icons, ("instagram": "\e90a"))
-$icons: map-merge($icons, ("facebook": "\e90b"))
-$icons: map-merge($icons, ("linkedin": "\e90c"))
-$icons: map-merge($icons, ("twitter": "\e90d"))
-
-// Bootstrap
-$primary: #000000 !default
-$secondary: #666666 !default
-$black: #000000 !default
-$light: #f8f9fa !default
-
-$border-radius: 0 !default
-$border-radius-sm: 0 !default
-$border-radius-lg: 0 !default
-
-$breadcrumb-margin-bottom: 0 !default
-
-$modal-backdrop-opacity: .7 !default
-$modal-content-border-width: 0 !default
-$modal-inner-padding: 1.5rem !default
-
-$pagination-bg: transparent !default
-$pagination-disabled-bg: transparent !default
-
-// header banner
-$enable-header-sticky: false !default
-$header-background-color: white !default
-$header-color: black !default
-$header-hover-color: $header-color !default
-$header-height: 60px !default
-$header-height-md: 70px !default
-$header-transition: 0.4s !default
-$header-zindex: 10 !default
-
-// menu mobile deploy
-$menu-background-color: white !default
-
-// hero
-$breadcrumb-link-color: white !default
-$hero-background-color: $primary !default
-$hero-color: white !default
-$hero-height: 375px !default
-$hero-height-md: 450px !default
-
-// footer
-$footer-background: $light !default
-$footer-color: $black !default
-
-// block call to action
-$block-call-to-action-background: $primary !default
-$block-call-to-action-color: white !default
-
-// block pages
-$block-pages-card-background: #F8F9FA !default
-$block-pages-card-page-background: white !default
-$block-pages-card-page-color: $primary !default
-$block-pages-card-page-background-hover: $primary !default
-$block-pages-card-page-color-hover: white !default
-
-// block timeline
-$block-timeline-horizontal-background: black !default
-$block-timeline-horizontal-color: white !default
-
-// table
-$table-cell-padding-y: 1rem !default
-$table-th-font-weight: bold !default
-$table-border-width: 1px !default
-$table-border-color: rgba(0, 0, 0, 0.5) !default
-
-// toc
-$toc-height: 78px !default
-
-// pages list
-$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2)
-$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1)
\ No newline at end of file
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 8a796575e6730e14bd08c7737f20adfc95771173..509a9a489034672f1ec0acaac3acb6f199fcbfce 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -121,7 +121,7 @@
right: 0
top: 0
-@mixin widget($background: null)
+@mixin article($background: null)
position: relative
display: flex
flex-direction: column
@@ -131,7 +131,7 @@
order: -1
overflow: hidden
.title
- font-size: $widget-title-size
+ font-size: $article-title-size
margin-bottom: px2rem(5)
@include media-breakpoint-up(md)
font-size: $widget-title-size-md
@@ -179,3 +179,8 @@
left: $left
right: $right
top: $top
+
+@function color-contrast($color, $amount)
+ @if lightness($color) > 50%
+ $amount: $amount * -1
+ @return scale-color($color, $lightness: $amount)
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index 2157d4602df62889fafb2acc843f917434f851ed..e1e5e2320734ff52f254bf9c22f2cca6d2aab0a6 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -12,7 +12,6 @@
img,
picture
display: block
-
> a
transition: opacity .3s ease
&:hover
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index bb929307ff8b511e7437901b33b272d0c6997b5b..3d3a648cf2856d1adfe46055b5e1c6cd1e243fa0 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -159,15 +159,12 @@ body
font-size: px2rem(13)
text-decoration: none
padding: $spacing0
- display: block
&::before
font-size: px2rem(13)
&:hover
opacity: 0.7
&::after
content: none
- // &:last-child
- // margin-right: -0.75rem
span
display: none
@@ -198,6 +195,7 @@ body
flex: 1 1
text-align: center
a
+ display: block
color: invert($hero-color)
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
new file mode 100644
index 0000000000000000000000000000000000000000..09f9272bd8074d92941bb2d53c30f3b2648c2744
--- /dev/null
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -0,0 +1,103 @@
+.pagination
+ // font-family: $font-family-sans-serif
+ font-size: px2rem(14)
+ justify-content: center
+ margin: #{$grid-gutter * 2.5} 0 0
+ li
+ // @extend .page-item
+ a
+ // @extend .page-link
+
+ .disabled
+ a::before
+ opacity: .3
+
+ &:not(&-between-pages)
+ li
+ &:first-child,
+ &:nth-child(2),
+ &:nth-last-child(2),
+ &:last-child
+ a
+ // @extend .icon
+ &:first-child
+ a
+ @include icon(arrow-first)
+ &:nth-child(2)
+ a
+ @include icon(arrow-left)
+ &:nth-last-child(2)
+ a
+ @include icon(arrow-right)
+ &:last-child
+ a
+ @include icon(arrow-last)
+ a::before
+ font-size: px2rem(12)
+
+ &-between-pages
+ @include list-reset
+ display: flex
+ justify-content: space-between
+ margin-top: $spacing3
+ li
+ flex: 1
+ a
+ background-color: transparent
+ border: 0
+ text-decoration: none
+ &:hover
+ background-color: transparent
+ text-decoration: underline
+ span
+ text-decoration: none
+
+ span
+ // color: $gray-600
+ &::before, &::after
+ font-size: px2rem(12)
+
+ .previous
+ padding-left: 0
+ span
+ @include icon(arrow-left, before)
+ &::before
+ margin-right: px2rem(5)
+ .next
+ padding-right: 0
+ text-align: right
+ span
+ @include icon(arrow-right, after)
+ &::after
+ margin-left: px2rem(5)
+
+ @include media-breakpoint-down(md)
+ flex-direction: column-reverse
+ margin-left: 0
+ margin-right: 0
+ li.previous,
+ li.next
+ // border-top: 1px solid $gray-500
+ text-align: left
+ a
+ padding: px2rem(20) px2rem(40) px2rem(20) 0
+ &::after
+ @include icon
+ font-size: px2rem(12)
+ opacity: 0.5
+ position: absolute
+ right: 0
+ top: 50%
+ transform: translateY(-50%)
+ span
+ &::after,
+ &::before
+ content: none
+
+ li.previous
+ border-bottom: 1px solid $main-border-color
+ a
+ @include icon(arrow-left)
+ li.next
+ a
+ @include icon(arrow-right)
diff --git a/assets/sass/_theme/design-system/table.sass b/assets/sass/_theme/design-system/table.sass
index 31eff6550cc2e82d0659011c140b86fd11d6966e..35e5e6fb9c5f998c94839a3367069f16e4fbc66e 100644
--- a/assets/sass/_theme/design-system/table.sass
+++ b/assets/sass/_theme/design-system/table.sass
@@ -6,12 +6,12 @@ table
text-align: left
caption
- padding: px2rem(10) 0
+ padding: $spacing0 0
text-align: left
th,
td
- padding: px2rem(10) 0
+ padding: $spacing0 0
thead
th
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 4e96a4646c6980a80d2e9dbd1aa528a24eefbca4..5a0478d2b70d242ffa897f7bcb4c2fc44d2f97df 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -20,6 +20,7 @@
@import "design-system/grid"
@import "design-system/header"
@import "design-system/hero"
+@import "design-system/pagination"
@import "design-system/nav"
@import "design-system/table"
@import "design-system/table_of_content"
diff --git a/assets/sass/_theme/sections/articles.sass b/assets/sass/_theme/sections/articles.sass
index 536aa46f4e06fbacaae56fcd4999329881edd4af..3f4d32598eb3abcf6ab43670d17990ae197f7a73 100644
--- a/assets/sass/_theme/sections/articles.sass
+++ b/assets/sass/_theme/sections/articles.sass
@@ -1,5 +1,5 @@
.article
- @include widget
+ @include article
.articles
@include grid(2, md)
diff --git a/assets/sass/_theme/sections/organizations.sass b/assets/sass/_theme/sections/organizations.sass
index 035c2b618322243f42745e5f32d3cb7642aac627..aecc02ea2c13ecb932ae0468f2960359f474f8f2 100644
--- a/assets/sass/_theme/sections/organizations.sass
+++ b/assets/sass/_theme/sections/organizations.sass
@@ -1,5 +1,5 @@
.organization
- @include widget
+ @include article
.organizations
@include grid(2)
diff --git a/assets/sass/_theme/sections/pages.sass b/assets/sass/_theme/sections/pages.sass
index 2f648c7c86c530d44d790b42b19753c08a58e4f6..1759a6703c498311d460323abe2f3a9c0fd80ef8 100644
--- a/assets/sass/_theme/sections/pages.sass
+++ b/assets/sass/_theme/sections/pages.sass
@@ -1,5 +1,5 @@
.page
- @include widget
+ @include article
.title
a
diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass
index f81266e473a33009a0a3fa1750ecd60e4eefe349..4e08d28f0aebee28feec25917a6f7ebc0fbd11cc 100644
--- a/assets/sass/_theme/sections/persons.sass
+++ b/assets/sass/_theme/sections/persons.sass
@@ -1,5 +1,5 @@
.person
- @include widget
+ @include article
.avatar
margin-bottom: $spacing1
@@ -59,7 +59,7 @@ ol.persons
@include aspect-ratio(50, 50, 'img')
background-color: $persons-avatar-background-color
border-radius: 50%
- margin-bottom: px2rem(40)
+ margin-bottom: $spacing2
overflow: hidden
position: relative
width: 100%
diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass
index 523d4098304b1ba0bab2ebdffc40b0905ff3ff29..565480f01a977c74187cdfa341e7f0bb7b25c267 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -1,5 +1,5 @@
.post
- @include widget($post-media-background)
+ @include article($post-media-background)
/* TODO toujours d'actualité ou propre à un site ?
.author,
@@ -35,7 +35,7 @@
.table-infos
border-top: 1px solid $main-border-color
- font-size: px2rem(14)
+ font-size: $small-font-size
margin-bottom: 0
ul
@include list-reset
@@ -43,7 +43,7 @@
@include visually-hidden
position: relative !important // Fix safari iOS border issue
th
- // color: $gray-600
+ color: color-contrast($main-color, 25%)
font-weight: 400
padding-left: 0
white-space: nowrap
@@ -54,3 +54,13 @@
text-align: right
.share
justify-content: flex-end
+ li:last-child
+ margin-right: -$spacing0
+
+.related
+ margin-top: $spacing1
+ .posts
+ @include grid(2, md)
+ margin-bottom: 0
+ .link
+ @extend .link-more
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 0b4e63684301d1d6797375daa2ce637a6e86bae0..6f2c8203d54328ccea0b9bf012b54861274af1e2 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -48,7 +48,7 @@
.program
- @include widget
+ @include article
div.programs,
section.programs
@@ -79,7 +79,6 @@ ol.programs
& + a
text-align: right
-
.programs__section
.hero
display: block
diff --git a/assets/sass/_theme/sections/volumes.sass b/assets/sass/_theme/sections/volumes.sass
index f68c0343f9d14cb78e5a4e12087ca010b102e7da..5e04f349ff1e9f9e18cebab313cc916e4c1adc2f 100644
--- a/assets/sass/_theme/sections/volumes.sass
+++ b/assets/sass/_theme/sections/volumes.sass
@@ -1,5 +1,5 @@
.volume
- @include widget
+ @include article
.volumes
@include grid(2, md)
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 8b13849ed2375f6e77d3413b04153d3095e94d43..01a934befa53e44453f534ba86ad76a94599a2a7 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -8,39 +8,25 @@
{{ if .Params.description_short }}<meta itemprop="abstract" content="{{ partial "PrepareHTML" .Params.description_short }}">{{ end }}
{{ if .Summary }}<meta itemprop="description" content="{{ partial "PrepareHTML" .Summary }}">{{ end }}
- {{- if .Params.blocks }}
- <div class="content-blocks">
- {{ partial "posts/aside.html" . }}
- <div class="blocks blocks-chapo">
- <div class="container">
- <div class="block-content">
- {{ partial "posts/chapo.html" .Params.description_short }}
- {{ partial "posts/image.html" .Params.image }}
- </div>
- </div>
- </div>
- {{ partial "blocks/list.html" .Params.blocks }}
- <div class="blocks blocks-pagination">
- <div class="container">
- <div class="block-content">
- {{ partial "posts/prevnext.html" . }}
- </div>
- </div>
- </div>
- </div>
- {{ else }}
- <div class="container">
- <div class="content">
- {{ partial "posts/aside.html" . }}
- <div>
+ <div class="content-blocks">
+ {{ partial "posts/aside.html" . }}
+ <div class="blocks blocks-chapo">
+ <div class="container">
+ <div class="block-content">
{{ partial "posts/chapo.html" .Params.description_short }}
{{ partial "posts/image.html" .Params.image }}
{{ partial "posts/body.html" . }}
+ </div>
+ </div>
+ </div>
+ {{ partial "blocks/list.html" .Params.blocks }}
+ <div class="blocks blocks-pagination">
+ <div class="container">
+ <div class="block-content">
{{ partial "posts/prevnext.html" . }}
</div>
</div>
</div>
- {{ end -}}
-
+ </div>
</article>
{{ end }}