diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index dfad41b97db026ced7e0390ceb0444450d493d31..03d1509a0ff7cd67907501e8c7fd8fbfc8f87e5a 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -2,18 +2,22 @@
$color-accent: #0038FF !default
$color-text: #000000 !default
$color-text-alt: #454545 !default
-$color-border: rgba(0, 0, 0, 0.30) !default
-$color-background-alt: #F2F2F2 !default
$color-background: #FFFFFF !default
+$color-background-alt: #F2F2F2 !default
+$color-border: rgba(0, 0, 0, 0.30) !default
+$color-selection: $color-background !default
+$color-selection-background: rgba($color-text, .7) !default
// Scheme Dark colors (enable dark mode in your hugo configuration file)
$has-dark-mode: true
$color-dark-accent: rgb(120, 208, 255) !default
$color-dark-text: #ffffff !default
$color-dark-text-alt: #cbcbcb !default
-$color-dark-border: rgba(255, 255, 255, 0.3) !default
-$color-dark-background-alt: #202020 !default
$color-dark-background: #000000 !default
+$color-dark-background-alt: #181919 !default
+$color-dark-border: rgba(255, 255, 255, 0.3) !default
+$color-dark-selection: $color-dark-background !default
+$color-dark-selection-background: rgba($color-dark-text, .7) !default
$body-color: var(--color-text) !default
$body-background-color: var(--color-background) !default
@@ -36,12 +40,12 @@ $spacing-6: space(32) // 128px
$spacing-7: space(64) // 256px
// Deprecated variables
-// $spacing0: space(3) !default
-// $spacing1: space(6) !default
-// $spacing2: space(12) !default
-// $spacing3: space(16) !default
-// $spacing4: space(32) !default
-// $spacing5: space(64) !default
+// $spacing0: space(3) --> $spacing-2
+// $spacing1: space(6) --> $spacing-3
+// $spacing2: space(12) --> $spacing-4
+// $spacing3: space(16) --> $spacing-5
+// $spacing4: space(32) --> $spacing-6
+// $spacing5: space(64) --> $spacing-7
// TYPOGRAPHY
@@ -438,6 +442,9 @@ $posts-grid-columns: $block-posts-grid-columns !default
// Person
$persons-avatar-background-color: var(--color-background-alt) !default
+// Organization
+$organization-background-color: $color-background-alt !default // Use sass variable color-background To avoid dark logo on darkmode background-alt color
+
// Program
$program-essential-font-size: $meta-size !default
$program-essential-font-size-desktop: $meta-size-desktop !default
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 3064a2cc2e73428b9a5acc49ba9e50513bf5d20e..312329e7a443746849a5e27f293037e5d3a0da2f 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -1,4 +1,5 @@
@import utils/fonts
+@import utils/colors
@import utils/grid
@import utils/icons
@import utils/links
diff --git a/assets/sass/_theme/_variables.sass b/assets/sass/_theme/_variables.sass
index d27039199d0b54494e874aca8e75f19ef9a5f3b3..dcf5670c1166fab06f78dba6055531ce33a9f1c6 100644
--- a/assets/sass/_theme/_variables.sass
+++ b/assets/sass/_theme/_variables.sass
@@ -5,6 +5,8 @@
--color-accent: #{$color-accent}
--color-text: #{$color-text}
--color-text-alt: #{$color-text-alt}
+ --color-selection: #{$color-selection}
+ --color-selection-background: #{$color-selection-background}
--color-border: #{$color-border}
--color-background-alt: #{$color-background-alt}
--color-background: #{$color-background}
@@ -17,6 +19,8 @@
--color-border: #{$color-dark-border}
--color-background-alt: #{$color-dark-background-alt}
--color-background: #{$color-dark-background}
+ --color-selection: #{$color-dark-selection}
+ --color-selection-background: #{$color-dark-selection-background}
// -------------- //
// TYPOGRAPHY //
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index d70585e4e2738c1e9fdaaaf6589577333ff70772..3f311a5f89ca508c2ea0e35211a3715763807a32 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -27,13 +27,12 @@
flex-direction: column
a
@include meta
+ @extend %underline-on-hover
color: $block-call-to-action-color
margin-right: $spacing-3
margin-top: $spacing-3
- text-decoration-color: rgba($block-call-to-action-color, .3)
display: inline-block
- &:hover
- text-decoration-color: $block-call-to-action-color
+ text-decoration-color: alphaColor($block-call-to-action-color, 0.3)
&:first-child
@include btn
background: $block-call-to-action-button-background
diff --git a/assets/sass/_theme/blocks/contact.sass b/assets/sass/_theme/blocks/contact.sass
index 5b8e1dc38937a5afc76a25bbbe98b9b50ab12d59..acc9cf80aed24df47e756ce702605106a9ca9028 100644
--- a/assets/sass/_theme/blocks/contact.sass
+++ b/assets/sass/_theme/blocks/contact.sass
@@ -14,8 +14,7 @@
[itemprop="name"]
@include h4
a
- &:not(:hover)
- text-decoration-color: transparent
+ @extend %underline-on-hover
+ ul
margin-top: $spacing-4
ul
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index 9223e15c4fcbfa6e9a77fd75e3d8b94eff8ff442..1f09a9ae46cb9213c88ceebbb293fb4713985dbe 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -101,7 +101,6 @@
@include arrow-right-hover
@include icon-block(arrow-right, after)
@include link($block-pages-card-page-color)
- @include text-underline
position: relative
margin-top: auto
padding-top: $spacing-3
@@ -124,9 +123,6 @@
&--list
ul
@include list-reset
- &.title-only
- li
- line-height: 1
li
display: block
+ li
@@ -135,15 +131,14 @@
@include icon(arrow, before, true)
padding-right: $spacing-2
@include hover-translate-icon(before, 5)
- @include link
- text-decoration-color: rgba(0,0,0,0)
+ @extend %underline-on-hover
article
.page-title
@include h3
a
@include icon(arrow, after, true)
@include hover-translate-icon(after)
- text-decoration-color: transparent
+ @extend %underline-on-hover
@include media-breakpoint-down(desktop)
.top
margin-bottom: $spacing-2
@@ -273,7 +268,7 @@
@include hover-translate-icon(after)
&:hover .more:after
transform: translateX(#{pxToRem(10)})
- &-title a
+ &-title a
@include stretched-link
.media
img
@@ -303,5 +298,5 @@
margin-bottom: space(4)
&-content
width: columns(5)
- .media
+ .media
width: columns(6)
diff --git a/assets/sass/_theme/dependencies/splide.sass b/assets/sass/_theme/dependencies/splide.sass
index fce97da6a5c7e83d97a282e10b6a66caec7d5298..bc7396131441fbb13bc9730ffb3d883dfcd8fced 100644
--- a/assets/sass/_theme/dependencies/splide.sass
+++ b/assets/sass/_theme/dependencies/splide.sass
@@ -25,7 +25,7 @@
padding: 0
width: 48px
&::before
- background-color: rgba($link-color, 0.3)
+ background-color: alphaColor($link-color, 0.3)
border-radius: 50%
content: ""
display: block
@@ -35,7 +35,7 @@
width: 10px
&:hover
&::before
- background-color: rgba($link-color, 0.6)
+ background-color: alphaColor($link-color, 0.6)
&.is-active
&::before
background-color: $link-color
diff --git a/assets/sass/_theme/design-system/breadcrumb.sass b/assets/sass/_theme/design-system/breadcrumb.sass
index 6a07bbb3a74d168a06600596c1042025b4acad7d..64358a15f58d2ae5e4f8eb9616ac3ee6ab7c70b9 100644
--- a/assets/sass/_theme/design-system/breadcrumb.sass
+++ b/assets/sass/_theme/design-system/breadcrumb.sass
@@ -13,10 +13,8 @@
@include meta
a
color: $breadcrumb-color
- text-decoration-color: rgba($breadcrumb-color, 0)
line-height: 1
- &:hover
- text-decoration-color: rgba($breadcrumb-color, 1)
+ @extend %underline-on-hover
&.active
color: $breadcrumb-color-active
&:not(:first-child)
diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass
index a3b63827105b3c55b0138fd2cefd0136dcfa529e..a8b276755467abe7d3476c1b259c74e8d0fc8b5a 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -7,28 +7,28 @@ footer#document-footer
@include media-breakpoint-down(desktop)
z-index: $zindex-footer
a
- @include link($footer-color)
+ color: $footer-color
+ @extend %underline-on-hover
.logo
- text-decoration: none
+ @extend %logo
img
height: $footer-logo-height
max-width: 100%
- width: auto
@include media-breakpoint-up(desktop)
height: $footer-logo-height-desktop
- .logo-text
- @include h2
ul
@include list-reset
li
+ li
margin-top: $spacing-2
a
- @include link($footer-color)
- text-decoration-color: transparent
+ // @include link($footer-color)
+ @extend %underline-on-hover
.footer
&-site
@include small
+ * + *
+ margin-top: $spacing-2
&-social, &-legals, &-credit
@include meta
&-credit
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 8a79a1ecb5af76e1088dd8a995cd61cf26d5f504..a2940aaa2922cba9a878c839f5d29850d6a9470f 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -39,25 +39,14 @@ header#document-header
&:not(:hover)
transform: translateY(-100%)
.logo
+ @extend %logo
color: $header-color
- text-decoration: none
img
- display: block
height: $header-logo-height
- width: auto
@if $header-sticky-invert-logo
transition: filter $header-sticky-transition
@include media-breakpoint-up(desktop)
height: $header-logo-height-desktop
- .logo-darkmode
- display: none
- @media (prefers-color-scheme: dark)
- > img:first-child
- display: none
- .logo-darkmode
- display: block
- .logo-text
- @include h2
@include media-breakpoint-down(desktop)
html.has-menu-opened &
nav
diff --git a/assets/sass/_theme/design-system/logo.sass b/assets/sass/_theme/design-system/logo.sass
new file mode 100644
index 0000000000000000000000000000000000000000..99192af969b7597672b897db8e72e6d89c56a2cf
--- /dev/null
+++ b/assets/sass/_theme/design-system/logo.sass
@@ -0,0 +1,15 @@
+%logo
+ color: inherit
+ text-decoration: none
+ img
+ display: block
+ width: auto
+ .logo-darkmode
+ display: none
+ .logo-text
+ @include h2
+ @media (prefers-color-scheme: dark)
+ > img:first-child
+ display: none
+ .logo-darkmode
+ display: block
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 2c414dd61699ff03b0231ee6d0aac930d39cc64a..82807bf5996a5e5c19ec408fb31ea04a7260cb16 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -57,9 +57,7 @@
overflow: auto
a
color: $header-dropdown-color
- &:hover,
- &:focus
- text-decoration-color: $header-dropdown-color
+ @extend %underline-on-hover
.dropdown-menu-title
@include h2
diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass
index f5e7201d8b950da5c06ffd9aa071099a28284b16..2d075daaeb476dd733e00e493ee9b7f4089b5057 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -85,7 +85,7 @@
&__form
@include icon(search-inline, after)
&::after
- color: rgba(var(--color-text-alt), .6)
+ color: alphaColor(var(--color-text-alt), .6)
position: fixed
pointer-events: none
z-index: 9
diff --git a/assets/sass/_theme/design-system/table_of_contents.sass b/assets/sass/_theme/design-system/table_of_contents.sass
index 64cd74d26c8202a5d0e518423f69389b58e66bb4..c72d4b4d491a517e767514e92c52ff906c331eac 100644
--- a/assets/sass/_theme/design-system/table_of_contents.sass
+++ b/assets/sass/_theme/design-system/table_of_contents.sass
@@ -184,9 +184,7 @@
a
color: $toc-color
display: block
- text-decoration-color: transparent
- &:hover
- text-decoration-color: $toc-color
+ @extend %underline-on-hover
.active
color: $toc-active-color
pointer-events: none
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 8fa64826cc0968d90e298f88b5477c07ab932787..423881be700f040b4adc5bb15fe3745128dd2af5 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -89,9 +89,7 @@ h6, .h6
h1, .h1,
h2, .h2
a
- text-decoration-color: transparent
- &:hover
- text-decoration-color: inherit
+ @extend %underline-on-hover
@mixin lead($handle-sidebar: true)
font-family: $lead-font-family
@@ -150,13 +148,6 @@ h2, .h2
small, .small
@include small
-@mixin rich-text
- word-break: break-word
- h1, h2, h3, h4, h5, h6, p, ul
- margin-top: $spacing-3
- &:first-child, meta + &
- margin-top: 0
-
%multiple-lists
ul, ol
ul, ol
@@ -165,8 +156,12 @@ small, .small
padding-left: $spacing-3
.rich-text
- @include rich-text
+ word-break: break-word
@extend %multiple-lists
+ h1, h2, h3, h4, h5, h6, p, ul
+ margin-top: $spacing-3
+ &:first-child, meta + &
+ margin-top: 0
.content
section
@@ -180,7 +175,7 @@ small, .small
line-height: inherit
[itemprop="articleBody"]
- @include rich-text
+ @extend .rich-text
@mixin blockquote
margin: 0
@@ -202,9 +197,8 @@ p
margin-bottom: 0
+ p
margin-top: $spacing-2
-
-p:empty
- display: none
+ &:empty
+ display: none
p + ul,
p + ol
@@ -275,6 +269,14 @@ a,
font-size: pxToRem(10)
margin-right: pxToRem(5)
+%underline-on-hover
+ text-decoration-color: alphaColor(currentColor, 0)
+ text-decoration-thickness: $link-underline-thickness
+ text-underline-offset: $link-underline-offset
+ transition: $link-transition
+ &:hover
+ text-decoration-color: currentColor
+
dd
margin-bottom: 0.5rem
margin-left: 0
@@ -284,9 +286,8 @@ abbr, abbr[title]
text-decoration-style: dotted
::selection
- background: rgba(var(--color-text), .7)
- color: var(--color-background)
- text-shadow: none
+ background: var(--color-selection-background)
+ color: var(--color-selection)
sub,
sup
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 0126f13d8e07dc0b163eda8622545927abce05b0..aaeab07820e035608b91228a527223bcad6c9a30 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -1,82 +1,83 @@
// Settings
-@import "utils"
-@import "configuration"
+@import utils
+@import configuration
// Dependencies and tweaks of dependencies
-@import "dependencies/normalize"
-@import "dependencies/bootstrap-breakpoints"
+@import dependencies/normalize
+@import dependencies/bootstrap-breakpoints
-@import "variables"
+@import variables
// Keep on top
-@import "design-system/typography"
+@import design-system/typography
// Vendors
-@import "glightbox/dist/css/glightbox"
-@import "@splidejs/splide/dist/css/splide-core.min"
-@import "dependencies/glightbox"
-@import "dependencies/splide"
+@import glightbox/dist/css/glightbox
+@import @splidejs/splide/dist/css/splide-core.min
+@import dependencies/glightbox
+@import dependencies/splide
// Design System
-@import "design-system/layout"
-@import "design-system/a11y"
-@import "design-system/backlinks"
-@import "design-system/breadcrumb"
-@import "design-system/button"
-@import "design-system/contacts"
-@import "design-system/footer"
-@import "design-system/form"
-@import "design-system/header"
-@import "design-system/hero"
-@import "design-system/image"
-@import "design-system/pagination"
-@import "design-system/nav"
-@import "design-system/search"
-@import "design-system/table"
-@import "design-system/table_of_contents"
-@import "design-system/top"
+@import design-system/layout
+@import design-system/a11y
+@import design-system/backlinks
+@import design-system/breadcrumb
+@import design-system/button
+@import design-system/contacts
+@import design-system/footer
+@import design-system/form
+@import design-system/header
+@import design-system/hero
+@import design-system/image
+@import design-system/logo
+@import design-system/nav
+@import design-system/pagination
+@import design-system/search
+@import design-system/table
+@import design-system/table_of_contents
+@import design-system/top
// Blocks
-@import "blocks/base"
-@import "blocks/agenda"
-@import "blocks/datatable"
-@import "blocks/call_to_action"
-@import "blocks/chapter"
-@import "blocks/contact"
-@import "blocks/definitions"
-@import "blocks/embed"
-@import "blocks/features"
-@import "blocks/files"
-@import "blocks/gallery"
-@import "blocks/image"
-@import "blocks/key_figures"
-@import "blocks/license"
-@import "blocks/organizations"
-@import "blocks/pages"
-@import "blocks/persons"
-@import "blocks/posts"
-@import "blocks/programs"
-@import "blocks/sitemap"
-@import "blocks/sound"
-@import "blocks/summary"
-@import "blocks/testimonials"
-@import "blocks/timeline"
-@import "blocks/video"
+@import blocks/base
+@import blocks/agenda
+@import blocks/datatable
+@import blocks/call_to_action
+@import blocks/chapter
+@import blocks/contact
+@import blocks/definitions
+@import blocks/embed
+@import blocks/features
+@import blocks/files
+@import blocks/gallery
+@import blocks/image
+@import blocks/key_figures
+@import blocks/license
+@import blocks/organizations
+@import blocks/pages
+@import blocks/persons
+@import blocks/posts
+@import blocks/programs
+@import blocks/sitemap
+@import blocks/sound
+@import blocks/summary
+@import blocks/testimonials
+@import blocks/timeline
+@import blocks/video
// Sections
-@import "sections/administrators"
-@import "sections/authors"
-@import "sections/categories"
-@import "sections/diplomas"
-@import "sections/events"
-@import "sections/organizations"
-@import "sections/pages"
-@import "sections/papers"
-@import "sections/persons"
-@import "sections/posts"
-@import "sections/programs"
-@import "sections/publications"
-@import "sections/researchers"
-@import "sections/sitemap"
-@import "sections/teachers"
-@import "sections/volumes"
+@import sections/administrators
+@import sections/authors
+@import sections/categories
+@import sections/diplomas
+@import sections/events
+@import sections/organizations
+@import sections/pages
+@import sections/papers
+@import sections/persons
+@import sections/posts
+@import sections/programs
+@import sections/publications
+@import sections/researchers
+@import sections/sitemap
+@import sections/teachers
+@import sections/volumes
diff --git a/assets/sass/_theme/sections/organizations.sass b/assets/sass/_theme/sections/organizations.sass
index c7a08ae680ada5b38e2d352971d00f0e7d6f3653..c468c7e5dfff9fa46661538e921a410308b57ce2 100644
--- a/assets/sass/_theme/sections/organizations.sass
+++ b/assets/sass/_theme/sections/organizations.sass
@@ -10,7 +10,7 @@
display: block
.media
@include handle-svg-fit
- background: $color-background-alt
+ background: $organization-background-color
margin-bottom: $spacing-2
order: -1
overflow: hidden
diff --git a/assets/sass/_theme/sections/papers.sass b/assets/sass/_theme/sections/papers.sass
index 1b9feeb74448715c7dfc35a1d081813522f961da..574767937ed7a93b42c19d4bfb260b246b2721fe 100644
--- a/assets/sass/_theme/sections/papers.sass
+++ b/assets/sass/_theme/sections/papers.sass
@@ -2,8 +2,8 @@
display: flex
gap: var(--grid-gutter)
a
- text-decoration-color: transparent
transition: color 0.3s ease
+ @extend %underline-on-hover
> div:first-of-type
width: columns(7)
.paper-actions
diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass
index 2149a06b06742f3ad32bc053116936357b6eae99..92ee9eb063167e564622f316b2a505f51026502e 100644
--- a/assets/sass/_theme/sections/persons.sass
+++ b/assets/sass/_theme/sections/persons.sass
@@ -149,8 +149,7 @@ ol.persons--list
display: inline-block
margin-right: $spacing-4
a
- @include link
- @include link-hovered-underline-only
+ @extend %underline-on-hover
@include meta
@include icon(arrow, after)
margin-left: $spacing-3
diff --git a/assets/sass/_theme/utils/colors.sass b/assets/sass/_theme/utils/colors.sass
new file mode 100644
index 0000000000000000000000000000000000000000..fb914a331c818061d2fae4f94640cbd44166007b
--- /dev/null
+++ b/assets/sass/_theme/utils/colors.sass
@@ -0,0 +1,6 @@
+// Les couleurs étant stockées dans des variables CSS, nous utilisons color-mix pour appliquer de l'alpha sur des couleurs en hexa
+@function alphaColor($color, $alpha)
+ $percent: $alpha
+ @if ($percent <= 1)
+ $percent: $alpha * 100%
+ @return color-mix(in srgb, $color $percent, transparent)
diff --git a/assets/sass/_theme/utils/links.sass b/assets/sass/_theme/utils/links.sass
index 7866e937f8a5f5299e2b5c041a0adcf72464e60f..3059da0003ed7ab0e1f8bbe00b9cdd6bdf8d1c90 100644
--- a/assets/sass/_theme/utils/links.sass
+++ b/assets/sass/_theme/utils/links.sass
@@ -5,17 +5,13 @@
text-underline-offset: $link-underline-offset
transition: $link-transition
@if $unhover_decorated
- text-decoration-color: rgba($color, $link-unhover-decoration-color-alpha)
+ text-decoration-color: alphaColor($color, $link-unhover-decoration-color-alpha)
@else
text-decoration-color: transparent
&:hover
- text-decoration-color: rgba($color, 1)
+ text-decoration-color: alphaColor($color, 1)
text-decoration-thickness: $link-underline-thickness
-@mixin link-hovered-underline-only
- &:not(:hover)
- text-decoration: transparent
-
@mixin stretched-link($pseudo-element: after)
&::#{$pseudo-element}
bottom: 0
@@ -24,4 +20,5 @@
position: absolute
right: 0
top: 0
- z-index: $zindex-stretched-link
\ No newline at end of file
+ z-index: $zindex-stretched-link
+
diff --git a/assets/sass/_theme/utils/normalize.sass b/assets/sass/_theme/utils/normalize.sass
index 372cbbabb23c4d317b36d9fcd27949781a6eac61..3594f4c40314f2883ddeb7e4534007dc9b0928cb 100644
--- a/assets/sass/_theme/utils/normalize.sass
+++ b/assets/sass/_theme/utils/normalize.sass
@@ -7,7 +7,7 @@
user-select: none
&:active,
&:focus
- box-shadow: inset 0 0 0 0.25rem rgba(var(--color-text), 0.25)
+ box-shadow: inset 0 0 0 0.25rem alphaColor(var(--color-text), 0.25)
// TODO : vérifier si l'outline 0 est vraiment nécessaire
// outline: 0
diff --git a/config.yaml b/config.yaml
index ea34fc7cf5829e207e46d6231900376ecee57ce1..03e5a7d1aaeb25747ff203bdc784fb26be5adb7c 100644
--- a/config.yaml
+++ b/config.yaml
@@ -10,11 +10,12 @@ params:
title:
separator: "|"
logo:
- header: "" # Path to logo.svg
- footer: "" # Path to logo.svg
- darkmode:
- header: "" # Path to logo.svg for darkmode
- footer: "" # Path to logo.svg for darkmode
+ header:
+ default: "/assets/images/logo.svg"
+ darkmode: "/assets/images/logo-white.svg"
+ footer:
+ default: "/assets/images/logo.svg"
+ darkmode: "/assets/images/logo-white.svg"
menu:
dropdown:
linkToLevel1: false
@@ -106,7 +107,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
blocks:
call_to_action:
mobile: 375
@@ -119,7 +120,7 @@ params:
features:
mobile: 350
tablet: 400
- desktop: 900
+ desktop: 750
image:
mobile: 480x850
tablet: 768x1360
@@ -167,16 +168,16 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
hero_term:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
diplomas:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
hero_single:
mobile: 351
tablet: 456
@@ -185,25 +186,25 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
events:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
hero_single:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 350
tablet: 450
- desktop: 900
+ desktop: 750
organizations:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
logo:
mobile: 331
tablet: 196
@@ -216,7 +217,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 350
tablet: 990
@@ -225,12 +226,12 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
persons:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
hero_single:
mobile: 200
tablet: 200
@@ -243,25 +244,25 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
hero_single:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 350
tablet: 450
- desktop: 900
+ desktop: 600
publications:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
programs:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
image:
mobile: 351x168
tablet: 456x219
@@ -270,7 +271,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 327x388
tablet: 208x247
diff --git a/layouts/partials/commons/image-default.html b/layouts/partials/commons/image-default.html
index f8b4a1f71b6c75de617cb56261ca26062f599f9f..edfcc8229ec80e3f3d809709dff10153603ab5e9 100644
--- a/layouts/partials/commons/image-default.html
+++ b/layouts/partials/commons/image-default.html
@@ -1,15 +1,16 @@
-{{ $section_type := .}}
-{{ $use_default := (index site.Params $section_type).default_image}}
-{{ $image := site.Data.website.default.image }}
+{{ $section_type := . }}
+{{ $use_default := (index site.Params $section_type).default_image }}
+{{ $image := index site.Data.website.default "image" }}
{{ if and $use_default $image }}
{{ with index site.Params.image_sizes.sections $section_type }}
- {{ $sizes := .items }}
+ {{ $sizes := .item }}
+ {{ $sizes }}
{{- partial "commons/image.html"
- (dict
- "image" $image
- "sizes" $sizes
- ) -}}
+ (dict
+ "image" $image
+ "sizes" $sizes
+ ) -}}
{{ end }}
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/commons/image.html b/layouts/partials/commons/image.html
index a88fbe2a45d99fff354c76dc3848f9a4607bedc7..f0a96bd6714482403d421a74efae1348114354b9 100644
--- a/layouts/partials/commons/image.html
+++ b/layouts/partials/commons/image.html
@@ -24,69 +24,59 @@
{{- if .crop -}}
{{- $crop = true -}}
{{- end -}}
- {{ $desktop := .desktop }}
- {{ $tablet := .tablet }}
- {{ $mobile := .mobile }}
- {{- if .sizes -}}
- {{ $desktop = .sizes.desktop }}
- {{ $tablet = .sizes.tablet }}
- {{ $mobile = .sizes.mobile }}
- {{- end -}}
{{ $is_svg := strings.HasSuffix $image.name "svg" }}
<picture {{ if $is_svg }}class="is-svg"{{ end }}>
{{- if strings.HasSuffix $image.name "svg" -}}
<img src="{{ partial "GetImageUrl" (dict "url" $url) }}"
- alt="{{ chomp (plainify $alt) }}"
- {{ if $width }}width="{{ $width }}"{{ end }}
- {{ if $height }}height="{{ $height }}"{{ end }}
- {{- if .class }} class="{{ .class }}"{{- end -}}
- {{- if $lazy }} loading="lazy"{{- end -}}
- {{- if .itemprop }} itemprop="image"{{- end -}}
- >
+ alt="{{ chomp (plainify $alt) }}"
+ {{ if $width }}width="{{ $width }}"{{ end }}
+ {{ if $height }}height="{{ $height }}"{{ end }}
+ {{- if .class }} class="{{ .class }}"{{- end -}}
+ {{- if $lazy }} loading="lazy"{{- end -}}
+ {{- if .itemprop }} itemprop="image"{{- end -}}
+ >
{{- else -}}
- {{ with $desktop -}}
- <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "crop" $crop ) }},
- {{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "scale" 2 "crop" $crop) }} 2x"
- media="(min-width: 1024px)" type="image/webp">
- {{- end }}
- {{ with $tablet -}}
- <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "crop" $crop) }},
- {{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "scale" 2 "crop" $crop) }} 2x"
- media="(min-width: 768px)" type="image/webp">
- {{- end }}
- {{ with $mobile -}}
- <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "crop" $crop) }},
- {{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "scale" 2 "crop" $crop) }} 2x"
- type="image/webp">
+ {{ with .sizes.desktop -}}
+ <source media="(min-width: 1024px)"
+ type="image/webp"
+ srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "crop" $crop ) }},
+ {{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "scale" 2 "crop" $crop) }} 2x">
+ <source media="(min-width: 1024px)"
+ srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "crop" $crop ) }},
+ {{ partial "GetImageUrl" (dict "url" $url "size" . "scale" 2 "crop" $crop) }} 2x">
{{- end }}
- {{ with $desktop -}}
- <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "crop" $crop ) }},
- {{ partial "GetImageUrl" (dict "url" $url "size" . "scale" 2 "crop" $crop) }} 2x"
- media="(min-width: 1024px)">
- {{- end }}
- {{ with $tablet -}}
- <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "crop" $crop ) }},
- {{ partial "GetImageUrl" (dict "url" $url "size" . "scale" 2 "crop" $crop) }} 2x"
- media="(min-width: 768px)">
+
+ {{ with .sizes.tablet -}}
+ <source media="(min-width: 768px)"
+ type="image/webp"
+ srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "crop" $crop) }},
+ {{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "scale" 2 "crop" $crop) }} 2x">
+ <source media="(min-width: 768px)"
+ srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "crop" $crop ) }},
+ {{ partial "GetImageUrl" (dict "url" $url "size" . "scale" 2 "crop" $crop) }} 2x">
{{- end }}
- {{ with $mobile -}}
- <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "crop" $crop ) }},
- {{ partial "GetImageUrl" (dict "url" $url "size" . "scale" 2 "crop" $crop) }} 2x">
+
+ {{ with .sizes.mobile -}}
+ <source type="image/webp"
+ srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "crop" $crop) }},
+ {{ partial "GetImageUrl" (dict "url" $url "size" . "format" "webp" "scale" 2 "crop" $crop) }} 2x">
+ <source srcset="{{ partial "GetImageUrl" (dict "url" $url "size" . "crop" $crop ) }},
+ {{ partial "GetImageUrl" (dict "url" $url "size" . "scale" 2 "crop" $crop) }} 2x">
{{- end }}
- <img src="{{ partial "GetImageUrl" (dict "url" $url "size" $default "crop" $crop ) }}"
- alt="{{ chomp (plainify $alt) }}"
- width="{{ $width }}"
- height="{{ $height }}"
- {{- if .class }} class="{{ .class }}"{{- end -}}
- {{- if $lazy }} loading="lazy"{{- end -}}
- {{- if .itemprop }} itemprop="image"{{- end -}}
- >
+ <img src="{{ partial "GetImageUrl" (dict "url" $url "size" $default "crop" $crop ) }}"
+ alt="{{ chomp (plainify $alt) }}"
+ width="{{ $width }}"
+ height="{{ $height }}"
+ {{- if .class }} class="{{ .class }}"{{- end -}}
+ {{- if $lazy }} loading="lazy"{{- end -}}
+ {{- if .itemprop }} itemprop="image"{{- end -}}>
{{- end -}}
+
</picture>
{{- end -}}
{{- end -}}
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index e5a77b291f027180d4f8864f6d00d833217d68aa..552c4b804ad7b4c323268bae0aa8ec3d4c7006fe 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -220,16 +220,17 @@
parent = img.parentElement,
pixelRatio = window.devicePixelRatio,
dimensions = {
- width: img.naturalWidth * pixelRatio,
- height: img.naturalHeight * pixelRatio
+ width: Math.round(img.naturalWidth * pixelRatio),
+ height: Math.round(img.naturalHeight * pixelRatio)
},
target = {
- width: img.width * window.devicePixelRatio,
- height: img.height * window.devicePixelRatio
+ width: Math.round(img.width * window.devicePixelRatio),
+ height: Math.round(img.height * window.devicePixelRatio)
},
essential =
-`<b>Loaded</b> : ${dimensions.width}x${dimensions.height}\n
-<b>Needed</b> : ${target.width}x${target.height}`,
+`<b>Loaded</b> : ${dimensions.width}x${dimensions.height}<br>
+<b>Needed</b> : ${target.width}x${target.height}<br>
+<b>Ideal config</b> : ${target.width / pixelRatio}x${target.height / pixelRatio}`
result =`
Rendered size: ${img.width}x${img.height}
Intrinsic size: ${dimensions.width}x${dimensions.height}
@@ -241,7 +242,7 @@
p.innerHTML = essential
p.append(small);
p.classList.add('img-debug');
- const ratio = getImageRatio(dimensions, target)
+ const ratio = getImageWidthRatio(dimensions, target);
if (ratio > threshold) {
p.classList.add('is-bad');
} else {
@@ -261,6 +262,10 @@
});
}
+ function getImageWidthRatio(source, target) {
+ return Math.abs((source.width - target.width) / Math.max(source.width, target.width));
+ }
+
function getImageRatio(source, target) {
const widthRatio = Math.abs((source.width - target.width) / Math.max(source.width, target.width)),
heightRatio = Math.abs((source.height - target.height) / Math.max(source.height, target.height));
diff --git a/layouts/partials/footer/site.html b/layouts/partials/footer/site.html
index 103d713883f73aeb233f491f6f1f8858d3846b95..1aacecf9be33f7dbd06f66f7572e7360969c4674 100644
--- a/layouts/partials/footer/site.html
+++ b/layouts/partials/footer/site.html
@@ -1,47 +1,49 @@
+{{ $logo := site.Params.logo.header }}
+
{{- with site.Data.school -}}
-<address itemscope itemtype="https://schema.org/CollegeOrUniversity">
- <meta itemprop="image" content="/assets/images/logo.svg">
- <p itemprop="name">{{ htmlUnescape (trim .name "\n") }}</p>
- {{ if or (.address) (.country) -}}
- <p itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
- {{ if .address }}<span itemprop="streetAddress">{{ trim .address "\n" }}</span><br>{{ end }}
- {{ if .zipcode }}<span itemprop="postalCode">{{ trim .zipcode "\n" }}</span> {{ end }}{{ if .city }}<span itemprop="addressLocality">{{ trim .city "\n" }}</span>{{ end }}
- {{ if .country }}<span itemprop="addressCountry">{{ trim .country "\n" }}</span>{{ end }}
- </p>
- {{ end }}
- {{- if .phone -}}
- <p>
- {{- $phone := trim .phone "\n " -}}
- {{- $phone_href := replace $phone " " "" -}}
- <a itemprop="telephone" href="tel:{{ $phone_href }}">{{ $phone }}</a>
- </p>
- {{- end }}
-</address>
+ <div itemscope itemtype="https://schema.org/CollegeOrUniversity">
+ <meta itemprop="logo" content="{{ $logo }}">
+ <p itemprop="name">{{ htmlUnescape (trim .name "\n") }}</p>
+ {{ if or (.address) (.country) -}}
+ <address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
+ {{ if .address }}<span itemprop="streetAddress">{{ trim .address "\n" }}</span><br>{{ end }}
+ {{ if .zipcode }}<span itemprop="postalCode">{{ trim .zipcode "\n" }}</span> {{ end }}{{ if .city }}<span itemprop="addressLocality">{{ trim .city "\n" }}</span> {{ end }}{{ if .country }}<span itemprop="addressCountry">{{ trim .country "\n" }}</span>{{ end }}
+ </address>
+ {{ end }}
+ {{- if .phone -}}
+ <p>
+ {{- $phone := trim .phone "\n " -}}
+ {{- $phone_href := replace $phone " " "" -}}
+ <a itemprop="telephone" href="tel:{{ $phone_href }}">{{ $phone }}</a>
+ </p>
+ {{- end }}
+ </div>
{{- end -}}
{{- with site.Data.laboratory -}}
-<address itemscope itemtype="">
- <meta itemprop="image" content="/assets/images/logo.svg">
- <p itemprop="name">{{ htmlUnescape (trim .name "\n") }}</p>
- {{ if or (.address) (.country) }}
- <p itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
- {{ if .address }}<span itemprop="streetAddress">{{ .address }}</span><br>{{ end }}
- {{ if .zipcode }}<span itemprop="postalCode">{{ .zipcode }}</span> {{ end }}{{ if .city }}<span itemprop="addressLocality">{{ .city }}</span>{{ end }}<br>
- {{ if .country }}<span itemprop="addressCountry">{{ .country }}</span>{{ end }}
- </p>
- {{ end }}
- {{- if .phone -}}
- <p>
- {{- $phone := trim .phone "\n " -}}
- {{- $phone_href := replace $phone " " "" -}}
- <a itemprop="telephone" href="tel:{{ $phone_href }}">{{ $phone }}</a>
- </p>
- {{- end }}
-</address>
+ <div itemscope itemtype="https://schema.org/ResearchOrganization">
+ <meta itemprop="logo" content="{{ $logo }}">
+ <p itemprop="name">{{ htmlUnescape (trim .name "\n") }}</p>
+ {{ if or (.address) (.country) }}
+ <address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
+ {{ if .address_name }}<span itemprop="name">{{ .address_name }}</span><br>{{ end }}
+ {{ if .address }}<span itemprop="streetAddress">{{ .address }}</span><br>{{ end }}
+ {{ if .address_additional }}<span itemprop="description">{{ .address_additional }}</span><br>{{ end }}
+ {{ if .zipcode }}<span itemprop="postalCode">{{ .zipcode }}</span> {{ end }}{{ if .city }}<span itemprop="addressLocality">{{ .city }}</span> {{ end }}{{ if .country }}<span itemprop="addressCountry">{{ .country }}</span>{{ end }}
+ </address>
+ {{ end }}
+ {{- if .phone -}}
+ <p>
+ {{- $phone := trim .phone "\n " -}}
+ {{- $phone_href := replace $phone " " "" -}}
+ <a itemprop="telephone" href="tel:{{ $phone_href }}">{{ $phone }}</a>
+ </p>
+ {{- end }}
+ </div>
{{- end -}}
{{- with site.Data.journal -}}
-<div itemscope itemtype="https://schema.org/Periodical">
- <meta itemprop="image" content="/assets/images/logo.svg">
- <p itemprop="name">{{ htmlUnescape (trim .name "\n") }}</p>
- <p itemprop="issn">{{ trim .issn "\n" }}</p>
-</div>
+ <div itemscope itemtype="https://schema.org/Periodical">
+ <meta itemprop="image" content="/assets/images/logo.svg">
+ <p itemprop="name">{{ htmlUnescape (trim .name "\n") }}</p>
+ <p itemprop="issn">{{ trim .issn "\n" }}</p>
+ </div>
{{- end -}}
diff --git a/layouts/partials/footer/social.html b/layouts/partials/footer/social.html
index f53b805d9bd36b7b62781d1a9418db11bf9be0ef..1bc5f37cc2a8f3192e7a68a30591ca1372da7637 100644
--- a/layouts/partials/footer/social.html
+++ b/layouts/partials/footer/social.html
@@ -13,62 +13,62 @@
{{ $site_social_links := . }}
{{ if $site_social_links }}
<ul class="footer-social site-links">
- {{ with $site_social_links.email}}
+ {{ with $site_social_links.email }}
<li class="email">
<a href="mailto:{{ . }}" rel="noreferrer" title="Email" target="_blank">Email</a>
</li>
{{ end}}
- {{ with $site_social_links.rss}}
+ {{ with $site_social_links.rss }}
<li class="rss">
<a href="{{ . }}" rel="noreferrer" title="RSS" target="_blank">RSS</a>
</li>
{{ end}}
- {{ with $site_social_links.mastodon}}
+ {{ with $site_social_links.mastodon }}
<li class="mastodon">
<a href="{{ . }}" rel="noreferrer" title="Mastodon" target="_blank">Mastodon</a>
</li>
{{ end}}
- {{ with $site_social_links.peertube}}
+ {{ with $site_social_links.peertube }}
<li class="peertube">
<a href="{{ . }}" rel="noreferrer" title="Peertube" target="_blank">Peertube</a>
</li>
{{ end}}
- {{ with $site_social_links.github}}
+ {{ with $site_social_links.github }}
<li class="github">
<a href="{{ . }}" rel="noreferrer" title="Github" target="_blank">GitHub</a>
</li>
{{ end}}
- {{ with $site_social_links.linkedin}}
+ {{ with $site_social_links.linkedin }}
<li class="linkedin">
<a href="{{ . }}" rel="noreferrer" title="LinkedIn" target="_blank">LinkedIn</a>
</li>
{{ end}}
- {{ with $site_social_links.youtube}}
+ {{ with $site_social_links.youtube }}
<li class="youtube">
<a href="{{ . }}" rel="noreferrer" title="YouTube" target="_blank">YouTube</a>
</li>
{{ end}}
- {{ with $site_social_links.vimeo}}
+ {{ with $site_social_links.vimeo }}
<li class="vimeo">
<a href="{{ . }}" rel="noreferrer" title="Vimeo" target="_blank">Vimeo</a>
</li>
{{ end}}
- {{ with $site_social_links.instagram}}
+ {{ with $site_social_links.instagram }}
<li class="instagram">
<a href="{{ . }}" rel="noreferrer" title="Instagram" target="_blank">Instagram</a>
</li>
{{ end}}
- {{ with $site_social_links.facebook}}
+ {{ with $site_social_links.facebook }}
<li class="facebook">
<a href="{{ . }}" rel="noreferrer" title="" target="_blank">Facebook</a>
</li>
{{ end}}
- {{ with $site_social_links.tiktok}}
+ {{ with $site_social_links.tiktok }}
<li class="tiktok">
<a href="{{ . }}" rel="noreferrer" title="TikTok" target="_blank">TikTok</a>
</li>
{{ end}}
- {{ with $site_social_links.x}}
+ {{ with $site_social_links.x }}
<li class="x">
<a href="{{ . }}" rel="noreferrer" title="X, ex-Twitter" target="_blank">X (ex-Twitter)</a>
</li>
diff --git a/layouts/partials/papers/document-nav.html b/layouts/partials/papers/document-nav.html
index a2f0211d51ca0d429d40b8fd4ce9989acf55f97b..2a800a23ca825704ded8a28c50a04d74b6ab0127 100644
--- a/layouts/partials/papers/document-nav.html
+++ b/layouts/partials/papers/document-nav.html
@@ -11,9 +11,11 @@
(dict
"image" .Params.image
"alt" .Title
- "mobile" "327x388"
- "tablet" "208x247"
- "desktop" "408x485"
+ "size" (dict
+ "mobile" "327x388"
+ "tablet" "208x247"
+ "desktop" "408x485"
+ )
) -}}
{{- else -}}
{{- partial "commons/image-default.html" "papers" -}}
diff --git a/layouts/partials/papers/sidebar.html b/layouts/partials/papers/sidebar.html
index b8d07c36e12d76de8b5207044e16d43f7a84e1c6..a959fd3a7991066392681d55914f7fd713a30aa1 100644
--- a/layouts/partials/papers/sidebar.html
+++ b/layouts/partials/papers/sidebar.html
@@ -13,9 +13,11 @@
(dict
"image" .Params.image
"alt" .Title
- "mobile" "327x388"
- "tablet" "208x247"
- "desktop" "408x485"
+ "sizes" (dict
+ "mobile" "327x388"
+ "tablet" "208x247"
+ "desktop" "408x485"
+ )
) -}}
{{- else -}}
{{- partial "commons/image-default.html" "papers" -}}
diff --git a/layouts/partials/publications/statistics.html b/layouts/partials/publications/statistics.html
index 9e06d6fd3163d4ceac05a6db25281daa1bff6ea2..0f0452cc2ca3ffb5b0ab297124bc1eda4024b6bb 100644
--- a/layouts/partials/publications/statistics.html
+++ b/layouts/partials/publications/statistics.html
@@ -8,8 +8,6 @@
<span>{{ .Key }}</span>
</p>
</li>
- {{ end }}
+ {{ end }}
</ol>
-
-
</div>
\ No newline at end of file
diff --git a/layouts/publications/list.html b/layouts/publications/list.html
index 9b98bdcb4b353738b1053617320cdc8058eaa417..376f8b10648609875b1f49aa34160ea8c756094c 100644
--- a/layouts/publications/list.html
+++ b/layouts/publications/list.html
@@ -10,5 +10,4 @@
{{ partial "commons/pagination.html" . }}
</div>
</div>
-
{{ end }}