diff --git a/.github/workflows/test-with-example.yml b/.github/workflows/test-with-example.yml
index ee46c094409b91e719266d2bc7cd560233179e38..3190dd0428ab6424c214ffa72d9fb6a0bc133a48 100644
--- a/.github/workflows/test-with-example.yml
+++ b/.github/workflows/test-with-example.yml
@@ -2,7 +2,7 @@ name: Test with example
on:
pull_request:
- types: [opened, reopened]
+ types: [opened, reopened, synchronize]
jobs:
build:
@@ -32,4 +32,4 @@ jobs:
echo "== Pushing branch =="
git add .
git commit -m "Updated theme to ${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}} branch."
- git push -f origin theme--${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
\ No newline at end of file
+ git push -f origin theme--${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
diff --git a/.github/workflows/version.yml b/.github/workflows/version.yml
index 192ada95f83b1e93671ff0d02aa0e544a67abad2..f0ceb48b1ac3086d82dafb48da59ba10166be3b4 100644
--- a/.github/workflows/version.yml
+++ b/.github/workflows/version.yml
@@ -25,7 +25,7 @@ jobs:
- name: Commit & Push
uses: Andro999b/push@v1.3
with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
+ github_token: ${{ secrets.OSUNY_BOT_GITHUB_TOKEN }}
branch: main
force: true
message: 'Write version to file'
@@ -40,4 +40,4 @@ jobs:
uses: dkershner6/post-api-call-action@v1
with:
url: ${{ secrets.OSUNY_STAGING_API_AUTOUPDATE_THEME_URL }}
- data: "{\"secret_key\":\"${{ secrets.OSUNY_API_AUTOUPDATE_THEME_KEY }}\"}"
\ No newline at end of file
+ data: "{\"secret_key\":\"${{ secrets.OSUNY_API_AUTOUPDATE_THEME_KEY }}\"}"
diff --git a/assets/js/theme/blocks/draggableBlocks.js b/assets/js/theme/blocks/draggableBlocks.js
new file mode 100644
index 0000000000000000000000000000000000000000..fcde80907af054d6068d5a757e9358fadcd7e148
--- /dev/null
+++ b/assets/js/theme/blocks/draggableBlocks.js
@@ -0,0 +1,170 @@
+const draggableBlocks = document.querySelectorAll('.block-timeline--horizontal, .block-posts--carousel');
+
+class DraggableBlock {
+ constructor (block) {
+ this.block = block;
+ this.content = this.block.querySelector('.draggable-container');
+ this.list = this.block.querySelector('ol, ul');
+ this.items = this.list.querySelectorAll('.draggable-item');
+ this.previous = this.block.querySelector('.previous');
+ this.next = this.block.querySelector('.next');
+ this.isPointerDown = false;
+
+ this.index = 0;
+
+ this.listen();
+ this.resize();
+ this.goTo(0);
+ }
+
+ listen () {
+ window.addEventListener('resize', this.resize.bind(this));
+
+ this.items.forEach((item, i) => {
+ item.addEventListener('click', this.onClickItem.bind(this, i));
+ });
+
+ if (this.previous && this.next) {
+ this.handleArrows();
+ }
+
+ this.handlePointers();
+ this.handleScroll();
+ }
+
+ resize () {
+ let maxTitleHeight = 0;
+
+ this.block.style = '';
+
+ this.itemWidth = this.items[0].offsetWidth;
+
+ this.items.forEach((item) => {
+ maxTitleHeight = Math.max(item.querySelector('.title, [itemprop="headline"]').offsetHeight, maxTitleHeight);
+ });
+
+ this.block.style.setProperty('--min-title-height', maxTitleHeight + 'px');
+ this.update();
+ }
+
+ onClickItem(i) {
+ if (!this.isManipulated) {
+ this.goTo(i);
+ }
+ }
+
+ handleArrows () {
+ this.previous.addEventListener('click', () => {
+ this.goTo(this.index-1);
+ });
+
+ this.next.addEventListener('click', () => {
+ this.goTo(this.index+1);
+ });
+ }
+
+ handlePointers () {
+ let startX,
+ endX,
+ threshold = 30;
+ // j'ai initialisé isPointerDown au début du code : this.isPointerDown
+ // j'ai enlevé endEvents = ['pointerup'] parce qu'il était seul ?
+ this.block.style.touchAction = 'pan-y';
+
+ // on passe de this.content à this.block sur chaque événement pour grab sur tout le bloc
+ this.block.addEventListener('pointerdown', (event) => {
+ // On vérifie que l'on ne soit pas en train de cliquer sur les boutons (car on cible tout le bloc pour le grab)
+ if (event.target !== this.next && event.target !== this.previous) {
+ // on utilise partout this.isPointerDown car la navigation avec les arrow buguait
+ // parfois ça naviguait de 2 items
+ this.isPointerDown = true;
+ this.content.classList.add('is-grabbing');
+ startX = event.clientX;
+ }
+ });
+
+ this.block.addEventListener('pointermove', (event) => {
+ endX = event.clientX;
+ // On vérifie que l'événement pointerdown a été activé
+ if (this.isPointerDown) {
+ event.preventDefault();
+ this.items.forEach((item) => {
+ // on enlève le pointerevents pour que les liens ne soient pas cliquable au drag
+ item.style.pointerEvents = "none";
+ });
+ }
+ });
+
+ // anciennement géré avec endEvents = ['pointerup'] (j'enlève le forEach)
+ this.block.addEventListener('pointerup', (event) => {
+ endX = event.clientX;
+ // on vérifie encore isPointerDown pour éviter le pb des arrows
+ if (this.isPointerDown) {
+ this.isPointerDown = false;
+ this.onManipulationEnd(startX, endX, threshold);
+ }
+ });
+ }
+
+ handleScroll() {
+ // On écoute le scroll sur le contenu du bloc
+ this.content.addEventListener('wheel', (event) => {
+ const deltaX = event.deltaX;
+ const deltaY = event.deltaY;
+ // navigation entre les items (comme onManipulationEnd)
+ if (Math.abs(deltaX) > Math.abs(deltaY)) {
+ if (deltaX !== 0) {
+ if (deltaX > 0) {
+ this.goTo(this.index + 1);
+ } else {
+ this.goTo(this.index - 1);
+ }
+ }
+ }
+ });
+ }
+
+ onManipulationEnd (start, end, threshold) {
+ if (start > end + threshold) {
+ this.goTo(this.index+1);
+ } else if (start < end - threshold) {
+ this.goTo(this.index-1);
+ }
+
+ this.content.classList.remove('is-grabbing');
+ this.items.forEach((item) => {
+ // On rend le pointervents pour pouvoir cliquer sur le lien si on drag pas
+ item.style.pointerEvents = "all";
+ });
+
+ setTimeout(() => {
+ this.isManipulated = false;
+ }, 100);
+ }
+
+ goTo (_index) {
+ this.index = Math.min(Math.max(_index, 0), this.items.length-1);
+ this.update();
+ }
+
+ update () {
+ this.list.style.marginLeft = `${-this.index * this.itemWidth}px`;
+
+ this.items.forEach((item, index) => {
+ if (index < this.index) {
+ item.classList.add('is-passed');
+ } else {
+ item.classList.remove('is-passed');
+ }
+ });
+
+ if (this.previous && this.next) {
+ this.previous.disabled = this.index === 0;
+ this.next.disabled = this.index === this.items.length - 1;
+ }
+ }
+}
+
+draggableBlocks.forEach((block) => {
+ new DraggableBlock(block);
+});
diff --git a/assets/js/theme/blocks/timeline.js b/assets/js/theme/blocks/timeline.js
deleted file mode 100644
index 1cab898f388b1f5a5f0da6f2353673f115a033e1..0000000000000000000000000000000000000000
--- a/assets/js/theme/blocks/timeline.js
+++ /dev/null
@@ -1,132 +0,0 @@
-const timelines = document.querySelectorAll('.block-timeline--horizontal');
-
-class BlockTimeline {
- constructor (block) {
- this.block = block;
- this.content = this.block.querySelector('.timeline');
- this.list = this.block.querySelector('.timeline-events ol');
- this.items = this.list.querySelectorAll('.timeline-event');
- this.previous = this.block.querySelector('.previous');
- this.next = this.block.querySelector('.next');
- this.isManipulated = false;
-
- this.index = 0;
-
- this.listen();
- this.resize();
- this.goTo(0);
- }
-
- listen () {
- window.addEventListener('resize', this.resize.bind(this));
-
- this.items.forEach((item, i) => {
- item.addEventListener('click', this.onClickItem.bind(this, i));
- });
-
- if (this.previous && this.next) {
- this.handleArrows();
- }
-
- this.handlePointers();
- }
-
- resize () {
- let maxTitleHeight = 0;
-
- this.block.style = '';
-
- this.itemWidth = this.items[0].offsetWidth;
-
- this.items.forEach((item) => {
- maxTitleHeight = Math.max(item.querySelector('.title').offsetHeight, maxTitleHeight);
- });
-
- this.block.style.setProperty('--min-title-height', maxTitleHeight + 'px');
- this.update();
- }
-
- onClickItem(i) {
- if (!this.isManipulated) {
- this.goTo(i);
- }
- }
-
- handleArrows () {
- this.previous.addEventListener('click', () => {
- this.goTo(this.index-1);
- });
- this.next.addEventListener('click', () => {
- this.goTo(this.index+1);
- });
- }
-
- handlePointers () {
- let endEvents = ['pointerup'],
- startX,
- endX,
- threshold = 30,
- isPointerDown = false;
-
- this.content.style.touchAction = 'pan-y';
-
- this.content.addEventListener('pointerdown', (event) => {
- this.content.classList.add('is-grabbing');
- startX = event.clientX;
- isPointerDown = true;
- });
-
- this.content.addEventListener('pointermove', (event) => {
- this.isManipulated = isPointerDown;
- endX = event.clientX;
- });
-
- endEvents.forEach(event => {
- this.content.addEventListener(event, (event) => {
- isPointerDown = false;
- this.onManipulationEnd(startX, endX, threshold);
- });
- });
- }
-
- onManipulationEnd (start, end, threshold) {
- if (start > end + threshold) {
- this.goTo(this.index+1);
- } else if (start < end - threshold) {
- this.goTo(this.index-1);
- }
-
- this.content.classList.remove('is-grabbing');
-
- // Add delay to avoid conflict with item clicked
- setTimeout(() => {
- this.isManipulated = false;
- }, 100);
- }
-
- goTo (_index) {
- this.index = Math.min(Math.max(_index, 0), this.items.length-1);
- this.update();
- }
-
- update () {
- this.list.style.marginLeft = `${-this.index * this.itemWidth}px`;
-
- this.items.forEach((item, index) => {
- if (index < this.index) {
- item.classList.add('is-passed');
- } else {
- item.classList.remove('is-passed');
- }
- });
-
- if (this.previous && this.next) {
- this.previous.disabled = this.index === 0;
- this.next.disabled = this.index === this.items.length - 1;
- }
- }
-}
-
-timelines.forEach((timeline) => {
- new BlockTimeline(timeline);
-});
diff --git a/assets/js/theme/design-system/mainMenu.js b/assets/js/theme/design-system/mainMenu.js
index 1612759f85573531eecfd0bfc1e046da479eae43..cb24b4e134bf01c2e6dc409ad48bd2f5d66ea119 100644
--- a/assets/js/theme/design-system/mainMenu.js
+++ b/assets/js/theme/design-system/mainMenu.js
@@ -12,7 +12,7 @@ class MainMenu {
constructor (selector) {
this.element = document.querySelector(selector);
this.menu = this.element.querySelector('.menu');
- this.mainButton = this.element.querySelector('button');
+ this.mainButton = this.element.querySelector('button.header-button');
this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
this.state = {
@@ -62,7 +62,7 @@ class MainMenu {
const isMobile = window.innerWidth <= breakpoints.md;
document.documentElement.style.setProperty('--header-height', this.element.offsetHeight + 'px');
document.documentElement.style.setProperty('--header-menu-max-height', (window.innerHeight - this.element.offsetHeight) + 'px');
-
+
// is state changed ?
if (this.state.isMobile === isMobile) {
return null;
@@ -71,7 +71,6 @@ class MainMenu {
this.state.isMobile = isMobile;
this.closeEverything();
-
}
toggleMainMenu (open = !this.state.isOpened) {
@@ -150,7 +149,7 @@ class MainMenu {
if (y > this.state.previousScrollY + threshold && !isNearTop) {
document.documentElement.classList.add(CLASSES.scrollingDown);
hasChanged = true;
- } else if (y < this.state.previousScrollY - threshold){
+ } else if (y < this.state.previousScrollY - threshold) {
document.documentElement.classList.remove(CLASSES.scrollingDown);
hasChanged = true;
}
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 5dc97bb8ec7e3c3e26fc77abafc75bfff9144365..98f75c1c3f810d4ba5ca0751d677168bf82aa0a1 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -8,5 +8,5 @@ import './design-system/search';
import './design-system/toc';
import './blocks/keyFigures';
import './blocks/organizations';
-import './blocks/timeline';
+import './blocks/draggableBlocks.js';
import './blocks/videos.js';
diff --git a/assets/js/vendors/carousel.js b/assets/js/vendors/carousel.js
index 41d1afa93a711b7adc3bb8a7c1f0b52d307d58ea..a983e5fc05614fadd6fd7a6d87df8eadabeb29a7 100644
--- a/assets/js/vendors/carousel.js
+++ b/assets/js/vendors/carousel.js
@@ -1,17 +1,21 @@
import Splide from '@splidejs/splide';
-Splide.defaults = {
- i18n: {
- first: 'Aller au premier slide',
- last: 'Aller au dernier slide',
- next: 'Slide suivant',
- pageX: 'Aller à la page %s',
- pause: 'Mettre en pause le carousel',
- play: 'Démarrer le carousel',
- prev: 'Slide précedent',
- slideX: 'Aller au slide %s'
- }
-};
+let siteLang = document.querySelector('html').getAttribute('lang');
+
+if (siteLang == "fr") {
+ Splide.defaults = {
+ i18n: {
+ first: 'Aller au premier slide',
+ last: 'Aller au dernier slide',
+ next: 'Slide suivant',
+ pageX: 'Aller à la page %s',
+ pause: 'Mettre en pause le carousel',
+ play: 'Démarrer le carousel',
+ prev: 'Slide précedent',
+ slideX: 'Aller au slide %s'
+ }
+ };
+}
class Carousel {
constructor (element) {
diff --git a/assets/js/vendors/lightbox.js b/assets/js/vendors/lightbox.js
index b2cb76170eee2e4539d69146e2d38341a4050aaa..b8c477970840c1b4283c9f217b4e6335c7f5f264 100644
--- a/assets/js/vendors/lightbox.js
+++ b/assets/js/vendors/lightbox.js
@@ -1,6 +1,39 @@
import gLightbox from 'glightbox';
-gLightbox({
+let siteLang = document.querySelector('html').getAttribute('lang');
+
+let lightboxBtn;
+
+const lightbox = gLightbox({
+ selector: '.glightbox',
openEffect: 'fade',
- closeEffect: 'fade'
+ closeEffect: 'fade',
+ onOpen: () => {
+ lightboxBtn = document.activeElement;
+ const lightboxContainer = document.querySelector('#glightbox-body');
+ lightboxContainer.setAttribute('aria-modal', 'true');
+
+ if(siteLang == "fr") {
+ const nextButton = document.querySelector('.gnext');
+ const prevButton = document.querySelector('.gprev');
+ const closeButton = document.querySelector('.gclose');
+
+ nextButton.setAttribute('aria-label', 'Suivant');
+ prevButton.setAttribute('aria-label', 'Précédent');
+ closeButton.setAttribute('aria-label', 'Fermer');
+ }
+ },
+ onClose: () => {
+ if (lightboxBtn) {
+ lightboxBtn.focus();
+ }
+ }
});
+
+lightbox.on('slide_changed', () => {
+ const currentSlide = document.querySelector('.gslide.current');
+ if (currentSlide) {
+ currentSlide.setAttribute("tabindex", "0");
+ currentSlide.focus();
+ }
+});
\ No newline at end of file
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 5f6d13b4ea1aa0b90941ddd9fe2d2895d88742f9..9a2e0a7d31ee23648622d53b6f77877ed04109f3 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -2,27 +2,52 @@
$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
-
-$body-color: $color-text !default
-$body-background-color: $color-background !default
-$link-color: $color-text !default
-
-// Grid
-$grid-gutter: px2rem(64) !default
-$grid-max-width: px2rem(1980) !default
-$grid-gutter-sm: px2rem(44) !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: false !default
+$color-dark-accent: rgb(120, 208, 255) !default
+$color-dark-text: #ffffff !default
+$color-dark-text-alt: #cbcbcb !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
+$link-color: var(--color-text) !default
+
+// Grid System
+$grid-gutter: pxToRem(24) !default
+$grid-gutter-lg: pxToRem(48) !default
+$grid-gutter-xxl: pxToRem(64) !default
+$grid-max-width: pxToRem(1980) !default
// Spacing
-$space-unit: 4 !default
-$spacing0: space(3) !default
-$spacing1: space(6) !default
-$spacing2: space(12) !default
-$spacing3: space(16) !default
-$spacing4: space(32) !default
-$spacing5: space(64) !default
+$space-unit: 4
+$spacing-1: space(2) // 8px
+$spacing-2: space(3) // 12px
+$spacing-3: space(6) // 24px
+$spacing-4: space(12) // 48px
+$spacing-5: space(16) // 64px
+$spacing-6: space(32) // 128px
+$spacing-7: space(64) // 256px
+
+// Deprecated variables
+// $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
+
+$minimum-accessible-size: 44px
// TYPOGRAPHY
@@ -35,103 +60,119 @@ $heading-font-weight: normal !default
// h1
$h1-font-family: $heading-font-family !default
-$h1-size-desktop: px2rem(60) !default
-$h1-size: px2rem(30) !default
+$h1-size-desktop: pxToRem(60) !default
+$h1-size: pxToRem(30) !default
$h1-line-height: 120% !default
+$h1-line-height-desktop: $h1-line-height !default
$h1-weight: bold !default
$h1-text-transform: none !default
// h2
$h2-font-family: $heading-font-family !default
-$h2-size-desktop: px2rem(40) !default
-$h2-size: px2rem(24) !default
+$h2-size-desktop: pxToRem(40) !default
+$h2-size: pxToRem(24) !default
$h2-line-height: 120% !default
+$h2-line-height-desktop: $h2-line-height !default
$h2-weight: $heading-font-weight !default
$h2-text-transform: none !default
// h3
$h3-font-family: $heading-font-family !default
-$h3-size-desktop: px2rem(28) !default
-$h3-size: px2rem(20) !default
+$h3-size-desktop: pxToRem(28) !default
+$h3-size: pxToRem(20) !default
$h3-line-height: 130% !default
+$h3-line-height-desktop: $h3-line-height !default
$h3-weight: bold !default
$h3-text-transform: none !default
// h4
$h4-font-family: $heading-font-family !default
-$h4-size-desktop: px2rem(22) !default
-$h4-size: px2rem(16) !default
+$h4-size-desktop: pxToRem(22) !default
+$h4-size: pxToRem(16) !default
$h4-line-height: 130% !default
+$h4-line-height-desktop: $h4-line-height !default
$h4-weight: bold !default
$h4-text-transform: none !default
// h5 or Section
$h5-font-family: $heading-font-family !default
-$h5-size-desktop: px2rem(24) !default
-$h5-size: px2rem(20) !default
+$h5-size-desktop: pxToRem(24) !default
+$h5-size: pxToRem(20) !default
$h5-line-height: 130% !default
+$h5-line-height-desktop: $h5-line-height !default
$h5-weight: $heading-font-weight !default
$h5-text-transform: uppercase !default
// h6 or Tab
$h6-font-family: $heading-font-family !default
-$h6-size-desktop: px2rem(20) !default
-$h6-size: px2rem(14) !default
+$h6-size-desktop: pxToRem(20) !default
+$h6-size: pxToRem(14) !default
$h6-line-height: 130% !default
+$h6-line-height-desktop: $h6-line-height !default
$h6-weight: $heading-font-weight !default
$h6-text-transform: uppercase !default
// Lead
$lead-font-family: $heading-font-family !default
-$lead-size-desktop: px2rem(60) !default
-$lead-size: px2rem(24) !default
+$lead-size-desktop: pxToRem(60) !default
+$lead-size: pxToRem(24) !default
$lead-line-height: 120% !default
+$lead-line-height-desktop: $lead-line-height !default
$lead-weight: $heading-font-weight !default
$lead-sidebar-font-family: $lead-font-family !default
-$lead-sidebar-size-desktop: px2rem(32) !default
+$lead-sidebar-size-desktop: pxToRem(32) !default
+$lead-sidebar-size: $lead-size !default
$lead-sidebar-line-height: $lead-line-height !default
+$lead-sidebar-line-height-desktop: $lead-sidebar-line-height !default
$lead-sidebar-weight: $lead-weight !default
$lead-hero-font-family: $lead-sidebar-font-family !default
$lead-hero-size: $lead-size !default
$lead-hero-size-desktop: $lead-sidebar-size-desktop !default
$lead-hero-line-height: $lead-sidebar-line-height !default
+$lead-hero-line-height-desktop: $lead-hero-line-height !default
$lead-hero-weight: $lead-sidebar-weight !default
// Body
-$body-size-desktop: px2rem(22) !default
-$body-size: px2rem(18) !default
+$body-size-desktop: pxToRem(22) !default
+$body-size: pxToRem(18) !default
$body-line-height: 160% !default
+$body-line-height-desktop: $body-line-height !default
$body-weight: normal !default
// Small
$small-font-family: $body-font-family !default
-$small-size-desktop: px2rem(18) !default
-$small-size: px2rem(14) !default
+$small-size-desktop: pxToRem(18) !default
+$small-size: pxToRem(14) !default
$small-line-height: 130% !default
+$small-line-height-desktop: $small-line-height !default
$small-weight: normal !default
// Signature
$signature-font-family: $heading-font-family !default
-$signature-size-desktop: px2rem(22) !default
-$signature-size: px2rem(18) !default
+$signature-size-desktop: pxToRem(22) !default
+$signature-size: pxToRem(18) !default
$signature-line-height: 130% !default
+$signature-line-height-desktop: $signature-line-height !default
$signature-weight: $heading-font-weight !default
// Meta
$meta-font-family: $heading-font-family !default
-$meta-size-desktop: px2rem(16) !default
-$meta-size: px2rem(14) !default
+$meta-size-desktop: pxToRem(16) !default
+$meta-size: pxToRem(14) !default
$meta-line-height: 150% !default
+$meta-line-height-desktop: $meta-line-height !default
$meta-weight: $heading-font-weight !default
// Quotes
$quote-font-family: $body-font-family !default
-$quote-size-desktop-short: px2rem(60) !default
-$quote-size-desktop-long: px2rem(40) !default
-$quote-size: px2rem(24) !default
+$quote-size-desktop-short: pxToRem(60) !default
+$quote-size-desktop-long: pxToRem(40) !default
+$quote-size-desktop: pxToRem(40) !default
+$quote-size: pxToRem(24) !default
$quote-line-height: 120% !default
+$quote-line-height-desktop: $quote-line-height !default
$quote-weight: normal !default
$quote-style: italic !default
@@ -141,27 +182,35 @@ $link-underline-thickness: 1px !default
$link-transition: text-decoration-color .3s ease !default
$link-unhover-decoration-color-alpha: 0.3 !default
-// Buttons
-$btn-font-size-desktop: px2rem(18) !default // TODO
-$btn-font-size: px2rem(14) !default
-$btn-padding-x-desktop: $spacing1 !default
-$btn-padding-y-desktop: px2rem(15) !default
-$btn-padding-x: $spacing1 !default
-$btn-padding-y: $spacing0 !default
-$btn-border-radius: px2rem(4) !default
-$btn-border: 1px solid $color-text !default
-$btn-hover-background: $color-background-alt !default
+// Button
+$btn-font-family: $heading-font-family !default
+$btn-font-size: $meta-size !default
+$btn-font-size-desktop: $meta-size-desktop !default
+$btn-font-weight: normal !default
+$btn-text-transform: none !default
+$btn-color: var(--color-text) !default
+$btn-hover-color: var(--color-text) !default
+$btn-background: transparent !default
+$btn-hover-background: var(--color-background) !default
+$btn-border: pxToRem(1) solid var(--color-border) !default
+$btn-border-desktop: $btn-border !default
+$btn-border-radius: pxToRem(4) !default
+$btn-border-radius-desktop: $btn-border-radius !default
+$btn-padding: pxToRem(12) pxToRem(10) !default
+$btn-padding-desktop: pxToRem(18) pxToRem(16) !default
+$btn-min-width: pxToRem(100) !default
+$btn-min-width-desktop: pxToRem(190) !default
// Chip
-$chip-background: $color-background !default
-$chip-background-hover: $color-background-alt !default
-$chip-border: 1px solid $color-border !default
+$chip-background: var(--color-background) !default
+$chip-background-hover: var(--color-background-alt) !default
+$chip-border: 1px solid var(--color-border) !default
$chip-border-radius: $btn-border-radius !default
-$chip-color: $color-text !default
+$chip-color: var(--color-text) !default
// Form
-$form-btn-color: $color-background !default
-$form-btn-background-color: $color-accent !default
+$form-btn-color: var(--color-background) !default
+$form-btn-background-color: var(--color-accent) !default
$form-input-border-radius: 4px !default
// Z-index
@@ -176,21 +225,21 @@ $zindex-aside: 48 !default
$zindex-footer: 50 !default
// Header
-$header-color: $color-text !default
-$header-hover-color: $color-accent !default // TODO : Réflechir à plus élégant / générique
-$header-background: $color-background-alt !default
+$header-color: var(--color-text) !default
+$header-hover-color: var(--color-accent) !default // TODO : Réflechir à plus élégant / générique
+$header-background: var(--color-background-alt) !default
$header-transition: 0.3s !default
$header-dropdown-full: false !default
$header-dropdown-background: $header-background !default
$header-dropdown-color: $header-color !default
$header-dropdown-transition: $header-transition !default
$header-sticky-enabled: true !default
-$header-sticky-background: $color-background !default
+$header-sticky-background: var(--color-background) !default
$header-sticky-dropdown-background: $header-sticky-background !default
$header-sticky-color: $header-color !default
$header-sticky-transition: $header-transition !default
-$header-nav-padding-y: px2rem(20) !default
-$header-nav-padding-y-desktop: px2rem(30) !default
+$header-nav-padding-y: pxToRem(20) !default
+$header-nav-padding-y-desktop: pxToRem(30) !default
$header-logo-height: 32px !default
$header-logo-height-desktop: $header-logo-height !default
$header-height: 87px !default
@@ -202,63 +251,87 @@ $header-border-bottom-width: 1px !default
$body-overlay-color: rgba(0, 0, 0, 0.3) !default
// Footer
-$footer-color: $color-text !default
-$footer-background-color: $color-background-alt !default
+$footer-color: var(--color-text) !default
+$footer-background-color: var(--color-background-alt) !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-desktop: $footer-logo-height !default
$footer-icons-enabled: true !default
-$footer-icons-size: px2rem(32) !default
+$footer-icons-size: pxToRem(32) !default
$footer-text-hidden: false !default
-$dropdown-i18n-background-color: $color-background !default
-$dropdown-i18n-color: $color-text !default
+$dropdown-i18n-background-color: var(--color-background) !default
+$dropdown-i18n-color: var(--color-text) !default
// Hero
$hero-height: 300px !default
$hero-height-desktop: 500px !default
-$hero-color: $color-text !default
-$hero-background-color: $color-background-alt !default
+$hero-color: var(--color-text) !default
+$hero-background-color: var(--color-background-alt) !default
+$hero-credit-color: var(--color-text-alt) !default
// Breadcrumb
$breadcrumb-color: $hero-color !default
$breadcrumb-color-active: $hero-color !default
$breadcrumb-icon: "caret-right" !default
-$breadcrumb-icon-color: $color-text-alt !default
+$breadcrumb-icon-color: var(--color-text-alt) !default
// Icons
$icons: ()
$icons: map-merge($icons, ("arrow": "\ff01"))
+$icons: map-merge($icons, ("arrow-raw": "\e93a"))
$icons: map-merge($icons, ("arrow-first": "\e906"))
$icons: map-merge($icons, ("arrow-last": "\e907"))
$icons: map-merge($icons, ("arrow-left": "\ff02"))
+$icons: map-merge($icons, ("arrow-left-raw": "\e938"))
$icons: map-merge($icons, ("arrow-next": "\e909"))
$icons: map-merge($icons, ("arrow-previous": "\e908"))
$icons: map-merge($icons, ("arrow-right": "\ff00"))
+$icons: map-merge($icons, ("arrow-right-raw": "\e939"))
+$icons: map-merge($icons, ("arrow-alt": "\e931"))
+$icons: map-merge($icons, ("arrow-alt-raw": "\e936"))
$icons: map-merge($icons, ("burger": "\e902"))
$icons: map-merge($icons, ("burger-close": "\e905"))
$icons: map-merge($icons, ("caret": "\e904"))
+$icons: map-merge($icons, ("caret-raw": "\e940"))
+$icons: map-merge($icons, ("caret-bottom": "\e911"))
+$icons: map-merge($icons, ("caret-bottom-raw": "\e944"))
+$icons: map-merge($icons, ("caret-left": "\e912"))
+$icons: map-merge($icons, ("caret-left-raw": "\e942"))
$icons: map-merge($icons, ("caret-top": "\e914"))
+$icons: map-merge($icons, ("caret-top-raw": "\e941"))
$icons: map-merge($icons, ("caret-right": "\e913"))
-$icons: map-merge($icons, ("caret-left": "\e912"))
-$icons: map-merge($icons, ("caret-bottom": "\e911"))
+$icons: map-merge($icons, ("caret-right-raw": "\e943"))
$icons: map-merge($icons, ("check": "\ff06"))
$icons: map-merge($icons, ("check-inline": "\ff07"))
+$icons: map-merge($icons, ("check-inline-raw": "\e945"))
$icons: map-merge($icons, ("close": "\e90e"))
$icons: map-merge($icons, ("copy": "\ff03"))
+$icons: map-merge($icons, ("copy-raw": "\e946"))
$icons: map-merge($icons, ("copy-inline": "\ff04"))
$icons: map-merge($icons, ("download": "\e900"))
+$icons: map-merge($icons, ("download-inline": "\e92f"))
+$icons: map-merge($icons, ("download-raw": "\e937"))
$icons: map-merge($icons, ("eye": "\e901"))
$icons: map-merge($icons, ("facebook": "\e90b"))
+$icons: map-merge($icons, ("facebook-raw": "\e93e"))
$icons: map-merge($icons, ("globe": "\ff10"))
+$icons: map-merge($icons, ("globe-raw": "\e934"))
$icons: map-merge($icons, ("instagram": "\e90a"))
+$icons: map-merge($icons, ("instagram-raw": "\e93b"))
$icons: map-merge($icons, ("link-blank": "\e903"))
$icons: map-merge($icons, ("link-blank-block": "\ff05"))
+$icons: map-merge($icons, ("link-blank-raw": "\e932"))
$icons: map-merge($icons, ("linkedin": "\e90c"))
+$icons: map-merge($icons, ("linkedin-raw": "\e93c"))
$icons: map-merge($icons, ("list-hyphen": "\e917"))
+$icons: map-merge($icons, ("list-hyphen-raw": "\e93f"))
$icons: map-merge($icons, ("pause": "\e90f"))
$icons: map-merge($icons, ("play": "\e910"))
$icons: map-merge($icons, ("search": "\e916"))
$icons: map-merge($icons, ("search-inline": "\ee13"))
+$icons: map-merge($icons, ("search-raw": "\e933"))
$icons: map-merge($icons, ("social": "\e915"))
+$icons: map-merge($icons, ("social-raw": "\e935"))
+$icons: map-merge($icons, ("social-inline": "\e92e"))
$icons: map-merge($icons, ("social-facebook": "\ee01"))
$icons: map-merge($icons, ("social-instagram": "\ee02"))
$icons: map-merge($icons, ("social-linkedin": "\ee03"))
@@ -273,6 +346,7 @@ $icons: map-merge($icons, ("social-github": "\ee10"))
$icons: map-merge($icons, ("social-email": "\ee11"))
$icons: map-merge($icons, ("toc": "\e918"))
$icons: map-merge($icons, ("twitter": "\e90d"))
+$icons: map-merge($icons, ("twitter-raw": "\e90d"))
$icons: map-merge($icons, ("whatsapp": "\e919"))
$icons: map-merge($icons, ("email": "\e920"))
$icons: map-merge($icons, ("telegram": "\e921"))
@@ -288,9 +362,9 @@ $lightbox-overlay-color: rgba(0, 0, 0, 0.90) !default
$lightbox-backdrop: blur(16px) !default
// Table of content
-$toc-color: $color-text !default
-$toc-active-color: $color-accent !default // TODO : checker ce que ça fait
-$toc-background-color: $color-background-alt !default
+$toc-color: var(--color-text) !default
+$toc-active-color: var(--color-accent) !default // TODO : checker ce que ça fait
+$toc-background-color: var(--color-background-alt) !default
$toc-font-family: $body-font-family !default
$toc-font-size: $body-size !default
$toc-font-size-desktop: $body-size-desktop !default
@@ -307,57 +381,78 @@ $table-head-font-size-desktop: $h4-size-desktop !default
$table-body-size: $body-size !default
$table-body-size-desktop: $body-size-desktop !default
+// HEADING
+
+// Under desktop breakpoint
+$heading-margin-top: $spacing-4 !default
+$heading-margin-bottom: 0 !default
+// Upper desktop breakpoint without sidebar
+$heading-margin-top-desktop: $spacing-6 !default
+$heading-margin-bottom-desktop: $heading-margin-bottom !default
+// Upper desktop breakpoint with sidebar
+$heading-margin-top-with-sidebar: $spacing-5 !default
+$heading-margin-bottom-with-sidebar: $heading-margin-bottom !default
+
// BLOCKS
// Base
-$block-space-y: $spacing3 !default
+
+// Under desktop breakpoint
+$block-space-y: $spacing-4 !default
+// Upper desktop breakpoint without sidebar
+$block-space-y-desktop: $spacing-5 !default
+// Upper desktop breakpoint with sidebar
+$block-space-y-with-sidebar: $spacing-5 !default
// Block call to action
-$block-call-to-action-background: $color-accent !default
-$block-call-to-action-color: $color-background !default
-$block-call-to-action-button-background: $color-background !default
-$block-call-to-action-button-color: $color-text !default
-$block-call-to-action-button-hover-background: $color-text-alt !default
-$block-call-to-action-button-hover-color: $color-background !default
+$block-call-to-action-background: var(--color-accent) !default
+$block-call-to-action-color: var(--color-background) !default
+$block-call-to-action-button-background: var(--color-background) !default
+$block-call-to-action-button-color: var(--color-text) !default
+$block-call-to-action-button-hover-background: var(--color-text-alt) !default
+$block-call-to-action-button-hover-color: var(--color-background) !default
// Block chapter
-$block-chapter-layout-accent-background: $color-accent !default
-$block-chapter-layout-accent-color: $color-background !default
-$block-chapter-layout-alt-background: $color-background-alt !default
-$block-chapter-layout-alt-color: $color-text !default
+$block-chapter-layout-accent-background: var(--color-accent) !default
+$block-chapter-layout-accent-color: var(--color-background) !default
+$block-chapter-layout-alt-background: var(--color-background-alt) !default
+$block-chapter-layout-alt-color: var(--color-text) !default
// Block definitions
-$block-definition-border-color: $color-border !default
-$block-definition-border-color-hovered: $color-accent !default
-$block-definition-color-hovered: $color-accent !default
+$block-definition-border-color: var(--color-border) !default
+$block-definition-border-color-hovered: var(--color-accent) !default
+$block-definition-color-hovered: var(--color-accent) !default
$block-definition-font-size: $body-size !default
$block-definition-font-size-desktop: $body-size-desktop !default
// Block pages
-$block-pages-card-background: $color-background-alt !default
-$block-pages-card-page-background: $color-background !default
-$block-pages-card-page-color: $color-text !default
-$block-pages-card-page-background-hover: $color-accent !default
-$block-pages-card-page-color-hover: $color-background !default
+$block-pages-card-background: var(--color-background-alt) !default
+$block-pages-card-page-background: var(--color-background) !default
+$block-pages-card-page-color: var(--color-text) !default
+$block-pages-card-page-background-hover: var(--color-accent) !default
+$block-pages-card-page-color-hover: var(--color-background) !default
// Block posts
$block-posts-grid-columns: 3 !default
+// Block programs
+$block-programs-aspect-ratio: 16/9 !default
+
// Block timeline
-$block-timeline-horizontal-background: $color-background-alt !default
-$block-timeline-horizontal-color: $color-text !default
+$block-timeline-horizontal-background: var(--color-background-alt) !default
+$block-timeline-horizontal-color: var(--color-text) !default
// Block testimonials
$block-testimonials-xl-font-size: $quote-size-desktop-short !default
$block-testimonials-xl-line-height: $quote-line-height !default
$block-testimonials-xl-font-size-long-text: $quote-size-desktop-long !default
$block-testimonials-xl-line-height-long-text: $quote-line-height !default
-$block-testimonials-color: $color-accent !default
+$block-testimonials-color: var(--color-accent) !default
$block-testimonials-font-family: $quote-font-family !default
$block-testimonials-font-size: $quote-size !default
$block-testimonials-line-height: $quote-line-height !default
$block-testimonials-style: $quote-style !default
-$block-testimonials-pagination-background: $color-border !default
-$block-testimonials-pagination-progress-background: $color-accent !default
+$block-testimonials-pagination-background: var(--color-border) !default
+$block-testimonials-pagination-progress-background: var(--color-accent) !default
// Block key_figures
@@ -365,24 +460,25 @@ $block-testimonials-pagination-progress-background: $color-accent !default
$block-key_figures-number-font-family: $heading-font-family !default
$block-key_figures-unit-font-weight: normal !default
$block-key_figures-number-font-weight: bold !default
+$block-key_figures-image-max-width: $spacing-6 !default
-$block-key_figures-font-size: px2rem(16) !default
-$block-key_figures-number-font-size: px2rem(32) !default
+$block-key_figures-font-size: pxToRem(16) !default
+$block-key_figures-number-font-size: pxToRem(32) !default
-$block-key_figures-font-size-desktop: px2rem(18) !default
-$block-key_figures-number-font-size-desktop: px2rem(40) !default
+$block-key_figures-font-size-desktop: pxToRem(18) !default
+$block-key_figures-number-font-size-desktop: pxToRem(40) !default
-$block-key_figures-font-size-lg: px2rem(20) !default
-$block-key_figures-number-font-size-lg: px2rem(50) !default
+$block-key_figures-font-size-lg: pxToRem(20) !default
+$block-key_figures-number-font-size-lg: pxToRem(50) !default
$block-key_figures-font-size-xl: $block-key_figures-font-size-lg !default
-$block-key_figures-number-font-size-xl: px2rem(60) !default
+$block-key_figures-number-font-size-xl: pxToRem(60) !default
$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
-$block-key_figures-number-font-size-xxl: px2rem(80) !default
+$block-key_figures-number-font-size-xxl: pxToRem(80) !default
// Block gallery
-$block-gallery-carousel-background: $color-background-alt !default
+$block-gallery-carousel-background: var(--color-background-alt) !default
$block-gallery-carousel-max-height: 70vh !default
// Block image
@@ -390,26 +486,30 @@ $block-image-max-height-with-sidebar: calc(100vh - var(--header-height)) !defaul
$block-image-max-height-without-sidebar: none !default
// Block video
-$block-video-background: $color-background-alt !default
+$block-video-background: var(--color-background-alt) !default
// Sections
-$article-media-background: color-contrast($color-background, 3%) !default
$article-media-aspect-ratio: 2 !default
-$post-media-background: $article-media-background !default
-$post-categories-color: color-contrast($color-text, 20%) !default
-$post-time-color: $color-text-alt !default
+$post-time-color: var(--color-text-alt) !default
// Si layout posts grid (ne concerne pas les blocks posts)
$posts-grid-columns: $block-posts-grid-columns !default
// Person
-$persons-avatar-background-color: $color-background-alt !default
+$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
+
+// Project
+$project-infos-border-color: $color-border !default
+$project-infos-color-text: $color-text !default
+$project-infos-color-text-alt: $color-text-alt !default
+$project-infos-color-accent: $color-accent !default
// Program
$program-essential-font-size: $meta-size !default
$program-essential-font-size-desktop: $meta-size-desktop !default
-$program-share-font-size: $meta-size !default
-$program-share-font-size-desktop: $meta-size-desktop !default
$program-zindex-toc: $zindex-toc !default
// MISC
@@ -422,5 +522,5 @@ $arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
$icon-burger-margin-right: -12px
$icon-close-margin-right: -12px
$icon-toc-margin-right: -14px
-$icon-arrow-previous-margin-left: -22px // cf. testimonial
-$icon-social-margin-right: -14px
\ No newline at end of file
+$icon-arrow-previous-margin-left: -18px // cf. testimonial
+$icon-social-margin-right: -14px
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 0e9fd77345bf757f181cbf8f230ad8f80780306c..8fe28937e1de3e2fd1d88dda102a1b1d5322e621 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -1,474 +1,12 @@
-@function pxToRem($size)
- $remSize: $size / 16
- @return #{$remSize}rem
-
-@function px2rem($size)
- @return pxToRem($size)
-
-$space-unit: 4 !default
-@function space($spaces: 1)
- @return #{$spaces * $space-unit / 16}rem
-
-@mixin in-page-with-sidebar
- @include media-breakpoint-up(desktop)
- body:not(.full-width) &
- @content
-
-@mixin in-page-without-sidebar
- @include media-breakpoint-up(desktop)
- main > .blocks &,
- body.full-width &,
- @content
-
-// Use this mixin to override with-aside or without-aside rules
-@mixin in-page-with-or-without-sidebar
- @include media-breakpoint-up(desktop)
- body:not(.full-width) &,
- main > .blocks &,
- body.full-width &,
- @content
-
-// Aliases
-@mixin full-page
- @include in-page-without-sidebar
- @content
-
-@mixin not-full-page
- @include in-page-with-sidebar
- @content
-
-@mixin in-page-program
- .programs__section &
- @content
-
-@function half($size)
- @return calc(#{$size} / 2)
-
-@mixin link($color: $link-color, $unhover_decorated: true)
- color: $color
- text-decoration-line: underline
- text-decoration-thickness: $link-underline-thickness
- text-underline-offset: $link-underline-offset
- transition: $link-transition
- @if $unhover_decorated
- text-decoration-color: rgba($color, $link-unhover-decoration-color-alpha)
- @else
- text-decoration-color: transparent
- &:hover
- text-decoration-color: rgba($color, 1)
- text-decoration-thickness: $link-underline-thickness
-
-@mixin link-hovered-underline-only
- &:not(:hover)
- text-decoration: transparent
-
-@mixin hover-translate-icon($pseudo: after, $distance: 10)
- &::#{$pseudo}
- display: inline-block
- transition: transform 0.55s $arrow-ease-transition
- transform: translateX(0)
- &:hover
- &::#{$pseudo}
- transform: translateX(#{px2rem($distance)})
-
-@mixin sticky($offset-y: 0)
- position: sticky
- top: $offset-y
- @if $header-sticky-enabled
- transition: top $header-sticky-transition
- html:not(.is-scrolling-down) &
- top: calc(var(--header-height) + #{$offset-y})
-
-// NEW UTILS
-@mixin icon($icon-name: '', $pseudo-element: before, $non-breaking: false)
- &::#{$pseudo-element}
- content: map-get($icons, $icon-name)
- display: inline-block
- font-family: 'Icon'
- font-style: normal
- font-variant: normal
- font-weight: normal
- line-height: 1
- speak: never
- text-transform: none
- vertical-align: middle
- @if $non-breaking
- content: "Â #{map-get($icons, $icon-name)}"
- display: inline
- @content // TODO : important de documenter ça
-
-@mixin icon-block($icon-name: '', $pseudo-element: before, $non-breaking: false)
- @include icon($icon-name, $pseudo-element, $non-breaking)
- font-size: 44px
- display: inline
- @content
-
-@mixin container
- margin-left: auto
- margin-right: auto
- max-width: $grid-max-width
- padding-left: half($grid-gutter-sm)
- padding-right: half($grid-gutter-sm)
- width: 100%
- @include media-breakpoint-up(desktop)
- padding-left: $grid-gutter
- padding-right: $grid-gutter
-
-@mixin grid($cols: 12, $breakpoint: false, $gap-y: $grid-gutter, $gap-x: $grid-gutter)
- word-break: break-word
- @if $breakpoint
- @include media-breakpoint-up($breakpoint)
- display: grid
- grid-gap: $gap-y $gap-x
- grid-template-columns: repeat($cols, 1fr)
- @else
- display: grid
- grid-gap: $gap-y $gap-x
- grid-template-columns: repeat($cols, 1fr)
- @include media-breakpoint-down(desktop)
- grid-gap: $grid-gutter-sm
-
-// This must be used for content inside columns
-@function col($quantity, $base: 12)
- $quantity-on-base: $quantity / $base * 12
- $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} - #{$grid-gutter} )
- @return #{$width}
-
-// This must be used for offset, outside columns
-@function offset($quantity, $base: 12)
- $quantity-on-base: $quantity / $base * 12
- $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} )
- @return #{$width}
-
-// This must be used for offset, inside columns
-@function col-offset($quantity, $base: 12)
- $quantity-on-base: $quantity / $base * 12
- $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} + #{$grid-gutter})
- @return #{$width}
-
-@function col-outside-container($quantity, $base: 12)
- $responsive-grid-width: Min(100vw, (#{$grid-max-width}))
- @return calc((#{$responsive-grid-width} + #{$grid-gutter} * 2) / #{$base} * #{$quantity} - #{$grid-gutter} * 2)
-
-@function container-margin-x
- @return Max(#{$grid-gutter}, calc(50vw - #{$grid-max-width} / 2 + #{$grid-gutter}))
-
-@mixin container-margin-left
- margin-left: container-margin-x()
-
-@mixin container-margin-right
- margin-right: container-margin-x()
-
-@mixin stretched-link($pseudo-element: after)
- &::#{$pseudo-element}
- bottom: 0
- content: ''
- left: 0
- position: absolute
- right: 0
- top: 0
- z-index: $zindex-stretched-link
-
-@mixin aspect-ratio($ratio, $selector: 'iframe', $background: false)
- @if $background
- aspect-ratio: #{$ratio}
- background: $background
- #{$selector}
- aspect-ratio: #{$ratio}
- display: block
- width: 100%
-
-@mixin handle-svg-fit
- picture.is-svg
- img
- object-fit: contain
-
-@mixin article($background: null)
- position: relative
- display: flex
- flex-direction: column
- .media
- @include handle-svg-fit
- margin-bottom: $spacing1
- order: -1
- overflow: hidden
- img
- display: block
- object-fit: cover
- @if $article-media-aspect-ratio
- aspect-ratio: $article-media-aspect-ratio
- h2, h3, [itemprop=headline]
- @include h3
- a
- display: block
- @include stretched-link
- text-decoration: none
- p + time
- margin-top: $spacing0
- time
- @include meta
- color: $color-text-alt
- display: block
-
-@mixin post-time-author-flex
- .post-meta
- display: flex
- flex-wrap: wrap
- .post-author p::before
- content: ' • '
-
-
-@mixin list-section
- @include list-reset
- > li
- border-bottom: 1px solid $color-border
- padding-bottom: $spacing1
- padding-top: $spacing1
- position: relative
- > .title
- @include h2
- transition: color 0.55s
- @include media-breakpoint-down(desktop)
- @include icon(arrow-right, after, true)
- bottom: $spacing0
- position: absolute
- right: 0
- @include media-breakpoint-up(desktop)
- @include arrow-right-hover
- display: block
- &::after
- transform: translateX(0)
- position: relative
- &:hover
- &::after
- transform: translateX($spacing0)
- a
- text-decoration: none
- &:hover
- color: $color-accent
-
- @include media-breakpoint-down(desktop)
- a:nth-child(2)
- margin-top: calc(#{$spacing0} / 2)
- a, p
- display: block
- @include media-breakpoint-up(desktop)
- align-items: baseline
- display: flex
- justify-content: space-between
-
-
-@mixin visually-hidden
- clip: rect(0,0,0,0) !important
- border: 0 !important
- height: 1px !important
- margin: -1px !important
- overflow: hidden !important
- padding: 0 !important
- position: absolute !important
- white-space: nowrap !important
- width: 1px !important
-
-@mixin button-reset
- appearance: none
- background: transparent
- border: none
- border-radius: 0
- cursor: pointer
- user-select: none
- &:active,
- &:focus
- box-shadow: inset 0 0 0 0.25rem rgba($color-text, 0.25)
- // TODO : vérifier si l'outline 0 est vraiment nécessaire
- // outline: 0
-
-@mixin list-reset
- list-style: none
- padding-left: 0
- margin-bottom: 0
- margin-top: 0
-
-@mixin inset($top: 0, $right: $top, $bottom: $top, $left: $top)
- inset: $top $right $bottom $left
- // polyfill for inset
- @supports not (inset: $top)
- bottom: $bottom
- left: $left
- right: $right
- top: $top
-
-@function color-contrast($color, $amount)
- @if lightness($color) > 50%
- $amount: $amount * -1
- @return scale-color($color, $lightness: $amount)
-
-@mixin button-icon($icon: false)
- @include button-reset
- line-height: $body-line-height
- border: 1px solid $hero-color
- padding: half($spacing0) $spacing1
- white-space: nowrap
- @if $icon
- @include icon-block($icon, after)
-
-@mixin text-underline
- text-decoration-color: $color-border
- text-decoration-line: underline
- text-decoration-thickness: 1px
- text-underline-offset: 3px
- text-decoration-line: underline
-
-@mixin arrow-right-hover
- position: relative
- display: flex
- justify-content: space-between
- align-items: center
- @include icon(arrow, after)
- opacity: 0
- transform: translateX(-20px)
- transition: 0.55s $arrow-ease-transition
- position: absolute
- right: 0
- &:hover
- &:after
- opacity: 1
- transform: translateX(0)
-
-@mixin top-flex
- @include in-page-without-sidebar
- align-items: baseline
- display: flex
- .block-title
- width: col(4)
- &:not(.hidden) + .description
- margin-left: $grid-gutter
- .description
- margin-top: 0
- width: col(8)
-
-@mixin collapsed-figcaption
- figcaption
- @include meta
- color: $color-text-alt
- position: absolute
- display: block
- left: 0
- right: 0
- text-align: right
- z-index: 10
- &::before
- @include meta
- content: '©'
- position: absolute
- right: 0
- top: 0
- background: $hero-background-color
- text-align: center
- padding: half($spacing0)
- display: block
- .credit-content
- @include meta
- background: $hero-background-color
- display: none
- padding: half($spacing0)
- padding-right: $spacing1
- a
- color: inherit
- text-decoration-color: inherit
- &:focus
- .credit-content
- display: block
- @include media-breakpoint-up(desktop)
- &:before
- padding-right: 0
- @include media-breakpoint-down(desktop)
- position: relative
- background: $color-background
- &::before
- background: transparent
- .credit-content
- display: block
- background: transparent
- position: relative
-
- &:hover
- figcaption .credit-content
- display: block
-
-@mixin dropdown-i18n
- position: relative
- .dropdown-menu
- margin-top: $header-nav-padding-y
- padding-left: $spacing1
- padding-bottom: $spacing0
- padding-top: $spacing0
- padding-right: $spacing1
- right: 0
- li a
- padding-bottom: half($spacing0)
- padding-top: half($spacing0)
- display: block
- &.is-checked
- display: flex
- justify-content: space-between
- align-items: center
- gap: $spacing2
- text-decoration: none !important
- @include icon(caret, after)
- transform: rotate(-14deg) skewX(-30deg)
-
-// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
-@function str-replace($string, $search, $replace: "")
- $index: str-index($string, $search)
- @if $index
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- @return $string
-
-@mixin font-face($name, $path, $weight: 400, $style: normal, $exts: (eot woff2 woff ttf svg))
- $src: null
-
- $extmods: (eot:"?", svg:"#" + str-replace($name," ","_"))
- $formats: (otf: "opentype", ttf: "truetype")
-
- @each $ext in $exts
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
- $src: append($src, url(quote("/assets/fonts/" + $path + "." + $extmod)) format(quote($format)), comma,)
-
- @font-face
- font-family: quote($name)
- font-style: $style
- font-weight: $weight
- font-display: swap
- src: $src
-
-@mixin sidebar($side: start)
- @include media-breakpoint-down(desktop)
- padding: 0 half($grid-gutter-sm)
- margin-bottom: $spacing3
- @include media-breakpoint-up(desktop)
- @if $side == start
- @include container-margin-left
- left: 0
- @else
- @include container-margin-right
- right: 0
- margin-top: 0
- top: 0
- height: 100%
- position: absolute
- width: col-outside-container(4)
- & > div
- @include sticky($spacing1)
- .toc-container
- border-top: 1px solid $color-border
- padding-top: $spacing1
- position: static
- margin-left: 0
-
-// Old browsers support
-
-@mixin browser-under-safari-16
- @media not all and (min-resolution:.001dpcm)
- @supports (-webkit-appearance:none) and (display:flow-root)
- @content
\ No newline at end of file
+@import utils/fonts
+@import utils/colors
+@import utils/grid
+@import utils/icons
+@import utils/links
+@import utils/media
+@import utils/normalize
+@import utils/sidebar
+@import utils/sizes
+@import utils/blocks
+
+@import utils/shame
\ No newline at end of file
diff --git a/assets/sass/_theme/_variables.sass b/assets/sass/_theme/_variables.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1a4c90200b9dea2559ff02faf67ba37b2ebac69f
--- /dev/null
+++ b/assets/sass/_theme/_variables.sass
@@ -0,0 +1,161 @@
+\:root
+ // -------------- //
+ // COLORS //
+ // ---------------//
+ --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}
+
+ @if $has-dark-mode
+ @media (prefers-color-scheme: dark)
+ --color-accent: #{$color-dark-accent}
+ --color-text: #{$color-dark-text}
+ --color-text-alt: #{$color-dark-text-alt}
+ --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 //
+ // ---------------//
+ --h1-size: #{$h1-size}
+ --h1-line-height: #{$h1-line-height}
+
+ --h2-size: #{$h2-size}
+ --h2-line-height: #{$h2-line-height}
+
+ --h3-size: #{$h3-size}
+ --h3-line-height: #{$h3-line-height}
+
+ --h4-size: #{$h4-size}
+ --h4-line-height: #{$h4-line-height}
+
+ --h5-size: #{$h5-size}
+ --h5-line-height: #{$h5-line-height}
+
+ --h6-size: #{$h6-size}
+ --h6-line-height: #{$h6-line-height}
+
+ --lead-size: #{$lead-size}
+ --lead-line-height: #{$lead-line-height}
+
+ --lead-sidebar-size: #{$lead-sidebar-size}
+ --lead-sidebar-line-height: #{$lead-sidebar-line-height}
+
+ --lead-hero-size: #{$lead-hero-size}
+ --lead-hero-line-height: #{$lead-hero-line-height}
+
+ --body-size: #{$body-size}
+ --body-line-height: #{$body-line-height}
+
+ --small-size: #{$small-size}
+ --small-line-height: #{$small-line-height}
+
+ --signature-size: #{$signature-size}
+ --signature-line-height: #{$signature-line-height}
+
+ --meta-size: #{$meta-size}
+ --meta-line-height: #{$meta-line-height}
+
+ --quote-size: #{$quote-size}
+ --quote-line-height: #{$quote-line-height}
+
+ @include media-breakpoint-up(desktop)
+ --h1-size: #{$h1-size-desktop}
+ --h1-line-height: #{$h1-line-height-desktop}
+
+ --h2-size: #{$h2-size-desktop}
+ --h2-line-height: #{$h2-line-height-desktop}
+
+ --h3-size: #{$h3-size-desktop}
+ --h3-line-height: #{$h3-line-height-desktop}
+
+ --h4-size: #{$h4-size-desktop}
+ --h4-line-height: #{$h4-line-height-desktop}
+
+ --h5-size: #{$h5-size-desktop}
+ --h5-line-height: #{$h5-line-height-desktop}
+
+ --h6-size: #{$h6-size-desktop}
+ --h6-line-height: #{$h6-line-height-desktop}
+
+ --lead-size: #{$lead-size-desktop}
+ --lead-line-height: #{$lead-line-height-desktop}
+
+ --lead-sidebar-size: #{$lead-sidebar-size-desktop}
+ --lead-sidebar-line-height: #{$lead-sidebar-line-height-desktop}
+
+ --lead-hero-size: #{$lead-hero-size-desktop}
+ --lead-hero-line-height: #{$lead-hero-line-height-desktop}
+
+ --body-size: #{$body-size-desktop}
+ --body-line-height: #{$body-line-height-desktop}
+
+ --small-size: #{$small-size-desktop}
+ --small-line-height: #{$small-line-height-desktop}
+
+ --signature-size: #{$signature-size-desktop}
+ --signature-line-height: #{$signature-line-height-desktop}
+
+ --meta-size: #{$meta-size-desktop}
+ --meta-line-height: #{$meta-line-height-desktop}
+
+ --quote-size: #{$quote-size-desktop}
+ --quote-line-height: #{$quote-line-height-desktop}
+
+ // -------------- //
+ // BUTTONS //
+ // ---------------//
+ --btn-font-family: #{$btn-font-family}
+ --btn-font-size: #{$btn-font-size}
+ --btn-font-weight: #{$btn-font-weight}
+ --btn-text-transform: #{$btn-text-transform}
+ --btn-color: #{$btn-color}
+ --btn-hover-color: #{$btn-hover-color}
+ --btn-background: #{$btn-background}
+ --btn-hover-background: #{$btn-hover-background}
+ --btn-border: #{$btn-border}
+ --btn-border-radius: #{$btn-border-radius}
+ --btn-padding: #{$btn-padding}
+ --btn-min-width: #{$btn-min-width}
+ @include media-breakpoint-up(desktop)
+ --btn-font-size: #{$btn-font-size-desktop}
+ --btn-padding: #{$btn-padding-desktop}
+ --btn-border: #{$btn-border-desktop}
+ --btn-border-radius: #{$btn-border-radius-desktop}
+ --btn-min-width: #{$btn-min-width-desktop}
+
+ // -------------- //
+ // GRID //
+ // ---------------//
+
+ // Largeur maximum de la grille définie dans _configuration.sass
+ --grid-max-width: #{$grid-max-width}
+
+ // Largeur de la grille
+ // Elle inclut les gouttières extérieures
+ // Si la largeur de l'écran est inférieure à 1980px, on prend la largeur totale.
+ // La grille n'est jamais plus grande que 1980px
+ --grid-width: Min(var(--grid-max-width), 100vw)
+
+ // Largeur d'une colonne
+ // On soustrait à la largeur de la grille les 13 gouttières (les 2 extérieures et les 11 intérieures), puis on divise par 12
+ --column-width: calc( (var(--grid-width) - var(--grid-gutter) * 13) / 12)
+
+ // Taille de la gouttière
+ // Les largeurs des gouttières en fonction des breakpoints sont définies dans _configuration.sass
+ --grid-gutter: #{$grid-gutter}
+ --grid-gutter-negative: #{-$grid-gutter}
+ @include media-breakpoint-up(lg)
+ --grid-gutter: #{$grid-gutter-lg}
+ --grid-gutter-negative: #{-$grid-gutter-lg}
+ @include media-breakpoint-up(xxl)
+ --grid-gutter: #{$grid-gutter-xxl}
+ --grid-gutter-negative: #{-$grid-gutter-xxl}
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/base.sass b/assets/sass/_theme/blocks/base.sass
index 0adf48cef3fa0d87d9645aeae2ab83934847f5d5..1c231475e64557e3718fc1936f1c724f770b96e2 100644
--- a/assets/sass/_theme/blocks/base.sass
+++ b/assets/sass/_theme/blocks/base.sass
@@ -1,23 +1,35 @@
.block
- margin-top: $block-space-y
- margin-bottom: $block-space-y
+ --block-space-y: #{$block-space-y}
+ margin-top: var(--block-space-y)
+ margin-bottom: var(--block-space-y)
.block-title
@include h5
.top
.block-title
+ .description
- margin-top: $spacing1
+ margin-top: $spacing-3
.block-title.hidden + .description
margin-top: 0
+ @include in-page-without-sidebar
+ --block-space-y: #{$block-space-y-desktop}
+ @include in-page-with-sidebar
+ --block-space-y: #{$block-space-y-with-sidebar}
.heading
+ --heading-margin-top: #{$heading-margin-top}
+ --heading-margin-bottom: #{$heading-margin-bottom}
+ margin-bottom: var(--heading-margin-bottom)
&:not(:first-child)
- margin-top: $spacing3
+ margin-top: var(--heading-margin-top)
+ @include in-page-with-sidebar
+ --heading-margin-top: #{ $heading-margin-top-with-sidebar}
+ --heading-margin-bottom: #{$heading-margin-bottom-with-sidebar}
@include in-page-without-sidebar
- margin-top: $spacing4
+ --heading-margin-top: #{ $heading-margin-top-desktop}
+ --heading-margin-bottom: #{$heading-margin-bottom-desktop}
@include in-page-without-sidebar
h2
- width: col(8)
+ width: columns(8)
// Specific
$backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background, .block-chapter--alt_background, .block-timeline--horizontal, .block-pages--cards"
@@ -32,16 +44,10 @@ $backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background,
// Heading + chapter
.heading + .block-chapter
- margin-top: $spacing1
+ margin-top: $spacing-3
// Following chapters
.block-chapter
&--alt_background, &--accent_background
& + &
margin-top: 0
-
-// Heading + block_cta + full-width
-// .heading + .block-call_to_action
-// margin-top: $spacing3
-// padding-top: 0
-
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index 2d7fab7c6992e13a1166ae233a9bb2089889cd68..aa1ec4a787fd00f9505f556b321ff7d68ff3593a 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -4,7 +4,7 @@
.top
margin-bottom: 0
.block-title
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
+ .description
margin-top: 0
.description
@@ -17,7 +17,7 @@
.description
a
color: inherit
- text-decoration-color: $block-call-to-action-color
+ text-decoration-color: $block-call-to-action-color
p
@include h2
.actions
@@ -27,27 +27,24 @@
flex-direction: column
a
@include meta
+ @extend %underline-on-hover
color: $block-call-to-action-color
- margin-right: $spacing1
- margin-top: $spacing1
- text-decoration-color: rgba($block-call-to-action-color, .3)
+ margin-right: $spacing-3
+ margin-top: $spacing-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
- color: $block-call-to-action-button-color
- transition: background .3s ease, color .3s ease
- &:hover,
- &:focus-visible,
- &:focus
- background: $block-call-to-action-button-hover-background
- color: $block-call-to-action-button-hover-color
+ --btn-background: #{$block-call-to-action-button-background}
+ --btn-color: #{$block-call-to-action-button-color}
+ --btn-hover-background: #{$block-call-to-action-button-hover-background}
+ --btn-hover-color: #{$block-call-to-action-button-hover-color}
+ --btn-border: none
+ --btn-min-width: #{columns(2)}
+ @extend .button
&:last-child
margin-bottom: 0
* + .actions
- margin-top: calc(#{$spacing2} - #{$spacing1})
+ margin-top: $spacing-3
img
display: block
@@ -56,13 +53,13 @@
padding-top: 0
padding-bottom: 0
.call_to_action
- padding: $spacing3 0
+ padding: var(--block-space-y) 0
.actions
a
&:last-child
margin-bottom: 0
.call_to_action--with-image
- padding-top: half($grid-gutter-sm)
+ padding-top: var(--grid-gutter)
display: flex
flex-direction: column
> *
@@ -80,7 +77,7 @@
> div
// TODO : simplifier l'application d'une couleur de fond sur le CTA avec sidebar et sans sidebar
background-color: var(--cta-background-color)
- padding: $grid-gutter col(1, 8)
+ padding: columns(1)
width: 100%
position: relative
&::after
@@ -91,27 +88,28 @@
top: 0
bottom: 0
left: 100%
- width: Max(#{$grid-gutter}, calc(50vw - #{half($grid-max-width)} + #{$grid-gutter}))
+ // Calcul de la largeur nécessaire pour remplir l'espace droit entre le container et le bord droit de la fenêtre
+ width: grid-external-space()
&--with-image
picture
order: 1
- padding-left: col(1, 8)
- padding-right: offset(4, 8)
+ padding-left: columns(1)
+ padding-right: offset(4)
position: relative
z-index: 2
img
- margin-bottom: calc(-#{$grid-gutter} + -#{$spacing1})
+ margin-bottom: calc(var(--grid-gutter-negative) + -#{$spacing-3})
> div
- padding-top: calc(#{$grid-gutter} + #{$spacing3})
+ padding-top: calc(var(--grid-gutter) * 2 + #{$spacing-3})
@include in-page-without-sidebar
background-color: var(--cta-background-color)
padding-top: 0
padding-bottom: 0
.block-content
- padding: $spacing4 $grid-gutter
- margin-left: -$grid-gutter
- margin-right: -$grid-gutter
+ padding: $spacing-6 var(--grid-gutter)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
.call_to_action--with-image
@include grid
> div
@@ -139,7 +137,7 @@
&:first-child
margin-top: 0
a + a
- margin-top: $spacing1
+ margin-top: $spacing-3
&.call_to_action--with-title
.actions
grid-row: 2
diff --git a/assets/sass/_theme/blocks/chapter.sass b/assets/sass/_theme/blocks/chapter.sass
index e5c0f3a3767e84344f5eba3195c3b20e0548bf38..ff06e83d5204c932c97aa66214845bf43f4fdce7 100644
--- a/assets/sass/_theme/blocks/chapter.sass
+++ b/assets/sass/_theme/blocks/chapter.sass
@@ -2,7 +2,7 @@
p:last-child
margin-bottom: 0
.notes
- margin-top: $spacing1
+ margin-top: $spacing-3
*
@include small
sub, sup
@@ -19,7 +19,7 @@
.text
order: 2
figure
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
&--alt_background
background: $block-chapter-layout-alt-background
.block-content
@@ -31,56 +31,57 @@
a
@include link($block-chapter-layout-accent-color)
- &--alt_background, &--accent_background
+ &--alt_background,
+ &--accent_background
margin-bottom: 0
- + .block-chapter--alt_background, + .block-chapter--accent_background
+ + .block-chapter--alt_background,
+ + .block-chapter--accent_background
margin-top: 0
@include media-breakpoint-down(desktop)
- &--alt_background, &--accent_background
- padding-top: $grid-gutter
- padding-bottom: $grid-gutter
-
- &--with-image
- &.block-chapter--alt_background, &.block-chapter--accent_background
- padding-top: half($grid-gutter-sm)
+ &--alt_background,
+ &--accent_background
+ padding-top: var(--grid-gutter)
+ padding-bottom: var(--grid-gutter)
@include in-page-with-sidebar
figure
- max-width: col(6, 8)
+ max-width: columns(6)
&.image-portrait,
&.image-square
- max-width: col(4, 8)
- &--alt_background, &--accent_background
+ max-width: columns(4)
+ &--alt_background,
+ &--accent_background
background: none
padding-bottom: 0
padding-top: 0
.chapter .text
- padding: $grid-gutter
+ padding: var(--grid-gutter)
figure
margin-bottom: 0
figcaption
- padding-left: $grid-gutter
-
+ padding-left: var(--grid-gutter)
&--alt_background
.chapter
background: $block-chapter-layout-alt-background
&--accent_background
.chapter
background: $block-chapter-layout-accent-background
+
@include in-page-without-sidebar
- &--alt_background, &--accent_background
- padding-top: $grid-gutter
- padding-bottom: $grid-gutter
+ &--alt_background,
+ &--accent_background
+ padding-top: var(--grid-gutter)
+ padding-bottom: var(--grid-gutter)
margin-bottom: 0
.chapter
flex-direction: row
+ justify-content: space-between
.text
order: 0
- width: col(7)
+ width: columns(7)
figure
- width: col(4)
- margin-left: col-offset(1)
+ width: columns(4)
margin-bottom: 0
text-align: right
img
diff --git a/assets/sass/_theme/blocks/contact.sass b/assets/sass/_theme/blocks/contact.sass
index be14a1d894192873ea9c494d5fc8827fec3a18fc..acc9cf80aed24df47e756ce702605106a9ca9028 100644
--- a/assets/sass/_theme/blocks/contact.sass
+++ b/assets/sass/_theme/blocks/contact.sass
@@ -3,7 +3,7 @@
@include top-flex
margin-bottom: 0
+ .informations
- margin-top: $spacing2
+ margin-top: $spacing-4
.informations
p,
@@ -14,21 +14,20 @@
[itemprop="name"]
@include h4
a
- &:not(:hover)
- text-decoration-color: transparent
+ @extend %underline-on-hover
+ ul
- margin-top: $spacing2
+ margin-top: $spacing-4
ul
@include list-reset
li
display: flex
flex-wrap: wrap
- padding-bottom: $spacing0
+ padding-bottom: $spacing-2
&:first-of-type
padding-top: 0
+ li
- padding-top: $spacing0
- border-top: 1px solid $color-border
+ padding-top: $spacing-2
+ border-top: 1px solid var(--color-border)
@include media-breakpoint-down(desktop)
justify-content: end
flex-wrap: wrap
@@ -47,18 +46,18 @@
time + time
@include icon(arrow-right, before)
display: inline-block
- padding: 0 px2rem(7) 0 px2rem(3)
+ padding: 0 pxToRem(7) 0 pxToRem(3)
@include in-page-without-sidebar
.top
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
.informations
display: flex
margin-top: 0
address
- width: col(4)
+ width: columns(4)
margin-top: 0
ul
margin-top: 0
- width: col(8)
- margin-left: $grid-gutter
\ No newline at end of file
+ width: columns(8)
+ margin-left: var(--grid-gutter)
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/datatable.sass b/assets/sass/_theme/blocks/datatable.sass
index e3eb5c243aa22ac9c4cc5aa6daa7c52244ca8cb2..b5a8f2c9ce3ee989ca6989354ebe86ae0b4b99d5 100644
--- a/assets/sass/_theme/blocks/datatable.sass
+++ b/assets/sass/_theme/blocks/datatable.sass
@@ -2,8 +2,8 @@
th
white-space: nowrap
caption
- color: $color-text-alt
+ color: var(--color-text-alt)
@include media-breakpoint-up(desktop)
.top
p
- width: col(8)
+ width: columns(8)
diff --git a/assets/sass/_theme/blocks/definitions.sass b/assets/sass/_theme/blocks/definitions.sass
index ff72015af4391988e8d0e72ea05d975246255ca2..766c4e4843ba388157b97a1e7613b76089e835ae 100644
--- a/assets/sass/_theme/blocks/definitions.sass
+++ b/assets/sass/_theme/blocks/definitions.sass
@@ -25,7 +25,7 @@
font-size: $block-definition-font-size-desktop
p
margin-block-start: 0
- margin-block-end: $spacing1
+ margin-block-end: $spacing-3
&::after
content: ""
border-bottom: 1px solid $block-definition-border-color
@@ -36,6 +36,6 @@
.definitions
details
p
- padding-left: col(4)
- margin-left: $grid-gutter
+ padding-left: columns(4)
+ margin-left: var(--grid-gutter)
diff --git a/assets/sass/_theme/blocks/features.sass b/assets/sass/_theme/blocks/features.sass
index b225b1b586cafe45a591b72154af8ab8fba7924d..375807f872ff0af02bee806ce6b499fc704d2fa8 100644
--- a/assets/sass/_theme/blocks/features.sass
+++ b/assets/sass/_theme/blocks/features.sass
@@ -5,9 +5,9 @@
display: flex
flex-direction: column
+ li
- margin-top: $spacing3
+ margin-top: $spacing-5
.name
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
figure
order: -1
img
@@ -15,20 +15,20 @@
margin: auto
figcaption
@include meta
- margin-top: $spacing0
+ margin-top: $spacing-2
text-align: right
@include in-page-with-sidebar
li
flex-direction: row
figure
- width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ width: columns(2)
flex-shrink: 0
- margin-right: half($grid-gutter)
+ margin-right: var(--grid-gutter)
@include in-page-without-sidebar
.top
- width: col(8)
+ width: columns(8)
ul
@include list-reset
@include grid(3, desktop)
@@ -37,5 +37,5 @@
+ li
margin-top: 0
.name
- margin-top: $spacing1
+ margin-top: $spacing-3
diff --git a/assets/sass/_theme/blocks/files.sass b/assets/sass/_theme/blocks/files.sass
index f890850fd3f325ead5e1f66abe9cdb3f12002193..de109a8ad5780983a2dac8f56b65215455876b3f 100644
--- a/assets/sass/_theme/blocks/files.sass
+++ b/assets/sass/_theme/blocks/files.sass
@@ -10,19 +10,19 @@
position: relative
&::before
align-items: center
- border: 1px solid $color-border
+ border: 1px solid var(--color-border)
display: flex
flex-shrink: 0
- height: px2rem(60)
+ height: pxToRem(60)
justify-content: center
- margin-right: $spacing0
+ margin-right: $spacing-2
transition: background 0.3s ease, border 0.3s ease
- width: px2rem(60)
+ width: pxToRem(60)
&:hover
&::before
- background-color: $color-text
+ background-color: var(--color-text)
border-color: transparent
- color: $color-background
+ color: var(--color-background)
a
@include stretched-link(before)
@include small
@@ -32,17 +32,17 @@
content: none !important // Remove default icon _blank
figcaption
@include meta
- margin-top: half($spacing0)
+ margin-top: $spacing-1
@include media-breakpoint-down(desktop)
.files
li + li
- margin-top: $spacing1
+ margin-top: $spacing-3
@include in-page-with-sidebar
.files
- @include grid(2, desktop, half($grid-gutter))
+ @include grid(2, desktop, $spacing-3)
@include in-page-without-sidebar
.files
- @include grid(3, desktop, half($grid-gutter))
+ @include grid(3, desktop, $spacing-3)
diff --git a/assets/sass/_theme/blocks/gallery.sass b/assets/sass/_theme/blocks/gallery.sass
index 609e87c3552240b2c451940e187cc179d2b39877..f75ddd42a15ed6fae94ec58b6f296d95c1cb0b66 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -2,15 +2,13 @@
figure
display: block
margin-bottom: 0
+ position: relative
> a,
img,
picture
display: block
> a
- transition: filter .3s ease
- &:hover
- // if low opacity means not selected, selected needs to be darker
- filter: brightness(95%)
+ @include stretched-link
img
height: auto
width: 100%
@@ -30,40 +28,30 @@
&--grid
.gallery
- align-items: baseline
@include in-page-with-sidebar
- @include grid(3, desktop, half($grid-gutter), half($grid-gutter))
+ @include flexbox-grid(2)
@include in-page-without-sidebar
- @include grid(4, desktop)
+ @include flexbox-grid(4)
@include media-breakpoint-down(desktop)
- @include grid(2)
- grid-gap: half($grid-gutter-sm) !important
+ @include flexbox-grid(2)
&--with-text
@include in-page-without-sidebar
- @include grid(4, desktop, $spacing0)
+ @include flexbox-grid(4)
figure
- display: grid
- grid-template-columns: subgrid
- gap: space(3)
- figcaption
- &::after
- content: 'Â '
+ display: flex
+ flex-direction: column
+ gap: $spacing-2
&--carousel
overflow: hidden
position: relative
z-index: 0
@include in-page-without-sidebar
background: $block-gallery-carousel-background
- padding-bottom: $grid-gutter
- padding-top: $grid-gutter
+ padding-bottom: var(--grid-gutter)
+ padding-top: var(--grid-gutter)
.block-gallery + &,
.block-pages--cards + &
margin-top: 0
- .container
- .top
- padding-right: half($grid-gutter-sm)
- @include media-breakpoint-up(desktop)
- padding-right: half($grid-gutter)
.splide
display: flex
flex-direction: column
@@ -73,7 +61,7 @@
opacity: 0.1
&__track
overflow: visible
- margin-right: half(-$grid-gutter-sm)
+ margin-right: var(--grid-gutter-negative)
@include in-page-with-sidebar
.splide__slide
transition: opacity .3s ease
@@ -82,14 +70,12 @@
opacity: 0.6
&.is-active
opacity: 1
- @include media-breakpoint-up(desktop)
- margin-right: half(-$grid-gutter)
&__slide
flex-shrink: initial
&:last-child
padding-right: 20%
figure
- margin-right: half($grid-gutter)
+ margin-right: $spacing-3
@include media-breakpoint-down(desktop)
display: flex
flex-direction: column
@@ -100,18 +86,18 @@
max-height: $block-gallery-carousel-max-height
width: auto
height: auto
- max-width: calc(100vw - #{$grid-gutter-sm} * 2)
+ max-width: calc(100vw - #{var(--grid-gutter)} * 2)
@include media-breakpoint-up(desktop)
height: $block-gallery-carousel-max-height
width: auto
max-width: none
figcaption
- margin-top: space(3)
+ margin-top: $spacing-2
> * + *
- margin-top: space(2)
+ margin-top: $spacing-1
&__arrows
- margin-left: px2rem(-18)
+ margin-left: pxToRem(-18)
order: 2
@media (min-height: 800px)
padding-top: space(10)
@@ -120,10 +106,10 @@
&--next
@include button-reset
@include icon(arrow-left, before)
- height: space(12)
+ height: $spacing-4
padding: 0
position: static
- width: space(12)
+ width: $spacing-4
svg
display: none
&--next
@@ -132,10 +118,10 @@
@include in-page-without-sidebar
.splide
figure
- margin-left: $grid-gutter
- margin-right: half(-$grid-gutter)
+ margin-left: var(--grid-gutter)
+ margin-right: -$spacing-3
&__slide
&:first-child
- margin-left: $grid-gutter
+ margin-left: var(--grid-gutter)
&__track
- margin-left: -$grid-gutter
\ No newline at end of file
+ margin-left: var(--grid-gutter-negative)
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/image.sass b/assets/sass/_theme/blocks/image.sass
index 926546d7722e4d1c75efd20b72747fd535d9e3ce..27cfd7b2108857d595aa3a40ebd759cd6dc16cac 100644
--- a/assets/sass/_theme/blocks/image.sass
+++ b/assets/sass/_theme/blocks/image.sass
@@ -4,24 +4,24 @@
height: auto
max-width: 100%
figcaption
- margin-top: $spacing0
+ margin-top: $spacing-2
p
margin-bottom: 0
margin-top: 0
+ .credit
- margin-top: $spacing0
+ margin-top: $spacing-2
.credit
p
@include meta
picture
display: block
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include in-page-with-sidebar
picture
margin-left: 0
- margin-right: -$grid-gutter
+ margin-right: var(--grid-gutter-negative)
img
max-height: $block-image-max-height-with-sidebar
width: auto
@@ -30,7 +30,6 @@
figure
img
max-height: $block-image-max-height-without-sidebar
- // max-height: calc(100vh - var(--header-height))
width: auto
max-width: 100%
&.image-portrait, &.image-square
@@ -38,27 +37,26 @@
position: relative
.top
position: absolute
- width: col(5)
+ width: columns(5)
figure
display: flex
align-items: flex-end
- > a
- width: col(7)
- margin-left: half($grid-gutter)
+ > a
+ width: columns(7)
+ margin-left: var(--grid-gutter)
display: block
order: 2
picture
margin-left: 0
- margin-right: -$grid-gutter
figcaption
- width: calc(#{col(5)} + #{$grid-gutter} / 2)
+ width: columns(5)
order: 1
display: block
text-align: right
&.image-landscape
picture
- margin-left: -$grid-gutter
- margin-right: -$grid-gutter
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@media screen and (min-width: $grid-max-width)
margin-left: 0
margin-right: 0
@@ -67,7 +65,7 @@
justify-content: space-between
align-items: baseline
p
- max-width: col(8)
+ max-width: columns(8)
*
flex: 1 1
.credit
diff --git a/assets/sass/_theme/blocks/key_figures.sass b/assets/sass/_theme/blocks/key_figures.sass
index 3a9ca43047a7b401c501073be863e39701685665..64126a161eb8adc3aaecd984d939aa656b4a266c 100644
--- a/assets/sass/_theme/blocks/key_figures.sass
+++ b/assets/sass/_theme/blocks/key_figures.sass
@@ -11,7 +11,7 @@
&.odd-items
@include grid(3, desktop)
.top:not(.hidden) + ul
- margin-top: $spacing2
+ margin-top: $spacing-4
dl
margin-bottom: 0
margin-top: 0
@@ -26,6 +26,10 @@
font-size: $block-key_figures-number-font-size
font-weight: $block-key_figures-number-font-weight
margin-inline-end: 0.1em
+ img
+ display: block
+ margin-bottom: $spacing-2
+ max-width: $block-key_figures-image-max-width
@include media-breakpoint-up(desktop)
font-size: $block-key_figures-font-size-desktop
strong
@@ -46,9 +50,9 @@
margin-bottom: 0
margin-left: 0
dt + dd
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-down(desktop)
li + li
- margin-top: $spacing1
+ margin-top: $spacing-3
diff --git a/assets/sass/_theme/blocks/organizations.sass b/assets/sass/_theme/blocks/organizations.sass
index 65dec22e92c5078680cd5d1b8a3c1160c86493ad..b74eb772d95fc20e96e444e9f3f40d46d8dfdd1b 100644
--- a/assets/sass/_theme/blocks/organizations.sass
+++ b/assets/sass/_theme/blocks/organizations.sass
@@ -22,7 +22,7 @@
margin-bottom: 0
.organization-title
@include meta
- padding: half($spacing0) $spacing0
+ padding: $spacing-1 $spacing-2
margin: 0 // Cancel leaflet default style
a
color: black
@@ -38,11 +38,10 @@
@include grid(2, md)
@include grid(3, lg)
@include grid(4, xl)
- grid-column-gap: half($grid-gutter)
@include in-page-without-sidebar
.top .description
- max-width: col(8)
+ max-width: columns(8)
.map
- margin-left: -$grid-gutter
- margin-right: -$grid-gutter
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index 74ec85e673490317a52fe47b3521bfc13d7811db..c9a72db899d7ac88386fe5461403da1e9ca127f1 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -10,7 +10,7 @@
.media
@include handle-svg-fit
order: -1
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
&:empty
display: none
img
@@ -24,11 +24,11 @@
@include stretched-link(before)
text-decoration: none
+ p
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-up(desktop)
.top
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
@include media-breakpoint-down(desktop)
.top
@@ -37,7 +37,7 @@
.description
@include h2
article
- margin-top: $spacing1
+ margin-top: $spacing-3
@include in-page-without-sidebar
.top
@@ -56,16 +56,14 @@
@include hover-translate-icon(after)
@include media-breakpoint-up(desktop)
.grid
- @include grid(2, desktop)
- @include in-page-with-sidebar
- grid-column-gap: half($grid-gutter) !important
+ @include grid(2)
@include in-page-without-sidebar
- @include grid(3, desktop)
+ @include grid(3)
&--cards
background-color: $block-pages-card-background
- padding-bottom: $grid-gutter
- padding-top: $grid-gutter
+ padding-bottom: var(--grid-gutter)
+ padding-top: var(--grid-gutter)
*:not(.heading) + &
margin-top: 0
.blocks &:last-of-type
@@ -74,17 +72,15 @@
@include top-flex
.cards
@include grid(2, desktop)
- @include in-page-with-sidebar
- grid-gap: half($grid-gutter) !important
@include in-page-without-sidebar
- @include grid(3, desktop)
+ @include grid(3)
// TODO: move this //
.block-gallery + &,
.block-pages--cards + &
margin-top: 0
// ----------------- //
.card
- padding: $spacing1
+ padding: $spacing-3
background-color: $block-pages-card-page-background
transition: background 0.3s, color 0.3s
display: flex
@@ -96,19 +92,18 @@
color: $block-pages-card-page-color
.media
margin-bottom: 0
- margin-left: -$spacing1
- margin-right: -$spacing1
- margin-top: -$spacing1
+ margin-left: -$spacing-3
+ margin-right: -$spacing-3
+ margin-top: -$spacing-3
img
min-width: 100%
.more
@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: $spacing1
+ padding-top: $spacing-3
display: flex
justify-content: space-between
align-items: center
@@ -128,37 +123,33 @@
&--list
ul
@include list-reset
- &.title-only
- li
- line-height: 1
li
display: block
+ li
- margin-top: $spacing0
+ margin-top: $spacing-2
> a
@include icon(arrow, before, true)
- padding-right: $spacing0
+ 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: $spacing0
+ margin-bottom: $spacing-2
ul
- margin-top: $spacing1
+ margin-top: $spacing-3
@include media-breakpoint-up(desktop)
ul:not(.title-only)
li + li
- margin-top: $grid-gutter
+ margin-top: var(--grid-gutter)
article
- gap: $grid-gutter
+ gap: var(--grid-gutter)
flex-direction: row
.media
flex-shrink: 0
@@ -166,23 +157,20 @@
@include in-page-with-sidebar
.block-content
.top
- margin-bottom: $spacing1
- // .description
- // margin-bottom: $spacing2
+ margin-bottom: $spacing-3
ul.title-only
- @include grid(2, desktop)
- grid-row-gap: $spacing0 !important
- grid-column-gap: half($grid-gutter) !important
+ @include grid(2, desktop, 0)
+ display: flex
li
margin-top: 0
a
@include meta
article
- gap: half($grid-gutter)
+ gap: var(--grid-gutter)
.media
- width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ width: columns(2)
.page-content
- width: col(6, 8)
+ width: columns(6)
@include in-page-without-sidebar
.block-title
@@ -194,12 +182,12 @@
@include h2
article
.media
- width: col(4)
+ width: columns(2)
.page-content
- width: col(8)
+ width: columns(4)
&:not(.with-description)
ul.title-only
- @include grid(4, desktop, space(2))
+ @include grid(4, desktop, $spacing-1)
grid-column: 1 / 13
li
margin-top: 0
@@ -209,8 +197,7 @@
margin-top: 0
&.with-description
.block-content
- @include grid(12, desktop, $spacing2)
- row-gap: half($grid-gutter)
+ @include grid(12, desktop, $spacing-4)
.top
align-items: initial
grid-column: 1 / 8
@@ -229,9 +216,9 @@
grid-row: 2
display: block
li + li
- margin-top: $spacing0
+ margin-top: $spacing-2
article
- margin-top: $spacing3
+ margin-top: $spacing-5
&.with-images
.top
grid-column: 1 / 7
@@ -247,7 +234,7 @@
aspect-ratio: unset
@include media-breakpoint-up(desktop)
article
- width: col(4, 8)
+ width: columns(4)
&:not(:first-child)
margin-top: -5%
&:nth-child(even)
@@ -263,24 +250,24 @@
.description
@include body-text
.grid
- width: col(10)
+ width: columns(10)
margin-left: auto
margin-right: auto
article
- width: col(4, 10)
+ width: columns(4)
&--large
.top
@include top-flex
.page
position: relative
+ .page
- margin-top: $spacing3
+ margin-top: $spacing-5
.more
@include icon(arrow, after, true)
@include hover-translate-icon(after)
&:hover .more:after
- transform: translateX(#{px2rem(10)})
- &-title a
+ transform: translateX(#{pxToRem(10)})
+ &-title a
@include stretched-link
.media
img
@@ -288,7 +275,7 @@
@include media-breakpoint-up(desktop)
.page
flex-direction: row
- gap: $grid-gutter
+ gap: var(--grid-gutter)
@include in-page-with-sidebar
.page
@@ -309,6 +296,6 @@
@include lead
margin-bottom: space(4)
&-content
- width: col(5)
- .media
- width: col(6)
+ width: columns(5)
+ .media
+ width: columns(6)
diff --git a/assets/sass/_theme/blocks/persons.sass b/assets/sass/_theme/blocks/persons.sass
index f207f5f00be30093d58fd6eb360cfdd9df247895..2956bae9e064e42634ba82d42edbdf7b25c3350f 100644
--- a/assets/sass/_theme/blocks/persons.sass
+++ b/assets/sass/_theme/blocks/persons.sass
@@ -1,38 +1,38 @@
@mixin person-avatar-end
display: flex
flex-direction: row
- gap: $spacing1
+ gap: $spacing-3
.avatar
margin-right: 0
- width: col(4)
+ width: columns(2)
.description
- margin-top: $spacing1
+ margin-top: $spacing-3
text-align: left
.block-persons
article
.description
- margin-top: $spacing1
+ margin-top: $spacing-3
@include in-page-with-sidebar
.persons
@include grid(1, desktop)
- row-gap: $spacing0
+ row-gap: $spacing-2
@include media-breakpoint-up(xxl)
@include grid(2)
article
.avatar
- width: col(1.5, 4)
+ width: columns(1.5)
.description
- margin-top: $spacing0
+ margin-top: $spacing-2
article
flex-direction: row
- gap: $spacing1
+ gap: $spacing-3
@include media-breakpoint-up(md)
.avatar
- width: col(2, 8)
+ width: columns(2)
@include in-page-without-sidebar
.top .description
- max-width: col(8)
+ max-width: columns(8)
&.block-with-long-text
.persons
@include grid(2)
diff --git a/assets/sass/_theme/blocks/posts.sass b/assets/sass/_theme/blocks/posts.sass
index b8446feb0a92620c17d581cc84bfecc9cdb3a797..5bbc3b2c3beeec4221305b7f43a9ddd7ab037c73 100644
--- a/assets/sass/_theme/blocks/posts.sass
+++ b/assets/sass/_theme/blocks/posts.sass
@@ -1,6 +1,6 @@
.block-posts
.top
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
a
@include icon(arrow-right, after, true)
@include hover-translate-icon
@@ -9,86 +9,88 @@
@include grid(1)
@include grid($block-posts-grid-columns, desktop)
article
+ @include author-and-time-side-to-side
[itemprop=headline]
a
@include stretched-link
text-decoration: none
.post-content
> * + *
- margin-top: $spacing0
+ margin-top: $spacing-2
.media
margin-top: 0
- @include post-time-author-flex
&--grid
@include media-breakpoint-down(desktop)
article + article
- margin-top: $spacing3
+ margin-top: $spacing-5
@include in-page-with-sidebar
.grid
- @include grid(2, desktop, $grid-gutter, half($grid-gutter))
+ @include grid(2)
@include in-page-without-sidebar
.grid
@include grid($block-posts-grid-columns)
.media picture img
width: 100%
&--large
- @include media-breakpoint-up(sm)
- article
- .post-meta
- display: inline
.post
.more
@include icon(arrow-right, after, true)
- .post-author
+
+ // Masquer le point entre l'auteur et la date (mixin author-and-time-side-to-side)
+ .post-author
p::before
display: none
- @include media-breakpoint-down(desktop)
+
+ // Permet d'aligner correctement les différents line-height des différents composants du post meta
+ .post-meta
+ display: block
+ line-height: 0 // Hack pour que les enfants de post-meta soient correctement
+ .post-categories *
+ display: inline
+ // Désactiver le ratio forcé de la configuration $article-media-aspect-ratio
+ .media
+ &, img
+ aspect-ratio: auto
+ @include media-breakpoint-down(desktop)
+ .post
+ .post
- margin-top: $spacing2
+ margin-top: $spacing-4
&-meta
- .post-author
- display: inline-flex
+ .post-author
+ display: inline
+ p
+ display: inline
&::after
- content: '—'
- margin: 0 half($spacing0)
- .post-categories
- display: flex
+ content: ' — '
p[itemprop="articleBody"]
margin-top: 0
@include media-breakpoint-up(desktop)
.large
.post
flex-direction: row
- gap: half($grid-gutter)
+ gap: var(--grid-gutter)
+ .post
- margin-top: $spacing2
- p[itemprop="articleBody"]
- margin-top: $spacing1
- &-title
+ margin-top: $spacing-4
+ .post-title
@include h2
+ p[itemprop="articleBody"]
+ margin-top: $spacing-3
.post-meta
> *
display: inline
- &:not(:first-child)::before
- content: '—'
- margin-right: half($spacing0)
- > time
- display: inline-block
- margin-top: -2px
+ &:not(:last-child)::after
+ content: ' — '
.post-author
p
display: inline
- li
- margin-right: $spacing0
.post-categories
li
- display: inline-flex
- margin-right: $spacing0
- padding-bottom: 3px
- &:not(:last-child)::after
+ a
+ display: inline
+ &:not(:last-child) a::after
content: ','
-
+
@include in-page-with-sidebar
.large
.post
@@ -96,24 +98,26 @@
flex-direction: column
gap: unset
p[itemprop="articleBody"]
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-up(xl)
.media,
.post-content
- width: calc(#{col(4, 8)} + #{half($grid-gutter)})
+ width: columns(4)
@include in-page-without-sidebar
.large
.post
- gap: $grid-gutter
+ gap: var(--grid-gutter)
.media
- width: col(6)
+ width: columns(6)
.post-content
- width: col(5)
+ width: columns(5)
+ .post-title
+ @include lead
p[itemprop="articleBody"]
- margin-top: calc(#{$spacing1} + #{$spacing0})
+ margin-top: calc(#{$spacing-3} + #{$spacing-2})
&--list
article
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
.media
background: none
margin: 0
@@ -123,19 +127,19 @@
@include media-breakpoint-down(desktop)
article
position: relative
- padding-bottom: half($spacing3)
+ padding-bottom: $spacing-3
+ article
- margin-top: half($spacing3)
+ margin-top: $spacing-3
.post-content
display: flex
flex-direction: column
- padding-top: $spacing0
+ padding-top: $spacing-2
[itemprop=headline]
margin-bottom: 0
.post-categories
margin-bottom: 0
p[itemprop="articleBody"]
- margin-top: half($spacing0)
+ margin-top: $spacing-1
.media
order: -1
max-width: 33%
@@ -147,27 +151,27 @@
@include in-page-with-sidebar
article
- padding-bottom: $spacing1
+ padding-bottom: $spacing-3
+ article
- margin-top: $spacing1
+ margin-top: $spacing-3
.media
- width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ width: columns(2)
.post-content
- width: col(6, 8)
- margin-left: half($grid-gutter)
+ width: columns(6)
+ margin-left: var(--grid-gutter)
@include in-page-without-sidebar
article
- border-bottom: 1px solid $color-border
- gap: $grid-gutter
- padding-bottom: $spacing3
+ border-bottom: 1px solid var(--color-border)
+ gap: var(--grid-gutter)
+ padding-bottom: $spacing-5
position: relative
.media
- width: col(3)
+ width: columns(3)
.post-content
- width: col(6)
+ width: columns(6)
+ article
- margin-top: $spacing3
+ margin-top: $spacing-5
.post-meta
position: absolute
right: 0
@@ -177,27 +181,27 @@
&--highlight
.highlight-post
[itemprop=headline]
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
.media
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
background: none
.list
- margin-top: half($spacing3)
- border-top: 1px solid $color-border
+ margin-top: $spacing-3
+ border-top: 1px solid var(--color-border)
article
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
position: relative
- padding-bottom: half($spacing3)
- margin-top: half($spacing3)
+ padding-bottom: $spacing-3
+ margin-top: $spacing-3
article
> * + *
- margin-top: $spacing0
+ margin-top: $spacing-2
.media
margin-top: 0
@include media-breakpoint-down(desktop)
.list
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
p[itemprop="articleBody"]
margin-top: 0
@@ -215,11 +219,11 @@
.post
flex-direction: row
.media
- width: calc(#{col(3, 8)} + #{half($grid-gutter)})
+ width: columns(3)
margin-bottom: 0
.post-content
- width: col(5, 8)
- margin-left: half($grid-gutter)
+ width: columns(5)
+ margin-left: var(--grid-gutter)
.list
article
@include grid(8, desktop, 0, 0)
@@ -269,29 +273,81 @@
@include media-breakpoint-down(desktop)
.post
.post-meta
- margin-top: half($spacing0)
+ margin-top: $spacing-1
.media
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
+ .post
- margin-top: $spacing3
+ margin-top: $spacing-5
@include in-page-with-sidebar
.post
- width: col(4,8)
+ width: columns(4)
@include in-page-without-sidebar
- width: col(10)
+ width: columns(10)
margin-left: auto
margin-right: auto
.post
- width: col(4, 10)
+ width: columns(4)
+ &--carousel
+ @include draggable-block
+ .container
+ padding-right: 0
+ .carousel
+ padding-bottom: $spacing-3
+ &:hover
+ cursor: grab
+ &.is-grabbing
+ cursor: grabbing
+ li
+ list-style: none
+ .posts
+ display: flex
+ gap: unset
+ .post
+ margin: 0 calc(var(--grid-gutter) / 2)
+ .actions-arrows
+ justify-content: space-between
+ @include media-breakpoint-down(desktop)
+ .carousel
+ gap: half(var(--grid-gutter))
+ .post
+ width: columns(10)
+ .grab-item:last-of-type
+ margin-right: half(var(--grid-gutter))
+ .actions-arrows
+ margin-right: var(--grid-gutter)
+ @include media-breakpoint-up(desktop)
+ .next
+ margin-right: pxToRem(-27) // Marge négative pour aligner correctement le picto à la colonne
+ @include in-page-with-sidebar
+ .post
+ width: columns(3)
+ [itemprop="headline"]
+ @include h4
+ .carousel
+ .actions-arrows
+ width: offset(6)
+ @include in-page-without-sidebar
+ .block-content
+ display: flex
+ gap: var(--grid-gutter)
+ .top
+ width: columns(3)
+ .carousel
+ width: columns(9)
+ .post
+ width: columns(4)
+ .carousel
+ .actions-arrows
+ width: offset(8)
// Move this part to blocks/categories when categories block is ready
.block-posts
.categories--grid
li
- background: $color-background-alt
- padding: $spacing1
+ background: var(--color-background-alt)
+ padding: $spacing-3
position: relative
a
@include h3
diff --git a/assets/sass/_theme/blocks/programs.sass b/assets/sass/_theme/blocks/programs.sass
index 8cb79f4be4295b5d460406de2a024f34372cd851..482b7701222ba007293c7819e4d8cfa8e783b7a5 100644
--- a/assets/sass/_theme/blocks/programs.sass
+++ b/assets/sass/_theme/blocks/programs.sass
@@ -1,19 +1,54 @@
.block-programs
- .programs
- li
- display: block
- a
- @include h3
- @include arrow-right-hover
- display: flex
- justify-content: space-between
- transition: color 0.55s
- padding-right: $spacing2
- &:hover
- color: $color-accent
- @include in-page-without-sidebar
+ &--list
.programs
li
+ display: block
a
- @include h2
\ No newline at end of file
+ @include h3
+ @include arrow-right-hover
+ display: flex
+ justify-content: space-between
+ transition: color 0.55s
+ padding-right: $spacing-4
+ &:hover
+ color: var(--color-accent)
+ @include in-page-without-sidebar
+ .programs li a
+ @include h2
+
+ &--grid
+ .programs-grid
+ align-items: start
+ @include grid(1, false, $spacing-5)
+ @include grid(2, xl)
+ article
+ display: flex
+ flex-direction: column
+ .program-content
+ order: 2
+ position: relative
+ &:hover
+ .more:after
+ transform: translateX($spacing-1)
+ [itemprop='name']
+ margin-bottom: $spacing-1
+ a
+ @include stretched-link
+ text-decoration: none
+ .more
+ @include icon(arrow, after, true)
+ @include hover-translate-icon
+ .media
+ order: 1
+ margin-bottom: $spacing-3
+ img
+ aspect-ratio: $block-programs-aspect-ratio
+ display: block
+ object-fit: cover
+
+
+ @include in-page-without-sidebar
+ @include grid(2)
+ @include grid(3, xl)
+
diff --git a/assets/sass/_theme/blocks/projects.sass b/assets/sass/_theme/blocks/projects.sass
new file mode 100644
index 0000000000000000000000000000000000000000..0b74eec0c4b8352bcdb41bb5518a8ee0aab45a77
--- /dev/null
+++ b/assets/sass/_theme/blocks/projects.sass
@@ -0,0 +1,3 @@
+.block-projects
+ .grid
+ @include grid(2, md)
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/sitemap.sass b/assets/sass/_theme/blocks/sitemap.sass
index bb45be78dfabbd6cc8eceefc2124610dcf8d940d..fb8ea0b26612c1164fbb0c37d997a7c166c23c3f 100644
--- a/assets/sass/_theme/blocks/sitemap.sass
+++ b/assets/sass/_theme/blocks/sitemap.sass
@@ -3,6 +3,6 @@
a
text-decoration: none
ul + h3
- margin-top: $spacing3
+ margin-top: $spacing-5
&:first-of-type
padding-top: 0
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/summary.sass b/assets/sass/_theme/blocks/summary.sass
index 8d40c67a5e00b4232e5e621787161712d3fed037..93be875c8e2a3967fc2590e713f69ee5bd2f4aae 100644
--- a/assets/sass/_theme/blocks/summary.sass
+++ b/assets/sass/_theme/blocks/summary.sass
@@ -6,5 +6,4 @@
padding-top: 0
@include in-page-without-sidebar
- padding-top: 0
- margin-top: $block-space-y
\ No newline at end of file
+ padding-top: 0
\ No newline at end of file
diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass
index 338da01140524b2eae8277d0e7fa6c5559f939cf..693ef54e5e15cda8b16683069c051a4fa2fc16e3 100644
--- a/assets/sass/_theme/blocks/testimonials.sass
+++ b/assets/sass/_theme/blocks/testimonials.sass
@@ -8,7 +8,7 @@
font-style: $block-testimonials-style
color: $block-testimonials-color
@include media-breakpoint-up(desktop)
- font-size: px2rem(30) // TODO : on peut peut-être la sortir avec du RFS ?
+ font-size: pxToRem(30) // TODO : on peut peut-être la sortir avec du RFS ?
@include media-breakpoint-up(xl)
font-size: $block-testimonials-xl-font-size
line-height: $block-testimonials-xl-line-height
@@ -23,17 +23,15 @@
figcaption
align-items: center
display: flex
- margin-top: $spacing1
+ margin-top: $spacing-3
span
display: block
.avatar
flex-shrink: 0
- width: calc(#{col(1, 8)} + #{$grid-gutter} / 2)
- min-width: px2rem(80)
- margin-right: $spacing0
+ width: columns(1)
+ min-width: pxToRem(80)
+ margin-right: $spacing-2
margin-bottom: 0
- @include media-breakpoint-up(desktop)
- margin-right: calc(#{$grid-gutter} / 2)
.splide
.splide__slider
@@ -53,9 +51,9 @@
font-size: 0
line-height: 1
span
- color: $color-accent
+ color: var(--color-accent)
&::before
- font-size: 42px
+ font-size: pxToRem(42)
.splide__pagination
.is-active i
width: 100%
@@ -97,27 +95,17 @@
margin-right: offset(1)
figure
padding-right: offset(3)
- // TODO: explain this, add min height equal with 2 cols width to avoid overflow on square picture
- min-height: calc(#{col-outside-container(2)} + #{half($grid-gutter)})
+ min-height: columns(2)
&.with-picture
padding-right: offset(1)
padding-left: offset(3)
position: relative
figcaption
display: block
- margin-top: $spacing0
+ margin-top: $spacing-2
.avatar
position: absolute
- left: col(1)
+ left: columns(1)
top: 0
- margin-left: $grid-gutter
- width: col(2)
-
- // TODO : en discuter en créa
- // figure
- // display: flex
- // figcaption
- // order: -1
- // display: block
- // .avatar
- // margin-bottom: $spacing1
\ No newline at end of file
+ margin-left: var(--grid-gutter)
+ width: columns(2)
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index 0c527962608f6bc0773634cca4986fda06e248cd..cb1be7fde5adc3a16af27eeae3d81ab2de5a9804 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -5,22 +5,22 @@
.timeline-event
position: relative
&:not(:last-child)
- padding-bottom: $spacing2
+ padding-bottom: $spacing-4
&::before
- background: $color-text
+ background: var(--color-text)
border-radius: 50%
content: ""
height: 9px
- left: half(-$grid-gutter)
+ left: -$spacing-3
margin-top: 0.5em
position: absolute
width: 9px
margin-left: -4px
&::after
- background: $color-text
+ background: var(--color-text)
bottom: -0.5em
content: ""
- left: half(-$grid-gutter)
+ left: -$spacing-3
position: absolute
top: 0.5em
width: 1px
@@ -31,11 +31,11 @@
.title
@include h4
+ p
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-down(desktop)
.timeline-event
- padding-left: half($grid-gutter-sm)
+ padding-left: $spacing-3
&::after, &::before
left: 0
@@ -45,97 +45,57 @@
.timeline-event
display: flex
&::before, &::after
- left: col(3)
- margin-left: half($grid-gutter)
+ left: columns(3)
+ margin-left: calc(var(--grid-gutter) / 2)
&::before
transform: translateX(-4px)
.title
- width: col(3)
+ width: columns(3)
text-align: right
+ p
margin-top: 0
p
- padding-left: $grid-gutter
- width: col(7)
+ padding-left: var(--grid-gutter)
+ width: columns(7)
&:first-child
- margin-left: col(3)
+ margin-left: columns(3)
&--horizontal
+ @include draggable-block
--min-title-height: 0px
background: $block-timeline-horizontal-background
color: $block-timeline-horizontal-color
- overflow: hidden
- padding-bottom: $grid-gutter
- padding-top: $grid-gutter
+ padding-bottom: var(--block-space-y)
+ padding-top: var(--block-space-y)
&::before
display: none
- .timeline
- &:hover
- cursor: grab
- &.is-grabbing
- cursor: grabbing
-
- .timeline-arrows
- display: flex
- padding-left: half($grid-gutter)
- > button
- @include button-reset
- background: none
- border: none
- color: $block-timeline-horizontal-color
- cursor: pointer
- &:first-child
- @include icon-block(arrow-previous, before)
- margin-left: $icon-arrow-previous-margin-left
- &:last-child
- @include icon-block(arrow-next, before)
- &:disabled
- cursor: default
- opacity: 0.3
- .timeline-events
- margin-left: half(-$grid-gutter)
- margin-right: half(-$grid-gutter)
- // TODO : fixer le px gap en desktop entre chaque event
- ol
- display: flex
- flex-flow: row nowrap
- list-style: none
- padding-left: 0
- margin-top: $spacing0
- transition: margin 0.4s ease-in-out
- width: 100%
.timeline-event
- flex: none
- padding: 0 half($grid-gutter)
- scroll-snap-align: start
- transition: 0.3s opacity
- width: 50%
+ padding: 0 calc(var(--grid-gutter) / 2)
+ width: columns(4)
.title
display: block
min-height: var(--min-title-height)
- padding-bottom: $spacing1
+ padding-bottom: $spacing-3
@include signature
.description
@include small
.line
background: $block-timeline-horizontal-color
height: 1px
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
opacity: 1
overflow: visible
- width: calc(100% + #{half($grid-gutter)})
+ width: calc(100% + var(--grid-gutter) / 2)
&::before
background: $block-timeline-horizontal-color
border-radius: 50%
content: ""
display: block
height: 9px
+ margin-left: -4px
position: relative
top: -4px
width: 9px
-
- &.is-passed
- opacity: 0.15
&:last-child
.line
background: transparent
@@ -143,20 +103,21 @@
@include media-breakpoint-up(desktop)
.timeline-event
.line
- width: calc(100% + #{$grid-gutter})
+ width: calc(100% + var(--grid-gutter))
@include media-breakpoint-down(desktop)
.timeline-events
position: relative
- .timeline-arrows
+ .actions-arrows
left: 0
position: absolute
- top: calc(#{$spacing2/2} + var(--min-title-height))
+ top: calc(#{$spacing-2} + var(--min-title-height))
.timeline-event
+ margin-right: 0
padding-right: 0
width: 75%
.line
- margin-bottom: calc(#{$spacing2} + var(--min-title-height))
+ margin-bottom: $spacing-5
@include in-page-without-sidebar
@include media-breakpoint-up(xxl)
diff --git a/assets/sass/_theme/blocks/video.sass b/assets/sass/_theme/blocks/video.sass
index c946610acb2e3829ce1d81b3781c6e69e04a2d15..6ef2f0de51ee3616d0e5cfe722c7701dc43aa4fe 100644
--- a/assets/sass/_theme/blocks/video.sass
+++ b/assets/sass/_theme/blocks/video.sass
@@ -36,43 +36,42 @@
border: 1px solid white
border-radius: 100%
color: white
- height: $spacing4
- padding: half($spacing0)
+ height: $spacing-6
+ padding: $spacing-1
transition: background-color .3s ease
- width: $spacing4
+ width: $spacing-6
z-index: 3
&::before
- font-size: px2rem(100)
+ font-size: pxToRem(100)
transition: color .3s ease
vertical-align: middle
- padding-left: px2rem(5)
+ padding-left: pxToRem(5)
&:hover
background-color: white
&::before
color: black
@include media-breakpoint-down(desktop)
- height: $spacing3
- width: $spacing3
+ height: $spacing-5
+ width: $spacing-5
&::before
- font-size: px2rem(40)
- padding-left: px2rem(3)
+ font-size: pxToRem(40)
+ padding-left: pxToRem(3)
iframe
background: black
+ p
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-down(desktop)
.video
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include in-page-without-sidebar
background: $block-video-background
- margin-top: 0
.block-content
@include grid(12, false, 0)
padding-top: $block-space-y
- padding-bottom: $spacing2
+ padding-bottom: $spacing-4
.top
grid-column: 1 / -1
.video
diff --git a/assets/sass/_theme/dependencies/glightbox.sass b/assets/sass/_theme/dependencies/glightbox.sass
index e2a881893bf17c229734470ea383b85321515402..a09d705b9162359cb199cc6ae1cdc79be845ee7b 100644
--- a/assets/sass/_theme/dependencies/glightbox.sass
+++ b/assets/sass/_theme/dependencies/glightbox.sass
@@ -6,7 +6,7 @@
&-media
box-shadow: none
img
- padding: $spacing0 space(10) space(10)
+ padding: $spacing-2 space(10) space(10)
&-description
background-color: transparent
&-title,
@@ -34,7 +34,7 @@
@include icon(arrow-left)
left: 0
.gdesc-inner
- padding: 0 $spacing0 space(2)
+ padding: 0 $spacing-2 $spacing-1
text-align: center
.gslide-desc
@include meta
@@ -56,11 +56,11 @@
bottom: 0
@include media-breakpoint-up(desktop)
.gdesc-inner
- padding-bottom: $spacing0
+ padding-bottom: $spacing-2
.gslide
&-media
img
- padding: $spacing0 space(10)
+ padding: $spacing-2 space(10)
a.glightbox
display: block
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/a11y.sass b/assets/sass/_theme/design-system/a11y.sass
index 9fbce2042a73076d5f2a81bd005b4de4fb9546e5..0eb7459a5d5742ef6b2e3abdd0b8c828f7577f97 100644
--- a/assets/sass/_theme/design-system/a11y.sass
+++ b/assets/sass/_theme/design-system/a11y.sass
@@ -1,5 +1,5 @@
.nav-accessibility
- padding: $spacing1
+ padding: $spacing-3
position: absolute
transform: translateY(-300%)
z-index: $zindex-nav-accessibility
@@ -9,7 +9,7 @@
@include list-reset
li
display: inline-block
- margin-right: px2rem(5)
+ margin-right: pxToRem(5)
&:focus-within
background: white
transform: translateY(0)
diff --git a/assets/sass/_theme/design-system/backlinks.sass b/assets/sass/_theme/design-system/backlinks.sass
index c411a8d17f9822983dd631ee4d4738b33c098a27..9479aa5fd703e84c6d3639b052be780ed6b6ebc5 100644
--- a/assets/sass/_theme/design-system/backlinks.sass
+++ b/assets/sass/_theme/design-system/backlinks.sass
@@ -1,7 +1,7 @@
.organizations__page, .persons__page
.backlinks
> .block, > *
- margin-top: $spacing4
+ margin-top: $spacing-6
.block-pages
.top
display: block
diff --git a/assets/sass/_theme/design-system/breadcrumb.sass b/assets/sass/_theme/design-system/breadcrumb.sass
index 8c5a32ea02654738b296ab7fd3ab8013e2d3d74c..f5775c0fdd90a37dd0572966fd10e55bfe5df411 100644
--- a/assets/sass/_theme/design-system/breadcrumb.sass
+++ b/assets/sass/_theme/design-system/breadcrumb.sass
@@ -4,7 +4,7 @@
flex-wrap: nowrap
overflow: auto
display: flex
- height: $spacing3
+ height: $spacing-5
align-items: center
li
flex-shrink: 0
@@ -13,14 +13,19 @@
@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)
- padding-left: $spacing0
+ padding-left: $spacing-2
@include icon($breadcrumb-icon)
- padding-right: $spacing0
+ padding-right: $spacing-2
color: $breadcrumb-icon-color
+
+.breadcrumb-nav
+ @include media-breakpoint-down(desktop)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
+ > ol
+ padding: 0 var(--grid-gutter)
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/button.sass b/assets/sass/_theme/design-system/button.sass
index 60adbd146ac638d4dc53465255c6a469611d198c..fffdd2dbb288563a23417ef62283ca352feb4b52 100644
--- a/assets/sass/_theme/design-system/button.sass
+++ b/assets/sass/_theme/design-system/button.sass
@@ -1,30 +1,103 @@
+.button, .btn
+ @include button-reset
+ font-family: var(--btn-font-family)
+ font-size: var(--btn-font-size)
+ font-weight: var(--btn-font-weight)
+ text-transform: var(--btn-text-transform)
+ text-decoration: none
+ line-height: $body-line-height
+ color: var(--btn-color)
+ background: var(--btn-background)
+ border: var(--btn-border)
+ border-radius: var(--btn-border-radius)
+ padding: var(--btn-padding)
+ min-width: var(--btn-min-width)
+ text-align: center
+ display: inline-block
+ transition: background .3s ease, color .3s ease
+ &:hover, &:focus, &:focus-visible
+ color: var(--btn-hover-color)
+ background: var(--btn-hover-background)
+
+.button-accent
+ @extend .button
+ --btn-color: #{$color-background}
+ --btn-background: #{$color-accent}
+ --btn-hover-color: #{$color-background}
+ --btn-hover-background: #{alphaColor($color-accent, 0.85)}
+
+.button-alt
+ @extend .button
+ --btn-color: #{$color-background}
+ --btn-background: #{$color-text-alt}
+ --btn-hover-color: #{$color-background}
+ --btn-hover-background: #{$color-text}
+
.squared-button
@include meta
@include button-reset
align-items: center
+ color: var(--color-text)
cursor: pointer
display: flex
padding: 0
- @include media-breakpoint-up(desktop)
- width: col(2,1)
- &:first-child
- margin-bottom: $spacing0
+ text-decoration: none
&::before
- background-color: white
- border: 1px solid $color-border
- margin-right: $spacing0
- padding: half($spacing0)
+ background-color: var(--color-background)
+ border: 1px solid var(--color-border)
+ margin-right: $spacing-2
+ padding: $spacing-1
transition: background 0.3s ease, border 0.3s ease
@include media-breakpoint-up(desktop)
- margin-right: $spacing1
+ margin-right: $spacing-3
&:hover
text-decoration: none
&::before
- background-color: $color-text
+ background-color: var(--color-text)
border-color: transparent
- color: $color-background
- text-decoration: none
-button.squared-button
- @include icon-block(eye, before)
-a.squared-button
- @include icon-block(download, before)
\ No newline at end of file
+ color: var(--color-background)
+
+@mixin link-icon($icon: false)
+ @include button-reset
+ line-height: $body-line-height
+ white-space: nowrap
+ min-width: fit-content
+ @if $icon
+ @include icon-block($icon, after)
+
+@mixin button-icon($icon: false)
+ white-space: nowrap
+ display: inline-flex
+ align-items: center
+ justify-content: space-between
+ gap: $spacing-1
+ @if $icon
+ @include icon($icon, after)
+
+a.btn[target="_blank"]
+ @include button-icon(link-blank-raw)
+
+.dropdown-share
+ position: relative
+ .dropdown-menu
+ background: var(--btn-hover-background)
+ border: var(--btn-border)
+ border-radius: var(--btn-border-radius)
+ bottom: 0
+ padding: 0
+ position: absolute
+ top: 0
+ width: 100%
+ .share
+ display: flex
+ align-items: center
+ height: 100%
+ li
+ margin: 0
+ flex: 1 1
+ text-align: center
+ a
+ display: block
+ color: var(--btn-hover-color)
+ &:hover
+ color: var(--color-accent)
diff --git a/assets/sass/_theme/design-system/contacts.sass b/assets/sass/_theme/design-system/contacts.sass
index 003b3cdb7cdc83d2543db12bb3d471afbb558956..d667181c1d1dace07a59de2c0e519492b6918c50 100644
--- a/assets/sass/_theme/design-system/contacts.sass
+++ b/assets/sass/_theme/design-system/contacts.sass
@@ -1,12 +1,12 @@
.contacts-details
- margin-top: $spacing3
+ margin-top: $spacing-5
ul
@include list-reset
padding-left: 0
li
list-style-type: none
+ li
- margin-top: $spacing1
+ margin-top: $spacing-3
address
@extend .p
> span
@@ -15,7 +15,7 @@
@include media-breakpoint-down(md)
width: auto
ul + ul
- margin-top: $spacing1
+ margin-top: $spacing-3
li
align-items: baseline
justify-content: space-between
@@ -23,7 +23,7 @@
// text-align: right
> span
flex-shrink: 0
- margin-right: $spacing1
+ margin-right: $spacing-3
text-align: left
address
text-align: right
diff --git a/assets/sass/_theme/design-system/footer.sass b/assets/sass/_theme/design-system/footer.sass
index 15836bae5b05bca34395f543eb3dc3b7d11712b3..f0870a8a1db94df86db86b976b4d8d0c80ab2ec6 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -1,38 +1,39 @@
footer#document-footer
background: $footer-background-color
color: $footer-color
- padding-bottom: $spacing3
- padding-top: $spacing3
+ padding-bottom: $spacing-5
+ padding-top: $spacing-5
position: relative
@include media-breakpoint-down(desktop)
z-index: $zindex-footer
a
- @include link($footer-color)
+ color: $footer-color
+ @extend %underline-on-hover
.logo
+ @extend %logo
img
height: $footer-logo-height
max-width: 100%
- width: auto
@include media-breakpoint-up(desktop)
height: $footer-logo-height-desktop
ul
@include list-reset
- li
- + li
- margin-top: $spacing0
- a
- @include link($footer-color)
- text-decoration-color: transparent
+ li + li
+ margin-top: $spacing-2
.footer
&-site
@include small
+ * + *
+ margin-top: $spacing-2
&-social, &-legals, &-credit
@include meta
&-credit
display: block
- margin-top: $spacing0
+ margin-top: $spacing-2
+ a
+ text-decoration-color: alphaColor(currentColor, 0.3)
&-search
- padding-top: $spacing0 !important
+ padding-top: $spacing-2 !important
&-i18n
@include dropdown-i18n
button
@@ -51,40 +52,53 @@ footer#document-footer
box-shadow: none
&[aria-expanded="true"]
background: $dropdown-i18n-background-color
- justify-content: space-between
color: $dropdown-i18n-color
width: 100%
+ @include media-breakpoint-up(desktop)
+ justify-content: space-between
+ .dropdown-menu
animation-duration: unset
&::after
transform: rotate(-180deg)
&::before
- margin-right: $spacing0
+ margin-right: $spacing-2
&::after
- margin-left: $spacing0
- button[aria-expanded="true"],
- .dropdown-menu
- outline: px2rem(10) solid $dropdown-i18n-background-color
- min-width: $spacing4
+ margin-left: $spacing-2
+ button[aria-expanded="true"]
+ min-width: $spacing-6
+ outline: $spacing-2 solid $dropdown-i18n-background-color
.dropdown-menu
@include meta
background: $dropdown-i18n-background-color
+ margin-left: -$spacing-2
+ margin-right: -$spacing-2
+ margin-top: $spacing-2
a
color: $dropdown-i18n-color
+ padding: $spacing-2
+ ul
+ li + li
+ margin-top: 0
@include media-breakpoint-up(desktop)
left: 0
- margin-top: px2rem(17)
max-height: calc(100vh - var(--header-height))
padding: 0
position: absolute
width: fit-content
+ min-width: calc(#{pxToRem(150)} + #{$spacing-2} * 2)
+ a
+ padding-top: 0
a:focus-visible
outline-offset: -1px
+ @include media-breakpoint-down(desktop)
+ position: relative
+ li
+ border-top: 1px solid $color-border
@if $footer-icons-enabled
&-social
.nav-social + .site-links
- margin-top: $spacing1
+ margin-top: $spacing-3
&.site-links li
align-items: center
display: flex
@@ -119,13 +133,13 @@ footer#document-footer
&::after
font-size: $footer-icons-size
@include media-breakpoint-up(desktop)
- margin-right: half(-$spacing0)
- padding-left: $spacing0
+ margin-right: -0.2em
+ padding-left: $spacing-2
@include media-breakpoint-down(desktop)
width: fit-content
flex-direction: row-reverse
&::after
- margin-right: $spacing0
+ margin-right: $spacing-2
transform: translateX(-25%)
@if $footer-text-hidden
&-social.site-links li
@@ -135,16 +149,16 @@ footer#document-footer
.container
+ .container,
> * + *
- margin-top: $spacing3
+ margin-top: $spacing-5
@include media-breakpoint-up(desktop)
.container
display: flex
justify-content: space-between
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
+ .container
align-items: flex-end
- padding-top: $spacing3
+ padding-top: $spacing-5
padding-bottom: 0
.footer
&-site, &-social
diff --git a/assets/sass/_theme/design-system/form.sass b/assets/sass/_theme/design-system/form.sass
index 9c25792eb4bb904d834fc7bebd62f701bc9ad184..cdf6dd84b58b4bf619ad0d1a7761485081729d2a 100644
--- a/assets/sass/_theme/design-system/form.sass
+++ b/assets/sass/_theme/design-system/form.sass
@@ -2,26 +2,24 @@ form
fieldset
border: none
padding: 0
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
label
@include meta
.control--radio
@include body-text
+ label
- margin-left: half($spacing0)
+ margin-left: $spacing-1
@include body-text
.radio + .radio
- margin-left: $spacing0
+ margin-left: $spacing-2
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="password"]
@include body-text
border: 1px solid rgba(0, 0, 0, 0.3)
border-radius: $form-input-border-radius
- padding: half($spacing0)
+ padding: $spacing-1
input[type="submit"], button
- @include button-reset
- @include btn
- @include meta
- background: $form-btn-background-color
- color: $form-btn-color
+ --btn-background: $form-btn-background-color
+ --btn-color: $form-btn-color
+ @extend .button
label + input
- margin-bottom: $spacing3
\ No newline at end of file
+ margin-bottom: $spacing-5
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 38828d76b352ccdd138c253a70be269979aacda6..911a376a019a0a1711e7a35716345d6ac3269476 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -1,6 +1,6 @@
header#document-header
background: $header-background
- border-bottom: $header-border-bottom-width solid $color-border
+ border-bottom: $header-border-bottom-width solid var(--color-border)
color: $header-color
position: fixed
left: 0
@@ -29,8 +29,9 @@ header#document-header
span
color: $header-sticky-color
@if $header-sticky-invert-logo
- .logo img
- filter: invert(1)
+ .logo
+ img, .logo-text
+ filter: invert(1)
html.is-scrolling-down:not(.has-menu-opened) &
@include media-breakpoint-down(desktop)
transform: translateY(-100%)
@@ -38,11 +39,10 @@ header#document-header
&:not(:hover)
transform: translateY(-100%)
.logo
+ @extend %logo
color: $header-color
img
- display: block
height: $header-logo-height
- width: auto
@if $header-sticky-invert-logo
transition: filter $header-sticky-transition
@include media-breakpoint-up(desktop)
@@ -98,7 +98,7 @@ header#document-header
display: flex
flex-wrap: wrap
justify-content: space-between
- button[type="button"]:not(.pagefind-ui__button)
+ .header-button
@include button-reset
display: none
border: 0
@@ -119,7 +119,7 @@ header#document-header
align-items: center
span:first-of-type
@include meta
- font-size: 14px
+ font-size: pxToRem(14)
span:last-of-type
background: none
@include icon-block(burger, before)
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index 1cd7c5d3eaa3bf4b370051c5a0f06692cdf60586..6f6f6118019fc9398f7c23965d3d6d87b12f63fd 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -5,22 +5,22 @@
background-color: $hero-background-color
color: $hero-color
min-height: $hero-height
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
padding-top: var(--header-height)
position: relative
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
@include media-breakpoint-up(desktop)
min-height: $hero-height-desktop
*:focus-visible
outline-color: $hero-color
.content
align-items: start
- padding-top: $spacing3
- > h1, > hgroup
- margin-top: $spacing3
-
+ .hero-text
+ margin-top: $spacing-5
h1 + p
- margin-top: $spacing1
+ margin-top: $spacing-3
+ .btn
+ margin-top: $spacing-3
.lead
@include lead-hero
figure
@@ -35,60 +35,64 @@
.breadcrumb-nav + .content
padding-top: 0
.content + .breadcrumb-nav
- margin-top: $spacing3
+ margin-top: $spacing-5
&--no-margin
margin-bottom: 0
& + .document-content
- margin-top: $spacing3
+ margin-top: $spacing-5
+ &--with-image
+ figure
+ position: relative
+ > a
+ @include stretched-link
@include media-breakpoint-down(desktop)
- .breadcrumb-nav
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
- > ol
- padding: 0 half($grid-gutter-sm)
+ .content
+ padding-top: 0
&--with-image
padding-bottom: 0
.content
- > h1, > hgroup
- margin-bottom: $spacing2
+ .hero-text
+ margin-bottom: $spacing-4
&--image-landscape
.content
figure
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
&--image-portrait, &--image-square
.container
display: flex
flex-direction: column
- margin-bottom: $spacing5
+ margin-bottom: $spacing-7
figure
- margin-bottom: calc(#{-$spacing5} + #{$spacing2})
+ margin-bottom: calc(#{-$spacing-7} + #{$spacing-4})
@include media-breakpoint-up(desktop)
.content
- > h1, > hgroup
- width: col(9)
+ padding-top: $spacing-5
+ .hero-text
+ width: columns(9)
&--with-image
.content
display: flex
justify-content: space-between
- > h1, > hgroup
- width: col(7)
+ .hero-text
+ width: columns(7)
figure
- width: col(5)
+ width: columns(5)
&--image-portrait, &--image-square
.breadcrumb-nav
- width: calc(#{col(9)} + #{half($grid-gutter)})
-webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%)
mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%)
.breadcrumb
- padding-right: 50px
+ padding-right: 10%
.content
- > h1, > hgroup
- width: col(8)
+ .hero-text
+ width: columns(8)
figure
- width: col(3)
+ width: columns(3)
+ .breadcrumb-container
margin-top: 0
+ @include media-breakpoint-down(desktop)
+ margin-bottom: $spacing-5
diff --git a/assets/sass/_theme/design-system/image.sass b/assets/sass/_theme/design-system/image.sass
index 0c2124cab50981e0552697c70b34243ee3db0557..f510bb241e3ba862ade8702d4ba44926d03a2e8a 100644
--- a/assets/sass/_theme/design-system/image.sass
+++ b/assets/sass/_theme/design-system/image.sass
@@ -13,7 +13,7 @@ img
height: auto
width: 100%
figcaption
- margin-top: px2rem(10)
+ margin-top: pxToRem(10)
text-align: right
&,
p
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index 722758b5ebd320c54d5acb33b0f57e69f6d2628a..d4205042f2cc913177708242d6e50fc7b963bfc6 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -4,17 +4,16 @@
box-sizing: border-box
\:root
- --spacing0: #{$spacing0}
- --spacing1: #{$spacing1}
- --spacing2: #{$spacing2}
- --spacing3: #{$spacing3}
- --spacing4: #{$spacing4}
- --spacing5: #{$spacing5}
- --grid-gutter: #{$grid-gutter}
- --grid-gutter-sm: #{$grid-gutter-sm}
+ --spacing-1: #{$spacing-1}
+ --spacing-2: #{$spacing-2}
+ --spacing-3: #{$spacing-3}
+ --spacing-4: #{$spacing-4}
+ --spacing-5: #{$spacing-5}
+ --spacing-6: #{$spacing-6}
+ --spacing-7: #{$spacing-7}
--grid-max-width: #{$grid-max-width}
--header-height: #{$header-height}
- --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing4})
+ --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing-6})
@include media-breakpoint-up(desktop)
--header-height: #{$header-height-desktop}
@@ -32,7 +31,7 @@ body
main
&:not(.page-with-blocks)
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
iframe
border: none
@@ -43,7 +42,7 @@ iframe
.container
@include container
.hero + &
- margin-top: $spacing3
+ margin-top: $spacing-5
.hidden
display: none
@@ -59,7 +58,7 @@ ol
.document-content
.container > .lead
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
.document-content
position: relative
@@ -73,13 +72,13 @@ details
transform: translateY(5px)
summary
@include meta
- padding-bottom: $spacing0
- padding-top: $spacing0
+ padding-bottom: $spacing-2
+ padding-top: $spacing-2
position: relative
cursor: pointer
@include icon(caret, after)
- margin-left: px2rem(10)
- line-height: px2rem(22)
+ margin-left: pxToRem(10)
+ line-height: pxToRem(22)
transition: transform 0.25s
&::marker
content: none
@@ -107,16 +106,16 @@ details
display: none
.modal-content
position: relative
- background-color: $color-background-alt
- padding: $spacing2
+ background-color: var(--color-background-alt)
+ padding: $spacing-4
width: auto
max-height: 100vh
overflow-y: auto
@include media-breakpoint-up(desktop)
- padding: $spacing3
- width: col(8)
+ padding: $spacing-5
+ width: columns(8)
.modal-header
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
button
@include button-reset
@include icon-block(close, before)
diff --git a/assets/sass/_theme/design-system/logo.sass b/assets/sass/_theme/design-system/logo.sass
new file mode 100644
index 0000000000000000000000000000000000000000..6aafea148625fb6dff2174a60af8077acbae64d5
--- /dev/null
+++ b/assets/sass/_theme/design-system/logo.sass
@@ -0,0 +1,16 @@
+%logo
+ color: inherit
+ text-decoration: none
+ img
+ display: block
+ width: auto
+ .logo-darkmode
+ display: none
+ .logo-text
+ @include h2
+ &.with-darkmode
+ @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 5abd9de7ead9e47a04770d020c990ea56bfbcf53..42cd02a7eed8b71c5d6107ab5c3ff653fe59e13e 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -11,7 +11,7 @@
-webkit-flex-basis: 100vw
display: none
flex-basis: 100vw
- margin-top: $spacing1
+ margin-top: $spacing-3
max-height: var(--header-menu-max-height)
overflow: auto
a,
@@ -34,7 +34,7 @@
// text-decoration-color: transparent
&[aria-expanded]
@include icon(caret, after)
- margin-left: px2rem(5)
+ margin-left: pxToRem(5)
transition: transform 0.15s
&[aria-expanded="true"]
&::after
@@ -49,27 +49,25 @@
display: none
background: $header-dropdown-background
@include media-breakpoint-down(desktop)
- padding-bottom: $spacing1
+ padding-bottom: $spacing-3
@include media-breakpoint-up(desktop)
- padding: $spacing1
+ padding: $spacing-3
position: absolute
max-height: calc(100vh - var(--header-height))
overflow: auto
a
color: $header-dropdown-color
- &:hover,
- &:focus
- text-decoration-color: $header-dropdown-color
+ @extend %underline-on-hover
.dropdown-menu-title
@include h2
.nav-level-1
display: flex
> li
- > a, span
+ > a, > span
@include meta
display: block
- padding: half($spacing0) $spacing0
+ padding: $spacing-1 $spacing-2
&:last-child
a, span
padding-right: 0
@@ -88,7 +86,7 @@
.nav-level-3
display: block
- padding-top: half($spacing0)
+ padding-top: $spacing-1
a,
span
@include meta
@@ -102,7 +100,7 @@
align-items: center
.nav-level-3
li
- margin-top: $spacing0
+ margin-top: $spacing-2
.has-children:not(.header-i18n) // avoid
@if $header-dropdown-full
.dropdown-menu
@@ -111,7 +109,7 @@
// inset: 100% 0 auto 0
padding-left: 0
padding-right: 0
- padding-bottom: $spacing2
+ padding-bottom: $spacing-4
&:not(.is-titled)
.nav-level-2
@include container
@@ -120,38 +118,38 @@
.container
align-items: baseline
display: flex
- gap: $grid-gutter
+ gap: var(--grid-gutter)
.dropdown-menu-title
- width: col(5)
+ width: columns(5)
.nav-level-2
- width: col(7)
+ width: columns(7)
li
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
@else
position: relative
.dropdown-menu
margin-top: $header-nav-padding-y
min-width: 400px
- padding-left: $spacing1
- padding-top: $spacing0
- padding-right: $spacing1
+ padding-left: $spacing-3
+ padding-top: $spacing-2
+ padding-right: $spacing-3
right: 0
text-align: right
&.is-titled
.dropdown-menu-title
@include h3
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
.container
padding-left: 0
padding-right: 0
.nav-level-2
> li
> a
- padding-bottom: half($spacing0)
- padding-top: half($spacing0)
+ padding-bottom: $spacing-1
+ padding-top: $spacing-1
display: block
+ li.has-children
- margin-top: $spacing1
+ margin-top: $spacing-3
.header-i18n
@include dropdown-i18n
@@ -170,14 +168,14 @@
display: block
li
a, span
- padding: half($spacing0) 0
+ padding: $spacing-1 0
display: block
> li:not(:last-child)
border-bottom: 1px solid #adb5bd
> li
> a, > span
- padding-bottom: $spacing1
- padding-top: $spacing1
+ padding-bottom: $spacing-3
+ padding-top: $spacing-3
li.has-children
[role="button"]
align-items: center
@@ -201,7 +199,7 @@
padding-right: 0
.nav-level-2
> .has-children + li
- margin-top: $spacing1
+ margin-top: $spacing-3
.nav-level-3
padding-top: 0
@@ -215,8 +213,8 @@
margin-right: 1rem
a
text-decoration: none
- padding: $spacing0
- font-size: px2rem(24)
+ padding: $spacing-2
+ font-size: pxToRem(24)
&:hover
opacity: 0.7
&::after
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
index 1c00405cb47904fdf4987318c33ba690e2fcda45..c39cf32843bdda5b91add7e18d17964af3a15701 100644
--- a/assets/sass/_theme/design-system/pagination.sass
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -5,47 +5,51 @@
align-items: center
display: flex
flex-wrap: wrap
- margin-top: $spacing3
+ margin-top: $spacing-5
main.page-with-blocks &
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
li
a
color: inherit
- padding: calc(#{$spacing0}/2) $spacing0
+ display: block
+ line-height: $spacing-4
+ min-width: $minimum-accessible-size
+ min-height: $minimum-accessible-size
+ padding: 0 $spacing-2
+ text-align: center
text-decoration: none
transition: background-color .15s ease-in-out
&.active
- color: $color-accent
+ color: var(--color-accent)
&.disabled
pointer-events: none
a::before
opacity: .3
&:not(.disabled)
a:hover
- background-color: $color-background-alt
+ background-color: var(--color-background-alt)
&:first-child
a
@include icon-block(arrow-first, before)
- padding-left: 0
- padding-right: 0
&:nth-child(2)
a
@include icon-block(arrow-previous, before)
- padding-left: 0
- padding-right: 0
&:nth-last-child(2)
a
@include icon-block(arrow-next, before)
- padding-left: 0
- padding-right: 0
&:last-child
a
@include icon-block(arrow-last, before)
+ &:first-child,
+ &:nth-child(2),
+ &:nth-last-child(2),
+ &:last-child
+ a
padding-left: 0
padding-right: 0
.posts-navigation, .siblings-navigation
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
ul
@include list-reset
display: flex
@@ -58,33 +62,33 @@
display: block
text-decoration: none
&:hover
- color: $color-accent
+ color: var(--color-accent)
span
@include meta
text-decoration: none
display: block
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
.previous
span
@include icon(arrow-left, before)
- margin-right: px2rem(5)
+ margin-right: pxToRem(5)
.next
text-align: right
span
@include icon(arrow-right, after)
- margin-left: px2rem(5)
+ margin-left: pxToRem(5)
@include media-breakpoint-up(desktop)
ul
- padding-top: $spacing1
- gap: $spacing1
+ padding-top: $spacing-3
+ gap: $spacing-3
@include media-breakpoint-down(desktop)
ul
flex-direction: column-reverse
.previous,
.next
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
display: flex
align-items: center
span
@@ -94,11 +98,11 @@
content: none
a
display: block
- padding: $spacing1 0
+ padding: $spacing-3 0
.previous
@include icon(arrow-left, before)
- margin-right: $spacing0
+ margin-right: $spacing-2
.next
justify-content: end
@include icon(arrow-right, after)
- margin-left: $spacing0
\ No newline at end of file
+ margin-left: $spacing-2
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass
index 8560a31ddb04fba2f7ac6e64ab354528406a01bb..844e04318e653f1078ac00413b2263d339ae72fd 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -18,19 +18,20 @@
@include icon(search-inline, after)
&::after
line-height: inherit
- margin-left: half($spacing0)
+ margin-left: $spacing-1
&:not(.pagefind-menu)
- padding: half($spacing0) $spacing0
+ padding: $spacing-1 $spacing-2
&.toggle-icon::after
- font-size: $h3-size
- @include media-breakpoint-up(desktop)
- margin-top: px2rem(5)
+ font-size: $h2-size
+ &.toggle-both
+ .menu & span
+ padding-right: 0
span,
&::after
display: inline
@include media-breakpoint-down(desktop)
&.pagefind-menu
- padding: $spacing1 0
+ padding: $spacing-3 0
width: 100%
@include media-breakpoint-up(desktop)
&.toggle-icon::after
@@ -38,96 +39,94 @@
.search__close
@include icon-block(close, after)
position: fixed
- right: $spacing3
+ right: $spacing-5
padding: 0
z-index: 9
&::after
display: inline-flex
justify-content: center
- margin-left: $spacing0
- width: px2rem(15)
+ margin-left: $spacing-2
+ width: pxToRem(15)
@include media-breakpoint-down(desktop)
- right: $spacing1
- top: half($spacing0)
+ right: $spacing-3
+ top: $spacing-1
#search
- background: $color-background
- color: $color-text
+ background: var(--color-background)
+ color: var(--color-text)
height: 100vh
left: 0
- padding-bottom: $spacing3
- padding-left: $spacing1
- padding-right: $spacing1
- padding-top: $spacing4
+ padding-bottom: $spacing-5
+ padding-left: var(--grid-gutter)
+ padding-right: var(--grid-gutter)
+ padding-top: $spacing-6
position: fixed
overflow: auto
top: 0
width: 100vw
z-index: 80
@include media-breakpoint-up(desktop)
- padding-right: $spacing3
- padding-left: $spacing3
- padding-top: space(7)
+ padding-top: $spacing-4
&[aria-hidden=true]
display: none
a
- color: $color-text
+ color: var(--color-text)
.pagefind-ui
&::before
content: ""
- background: $color-background
- height: space(27)
+ background: var(--color-background)
+ height: space(34)
left: 0
position: fixed
top: 0
width: 100%
z-index: 5
@include media-breakpoint-down(desktop)
- height: space(50)
+ height: space(52)
&__form
@include icon(search-inline, after)
&::after
- color: transparentize($color-text-alt, .4)
- padding-right: px2rem(2)
+ color: alphaColor(var(--color-text-alt), 0.6)
position: fixed
pointer-events: none
- transform: translate(-6px,20%)
z-index: 9
+ font-size: $h2-size
@include media-breakpoint-down(desktop)
- right: $spacing1
- top: space(33)
+ right: $spacing-3
+ top: space(35)
&__search-input
+ background-color: $color-background
border-left: 0
border-right: 0
border-radius: 0
border-top: 0
padding-left: 0
- padding-right: $spacing1 !important
+ padding-right: $spacing-3 !important
position: fixed
z-index: 6
- @include media-breakpoint-down(desktop)
- margin-bottom: $spacing1
&:focus,
&:focus-visible
- border-bottom: 2px solid $color-text
+ border-bottom: 2px solid var(--color-text)
outline: none
&__button[type="button"]
@include button-reset
- @include link($color-text)
- margin-top: $spacing2
+ @include link(var(--color-text))
+ margin-top: $spacing-4
padding: 0
&__message
@include meta
- color: $color-text-alt
+ color: var(--color-text-alt)
text-align: right
z-index: 11
position: fixed
- top: space(20)
+ top: space(27)
&__search-clear,
&__suppressed
display: none
pointer-events: none
&__drawer
position: relative
+ @include media-breakpoint-down(desktop)
+ padding-top: $spacing-2
&__result
list-style: none
position: relative
@@ -139,74 +138,78 @@
@include media-breakpoint-down(desktop)
display: none
+ li
- margin-top: half($spacing3)
+ margin-top: $spacing-4
@include media-breakpoint-up(desktop)
@include grid
&-inner
grid-column: 4/13
&__result-excerpt mark
- background-color: $color-accent
- color: $color-background
+ background-color: var(--color-accent)
+ color: var(--color-background)
&__result-title a
@include h4
@include stretched-link
@include media-breakpoint-up(desktop)
&__form
position: relative
- width: col(8)
+ width: columns(8)
&::after
- left: calc(#{col(8)} - #{space(8)})
- top: space(9)
+ left: calc(#{columns(8)} + #{var(--grid-gutter)})
+ top: space(16)
+ transform: translateX(-100%)
&__search-input,
&__message
- width: calc(#{col(8,12)} - #{space(21.5)})
+ width: columns(8)
&__results-area
- padding-top: space(26)
+ padding-top: $spacing-6
@include media-breakpoint-down(desktop)
&__search-input,
&__message
- width: calc(100% - #{$spacing2})
+ left: var(--grid-gutter)
+ right: var(--grid-gutter)
&__message
- top: space(44)
+ top: space(46)
&__results-area
padding-top: space(17)
.menu .nav-level-1 > li .pagefind-ui__toggle:not(.toggle-icon)::after
margin-left: 0
- margin-top: px2rem(2)
+ margin-top: pxToRem(2)
.pagefind-fixed
align-items: center
- background: $color-background-alt
+ background: var(--color-background-alt)
bottom: 0
- color: $color-text
+ color: var(--color-text)
display: flex
justify-content: space-between
- left: $spacing3
+ left: var(--grid-gutter)
position: fixed
z-index: 10
@include media-breakpoint-up(desktop)
&:not(.toggle-icon)
- min-width: calc(#{$spacing3} * 3)
+ min-width: columns(2)
&.toggle-icon:not(:hover)
padding-left: 0
padding-right: 0
justify-content: center
&.toggle-icon
- min-height: px2rem(37)
- width: px2rem(50)
+ min-height: pxToRem(37)
+ width: pxToRem(50)
+ span
+ display: none
&:hover,
&:focus
- width: calc(#{$spacing3} * 3)
+ min-width: columns(2)
span
display: inline
@include media-breakpoint-down(desktop)
left: 0
width: 100vw
&.in-page-with-toc
- background: $color-background
+ background: var(--color-background)
border-top: 1px solid #eee
- bottom: px2rem(44)
+ bottom: pxToRem(44)
footer#document-footer .footer-search
.pagefind-footer
@@ -215,11 +218,11 @@ footer#document-footer .footer-search
&.toggle-icon
transform: translateX(-35%)
&::after
- margin-top: px2rem(3)
+ margin-top: pxToRem(3)
#search
margin-top: 0
a
- color: $color-text
+ color: var(--color-text)
.nav-search
display: flex
diff --git a/assets/sass/_theme/design-system/table.sass b/assets/sass/_theme/design-system/table.sass
index f4fdd19732c0a98188b0b53709510ea65eb9a777..5b3796a1ffd5fc08fe20f3ab9aeace77d917fc2c 100644
--- a/assets/sass/_theme/design-system/table.sass
+++ b/assets/sass/_theme/design-system/table.sass
@@ -7,24 +7,21 @@ table
empty-cells: hide
caption
@include meta
- padding: $spacing0 0
+ padding: $spacing-2 0
text-align: left
th,
td
- padding-top: $spacing0
- padding-bottom: $spacing0
- padding-right: $spacing0
- @include in-page-with-sidebar
- padding-top: calc(#{$spacing0} / 2)
- padding-bottom: calc(#{$spacing0} / 2)
+ padding-top: $spacing-2
+ padding-bottom: $spacing-2
+ padding-right: $spacing-2
+ @include media-breakpoint-down(desktop)
+ min-width: 15ch
thead
@include h4
font-size: $table-head-font-size
@include media-breakpoint-up(desktop)
font-size: $table-head-font-size-desktop
- th
- text-align: left
tbody
font-size: $table-body-size
@@ -32,18 +29,13 @@ table
font-size: $table-body-size-desktop
td,
th
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
&:empty
border-top: none
.table-responsive
overflow-x: auto
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
- padding-left: half($grid-gutter-sm)
- padding-right: half($grid-gutter-sm)
- @include media-breakpoint-up(desktop)
- margin-left: half(-$grid-gutter)
- margin-right: half(-$grid-gutter)
- padding-left: half($grid-gutter)
- padding-right: half($grid-gutter)
\ No newline at end of file
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
+ padding-left: var(--grid-gutter)
+ padding-right: var(--grid-gutter)
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/table_of_contents.sass b/assets/sass/_theme/design-system/table_of_contents.sass
index 0e7d1746f0da1b9d126bbdf61f39efd66dd8bb08..0c13d9c54c25b597b850820e75111632e0c2b21d 100644
--- a/assets/sass/_theme/design-system/table_of_contents.sass
+++ b/assets/sass/_theme/design-system/table_of_contents.sass
@@ -7,11 +7,11 @@
bottom: 0
margin-top: 0
z-index: $zindex-toc
- width: calc(#{col-outside-container(4)} + #{$grid-gutter} * 2)
+ width: calc(#{columns(4)} + var(--grid-gutter) * 2)
transform: translateX(100%)
transition: var(--toc-transition-duration) transform ease-in-out
@include media-breakpoint-down(desktop)
- width: calc(100% - #{$grid-gutter})
+ width: calc(100% - var(--grid-gutter))
&.is-opened
transform: translateX(0)
&[aria-hidden="true"]
@@ -21,13 +21,13 @@
flex-direction: column
height: 100%
.toc-title
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
font-size: $toc-title-font-size
- padding: $spacing0 $spacing1
+ padding: $spacing-2 $spacing-3
@include media-breakpoint-up(desktop)
font-size: $toc-title-font-size-desktop
- padding: $header-nav-padding-y $grid-gutter calc(#{$header-nav-padding-y} + 1px)
- padding: calc((var(--header-height)) / 2 - #{$body-size}) $grid-gutter
+ padding: $header-nav-padding-y var(--grid-gutter) calc(#{$header-nav-padding-y} + 1px)
+ padding: calc((var(--header-height)) / 2 - #{$body-size}) var(--grid-gutter)
padding-top: 0
padding-bottom: 0
line-height: calc(var(--header-height) - 1px)
@@ -39,9 +39,9 @@
max-height: 100%
> ol
flex: 1
- padding: $spacing1
+ padding: $spacing-3
@include media-breakpoint-up(desktop)
- padding: $spacing1 $grid-gutter
+ padding: $spacing-3 var(--grid-gutter)
> li:first-child
margin-top: 0
button
@@ -49,10 +49,10 @@
@include icon-block(close, after)
margin-right: -14px
align-items: center
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
display: flex
justify-content: space-between
- padding: 0 $spacing1
+ padding: 0 $spacing-3
line-height: $body-line-height
@include media-breakpoint-up(desktop)
border-top: 0
@@ -62,9 +62,9 @@
padding-top: 0
padding-bottom: 0
line-height: var(--header-height)
- right: $grid-gutter
+ right: var(--grid-gutter)
&::after
- margin-left: $spacing0
+ margin-left: $spacing-2
.toc-cta
display: flex
@@ -73,9 +73,9 @@
display: none
@include media-breakpoint-up(desktop)
@include container
- background: $color-background
+ background: var(--color-background)
justify-content: end
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
position: sticky
text-align: right
top: calc(var(--header-height) * -1)
@@ -86,16 +86,16 @@
body.offcanvas-toc &
display: flex
@include media-breakpoint-down(desktop)
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
position: fixed
bottom: 0
background: $toc-background-color
left: 0
width: 100%
- padding: 0 half($grid-gutter-sm)
+ padding: 0 var(--grid-gutter)
z-index: $zindex-toc-cta
button
- @include button-icon(toc)
+ @include link-icon(toc)
border: 0
line-height: inherit
cursor: pointer
@@ -123,24 +123,24 @@
// Only desktop and in page with sidebar
@include in-page-with-sidebar
- @include container-margin-left
+ margin-left: grid-external-space()
pointer-events: none
top: 0
left: 0
margin-top: 0
height: 100%
position: absolute
- width: col-outside-container(4)
+ width: columns(4)
.toc-content
overflow-y: auto
max-height: calc(100vh - var(--header-height))
- padding-bottom: $spacing2
+ padding-bottom: $spacing-4
pointer-events: auto
- @include sticky($spacing1)
+ @include sticky($spacing-3)
html.is-scrolling-down &
- max-height: calc(100vh - #{$spacing1})
+ max-height: calc(100vh - #{$spacing-3})
.toc-title
- color: $color-text-alt
+ color: var(--color-text-alt)
button
display: none
@@ -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/top.sass b/assets/sass/_theme/design-system/top.sass
index 574e1cc322c663e41f3b9500fa430d617a03cfc0..82e22fa0fc77871dff4f4e042bc6bfa8bb0f382a 100644
--- a/assets/sass/_theme/design-system/top.sass
+++ b/assets/sass/_theme/design-system/top.sass
@@ -1,21 +1,8 @@
-/* TODO Ã renomer */
.top
- // align-items: baseline
- // display: flex
- // flex-wrap: wrap
- // justify-content: space-between
- margin-bottom: calc(#{$spacing1} + #{$spacing0})
+ margin-bottom: calc(#{$spacing-3} + #{$spacing-2})
position: relative
h2, p
margin-bottom: 0
- // h2
- // a
- // @include stretched-link
- // div
- // margin-top: px2rem(5)
- // p
- // @include media-breakpoint-up(lg)
- // width: col(8)
.link
@extend .link-more
diff --git a/assets/sass/_theme/design-system/transcription.sass b/assets/sass/_theme/design-system/transcription.sass
index b6137c3de18838373db412b7890c62c1592f1cc6..eba07683e32588e77a68d2c269d45895971247da 100644
--- a/assets/sass/_theme/design-system/transcription.sass
+++ b/assets/sass/_theme/design-system/transcription.sass
@@ -1,2 +1,2 @@
.transcription
- margin-top: $spacing1
+ margin-top: $spacing-3
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index b17ab94d5ff712e724ce143ec28460cbebc2f062..6b1f3ca4260327fdabb648c2831016e8beec507a 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -4,12 +4,10 @@ body
font-family: $body-font-family
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
- font-size: $body-size
+ font-size: var(--body-size)
+ line-height: var(--body-line-height)
font-variant-ligatures: common-ligatures
text-rendering: optimizelegibility
- line-height: $body-line-height
- @include media-breakpoint-up(desktop)
- font-size: $body-size-desktop
// Experimental, not implemented yet
// https://github.com/jantimon/text-box-trim-examples
@@ -25,60 +23,51 @@ h1, h2, h3, h4, h5, h6
@mixin h1
font-family: $h1-font-family
- font-size: $h1-size
+ font-size: var(--h1-size)
font-weight: $h1-weight
- line-height: $h1-line-height
+ line-height: var(--h1-line-height)
text-transform: $h1-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h1-size-desktop
h1, .h1
@include h1
@mixin h2
font-family: $h2-font-family
- font-size: $h2-size
+ font-size: var(--h2-size)
font-weight: $h2-weight
- line-height: $h2-line-height
+ line-height: var(--h2-line-height)
text-transform: $h2-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h2-size-desktop
h2, .h2
@include h2
@mixin h3
font-family: $h3-font-family
- font-size: $h3-size
+ font-size: var(--h3-size)
font-weight: $h3-weight
- line-height: $h3-line-height
+ line-height: var(--h3-line-height)
text-transform: $h3-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h3-size-desktop
h3, .h3
@include h3
@mixin h4
font-family: $h4-font-family
- font-size: $h4-size
+ font-size: var(--h4-size)
font-weight: $h4-weight
- line-height: $h4-line-height
+ line-height: var(--h4-line-height)
text-transform: $h4-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h4-size-desktop
h4, .h4
@include h4
@mixin h5
font-family: $h5-font-family
- font-size: $h5-size
+ font-size: var(--h5-size)
font-weight: $h5-weight
- line-height: $h5-line-height
+ line-height: var(--h5-line-height)
text-transform: $h5-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h5-size-desktop
+ // Todo : check that
a
text-decoration: none
@@ -87,12 +76,10 @@ h5, .h5
@mixin h6
font-family: $h6-font-family
- font-size: $h6-size
+ font-size: var(--h6-size)
font-weight: $h6-weight
- line-height: $h6-line-height
+ line-height: var(--h6-line-height)
text-transform: $h6-text-transform
- @include media-breakpoint-up(desktop)
- font-size: $h6-size-desktop
h6, .h6
@include h6
@@ -100,42 +87,33 @@ 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
- font-size: $lead-size
+ font-size: var(--lead-size)
font-weight: $lead-weight
- line-height: $lead-line-height
- @include media-breakpoint-up(desktop)
- font-size: $lead-size-desktop
+ line-height: var(--lead-line-height)
@if $handle-sidebar
@include in-page-with-sidebar
font-family: $lead-sidebar-font-family
- font-size: $lead-sidebar-size-desktop
+ font-size: var(--lead-sidebar-size)
font-weight: $lead-sidebar-weight
- line-height: $lead-sidebar-line-height
+ line-height: var(--lead-sidebar-line-height)
.lead
@include lead
@mixin lead-hero
font-family: $lead-hero-font-family
- font-size: $lead-hero-size
+ font-size: var(--lead-hero-size)
font-weight: $lead-hero-weight
- line-height: $lead-hero-line-height
- @include media-breakpoint-up(desktop)
- font-size: $lead-hero-size-desktop
-
+ line-height: var(--lead-hero-line-height)
@mixin body-text
font-family: $body-font-family
- font-size: $body-size
- line-height: $body-line-height
- @include media-breakpoint-up(desktop)
- font-size: $body-size-desktop
+ font-size: var(--body-size)
+ line-height: var(--body-line-height)
.p,
.li
@@ -143,46 +121,49 @@ h2, .h2
@mixin meta
font-family: $meta-font-family
- font-size: $meta-size
+ font-size: var(--meta-size)
font-weight: $meta-weight
- line-height: $meta-line-height
- @include media-breakpoint-up(desktop)
- font-size: $meta-size-desktop
+ line-height: var(--meta-line-height)
.meta
@include meta
@mixin signature
font-family: $signature-font-family
- font-size: $signature-size
+ font-size: var(--signature-size)
font-weight: $signature-weight
- line-height: $signature-line-height
- @include media-breakpoint-up(desktop)
- font-size: $signature-size-desktop
+ line-height: var(--signature-line-height)
.signature
@include signature
@mixin small
font-family: $small-font-family
- font-size: $small-size
+ font-size: var(--small-size)
font-weight: $small-weight
- line-height: $small-line-height
- @include media-breakpoint-up(desktop)
- font-size: $small-size-desktop
+ line-height: var(--small-line-height)
small, .small
@include small
-@mixin rich-text
+%multiple-lists
+ ul, ol
+ ul, ol
+ padding-left: $spacing-2
+ @include media-breakpoint-up(desktop)
+ padding-left: $spacing-3
+
+.rich-text
word-break: break-word
+ @extend %multiple-lists
h1, h2, h3, h4, h5, h6, p, ul
- margin-top: $spacing1
+ margin-top: $spacing-3
&:first-child, meta + &
margin-top: 0
-.rich-text
- @include rich-text
+.content
+ section
+ @extend %multiple-lists
@mixin inherit-text
font-family: inherit
@@ -192,19 +173,17 @@ small, .small
line-height: inherit
[itemprop="articleBody"]
- @include rich-text
+ @extend .rich-text
@mixin blockquote
margin: 0
font-family: $quote-font-family
- font-size: $quote-size
+ font-size: var(--quote-size)
font-weight: $quote-weight
font-style: $quote-style
- line-height: $quote-line-height
- @include media-breakpoint-up(desktop)
- font-size: $quote-size-desktop-long
+ line-height: var(--quote-line-height)
cite
- font-size: px2rem(18)
+ font-size: pxToRem(18)
font-style: normal
blockquote, .blockquote
@@ -215,10 +194,9 @@ p
margin-top: 0
margin-bottom: 0
+ p
- margin-top: $spacing0
-
-p:empty
- display: none
+ margin-top: $spacing-2
+ &:empty
+ display: none
p + ul,
p + ol
@@ -244,32 +222,6 @@ a,
&.glightbox
text-decoration: none
-@mixin btn
- font-size: $btn-font-size
- padding: $btn-padding-y $btn-padding-x
- text-decoration: none
- display: inline-block
- border-radius: $btn-border-radius
- @include media-breakpoint-up(desktop)
- font-size: $btn-font-size-desktop
- padding: $btn-padding-y-desktop $btn-padding-x-desktop
-
-.btn
- @include btn
-
-.link-btn
- @include btn
- border: $btn-border
- @include media-breakpoint-up(desktop)
- padding: $spacing0
- &[target="_blank"]:not(.icon)
- display: flex
- justify-content: space-between
- align-items: center
- @include icon-block(link-blank-block, after)
- &:hover
- background: $btn-hover-background
-
.chip
@include meta
background: $chip-background
@@ -286,8 +238,16 @@ a,
@include link
@include icon(arrow, before)
&::before
- font-size: px2rem(10)
- margin-right: px2rem(5)
+ font-size: pxToRem(10)
+ margin-right: pxToRem(5)
+
+%underline-on-hover
+ text-decoration-color: transparent
+ 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
@@ -298,20 +258,19 @@ abbr, abbr[title]
text-decoration-style: dotted
::selection
- background: rgba($color-text, .7)
- color: $color-background
- text-shadow: none
+ background: var(--color-selection-background)
+ color: var(--color-selection)
sub,
sup
font-size: 60%
- margin-left: px2rem(2)
+ margin-left: pxToRem(2)
[data-click-to-copy]
cursor: pointer
text-decoration: none
@include icon(copy-inline, after)
- margin-left: $spacing0
+ margin-left: $spacing-2
vertical-align: text-top
&.is-copied
@include icon(check-inline, after)
@@ -342,5 +301,5 @@ sup
.btn-#{$name}
@include icon($name)
&::before
- margin-inline-end: px2rem(5)
+ margin-inline-end: pxToRem(5)
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index e998ad1616e131fb89d5f23027acd41af6821cce..c99d5465e5a26f6f80347faf510480321c234dff 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -1,81 +1,86 @@
// 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
// 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/projects
+@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/locations"
-@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/locations
+@import sections/organizations
+@import sections/pages
+@import sections/papers
+@import sections/persons
+@import sections/posts
+@import sections/projects
+@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/categories.sass b/assets/sass/_theme/sections/categories.sass
index ecfa96bd6ae8d155337100543c0fa050087f3e9b..4b15a928da24a517784e01b700c65787d6d73b7e 100644
--- a/assets/sass/_theme/sections/categories.sass
+++ b/assets/sass/_theme/sections/categories.sass
@@ -10,10 +10,10 @@ ul.categories
@include list-reset
display: flex
flex-direction: column
- gap-y: $spacing1
+ gap-y: $spacing-3
@include grid(3, md)
@include grid(4, xxl)
.posts_categories__term, .events_categories__term
main
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index 67b54c24234bc8aa2bbce2dfe42e097f5550707a..6e7e4c7175b89b4eea7eb8499c82a8d835c3dbd6 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -1,65 +1,65 @@
ul.diplomas
@include list-reset
> li
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
@include media-breakpoint-up(desktop)
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
> a
@include h2
display: block
text-decoration: none
- padding-bottom: $spacing1
- padding-top: $spacing1
- border-bottom: 1px solid $color-border
+ padding-bottom: $spacing-3
+ padding-top: $spacing-3
+ border-bottom: 1px solid var(--color-border)
@include icon(arrow-right, after)
align-self: center
margin-left: auto
&:hover
- color: $color-accent
+ color: var(--color-accent)
@include media-breakpoint-down(desktop)
position: relative
- padding-right: $spacing1
+ padding-right: $spacing-3
&::after
position: absolute
- bottom: $spacing1
+ bottom: $spacing-3
right: 0
@include media-breakpoint-up(desktop)
display: flex
align-items: baseline
span
- margin-left: $spacing1
-
+ margin-left: $spacing-3
+
.content
@include grid(2, desktop)
- padding-bottom: $spacing1
- padding-top: $spacing1
+ padding-bottom: $spacing-3
+ padding-top: $spacing-3
.programs
@include media-breakpoint-down(desktop)
- margin-top: $spacing1
+ margin-top: $spacing-3
li
display: block
border-bottom: 0
padding: 0
+ li, > ol
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-up(sm)
- margin-top: $spacing1
+ margin-top: $spacing-3
a:hover
- color: $color-accent
+ color: var(--color-accent)
ol li a
@include inherit-text
@include icon(list-hyphen, before)
margin-left: 1px
- margin-right: half($spacing0)
+ margin-right: $spacing-1
margin-top: 6px
@include media-breakpoint-up(sm)
- margin-right: $spacing0
+ margin-right: $spacing-2
@include media-breakpoint-up(md)
margin-top: 8px
display: flex
ol
- margin-left: $spacing1
+ margin-left: $spacing-3
> li a
@include h3
@@ -68,7 +68,7 @@ ul.diplomas
@include media-breakpoint-up(desktop)
display: flex
> p
- width: col(6)
+ width: columns(6)
.title
@include h4
@@ -81,83 +81,91 @@ ul.diplomas
@include icon(caret, after)
margin-left: 5px
.dropdown-menu
- @include inset(calc(100% + #{$spacing0}), 0, auto, auto)
- background-color: $color-background-alt
+ @include inset(calc(100% + #{$spacing-2}), 0, auto, auto)
+ background-color: var(--color-background-alt)
display: none
position: absolute
z-index: 2
@include media-breakpoint-down(desktop)
- right: half(-$grid-gutter-sm)
- left: half(-$grid-gutter-sm)
+ right: var(--grid-gutter-negative)
+ left: var(--grid-gutter-negative)
&,
a
color: black
a
-
display: block
font-size: $body-size
- padding: $spacing1
+ padding: $spacing-3
text-decoration: none
white-space: normal
@include media-breakpoint-down(desktop)
- padding: $spacing0 $spacing1
+ padding: $spacing-2 $spacing-3
&:not(:first-child)
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
&:hover
- background-color: $color-accent
+ background-color: var(--color-accent)
color: white
- button[aria-expanded="true"]
+ button[aria-expanded="true"]
@include icon('caret-top', 'after')
+ .dropdown-menu
display: block
.essential-container
- .container
+ margin-top: $spacing-5
+ .buttons
+ @include meta
+ display: flex
+ flex-wrap: wrap
+ .dropdown-share
+ button
+ @extend .button
+ @include button-icon(social-inline)
+ a[download]
+ @extend .button-alt
+ @include button-icon(download-inline)
@include media-breakpoint-down(sm)
- .buttons > *
- width: col(8)
+ button, > a
+ width: 100%
@include media-breakpoint-down(md)
- .buttons
- display: flex
- gap: $spacing1
- flex-wrap: wrap
- > *
- min-width: 150px
- width: col(7)
+ --btn-min-width: #{pxToRem(140)}
+ gap: $spacing-3
+ flex-direction: row
+ button, > a
+ width: columns(6)
@include media-breakpoint-up(md)
- @include grid(2, md)
- align-items: flex-end
- .buttons
- align-items: end
- display: flex
- flex-direction: column
- gap: $spacing1
- justify-content: flex-end
- > *
- min-width: 200px
- width: col(2, 6)
-
+ flex-direction: column
+ gap: $spacing-3
+ --btn-min-width: #{columns(2)}
+ button, > a
+ width: pxToRem(200)
+ @include media-breakpoint-down(desktop)
+ margin-top: $spacing-3
+ .container
+ @include media-breakpoint-up(md)
+ display: flex
+ justify-content: space-between
.essential
+ @include meta
color: $header-color
flex-wrap: wrap
font-size: $program-essential-font-size
margin-bottom: 0
- margin-top: $spacing3
- @include meta
+ margin-top: 0
@include media-breakpoint-up(desktop)
@include grid(6, false, 0)
+ width: columns(6)
font-size: $program-essential-font-size-desktop
dt,
dd
margin: 0
- padding-bottom: $spacing0
- padding-top: $spacing0
+ padding-bottom: $spacing-2
+ padding-top: $spacing-2
&:last-of-type
padding-bottom: 0
dt
grid-column: 1/3
- color: $color-text-alt
+ color: var(--color-text-alt)
@include media-breakpoint-down(desktop)
padding-bottom: 0
dd
@@ -177,11 +185,11 @@ ul.diplomas
@include stretched-link(before)
position: initial
@include media-breakpoint-down(desktop)
- margin-right: $spacing0
+ margin-right: $spacing-2
&::after
align-self: center
bottom: unset
position: relative
- margin-left: half($spacing0)
+ margin-left: $spacing-1
+ p
- margin-top: $spacing0
\ No newline at end of file
+ margin-top: $spacing-2
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/events.sass b/assets/sass/_theme/sections/events.sass
index c9031b2575d14e8486eeac12d061c7950c1e8168..37842f429c0803c21086bbb9e10d67104fbdb7e2 100644
--- a/assets/sass/_theme/sections/events.sass
+++ b/assets/sass/_theme/sections/events.sass
@@ -2,7 +2,7 @@
.hero
h1 span
display: block
- color: $color-text-alt
+ color: var(--color-text-alt)
.lead
@include h3
// Safe spacing if post is empty
@@ -12,6 +12,7 @@
@include media-breakpoint-up(desktop)
.document-content
min-height: 600px
+ // Add after element to avoid "min-height" to ignore the last block's margin-bottom
&::after
content: ''
display: block
@@ -26,7 +27,7 @@
text-decoration: none
@include media-breakpoint-down(desktop)
.events
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
.archive-link
text-align: left
@@ -34,18 +35,18 @@
@include list-reset
@include media-breakpoint-up(desktop)
font-size: $table-body-size-desktop
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
.event-date
text-transform: capitalize
ul
@include list-reset
> li
- padding-top: $spacing0
+ padding-top: $spacing-2
&:not(:last-child)
- padding-bottom: $spacing0
+ padding-bottom: $spacing-2
> span
@include meta
- color: $color-text-alt
+ color: var(--color-text-alt)
padding-left: 0
display: block
white-space: nowrap
@@ -55,9 +56,9 @@
padding-right: 0.3rem
.events-categories
display: flex
- gap: space(2)
+ gap: $spacing-1
a
- @include link($color-accent)
+ @include link(var(--color-accent))
.events-actions
align-items: start
display: flex
@@ -78,10 +79,10 @@
text-decoration: none
&-subtitle
@include h3
- color: $color-text-alt
+ color: var(--color-text-alt)
&-categories
@include meta
- margin-top: $spacing0
+ margin-top: $spacing-2
span + span
&::before
content: ', '
@@ -98,15 +99,15 @@
display: inline-flex
&::before
content: '|'
- margin-right: half($spacing0)
+ margin-right: $spacing-1
.events
&--list
.event
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
display: flex
flex-direction: column
- margin-bottom: $spacing1
- padding-bottom: $spacing1
+ margin-bottom: $spacing-3
+ padding-bottom: $spacing-3
position: relative
.event-title
@include h3
@@ -115,23 +116,23 @@
text-decoration: none
&-dates
@include h4
- margin-top: half($spacing0)
- margin-bottom: half($spacing1)
+ margin-top: $spacing-1
+ margin-bottom: $spacing-2
&-content
order: 2
@include media-breakpoint-down(desktop)
@include media-breakpoint-up(md)
flex-direction: row
- gap: $spacing1
+ gap: $spacing-3
.media
- width: col(4)
+ width: columns(4)
&-content
order: 1
- width: col(8)
+ width: columns(8)
@include media-breakpoint-down(md)
.media
max-width: 33%
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
&-content
order: 1
@include media-breakpoint-up(md)
@@ -139,25 +140,25 @@
grid-column: 10 / 13
@include media-breakpoint-up(desktop)
flex-direction: row
- gap: $grid-gutter
+ gap: var(--grid-gutter)
align-items: start
&-content
- width: col(10)
> hgroup, > .event-title
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
.media
order: 2
- width: col(2)
@include in-page-without-sidebar
+ &-content
+ width: columns(10)
&-dates
margin-top: 0
order: 0
grid-column: 1 / 5
> span
@include h3
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
&-time
- margin-top: $spacing0
+ margin-top: $spacing-2
@include meta
&-content
@include grid(10, desktop, 0)
@@ -169,13 +170,13 @@
grid-column: 0 / 5
grid-row: 1 / 4
.media
- grid-column: 11 / 13
+ width: columns(2)
@include in-page-with-sidebar
@include grid(8)
&-content
order: 1
grid-column: 6 span
- margin-top: half($spacing0)
+ margin-top: $spacing-1
&-time
display: inline
&::before
@@ -184,7 +185,7 @@
grid-column: 2 span
&--grid
- @include grid(2, md, $spacing2)
+ @include grid(2, md, $spacing-4)
.event
display: flex
flex-direction: column
@@ -194,14 +195,14 @@
@include stretched-link
&-dates
@include meta
- margin-top: $spacing0
+ margin-top: $spacing-2
&-content
.event-title, hgroup
@include h3
&-description
- margin-top: $spacing0
+ margin-top: $spacing-2
.media
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
order: -1
img
aspect-ratio: 1
@@ -210,7 +211,7 @@
@include media-breakpoint-down(md)
.event
+ .event
- margin-top: $spacing2
+ margin-top: $spacing-4
@include in-page-without-sidebar
@include grid(3, desktop)
@@ -219,24 +220,24 @@
display: flex
flex-direction: row
position: relative
- grid-gap: $grid-gutter
+ grid-gap: var(--grid-gutter)
+ .event
- margin-top: $grid-gutter
+ margin-top: var(--grid-gutter)
&-content
a
@include stretched-link
&-dates
@include meta
- margin-top: $spacing0
+ margin-top: $spacing-2
&-content
flex: 1
.event-title
@include h3
.more
@include icon("arrow-right", after)
- margin-top: $spacing1
+ margin-top: $spacing-3
&::after
- margin-left: half($spacing0)
+ margin-left: $spacing-1
.media
order: -1
img
@@ -245,10 +246,10 @@
width: 100%
@include media-breakpoint-up(desktop)
.media
- width: col(4, 8)
+ width: columns(4)
&-dates
@include h3
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
.event-title,
.event-subtitle,
hgroup
@@ -257,15 +258,21 @@
flex-direction: column
grid-gap: 0
.media
- margin-left: calc(-#{$grid-gutter-sm} /2)
- margin-right: calc(-#{$grid-gutter-sm} /2)
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
aspect-ratio: 1
img
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
@include in-page-without-sidebar
align-items: center
&-dates
@include h3
+ .event-title,
+ .event-subtitle,
+ hgroup
+ @include lead
+ .media
+ width: columns(6)
&:not(.event--with-image)
- width: col(5)
+ width: columns(5)
margin-left: offset(4)
diff --git a/assets/sass/_theme/sections/organizations.sass b/assets/sass/_theme/sections/organizations.sass
index 0254ddae6be16b2eb3dec191ec167507c36b7d03..cfdf77b8b406f17d481558b6c7e95ff886491d0c 100644
--- a/assets/sass/_theme/sections/organizations.sass
+++ b/assets/sass/_theme/sections/organizations.sass
@@ -1,5 +1,6 @@
.organization
- @include article
+ display: flex
+ flex-direction: column
position: relative
&-title
@include meta
@@ -8,9 +9,12 @@
text-decoration: none
display: block
.media
- background: $color-background-alt
- padding: $spacing1
- margin-bottom: half($spacing0)
+ @include handle-svg-fit
+ background: $organization-background-color
+ margin-bottom: $spacing-2
+ order: -1
+ overflow: hidden
+ padding: $spacing-3
picture
aspect-ratio: 1
display: block
@@ -38,32 +42,32 @@
@include grid(3, lg)
@include grid(3, xl)
@include media-breakpoint-down(desktop)
- grid-column-gap: $spacing1 !important
+ grid-column-gap: $spacing-3 !important
.organizations__section
.organizations
- margin-top: $spacing2
+ margin-top: $spacing-4
.organizations__page
.lead
font-family: $lead-sidebar-font-family
font-weight: $lead-sidebar-weight
line-height: $lead-sidebar-line-height
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
@include media-breakpoint-up(desktop)
font-size: $lead-sidebar-size-desktop
.document-content
- .logo
+ .organization-logo
figcaption
text-align: right
@include meta
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
picture
aspect-ratio: 1/1
- background: $color-background-alt
+ background: var(--color-background-alt)
display: block
- padding: $spacing2
- margin-bottom: half($spacing0)
+ padding: $spacing-4
+ margin-bottom: $spacing-1
width: auto
img
display: block
@@ -72,13 +76,13 @@
object-position: center
width: 100%
.blocks
- margin-top: $spacing3
+ margin-top: $spacing-5
.contacts-details
@include grid(2, md)
@include media-breakpoint-down(md)
.document-content
- .logo
- margin-top: $spacing3
+ .organization-logo
+ margin-top: $spacing-5
display: flex
justify-content: space-between
@include media-breakpoint-up(md)
@@ -86,8 +90,8 @@
> .container
display: flex
justify-content: space-between
- gap: $grid-gutter
+ gap: var(--grid-gutter)
[itemprop="articleBody"]
- width: col(8)
- .logo
- width: col(3)
+ width: columns(8)
+ .organization-logo
+ width: columns(3)
diff --git a/assets/sass/_theme/sections/pages.sass b/assets/sass/_theme/sections/pages.sass
index 05b8d65a1e459ea91615c7d60f7640ffb1ee8d8b..9d26b492e7326588da1f0dbebc2caf59097ca984 100644
--- a/assets/sass/_theme/sections/pages.sass
+++ b/assets/sass/_theme/sections/pages.sass
@@ -10,4 +10,4 @@
@include grid(3, desktop)
.page__children
- margin-top: $spacing3
+ margin-top: $spacing-5
diff --git a/assets/sass/_theme/sections/papers.sass b/assets/sass/_theme/sections/papers.sass
index 9cbed0822fb597044d65044c06b3127522c2a7bc..bc05573a56345b90390064b824745270ef7634a5 100644
--- a/assets/sass/_theme/sections/papers.sass
+++ b/assets/sass/_theme/sections/papers.sass
@@ -1,102 +1,107 @@
.paper
+ display: flex
+ gap: var(--grid-gutter)
+ flex-direction: column
a
- text-decoration-color: transparent
transition: color 0.3s ease
- > div
- &:first-of-type
- grid-column: 1 / 7
- &.paper-actions
- grid-column: 8 / 12
- align-items: start
- display: flex
- @include media-breakpoint-down(desktop)
- flex-wrap: wrap
- justify-content: space-between
- margin-top: $spacing1
+ @extend %underline-on-hover
h3
a:hover
- color: $color-accent
+ color: var(--color-accent)
.paper-kind
@include meta
text-transform: uppercase
- margin-right: $spacing1
+ margin-right: $spacing-3
.paper-volume
@include meta
text-transform: lowercase
a
- @include link($color-text)
+ @include link(var(--color-text))
text-transform: none
span
text-transform: uppercase
+.top + .papers
+ margin-top: $spacing-3
+
.papers
@include list-reset
- margin-block-start: half($spacing3)
+ margin-top: $spacing-5
li
+ li
- margin-top: $spacing2
+ margin-top: $spacing-4
@include media-breakpoint-up(desktop)
- margin-top: $spacing3
+ margin-top: $spacing-5
article
- @include media-breakpoint-up(desktop)
- @include grid
+ article
- margin-top: $spacing2
+ margin-top: $spacing-4
@include media-breakpoint-up(desktop)
- margin-top: $spacing3
+ margin-top: $spacing-5
+.papers__section
+ .paper-actions
+ @include media-breakpoint-up(lg)
+ flex-direction: row
+ > div:first-of-type
+ width: columns(7)
+ .paper-actions
+ width: columns(5)
+ button[data-open-modal]
+ width: columns(2)
+ figure
+ width: columns(3)
.papers__page
@include media-breakpoint-down(desktop)
.document-content
aside
order: 2
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
@include media-breakpoint-up(desktop)
.hero
.content
- > h1, > hgroup
+ .hero-text
width: auto
.paper-sidebar
> div
height: 100%
position: relative
aside
- padding-bottom: $spacing1
+ padding-bottom: $spacing-3
.toc-container
height: unset
@include sticky(-1px)
.media
- width: col(2, 4)
+ width: columns(2)
.document-content
min-height: 100vh
.content
- margin-bottom: $spacing4
+ margin-bottom: $spacing-6
section + section
- margin-top: $spacing2
+ margin-top: $spacing-4
@include media-breakpoint-up(desktop)
- margin-top: $spacing4
+ margin-top: $spacing-6
.squared-button
margin-bottom: 0
- margin-top: $spacing0
+ margin-top: $spacing-2
width: auto
h2
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
.paper-essentials
h2
@include meta
- margin-top: $spacing2
+ margin-top: $spacing-4
&:first-of-type
margin-top: 0
.paper-body
h2
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
.paper-authors
h2
@include meta
.authors
@include grid(2, desktop)
article
- margin-top: $spacing1
+ margin-top: $spacing-3
.name
a
@include h4
@@ -107,9 +112,9 @@
margin: 0
dt
@include meta
- margin-bottom: $spacing0
+ margin-bottom: $spacing-2
&:not(:first-of-type)
- margin-top: $spacing2
+ margin-top: $spacing-4
dd:first-of-type
a
display: flex
@@ -142,18 +147,31 @@
padding-left: 0
padding-right: offset(4)
+// Actions
+.paper-actions
+ display: flex
+ align-items: start
+ gap: var(--grid-gutter)
+ @include media-breakpoint-down(desktop)
+ flex-wrap: wrap
+ gap: $spacing-3
+ button.squared-button
+ @include icon-block(eye, before)
+ a.squared-button
+ @include icon-block(download, before)
+
.citations
&:not(:first-child)
- margin-top: $spacing3
+ margin-top: $spacing-5
> div
- margin-top: $spacing1
+ margin-top: $spacing-3
@include grid(1)
- @include grid(2, md, $spacing1)
+ @include grid(2, md, $spacing-3)
@include media-breakpoint-down(md)
- row-gap: $spacing1
+ row-gap: $spacing-3
.citation
a
display: block
p
@include meta
- margin-top: $spacing0
+ margin-top: $spacing-2
diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass
index 2548a808aefbc1b64dffb45156713f68325d6413..e974002ddd117c0e9d5e26178148a333df31a5e4 100644
--- a/assets/sass/_theme/sections/persons.sass
+++ b/assets/sass/_theme/sections/persons.sass
@@ -1,63 +1,24 @@
-.persons__page
- .top
- h2
- a
- @include icon(arrow-right, after, true)
- display: inline-flex
- margin-left: half($spacing0)
- transition: transform .3s ease
- &:hover::after
- transform: translateX($spacing0)
- // TODO : voir comment gérer les marges comme pour les blocs (pb footer)
- section
- padding-bottom: $grid-gutter
- ol.programs
- li
- justify-content: flex-start
- @include media-breakpoint-up(desktop)
- @include grid(2)
- @include icon(arrow-right, after, true)
- color: inherit
- position: absolute
- right: 0
- top: $spacing1
- transform: translateY(half($spacing0))
- @include media-breakpoint-up(desktop)
- transform: translateY(half($spacing1))
- a
- color: inherit
- @include stretched-link(before)
- @include media-breakpoint-down(desktop)
- margin-right: $spacing1
- p
- margin-top: unset
- &:nth-child(2)
- @include small
- &:hover
- color: $color-accent
-
.person
@include article
word-break: break-word
- gap: $spacing1
+ gap: $spacing-3
.avatar
align-self: start
flex-shrink: 0
order: -1
- min-width: $spacing3
+ min-width: $spacing-5
.name
@include h4
a
@include stretched-link
text-decoration: none
+ p
- margin-top: half($spacing0)
+ margin-top: $spacing-1
.description
@include small
-
@include media-breakpoint-down(lg)
flex-direction: row
- gap: $spacing1
+ gap: $spacing-3
.avatar
align-self: start
flex-shrink: 0
@@ -76,7 +37,6 @@
.avatar
width: 100%
-
section.persons,
div.persons
@include grid(1)
@@ -84,20 +44,18 @@ div.persons
@include grid(4, lg)
@include grid(6, xxl)
-
-
ol.persons--list
@include list-reset
> li
- border-bottom: 1px solid $color-border
- padding-bottom: $spacing1
- padding-top: $spacing1
+ border-bottom: 1px solid var(--color-border)
+ padding-bottom: $spacing-3
+ padding-top: $spacing-3
position: relative
transition: color 0.5s
@include icon(arrow, after)
margin-left: auto
&:hover
- color: $color-accent
+ color: var(--color-accent)
justify-self: end
a
@include stretched-link
@@ -110,21 +68,21 @@ ol.persons--list
align-items: baseline
display: flex
[itemprop="name"]
- width: col(5)
+ width: columns(5)
[itemprop="jobTitle"]
- width: col(6)
- margin-left: $grid-gutter
+ width: columns(6)
+ margin-left: var(--grid-gutter)
@include media-breakpoint-down(desktop)
&::after
position: absolute
right: 0
- top: calc(#{$spacing1} + 10px)
+ top: calc(#{$spacing-3} + 10px)
.avatar
// @include aspect-ratio(50, 'img')
background-color: $persons-avatar-background-color
border-radius: 50%
- // margin-bottom: $spacing2
+ // margin-bottom: $spacing-4
overflow: hidden
position: relative
// width: 100%
@@ -145,80 +103,114 @@ ol.persons--list
@include list-reset
li
@include media-breakpoint-down(desktop)
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
a
display: block
@include media-breakpoint-up(desktop)
display: inline-block
- margin-right: $spacing2
+ margin-right: $spacing-4
a
- @include link
- @include link-hovered-underline-only
+ @extend %underline-on-hover
@include meta
@include icon(arrow, after)
- margin-left: $spacing1
+ margin-left: $spacing-3
.persons__section
* + .persons
- margin-top: $spacing2
+ margin-top: $spacing-4
.persons:last-child
- padding-bottom: $spacing3
+ padding-bottom: $spacing-5
.persons__page
.hero
- @include media-breakpoint-down(desktop)
- padding-bottom: 0
- margin-bottom: $spacing4
- .avatar
- width: col(6)
- margin-top: $spacing1
- margin-left: auto
- transform: translateY(100px)
- margin-top: calc(#{$spacing1} - 100px)
- @include media-breakpoint-down(sm)
- margin-bottom: $spacing4
- .avatar
- transform: translateY(18vw)
- margin-top: calc(#{$spacing1} - 18vw)
- @include media-breakpoint-up(desktop)
- .content
- align-items: center
- display: flex
- justify-content: space-between
- margin-top: 0
- h1
- margin-bottom: 0
- width: col(8)
- .avatar
- margin-bottom: 0
- width: col(3)
+ &--with-image
+ .hero-text
+ margin-bottom: $spacing-3
+ figure
+ @extend .avatar
+ @include media-breakpoint-down(desktop)
+ .container
+ margin-bottom: calc(#{columns(2)} + #{$spacing-5})
+ figure
+ width: columns(4)
+ margin-left: auto
+ margin-bottom: calc(#{columns(2)} * -1)
+ @include media-breakpoint-down(md)
+ .container
+ margin-bottom: calc(#{columns(3)} + #{$spacing-5})
+ figure
+ width: columns(6)
+ margin-bottom: calc(#{columns(3)} * -1)
+ @include media-breakpoint-up(desktop)
+ .content
+ align-items: center
+ display: flex
+ justify-content: space-between
+ margin-top: 0
+ h1
+ margin-bottom: 0
+ width: columns(8)
+ figure
+ margin-bottom: 0
+ width: columns(3)
.roles
a
@include small
.blocks
- margin-top: $spacing3
+ margin-top: $spacing-5
.person-objects
+ margin-top: $spacing-5
> * + *
- margin-top: $spacing3
+ margin-top: $spacing-5
+ .top h2 a
+ @include icon(arrow-right, after, true)
+ display: inline-flex
+ margin-left: $spacing-1
+ transition: transform .3s ease
+ &:hover::after
+ transform: translateX($spacing-2)
.person-posts
article.post:last-child
margin-bottom: 0
+ section
+ padding-bottom: $spacing-5
+ ol.programs
+ li
+ justify-content: flex-start
+ @include media-breakpoint-up(desktop)
+ @include grid(2)
+ @include icon(arrow-right, after, true)
+ color: inherit
+ position: absolute
+ right: 0
+ top: 1.5em
+ a
+ color: inherit
+ @include stretched-link(before)
+ @include media-breakpoint-down(desktop)
+ margin-right: $spacing-3
+ p
+ margin-top: unset
+ &:nth-child(2)
+ @include small
+ &:hover
+ color: var(--color-accent)
@include media-breakpoint-down(lg)
.roles
- margin-top: $spacing2
+ margin-top: $spacing-4
@include media-breakpoint-up(lg)
.informations
@include grid
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
> div:first-of-type
grid-column: 1 / 9
.roles
grid-column: 9 / 13
text-align: right
.lead + div
- margin-top: $spacing2
+ margin-top: $spacing-4
.contacts-details ul
@include grid(2, md, 0)
li
margin-top: 0
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
diff --git a/assets/sass/_theme/sections/posts.sass b/assets/sass/_theme/sections/posts.sass
index f355c79af5cdb92d0fe489d8299a564425aee078..5c319a79ad3653fca4f326a81ee818a298629a33 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -1,25 +1,12 @@
.post
- @include article($post-media-background)
+ @include article
time
color: $post-time-color
display: inline-block
vertical-align: middle
- .post-categories
- @include meta
- margin-top: $spacing0
- margin-bottom: $spacing0
- position: relative
- display: flex
- flex-wrap: wrap
- gap: 0 $spacing0
- z-index: 2
- a
- @include link($color-accent)
- li
- margin: 0
.post-author
@include meta
- color: $color-text-alt
+ color: var(--color-text-alt)
.posts__section,
.authors__term,
@@ -27,22 +14,22 @@
.persons__page
.posts--list
article
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
display: flex
- margin-bottom: $spacing1
- padding-bottom: $spacing1
+ margin-bottom: $spacing-3
+ padding-bottom: $spacing-3
flex-direction: row
[itemprop=headline] + p
- margin-top: $spacing0
+ margin-top: $spacing-2
@include media-breakpoint-up(desktop)
@include grid
- margin-bottom: $spacing3
- padding-bottom: $spacing3
+ margin-bottom: $spacing-5
+ padding-bottom: $spacing-5
.post-content
grid-column: 4/13
@include media-breakpoint-down(desktop)
flex: 1
- margin-left: $spacing0
+ margin-left: $spacing-2
p:not(.title)
@include media-breakpoint-down(desktop)
display: none
@@ -66,15 +53,15 @@
.post-content
[itemprop=headline],
> p
- max-width: col(6, 9)
+ max-width: columns(6)
.posts--grid
@include grid(1)
@include grid(2, desktop)
@include grid($posts-grid-columns, xxl)
.post
- @include post-time-author-flex
+ @include author-and-time-side-to-side
.post-meta
- margin-top: $spacing0
+ margin-top: $spacing-2
.posts__page
.lead
@@ -82,64 +69,20 @@
// Safe spacing if post is empty
.document-content
min-height: 350px
+ // Add after element to avoid "min-height" to ignore the last block's margin-bottom
+ &::after
+ content: ''
+ display: block
+ height: 1px
&:not(.full-width)
.post-sidebar
@include sidebar
-.post-categories
- @include list-reset
- margin: 0
- li
- display: inline-block
- vertical-align: middle
- margin-left: space(2)
- &:last-child
- &::after
- content: none
-
.post-infos
- margin-bottom: 0
- @include meta
- @include list-reset
- font-size: $table-body-size
- @include media-breakpoint-up(desktop)
- font-size: $table-body-size-desktop
- > li
- @include meta
- display: flex
- gap: $spacing1
- justify-content: space-between
- padding-top: $spacing0
- padding-bottom: $spacing0
- border-color: $color-border
- &:not(:first-child)
- align-items: center
- border-top: 1px solid $color-border
- > span
- @include meta
- color: $color-text-alt
- padding-left: 0
- white-space: nowrap
- vertical-align: top
- > ul
- text-align: right
- flex: 1
- &.social-share
- align-items: center
- a
- @include link($color-accent)
- text-align: right
- .share
- display: block
- li
- display: inline-block
- a
- color: inherit
- li:last-child
- margin-right: -$spacing0
+ @include section__page-infos
.related
- margin-top: $spacing1
+ margin-top: $spacing-3
.posts
@include grid(2, desktop)
margin-bottom: 0
@@ -148,4 +91,4 @@
.authors__term
.blocks + .container
- margin-top: $spacing3
+ margin-top: $spacing-5
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 392ce211fd2e3be0f19a24b9b03ac8e0fc2f6136..d2895899dece67290a8aa77ae3c05244e2754557 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -13,7 +13,7 @@ ol.programs
margin-top: unset
white-space: nowrap
@include media-breakpoint-up(desktop)
- margin-left: $spacing1
+ margin-left: $spacing-3
.programs__section
.hero-program
@@ -21,86 +21,27 @@ ol.programs
justify-content: end
.container
position: relative
+
&:not(.full-width)
.document-content
.lead
font-family: $lead-font-family
+ font-size: var(--lead-size)
font-weight: $lead-weight
- line-height: $lead-line-height
- @include media-breakpoint-up(desktop)
- font-size: $lead-size-desktop
+ line-height: var(--lead-line-height)
ol.programs
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
li
line-height: 1
- .dropdown-share
- position: relative
- > button
- @include button-icon(social)
- &:after
- margin-right: $icon-social-margin-right
- color: $hero-color
- border-color: $color-border
- font-size: $program-share-font-size
- transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
- &:hover,
- &:active,
- &:focus
- background: $color-background
- color: $color-text
- // a11y
- &:active,
- &:focus
- box-shadow: inset 0 0 0 0.25rem rgba(white, .5)
- @include media-breakpoint-up(desktop)
- font-size: $program-share-font-size-desktop
- .dropdown-menu
- background: $hero-color
- border-radius: px2rem(4)
- bottom: 0
- padding: 0
- position: absolute
- top: 0
- width: 100%
- .share
- display: flex
- align-items: center
- height: 100%
- li
- margin: 0
- flex: 1 1
- text-align: center
- a
- display: block
- color: $hero-background-color
- .buttons
- @include meta
- button, > a
- display: flex
- align-items: center
- justify-content: space-between
- width: 100%
- border-radius: px2rem(4)
- a[download]
- @include button-icon(download)
- text-decoration: none
- color: $hero-background-color
- background: $hero-color
- border-color: $hero-color
- font-size: $program-share-font-size
- @include media-breakpoint-up(desktop)
- font-size: $program-share-font-size-desktop
-
- @include media-breakpoint-down(desktop)
- margin-top: $spacing1
.document-content
- @include media-breakpoint-up(desktop)
+ .program-summary
+ margin-bottom: $spacing-5
.lead
- padding-bottom: $spacing2
+ margin-bottom: $spacing-3
.content
- padding-bottom: $spacing2
+ padding-bottom: $spacing-4
section:not(.block) > * + *
margin-top: 1em
.blocks
@@ -108,10 +49,9 @@ ol.programs
margin-top: 0
@include h3
@include media-breakpoint-down(desktop)
- padding-top: $spacing3
- margin-left: half(-$grid-gutter-sm)
- margin-right: half(-$grid-gutter-sm)
-
+ padding-top: $spacing-5
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include media-breakpoint-up(desktop)
.container
padding-left: 0
@@ -125,15 +65,17 @@ ol.programs
.document-content
.content
> h2
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
section:not(:first-child):not(.block)
- margin-top: $spacing3
+ margin-top: $spacing-5
@include media-breakpoint-up(desktop)
.document-content
+ .program-summary
+ margin-bottom: $spacing-6
.content
@include grid(12, desktop)
position: relative
- padding-bottom: $spacing4
+ padding-bottom: $spacing-6
> *
grid-column: 5/13
> h2
@@ -146,7 +88,7 @@ ol.programs
grid-column: 1/5
margin-bottom: 0
section:not(:first-child):not(.block)
- margin-top: $spacing4
+ margin-top: $spacing-6
section:first-of-type
.content
border-top: none
@@ -156,12 +98,12 @@ ol.programs
font-size: unset
line-height: 160%
&:first-child
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
&:last-child
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
th
@include small
- color: $color-text-alt
+ color: var(--color-text-alt)
vertical-align: middle
td
text-align: right
@@ -175,11 +117,11 @@ ol.programs
.list-persons
@include list-reset
> li
- border-bottom: 1px solid $color-border
+ border-bottom: 1px solid var(--color-border)
justify-content: flex-start
position: relative
- padding-bottom: $spacing0
- padding-top: $spacing0
+ padding-bottom: $spacing-2
+ padding-top: $spacing-2
@include media-breakpoint-up(sm)
@include grid(2)
a
@@ -189,7 +131,7 @@ ol.programs
text-decoration: none
@include stretched-link(before)
@include media-breakpoint-down(desktop)
- margin-right: $spacing1
+ margin-right: $spacing-3
@include icon(arrow-right, after, true)
color: inherit
position: absolute
@@ -201,13 +143,13 @@ ol.programs
margin-top: unset
@include small
@include media-breakpoint-up(desktop)
- margin-right: $spacing1
+ margin-right: $spacing-3
@include media-breakpoint-down(sm)
display: block
&:hover
- color: $color-accent
+ color: var(--color-accent)
&:first-child
- border-top: 1px solid $color-border
+ border-top: 1px solid var(--color-border)
a
p
@include small
@@ -218,4 +160,4 @@ ol.programs
@include icon(arrow, after, true)
@include hover-translate-icon
@include media-breakpoint-down(desktop)
- margin-bottom: $spacing1
\ No newline at end of file
+ margin-bottom: $spacing-3
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/projects.sass b/assets/sass/_theme/sections/projects.sass
new file mode 100644
index 0000000000000000000000000000000000000000..fe4c656195c1c7179d25006eeafd0fbef31947ad
--- /dev/null
+++ b/assets/sass/_theme/sections/projects.sass
@@ -0,0 +1,44 @@
+.project
+ @include article(auto)
+
+.projects__section,
+.projects_categories__term
+ .projects
+ @include grid(2, md)
+
+.projects__page
+ .hero
+ .content
+ align-items: stretch
+ .hero-text
+ display: flex
+ flex-direction: column
+ gap: $spacing-3
+ .project-infos
+ --color-border: #{$project-infos-border-color}
+ --color-text: #{$project-infos-color-text}
+ --color-text-alt: #{$project-infos-color-text-alt}
+ --color-accent: #{$project-infos-color-accent}
+ @include media-breakpoint-up(sm)
+ .hero
+ .project-infos
+ width: columns(8)
+ @include media-breakpoint-up(md)
+ .hero
+ .project-infos
+ width: columns(6)
+ @include media-breakpoint-up(desktop)
+ .hero
+ .content
+ align-items: stretch
+ .hero-text
+ justify-content: space-between
+ gap: $spacing-5
+ width: columns(6)
+ .project-infos
+ width: columns(4)
+ figure
+ width: columns(6)
+
+.project-infos
+ @include section__page-infos
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/publications.sass b/assets/sass/_theme/sections/publications.sass
index 71d210d52e18688d94cb81f918afa0f5193dc1fc..ac9f2ba021257961e81dc46f1248047b602af979 100644
--- a/assets/sass/_theme/sections/publications.sass
+++ b/assets/sass/_theme/sections/publications.sass
@@ -13,46 +13,51 @@
display: block
.publication
- border-bottom: 1px solid $color-border
- padding-bottom: $spacing0
- padding-top: $spacing0
+ border-bottom: 1px solid var(--color-border)
+ padding-bottom: $spacing-2
+ padding-top: $spacing-2
position: relative
+ @include icon-block(arrow-right, before)
+ position: absolute
+ right: 0px
a
text-decoration: none
.publication-title
a
@include stretched-link(after)
&:hover
- color: $color-accent
- @include icon-block(arrow-right, before)
- position: absolute
- right: 0px
+ color: var(--color-accent)
.publication-meta
@include small
- color: $color-text-alt
- margin-top: half($spacing0)
+ color: var(--color-text-alt)
+ margin-top: $spacing-1
a
- color: $color-text-alt
+ color: var(--color-text-alt)
+ @include media-breakpoint-down(desktop)
+ .publication-meta
+ padding-right: $spacing-4
+ &::before
+ bottom: 0
.publications
- margin-top: $spacing3
+ margin-top: $spacing-5
.publications-list
@include list-reset
.publications__section
.publication
- padding-bottom: $spacing2
- padding-top: $spacing2
+ padding-bottom: $spacing-4
+ padding-top: $spacing-4
position: relative
p
- padding-right: $spacing2
+ padding-right: $spacing-4
@include media-breakpoint-down(desktop)
- padding-right: $spacing2
+ padding-right: $spacing-4
a + p
- margin-top: $spacing1
+ margin-top: $spacing-3
a::before
- margin-top: px2rem(-6)
+ margin-top: pxToRem(-6)
.publication-title
@include h4
.publication-authors
@@ -72,40 +77,40 @@
@include media-breakpoint-up(desktop)
grid-column: 1 / 9
.document-sidebar
- margin-bottom: $spacing3
+ margin-bottom: $spacing-5
@include media-breakpoint-up(desktop)
grid-column: 9 / 13
order: 2
[itemprop="author"]
+ *
- margin-top: $spacing1
+ margin-top: $spacing-3
.person
flex-direction: row
align-items: center
display: flex
- gap: $spacing1
+ gap: $spacing-3
.name
@include signature
.avatar
margin-bottom: 0
> * + *
- margin-top: $spacing3
+ margin-top: $spacing-5
.downloads
&:not(:first-child)
- margin-top: $spacing3
+ margin-top: $spacing-5
nav
- margin-top: $spacing1
+ margin-top: $spacing-3
@include grid(2, desktop)
@include grid(4, xxl)
@include media-breakpoint-up(xxl)
- grid-gap: $spacing0 $grid-gutter
+ grid-gap: $spacing-2 var(--grid-gutter)
@include media-breakpoint-down(xxl)
- grid-gap: $spacing0
+ grid-gap: $spacing-2
> a
width: 100%
display: block
@include media-breakpoint-down(desktop)
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
.block-siblings-navigation
.block-content
diff --git a/assets/sass/_theme/sections/sitemap.sass b/assets/sass/_theme/sections/sitemap.sass
index f5b664fc2686303266b54ccd0b4f087560b905b1..caee8deb1f948851248b80e9ebbec8b639bbfd91 100644
--- a/assets/sass/_theme/sections/sitemap.sass
+++ b/assets/sass/_theme/sections/sitemap.sass
@@ -1,3 +1,4 @@
+// C'est vraiment utilisé qqpart ça ?
.sitemap__section
.content
> div
@@ -10,4 +11,17 @@
@include media-breakpoint-up(desktop)
margin-bottom: 7.5rem
li
- margin-bottom: 1rem
\ No newline at end of file
+ margin-bottom: 1rem
+.block-sitemap
+ ul
+ list-style-type: none
+ li
+ position: relative
+ ul
+ margin-left: $spacing-3
+ li
+ a
+ @include icon(list-hyphen)
+ position: absolute
+ left: pxToRem(-24)
+ font-size: pxToRem(24)
diff --git a/assets/sass/_theme/sections/volumes.sass b/assets/sass/_theme/sections/volumes.sass
index 7aac22fbbff105b8a8197b167872cc18c12d693d..2b3d83aa8ccf3d7d7bd92c5824a65d5a6f058b0e 100644
--- a/assets/sass/_theme/sections/volumes.sass
+++ b/assets/sass/_theme/sections/volumes.sass
@@ -23,9 +23,9 @@
h2
@include meta
> div
- margin-bottom: $spacing1
+ margin-bottom: $spacing-3
@include media-breakpoint-up(desktop)
- margin-bottom: $spacing4
+ margin-bottom: $spacing-6
.document-aside
@include media-breakpoint-up(desktop)
grid-column: 9 / 12
@@ -35,20 +35,18 @@
dt
@include meta
&:not(:first-of-type)
- margin-top: $spacing2
+ margin-top: $spacing-4
.paper
- display: block
- @include media-breakpoint-down(desktop)
+ gap: $spacing-3
+ .paper-actions
+ > *
+ width: auto
+ @include media-breakpoint-down(xxl)
> div:first-of-type
.paper-volume
display: inline-flex
- margin-left: $spacing0
- @include media-breakpoint-up(desktop)
+ margin-left: $spacing-2
+ @include media-breakpoint-up(xxl)
> div:first-of-type
.paper-volume
- padding-left: $spacing1
- .paper-actions
- gap: $grid-gutter
- margin-top: $spacing0
- a, button
- width: unset
\ No newline at end of file
+ padding-left: $spacing-3
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/blocks.sass b/assets/sass/_theme/utils/blocks.sass
new file mode 100644
index 0000000000000000000000000000000000000000..7343e4ae3510aee699d508250f1e900ebd75c694
--- /dev/null
+++ b/assets/sass/_theme/utils/blocks.sass
@@ -0,0 +1,43 @@
+@mixin draggable-block
+ overflow: hidden
+ .draggable-container
+ &:hover
+ cursor: grab
+ &.is-grabbing
+ cursor: grabbing
+ .draggable-content
+ margin-left: calc(var(--grid-gutter-negative) / 2)
+ margin-right: calc(var(--grid-gutter-negative) / 2)
+ > ul,
+ > ol
+ display: flex
+ flex-flow: row nowrap
+ list-style: none
+ padding-left: 0
+ transition: margin 0.4s ease-in-out
+ width: 100%
+ .draggable-item
+ flex: none
+ scroll-snap-align: start
+ transition: 0.3s opacity
+ &.is-passed
+ opacity: 0.15
+ pointer-events: none
+ .actions-arrows
+ display: flex
+ margin-left: calc(var(--grid-gutter) / 2)
+ > button
+ @include button-reset
+ background: none
+ border: none
+ color: $block-timeline-horizontal-color
+ cursor: pointer
+ padding: 0
+ &:first-child
+ @include icon-block(arrow-previous, before)
+ margin-left: $icon-arrow-previous-margin-left
+ &:last-child
+ @include icon-block(arrow-next, before)
+ &:disabled
+ cursor: default
+ opacity: 0.3
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/colors.sass b/assets/sass/_theme/utils/colors.sass
new file mode 100644
index 0000000000000000000000000000000000000000..0c4d8aebadc48e79c8170a9bfb42b6860bd2288b
--- /dev/null
+++ b/assets/sass/_theme/utils/colors.sass
@@ -0,0 +1,9 @@
+// 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 and $percent > 0)
+ $percent: $alpha * 100%
+ @if ($percent == 0) // Permet d'éviter le bug de compilation en production qui renvoie "0" au lieu de "0%"
+ @return transparent
+ @else
+ @return color-mix(in srgb, $color $percent, transparent)
diff --git a/assets/sass/_theme/utils/fonts.sass b/assets/sass/_theme/utils/fonts.sass
new file mode 100644
index 0000000000000000000000000000000000000000..e6d6815e19878e41ddee6ea273bf9771da250378
--- /dev/null
+++ b/assets/sass/_theme/utils/fonts.sass
@@ -0,0 +1,23 @@
+// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
+@function str-replace($string, $search, $replace: "")
+ $index: str-index($string, $search)
+ @if $index
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ @return $string
+
+@mixin font-face($name, $path, $weight: 400, $style: normal, $exts: (eot woff2 woff ttf svg))
+ $src: null
+ $extmods: (eot:"?", svg:"#" + str-replace($name," ","_"))
+ $formats: (otf: "opentype", ttf: "truetype")
+
+ @each $ext in $exts
+ $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
+ $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
+ $src: append($src, url(quote("/assets/fonts/" + $path + "." + $extmod)) format(quote($format)), comma,)
+
+ @font-face
+ font-family: quote($name)
+ font-style: $style
+ font-weight: $weight
+ font-display: swap
+ src: $src
diff --git a/assets/sass/_theme/utils/grid.sass b/assets/sass/_theme/utils/grid.sass
new file mode 100644
index 0000000000000000000000000000000000000000..b7d5d2c1ab17f587f327af44ac30c40db72ce0b2
--- /dev/null
+++ b/assets/sass/_theme/utils/grid.sass
@@ -0,0 +1,39 @@
+@mixin container
+ margin-left: auto
+ margin-right: auto
+ padding-left: var(--grid-gutter)
+ padding-right: var(--grid-gutter)
+ width: var(--grid-width)
+ max-width: 100%
+
+@function columns($quantity)
+ $width: calc( (var(--column-width) * #{$quantity}) + var(--grid-gutter) * ( #{$quantity} - 1 ))
+ @return #{$width}
+
+@mixin grid($cols: 12, $breakpoint: false, $gap-y: var(--grid-gutter), $gap-x: var(--grid-gutter))
+ word-break: break-word
+ @if $breakpoint
+ @include media-breakpoint-up($breakpoint)
+ display: grid
+ grid-gap: $gap-y $gap-x
+ grid-template-columns: repeat($cols, 1fr)
+ @else
+ display: grid
+ grid-gap: $gap-y $gap-x
+ grid-template-columns: repeat($cols, 1fr)
+
+@mixin flexbox-grid($cols: 12, $gap-y: var(--grid-gutter), $gap-x: $gap-y)
+ display: flex
+ flex-wrap: wrap
+ gap: $gap-y $gap-x
+ > *
+ flex: 0 0 calc(#{100 / $cols}% - #{$gap-x} * #{($cols - 1) / $cols} )
+
+// Cette fonction retourne un nombre de colonne + une gouttière
+@function offset($quantity)
+ $width: calc( #{columns($quantity)} + var(--grid-gutter) )
+ @return #{$width}
+
+// Cette fonction calcule l'espace disponible entre la grille et le bord de l'écran
+@function grid-external-space
+ @return Max(var(--grid-gutter), calc((100vw - var(--grid-width)) / 2 + var(--grid-gutter)))
diff --git a/assets/sass/_theme/utils/icons.sass b/assets/sass/_theme/utils/icons.sass
new file mode 100644
index 0000000000000000000000000000000000000000..f453b6df2c8ef22f1938ec748d0eeb1b6d86588d
--- /dev/null
+++ b/assets/sass/_theme/utils/icons.sass
@@ -0,0 +1,48 @@
+
+@mixin hover-translate-icon($pseudo: after, $distance: 10)
+ &::#{$pseudo}
+ display: inline-block
+ transition: transform 0.55s $arrow-ease-transition
+ transform: translateX(0)
+ &:hover
+ &::#{$pseudo}
+ transform: translateX(#{pxToRem($distance)})
+
+@mixin icon($icon-name: '', $pseudo-element: before, $non-breaking: false)
+ &::#{$pseudo-element}
+ content: map-get($icons, $icon-name)
+ display: inline-block
+ font-family: 'Icon'
+ font-style: normal
+ font-variant: normal
+ font-weight: normal
+ line-height: 1
+ speak: never
+ text-transform: none
+ vertical-align: middle
+ @if $non-breaking
+ content: "Â #{map-get($icons, $icon-name)}"
+ display: inline
+ @content // TODO : important de documenter ça
+
+@mixin icon-block($icon-name: '', $pseudo-element: before, $non-breaking: false)
+ @include icon($icon-name, $pseudo-element, $non-breaking)
+ font-size: pxToRem(44)
+ display: inline
+ @content
+
+@mixin arrow-right-hover
+ position: relative
+ display: flex
+ justify-content: space-between
+ align-items: center
+ @include icon(arrow, after)
+ opacity: 0
+ transform: translateX(-20px)
+ transition: 0.55s $arrow-ease-transition
+ position: absolute
+ right: 0
+ &:hover
+ &:after
+ opacity: 1
+ transform: translateX(0)
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/links.sass b/assets/sass/_theme/utils/links.sass
new file mode 100644
index 0000000000000000000000000000000000000000..3059da0003ed7ab0e1f8bbe00b9cdd6bdf8d1c90
--- /dev/null
+++ b/assets/sass/_theme/utils/links.sass
@@ -0,0 +1,24 @@
+@mixin link($color: $link-color, $unhover_decorated: true)
+ color: $color
+ text-decoration-line: underline
+ text-decoration-thickness: $link-underline-thickness
+ text-underline-offset: $link-underline-offset
+ transition: $link-transition
+ @if $unhover_decorated
+ text-decoration-color: alphaColor($color, $link-unhover-decoration-color-alpha)
+ @else
+ text-decoration-color: transparent
+ &:hover
+ text-decoration-color: alphaColor($color, 1)
+ text-decoration-thickness: $link-underline-thickness
+
+@mixin stretched-link($pseudo-element: after)
+ &::#{$pseudo-element}
+ bottom: 0
+ content: ''
+ left: 0
+ position: absolute
+ right: 0
+ top: 0
+ z-index: $zindex-stretched-link
+
diff --git a/assets/sass/_theme/utils/media.sass b/assets/sass/_theme/utils/media.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8be361e9b59617051600a66be23c64fa98bae133
--- /dev/null
+++ b/assets/sass/_theme/utils/media.sass
@@ -0,0 +1,14 @@
+
+@mixin aspect-ratio($ratio, $selector: 'iframe', $background: false)
+ @if $background
+ aspect-ratio: #{$ratio}
+ background: $background
+ #{$selector}
+ aspect-ratio: #{$ratio}
+ display: block
+ width: 100%
+
+@mixin handle-svg-fit
+ picture.is-svg
+ img
+ object-fit: contain
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/normalize.sass b/assets/sass/_theme/utils/normalize.sass
new file mode 100644
index 0000000000000000000000000000000000000000..3594f4c40314f2883ddeb7e4534007dc9b0928cb
--- /dev/null
+++ b/assets/sass/_theme/utils/normalize.sass
@@ -0,0 +1,32 @@
+@mixin button-reset
+ appearance: none
+ background: transparent
+ border: none
+ border-radius: 0
+ cursor: pointer
+ user-select: none
+ &:active,
+ &:focus
+ 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
+
+@mixin list-reset
+ list-style: none
+ padding-left: 0
+ margin-bottom: 0
+ margin-top: 0
+
+@mixin inset($top: 0, $right: $top, $bottom: $top, $left: $top)
+ inset: $top $right $bottom $left
+ // polyfill for inset
+ @supports not (inset: $top)
+ bottom: $bottom
+ left: $left
+ right: $right
+ top: $top
+
+@mixin browser-under-safari-16
+ @media not all and (min-resolution:.001dpcm)
+ @supports (-webkit-appearance:none) and (display:flow-root)
+ @content
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/shame.sass b/assets/sass/_theme/utils/shame.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1be170d21d897d77612726d2666090c4d977098b
--- /dev/null
+++ b/assets/sass/_theme/utils/shame.sass
@@ -0,0 +1,190 @@
+
+@mixin visually-hidden
+ clip: rect(0,0,0,0) !important
+ border: 0 !important
+ height: 1px !important
+ margin: -1px !important
+ overflow: hidden !important
+ padding: 0 !important
+ position: absolute !important
+ white-space: nowrap !important
+ width: 1px !important
+
+@mixin author-and-time-side-to-side
+ .post-meta
+ display: flex
+ flex-wrap: wrap
+ .post-author p::before
+ content: ' • '
+
+// Utilisé pour .post, .project, .page, .person, .program, .volume
+@mixin article($aspect-ratio: $article-media-aspect-ratio)
+ position: relative
+ display: flex
+ flex-direction: column
+ .media
+ @include handle-svg-fit
+ margin-bottom: $spacing-3
+ order: -1
+ overflow: hidden
+ img
+ display: block
+ object-fit: cover
+ @if $aspect-ratio
+ aspect-ratio: $aspect-ratio
+ h2, h3, [itemprop=headline], [itemprop=name]
+ @include h3
+ a
+ @include stretched-link
+ display: block
+ text-decoration: none
+ p + time
+ margin-top: $spacing-2
+ .post-categories, .project-categories
+ @include list-reset
+ @include meta
+ margin-top: $spacing-2
+ margin-bottom: $spacing-2
+ position: relative
+ display: flex
+ flex-wrap: wrap
+ gap: 0 $spacing-2
+ z-index: 2
+ a
+ @include link(var(--color-accent))
+ li
+ margin: 0
+ time
+ @include meta
+ color: var(--color-text-alt)
+ display: block
+
+@mixin list-section
+ @include list-reset
+ > li
+ border-bottom: 1px solid var(--color-border)
+ padding-bottom: $spacing-3
+ padding-top: $spacing-3
+ position: relative
+ > .title
+ @include h2
+ transition: color 0.55s
+ @include media-breakpoint-down(desktop)
+ @include icon(arrow-right, after, true)
+ bottom: $spacing-2
+ position: absolute
+ right: 0
+ @include media-breakpoint-up(desktop)
+ @include arrow-right-hover
+ display: block
+ &::after
+ transform: translateX(0)
+ position: relative
+ &:hover
+ &::after
+ transform: translateX($spacing-2)
+ a
+ text-decoration: none
+ &:hover
+ color: var(--color-accent)
+
+ @include media-breakpoint-down(desktop)
+ a:nth-child(2)
+ margin-top: calc(#{$spacing-2} / 2)
+ a, p
+ display: block
+ @include media-breakpoint-up(desktop)
+ align-items: baseline
+ display: flex
+ justify-content: space-between
+
+@mixin text-underline
+ text-decoration-color: var(--color-border)
+ text-decoration-line: underline
+ text-decoration-thickness: 1px
+ text-underline-offset: 3px
+ text-decoration-line: underline
+
+
+@mixin top-flex
+ @include in-page-without-sidebar
+ align-items: baseline
+ display: flex
+ .block-title
+ width: columns(4)
+ &:not(.hidden) + .description
+ margin-left: var(--grid-gutter)
+ .description
+ margin-top: 0
+ width: columns(8)
+
+@mixin collapsed-figcaption
+ figcaption
+ @include meta
+ color: var(--color-text-alt)
+ position: absolute
+ display: block
+ left: 0
+ right: 0
+ text-align: right
+ z-index: 10
+ &::before
+ @include meta
+ content: '©'
+ position: absolute
+ right: 0
+ top: 0
+ background: $hero-background-color
+ text-align: center
+ padding: $spacing-1
+ display: block
+ .credit-content
+ @include meta
+ background: $hero-background-color
+ display: none
+ padding: $spacing-1
+ padding-right: $spacing-3
+ a
+ color: inherit
+ text-decoration-color: inherit
+ &:focus
+ .credit-content
+ display: block
+ @include media-breakpoint-up(desktop)
+ &:before
+ padding-right: 0
+ @include media-breakpoint-down(desktop)
+ position: relative
+ background: var(--color-background)
+ &::before
+ background: transparent
+ .credit-content
+ display: block
+ background: transparent
+ position: relative
+ &:hover
+ figcaption .credit-content
+ display: block
+
+@mixin dropdown-i18n
+ position: relative
+ .dropdown-menu
+ margin-top: $header-nav-padding-y
+ right: 0
+ @include media-breakpoint-up(desktop)
+ padding-left: $spacing-3
+ padding-bottom: $spacing-2
+ padding-top: $spacing-2
+ padding-right: $spacing-3
+ li a
+ padding-bottom: $spacing-1
+ padding-top: $spacing-1
+ display: block
+ &.is-checked
+ display: flex
+ justify-content: space-between
+ align-items: center
+ gap: $spacing-4
+ text-decoration: none !important
+ @include icon(caret, after)
+ transform: rotate(-14deg) skewX(-30deg)
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/sidebar.sass b/assets/sass/_theme/utils/sidebar.sass
new file mode 100644
index 0000000000000000000000000000000000000000..f82412c80a332579506a57dbbbb95ba1930a1ac4
--- /dev/null
+++ b/assets/sass/_theme/utils/sidebar.sass
@@ -0,0 +1,116 @@
+@mixin in-page-with-sidebar
+ @include media-breakpoint-up(desktop)
+ body:not(.full-width) &
+ @content
+
+@mixin in-page-without-sidebar
+ @include media-breakpoint-up(desktop)
+ main > .blocks &,
+ body.full-width &,
+ @content
+
+// Use this mixin to override with-aside or without-aside rules
+@mixin in-page-with-or-without-sidebar
+ @include media-breakpoint-up(desktop)
+ body:not(.full-width) &,
+ main > .blocks &,
+ body.full-width &,
+ @content
+
+// Aliases
+@mixin full-page
+ @include in-page-without-sidebar
+ @content
+
+@mixin not-full-page
+ @include in-page-with-sidebar
+ @content
+
+// Section Program
+@mixin in-page-program
+ .programs__section &
+ @content
+
+@mixin sticky($offset-y: 0)
+ position: sticky
+ top: $offset-y
+ @if $header-sticky-enabled
+ transition: top $header-sticky-transition
+ html:not(.is-scrolling-down) &
+ top: calc(var(--header-height) + #{$offset-y})
+
+@mixin sidebar($side: start)
+ @include media-breakpoint-down(desktop)
+ padding: 0 var(--grid-gutter)
+ margin-bottom: $spacing-5
+ @include media-breakpoint-up(desktop)
+ @if $side == start
+ margin-left: grid-external-space()
+ left: 0
+ @else
+ margin-right: grid-external-space()
+ right: 0
+ margin-top: 0
+ top: 0
+ height: 100%
+ position: absolute
+ width: columns(4)
+ & > div
+ @include sticky($spacing-3)
+ .toc-container
+ border-top: 1px solid var(--color-border)
+ padding-top: $spacing-3
+ position: static
+ margin-left: 0
+
+// Utilisé dans .post-infos, et project-infos
+@mixin section__page-infos
+ @include meta
+ @include list-reset
+ font-size: $table-body-size
+ margin-bottom: 0
+ @include media-breakpoint-up(desktop)
+ font-size: $table-body-size-desktop
+ > li
+ @include meta
+ display: flex
+ gap: $spacing-3
+ justify-content: space-between
+ padding-top: $spacing-2
+ padding-bottom: $spacing-2
+ border-color: var(--color-border)
+ &:not(:first-child)
+ align-items: center
+ border-top: 1px solid var(--color-border)
+ > span
+ @include meta
+ color: var(--color-text-alt)
+ padding-left: 0
+ white-space: nowrap
+ vertical-align: top
+ > ul
+ text-align: right
+ flex: 1
+ &.social-share
+ align-items: center
+ a
+ @include link(var(--color-accent))
+ text-align: right
+ .terms
+ @include list-reset
+ margin: 0
+ li
+ display: inline-block
+ vertical-align: middle
+ margin-left: $spacing-1
+ &:last-child
+ &::after
+ content: none
+ .share
+ display: block
+ li
+ display: inline-block
+ a
+ color: inherit
+ li:last-child
+ margin-right: -$spacing-2
\ No newline at end of file
diff --git a/assets/sass/_theme/utils/sizes.sass b/assets/sass/_theme/utils/sizes.sass
new file mode 100644
index 0000000000000000000000000000000000000000..def00899057379d30a738c30c68fc771330b2138
--- /dev/null
+++ b/assets/sass/_theme/utils/sizes.sass
@@ -0,0 +1,7 @@
+$space-unit: 4 !default
+@function space($spaces: 1)
+ @return #{$spaces * $space-unit / 16}rem
+
+@function pxToRem($size)
+ $remSize: $size / 16
+ @return #{$remSize}rem
diff --git a/bin/osuny.js b/bin/osuny.js
index ae7ed8de293f0d9b3f6ca537e5afee5fef6fac59..41860abfd2bb350e3730b631362abc7985bf6b4d 100644
--- a/bin/osuny.js
+++ b/bin/osuny.js
@@ -20,22 +20,27 @@ console.log(`
const command = process.argv[2];
-let pagefindExclude = `
- .administrators__term,
- .authors__term,
- .categories__taxonomy, .categories__term,
- .posts_categories__taxonomy, .posts_categories__term,
- .events_categories__taxonomy, .events_categories__term,
- .diplomas__taxonomy, .block-diplomas,
- .events__section, .block-agenda,
- .organizations__section, .block-organizations,
- .pages__section, .block-pages,
- .persons__section, .block-persons,
- .posts__section, .block-posts, .post-sidebar,
- .programs__section, .block-programs,
- .researchers__term,
- .teachers__term
- `;
+let pagefindExclude = '';
+// Categories: No list of categories
+pagefindExclude += '.categories__taxonomy, .categories__term, ';
+pagefindExclude += '.posts_categories__taxonomy, .posts_categories__term, ';
+pagefindExclude += '.events_categories__taxonomy, .events_categories__term, ';
+// Diplomas: No list of diplomas or block diplomas
+pagefindExclude += '.diplomas__taxonomy, .block-diplomas, ';
+// Agenda events: No list of events or block events
+pagefindExclude += '.events__section, .block-agenda, ';
+// Organizations: No list of organizations or block organizations
+pagefindExclude += '.organizations__section, .block-organizations, ';
+// Pages: No block pages (there's no difference between list and page)
+pagefindExclude += '.block-pages, ';
+// Persons: no list or block
+pagefindExclude += '.persons__section, .block-persons, ';
+// No list of people's facets
+pagefindExclude += '.administrators__term, .authors__term, .researchers__term, .teachers__term,';
+// Posts: no list, block posts, or post sidebar
+pagefindExclude += '.posts__section, .block-posts, .post-sidebar, ';
+// Programs: no block
+pagefindExclude += '.block-programs';
function execute(string) {
console.log("OSUNY runs " + string);
@@ -54,7 +59,7 @@ if (command === "dev") {
if (command === "build") {
execute("yarn upgrade");
- execute("hugo");
+ execute("hugo --minify");
execute("npm_config_yes=true npx pagefind --site 'public' --exclude-selectors '" + pagefindExclude + "'");
}
diff --git a/config.yaml b/config.yaml
index 319c75be035609595d677a3bbb20e029096a877a..bb7e4ba5d4b336e5adfb5b3b394f2570860b0b4e 100644
--- a/config.yaml
+++ b/config.yaml
@@ -1,17 +1,24 @@
params:
- debug: false
+ debug:
+ active: false
+ productionUrl: ""
keycdn: https://osuny-1b4da.kxcdn.com
- cookie_banner:
- enable: false
- blank: true
- page: https://gdpr.eu/cookies/
plausible: false
seo:
title:
separator: "|"
+
+ # DESIGN SYSTEM
logo:
header: "/assets/images/logo.svg"
footer: "/assets/images/logo.svg"
+ # Handle logo in darkmode with this configuration
+ # 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
@@ -28,6 +35,8 @@ params:
home:
toc:
disabled: true
+
+ # SECTIONS
events:
default_image: false
date_format: ":date_long"
@@ -46,6 +55,7 @@ params:
default_image: false
index:
truncate_description: 200 # Set to 0 to disable truncate
+ layout: grid # grid | list
papers:
default_image: false
sidebar:
@@ -75,9 +85,29 @@ params:
email: false
telegram: false
whatsapp: false
+ projects:
+ default_image: false
+ date_format: "2006"
+ index:
+ show_categories: true
+ show_description: true
+ show_year: false
+ truncate_description: 200 # Set to 0 to disable truncate
+ layout: list # grid | list
+ share_links:
+ facebook: true
+ twitter: true
+ linkedin: true
+ email: false
+ telegram: false
+ whatsapp: false
programs:
related_posts:
quantity: 4
+ volumes:
+ default_image: false
+
+ # BLOCKS
blocks:
gallery:
splide:
@@ -105,7 +135,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
blocks:
call_to_action:
mobile: 375
@@ -118,7 +148,11 @@ params:
features:
mobile: 350
tablet: 400
- desktop: 900
+ desktop: 750
+ key_figures:
+ mobile: 100
+ tablet: 100
+ desktop: 150
image:
mobile: 480x850
tablet: 768x1360
@@ -161,21 +195,25 @@ params:
mobile: 170
tablet: 350
desktop: 415
+ programs:
+ mobile: 400
+ tablet: 800
+ desktop: 600
sections:
categories:
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
@@ -184,25 +222,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
@@ -215,7 +253,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 350
tablet: 990
@@ -224,12 +262,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
@@ -242,34 +280,47 @@ 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
- publications:
+ desktop: 600
+ projects:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
+ hero_single:
+ mobile: 400
+ tablet: 800
+ desktop: 750
+ item:
+ mobile: 350
+ tablet: 450
+ desktop: 600
programs:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
image:
mobile: 351x168
tablet: 456x219
desktop: 856x410
+ publications:
+ hero:
+ mobile: 400
+ tablet: 800
+ desktop: 750
volumes:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 327x388
tablet: 208x247
diff --git a/i18n/en.yml b/i18n/en.yml
index 6fd7068d1bc737b29117fa46a7e05f8ef87a8fc7..9a27727062e85d747cdee9e6f4fa58d307742660 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -4,7 +4,9 @@ blocks:
categories:
title: Catégories
items:
- count: "{{ .Count }} articles"
+ count:
+ one: "1 article"
+ other: "{{ .Count }} articles"
chapter:
title: Chapter
contact:
@@ -52,6 +54,7 @@ blocks:
play: Play video
categories:
no_post: No post in this category
+ no_project: No project in this category
see_more:
one: See the post
other: See the {{ .Count }} posts
@@ -128,7 +131,7 @@ commons:
read: Read
read_online: Read online
share: Share
- toc: Table of content
+ toc: Table of contents
"yes": "Yes"
units:
GB: GB
@@ -141,12 +144,6 @@ commons:
bytes: bytes
extensions:
PDF: Adobe Portable Document Format
-cookie_banner:
- accept: Accept
- more: Read more
- refuse: Refuse
- text: This site uses cookies to improve the browsing experience and provide additional functionality.
- title: Cookie banner
diplomas:
type: Type de diplôme
events:
@@ -226,7 +223,7 @@ posts:
next: Next article
next_aria: Next article “{{ .Title }}â€
previous: Previous article
- previous_aria: revious article “{{ .Title }}â€
+ previous_aria: Previous article “{{ .Title }}â€
reading_time: Reading time
see_all: See all posts
see_all_in_program: See all program's news
@@ -234,6 +231,24 @@ posts:
share: Please, share
share_aria: Share on “{{ .Title }}†- extern link
title: News
+projects:
+ author: Author
+ category:
+ one: Category
+ other: Categories
+ informations: Informations
+ next: Next project
+ next_aria: Next project “{{ .Title }}â€
+ previous: Previous project
+ previous_aria: Previous project “{{ .Title }}â€
+ reading_time: Reading time
+ see_all: See all posts
+ see_all_in_program: See all program's projects
+ see_all_in_category: See all projects in “{{ .Title }}â€
+ share: Please, share
+ share_aria: Share on “{{ .Title }}†- extern link
+ title: Projects
+ year: Year
programs:
accessibility: Accessibility
administrative_information: Administrative information
@@ -278,6 +293,8 @@ publications:
citations: Citations
stats:
label: publications
+sitemap:
+ pages: Arborescence
volumes:
abstract: Abstract
paper:
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 4b47c0b3a37658a4c8d50b18586a632b26360f62..17d6c2e5abcca6e05de207b9f2f9f4e02f04edec 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -54,6 +54,7 @@ blocks:
play: Lancer la vidéo
categories:
no_post: Aucun article dans cette catégorie
+ no_project: Aucun projet dans cette catégorie
see_more:
one: Voir l'article
other: Voir les {{ .Count }} articles
@@ -143,12 +144,6 @@ commons:
bytes: octets
extentions:
PDF: Adobe Portable Document Format
-cookie_banner:
- accept: Accepter
- more: En savoir plus
- refuse: Refuser
- text: Ce site utilise des cookies pour améliorer l’expérience de navigation et fournir des fonctionnalités supplémentaires.
- title: Bandeau cookie
diplomas:
type: Type de diplôme
events:
@@ -237,6 +232,24 @@ posts:
share: Partager sur
share_aria: Partager sur “{{ .Title }}†- lien externe
title: Actualités
+projects:
+ author: Auteur·rice
+ category:
+ one: Catégorie
+ other: Catégories
+ informations: Informations
+ next: Projet suivant
+ next_aria: Projet suivant “{{ .Title }}â€
+ previous: Projet précédent
+ previous_aria: Projet précédent “{{ .Title }}â€
+ reading_time: Temps de lecture
+ see_all: Voir toutes les projets
+ see_all_in_program: Voir toutes les projets de la formation
+ see_all_in_category: Voir toutes les projets “{{ .Title }}â€
+ share: Partager sur
+ share_aria: Partager sur “{{ .Title }}†- lien externe
+ title: Projets
+ year: Année
programs:
accessibility: Accessibilité
administrative_information: Informations administratives
@@ -249,6 +262,10 @@ programs:
prerequisites: Prérequis
presentation: En bref
pricing: Tarifs
+ pricing_initial: Coûts de la formation initiale
+ pricing_continuing: Coûts de la formation continue
+ pricing_apprenticeship: Coûts de l'apprentissage
+ website: Visiter le site web
registration: Modalités et délais d’accès
roles: Organisation
teachers: Enseignants·es
@@ -281,6 +298,8 @@ publications:
citations: Citations
stats:
label: publications
+sitemap:
+ pages: Arborescence
volumes:
abstract: Résumé
paper:
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8eb282a99f0f0ac2d2a2c009d7d82ec3b02f6f6c..2c3c7c85349a60d1da23c04d28a1c390dd0ab8e1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -27,11 +27,10 @@
{{- partial "hooks/before-main-end" . -}}
</main>
{{- partial "footer/footer.html" . -}}
- {{- partial "footer/cookie-banner.html" . -}}
{{- partial "footer/plausible.html" . -}}
{{- partial "footer/js.html" . -}}
{{- partial "footer/script.html" . -}}
- {{- if or (not hugo.IsProduction) site.Params.debug -}}
+ {{- if or (not hugo.IsProduction) site.Params.debug.active -}}
{{- partial "footer/debug.html" . -}}
{{- end -}}
</body>
diff --git a/layouts/events/single.html b/layouts/events/single.html
index f1c4debe5ba46368453b5b81f8d8c7e0c242af38..ce11f636202c46779b48340edc07546781baa3e5 100644
--- a/layouts/events/single.html
+++ b/layouts/events/single.html
@@ -4,8 +4,7 @@
<div class="document-content" itemscope itemtype="https://schema.org/Event">
<meta itemprop="name" content="{{ partial "PrepareHTML" .Title }}">
<meta itemprop="url" content="{{ .Permalink }}">
- {{ with .Params.summary }}<meta itemprop="abstract" content="{{ . | safeHTML }}">{{ end }}
- {{ with .Summary }}<meta itemprop="description" content="{{ . | safeHTML }}">{{ end }}
+ {{ with .Params.summary }}<meta itemprop="description" content="{{ . | safeHTML }}">{{ end }}
{{ partial "events/sidebar.html" . }}
diff --git a/layouts/pages/sitemap.html b/layouts/pages/sitemap.html
index a2ad3c7397483f8f2cdca3b257470e0aac0fb793..4ea6d60c8e476efa7389571a2fb266e28d5dbcce 100644
--- a/layouts/pages/sitemap.html
+++ b/layouts/pages/sitemap.html
@@ -21,12 +21,32 @@
{{ partial "contents/list.html" . }}
+ <div class="block block-sitemap" id="pages">
+ <div class="container">
+ <div class="block-content">
+ <h2>{{ i18n "sitemap.pages" }}</h2>
+ <ul>
+ {{ range (where .Site.Pages "Type" "pages") }}
+ {{ if eq .Parent.Path "/pages" }}
+ <li>
+ <a href="{{ .Permalink }}">{{ safeHTML .Title }}</a>
+ {{ if .Pages }}
+ {{ partial "pages/sitemap_recursive_pages" .}}
+ {{ end }}
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+ </div>
+ </div>
+ </div>
+
{{ range .Site.Sections }}
- {{ if ne .Type "sitemap" }}
+ {{ if and (ne .Type "sitemap") (ne .Type "pages") }}
{{ $permalink := .Permalink }}
<div class="block block-sitemap" id="{{ .Type }}">
<div class="container">
- <div class="block-content">
+ <div class="block-content">
<h2>
<a href="{{ $permalink }}">{{ safeHTML .Title }}</a>
</h2>
@@ -42,5 +62,6 @@
</div>
{{ end }}
{{ end }}
+
</div>
{{ end }}
diff --git a/layouts/partials/GetPaginateTitle b/layouts/partials/GetPaginateTitle
index abcc7c46b668c438479cde93c50975611734d203..d5d08365b8b64277e2eede0375b5d9a9541be5ae 100644
--- a/layouts/partials/GetPaginateTitle
+++ b/layouts/partials/GetPaginateTitle
@@ -2,7 +2,7 @@
{{ $seoTitleSeparator := .separator}}
{{ $page := i18n "commons.pagination.title" }}
-{{if not .context.IsHome }}
+{{if and (not .context.IsHome) (eq .kind "page") }}
{{ with .context.Paginator }}
{{ if or .HasPrev .HasNext }}
{{ $currentPageNumber := .PageNumber}}
diff --git a/layouts/partials/PrepareText b/layouts/partials/PrepareText
new file mode 100644
index 0000000000000000000000000000000000000000..8dcdc9c0eb60d946ccc88666269397b90fbc54ce
--- /dev/null
+++ b/layouts/partials/PrepareText
@@ -0,0 +1 @@
+{{ return safeHTML . }}
diff --git a/layouts/partials/blocks/templates/gallery/carousel.html b/layouts/partials/blocks/templates/gallery/carousel.html
index b1b5a396b11049866370b520d64b9a00ce9061f5..0c472729dce6f6e60cab08147a476887d3266fba 100644
--- a/layouts/partials/blocks/templates/gallery/carousel.html
+++ b/layouts/partials/blocks/templates/gallery/carousel.html
@@ -4,7 +4,7 @@
{{ end }}
{{- if $is_carousel }}
-<div class="splide" role="group" data-splide="{{ site.Params.blocks.gallery.splide | encoding.Jsonify }}">
+<div class="splide" data-splide="{{ site.Params.blocks.gallery.splide | encoding.Jsonify }}">
<div class="splide__track">
<div class="splide__list">
{{ end -}}
@@ -14,21 +14,25 @@
{{- $image := partial "GetMedia" .file -}}
{{- if $image -}}
<figure {{ if $is_carousel }} class="splide__slide"{{ end }}>
+ {{ partial "commons/image.html"
+ (dict
+ "image" .id
+ "alt" .alt
+ "sizes" site.Params.image_sizes.blocks.gallery.carousel
+ )}}
{{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
+ {{ $lightbox_text := false }}
+ {{ if and .text .credit }}
+ {{ $lightbox_text = delimit (slice .text .credit) " / " }}
+ {{ else }}
+ {{ $lightbox_text = or .text .credit }}
+ {{ end }}
<a class="glightbox"
role="button"
- data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
+ data-glightbox="type: image;{{ with $lightbox_text }}description: {{ partial "PrepareHTML" . }}{{ end }}"
href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
title="{{- i18n "commons.lightbox.link.title" -}}"
aria-label="{{- i18n "commons.lightbox.link.title" -}}">
- {{ end }}
- {{ partial "commons/image.html"
- (dict
- "image" .id
- "alt" .alt
- "sizes" site.Params.image_sizes.blocks.gallery.carousel
- )}}
- {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
</a>
{{ end }}
{{ if or .text .credit }}
diff --git a/layouts/partials/blocks/templates/gallery/grid.html b/layouts/partials/blocks/templates/gallery/grid.html
index 8ffcd8ba278fc2b6b0c43003af0eb6515f1b010f..dc777bd3d947eeaa34ccdce1c58bca0fbe77e800 100644
--- a/layouts/partials/blocks/templates/gallery/grid.html
+++ b/layouts/partials/blocks/templates/gallery/grid.html
@@ -4,33 +4,31 @@
{{- $has_text = true -}}
{{ end -}}
{{ end -}}
-<div class="gallery{{- if $has_text }} gallery--with-text {{ end -}}" role="group">
+<div class="gallery{{- if $has_text }} gallery--with-text {{ end -}}">
{{ range .images }}
{{ if .id }}
{{- $image := partial "GetMedia" .id -}}
{{- if $image -}}
<figure>
+ {{ partial "commons/image.html"
+ (dict
+ "image" .file
+ "alt" .alt
+ "sizes" site.Params.image_sizes.blocks.gallery.grid
+ )}}
{{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
{{ $lightbox_text := false }}
{{ if and .text .credit }}
- {{ $lightbox_text = delimit (slice .text .credit) " / " }}
- {{ else }}
+ {{ $lightbox_text = delimit (slice .text .credit) " | " }}
+ {{ else if or .text .credit }}
{{ $lightbox_text = or .text .credit }}
{{ end }}
<a class="glightbox"
role="button"
- data-glightbox="type: image;{{ if $lightbox_text }}description: {{ partial "PrepareHTML" $lightbox_text }}{{ end }}"
+ data-glightbox="type: image; {{ with $lightbox_text }}description: {{ . | safeHTML }}{{ end }}"
href="{{ partial "GetLightboxUrl" (dict "id" .id) }}"
title="{{- i18n "commons.lightbox.link.title" -}}"
aria-label="{{- i18n "commons.lightbox.link.title" -}}">
- {{ end }}
- {{ partial "commons/image.html"
- (dict
- "image" .file
- "alt" .alt
- "sizes" site.Params.image_sizes.blocks.gallery.grid
- )}}
- {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
</a>
{{ end }}
{{ with .text }}
diff --git a/layouts/partials/blocks/templates/key_figures.html b/layouts/partials/blocks/templates/key_figures.html
index 2451c75b2cc4a6077d1f24b728eed6baa95957d9..33470c53bff1bb36e6cd64f1a2d0543851f75fb6 100644
--- a/layouts/partials/blocks/templates/key_figures.html
+++ b/layouts/partials/blocks/templates/key_figures.html
@@ -21,7 +21,16 @@
{{- range .figures }}
<li>
<dl>
- <dt><strong>{{ .number }}</strong>{{ partial "PrepareHTML" .unit }}</dt>
+ <dt>
+ {{ with .image }}
+ {{ partial "commons/image.html"
+ (dict
+ "image" .
+ "sizes" site.Params.image_sizes.blocks.key_figures
+ )}}
+ {{ end }}
+ <strong>{{ .number }}</strong>{{ partial "PrepareHTML" .unit }}
+ </dt>
<dd>{{ partial "PrepareHTML" .description }}</dd>
</dl>
</li>
diff --git a/layouts/partials/blocks/templates/pages/list.html b/layouts/partials/blocks/templates/pages/list.html
index 0314906c6715a009eeeb5ec398ccc1e117bec5c7..78de5201cf12bb1fd055270cbbb8cd539b678f01 100644
--- a/layouts/partials/blocks/templates/pages/list.html
+++ b/layouts/partials/blocks/templates/pages/list.html
@@ -7,7 +7,15 @@
)}}
<ul class="list {{ if and (not $show_descriptions) (not $show_images) }} title-only {{ end }}">
{{ range .pages }}
- {{ $page := site.GetPage .file }}
+ {{- $file := false -}}
+ {{/* Check if . is a map or page url, necessary when pages/list is called outside block context */}}
+ {{ if reflect.IsMap . }}
+ {{ $file = .file }}
+ {{ else }}
+ {{ $file = . }}
+ {{ end }}
+
+ {{ $page := site.GetPage $file }}
{{ with $page }}
<li>
{{ if or $show_descriptions $show_images }}
diff --git a/layouts/partials/blocks/templates/posts/carousel.html b/layouts/partials/blocks/templates/posts/carousel.html
new file mode 100644
index 0000000000000000000000000000000000000000..df63993734923de3d7540d0fe99b159564eb0ca0
--- /dev/null
+++ b/layouts/partials/blocks/templates/posts/carousel.html
@@ -0,0 +1,24 @@
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading := printf "h%d" $heading_level }}
+
+<div class="carousel draggable-container">
+ <div class="carousel-posts draggable-content">
+ <ul class="posts">
+ {{ range $post := .posts -}}
+ {{ with site.GetPage (printf "/posts/%s" $post) }}
+ <li class="draggable-item">
+ {{ partial "posts/post.html" (dict
+ "post" .
+ "heading" $heading) }}
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+ {{ if (gt (len .posts) 0) }}
+ <div class="actions-arrows">
+ <button class="previous" disabled title="{{ i18n "blocks.timeline.previous"}}"></button>
+ <button class="next" title="{{ i18n "blocks.timeline.next"}}"></button>
+ </div>
+ {{ end }}
+ </div>
+</div>
diff --git a/layouts/partials/blocks/templates/posts/large.html b/layouts/partials/blocks/templates/posts/large.html
index c76b4099268d0bcf105844a2e217d8e847e8ef25..c434aa6606cf8706eff3be0506158ea2354b1bcd 100644
--- a/layouts/partials/blocks/templates/posts/large.html
+++ b/layouts/partials/blocks/templates/posts/large.html
@@ -2,7 +2,7 @@
{{ $heading_level := .heading_level | default 3 }}
{{ $heading_tag := partial "GetHeadingTag" (dict
"level" $heading_level
- "attributes" "class='post-title'"
+ "attributes" "class='post-title' itemprop='headline'"
)}}
{{ $index := .index}}
diff --git a/layouts/partials/blocks/templates/programs.html b/layouts/partials/blocks/templates/programs.html
index 7170738aedbe15daf0a14c1e71a1d7db52748f09..f534588412f9878c007db95c1f86e972a1713d02 100644
--- a/layouts/partials/blocks/templates/programs.html
+++ b/layouts/partials/blocks/templates/programs.html
@@ -1,5 +1,10 @@
{{- $block := .block -}}
{{- $block_class := partial "GetBlockClass" .block -}}
+{{ $heading := .heading | default "h3" }}
+{{ $heading_tag := (dict
+ "open" ((printf "<%s itemprop='name'>" $heading) | safeHTML)
+ "close" ((printf "</%s>" $heading) | safeHTML)
+ ) }}
{{- with .block.data -}}
<div class="{{ $block_class }}">
@@ -10,18 +15,57 @@
"heading_level" $block.ranks.self
)}}
- <ol class="programs">
- {{- range .programs -}}
- <li>
+ {{- if eq $block.data.layout "grid" -}}
+
+ <div class="programs-grid">
+ {{- range .programs -}}
{{ $program := site.GetPage (printf "/programs%s" .path) }}
- {{- $title := partial "PrepareHTML" $program.Title -}}
- <a href="{{ $program.Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
- {{- $title -}}
- </a>
- </li>
- {{ end }}
- </ol>
+ {{ $title := $program.Title | safeHTML }}
+ <article itemscope itemtype="https://schema.org/EducationalOccupationalProgram">
+ <div class="program-content">
+ {{ $heading_tag.open }}
+ <a href="{{ $program.Permalink }}" itemtype="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
+ {{- $title -}}
+ </a>
+ {{ $heading_tag.close }}
+
+ {{ with $program.Params.summary | safeHTML}}
+ <p itemprop="abstract">{{ . }}</p>
+ {{ end }}
+
+ <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
+ </div>
+
+ {{- if $program.Params.image -}}
+ <div class="media">
+ {{- partial "commons/image.html"
+ (dict
+ "image" $program.Params.image
+ "sizes" site.Params.image_sizes.blocks.programs
+ ) -}}
+ </div>
+ {{- end -}}
+
+ </article>
+ {{ end }}
+ </div>
+
+ {{- else -}}
+
+ <ol class="programs">
+ {{- range .programs -}}
+ <li>
+ {{ $program := site.GetPage (printf "/programs%s" .path) }}
+ {{- $title := partial "PrepareHTML" $program.Title -}}
+ <a href="{{ $program.Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
+ {{- $title -}}
+ </a>
+ </li>
+ {{ end }}
+ </ol>
+
+ {{- end -}}
</div>
</div>
</div>
-{{- end -}}
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/projects.html b/layouts/partials/blocks/templates/projects.html
new file mode 100644
index 0000000000000000000000000000000000000000..126f09b24cd66b91c59e46592744c996b09f954e
--- /dev/null
+++ b/layouts/partials/blocks/templates/projects.html
@@ -0,0 +1,22 @@
+{{- $block := .block -}}
+{{- $block_title := .block.title -}}
+{{- $block_class := partial "GetBlockClass" .block -}}
+{{- $layout := "grid" -}}
+
+{{- 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
+ ) }}
+
+ {{- partial (printf "blocks/templates/projects/%s.html" $layout) (dict
+ "projects" .projects
+ "heading_level" $block.ranks.children
+ ) }}
+ </div>
+ </div>
+ </div>
+{{- end -}}
diff --git a/layouts/partials/blocks/templates/projects/grid.html b/layouts/partials/blocks/templates/projects/grid.html
new file mode 100644
index 0000000000000000000000000000000000000000..23ccf769a376c88b7d98e41a92aed02d1e75887f
--- /dev/null
+++ b/layouts/partials/blocks/templates/projects/grid.html
@@ -0,0 +1,12 @@
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading := printf "h%d" $heading_level }}
+<div class="grid">
+ {{ range $project := .projects -}}
+ {{ with site.GetPage .file }}
+ {{ partial "projects/project.html" (dict
+ "project" .
+ "heading" $heading
+ ) }}
+ {{ end }}
+ {{ end }}
+</div>
diff --git a/layouts/partials/blocks/templates/projects/list.html b/layouts/partials/blocks/templates/projects/list.html
new file mode 100644
index 0000000000000000000000000000000000000000..70667caeaa211375bdcdfc771353dbe57f2bbaf9
--- /dev/null
+++ b/layouts/partials/blocks/templates/projects/list.html
@@ -0,0 +1,12 @@
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading := printf "h%d" $heading_level }}
+<div class="list">
+ {{ range $project := .projects -}}
+ {{ with site.GetPage .file }}
+ {{ partial "projects/project.html" (dict
+ "project" .
+ "heading" $heading
+ ) }}
+ {{ end }}
+ {{ end }}
+</div>
diff --git a/layouts/partials/blocks/templates/timeline/horizontal.html b/layouts/partials/blocks/templates/timeline/horizontal.html
index d029f0918ec243f4c7170b778dfb1699ddee3e72..f01f6a60a07b1f03aa4858cce20e5d0dd9165299 100644
--- a/layouts/partials/blocks/templates/timeline/horizontal.html
+++ b/layouts/partials/blocks/templates/timeline/horizontal.html
@@ -4,13 +4,12 @@
"attributes" "class='title'"
) -}}
-<div class="timeline">
+<div class="timeline draggable-container">
{{ with .block.data }}
- <div class="timeline-events">
+ <div class="timeline-events draggable-content">
<ol>
{{ range .events }}
- <li class="timeline-event">
-
+ <li class="timeline-event draggable-item">
{{ $heading_tag.open -}}
{{ .title | safeHTML }}
{{ $heading_tag.close -}}
@@ -20,7 +19,7 @@
{{ end }}
</ol>
{{ if (gt (len .events) 0) }}
- <div class="timeline-arrows">
+ <div class="actions-arrows">
<button class="previous" disabled title="{{ i18n "blocks.timeline.previous"}}"></button>
<button class="next" title="{{ i18n "blocks.timeline.next"}}"></button>
</div>
diff --git a/layouts/partials/commons/image-default.html b/layouts/partials/commons/image-default.html
index abd7e74a470b26a0083fb97255dd9b24deceb233..302c39f770dae54aded02bcfa11b25aac74397ed 100644
--- a/layouts/partials/commons/image-default.html
+++ b/layouts/partials/commons/image-default.html
@@ -1,15 +1,15 @@
-{{ $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 }}
{{- 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..6336a732e6d87fded2ea263d6c834657eddd0c1c 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 -}}
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/partials/commons/logo.html b/layouts/partials/commons/logo.html
new file mode 100644
index 0000000000000000000000000000000000000000..8fb88532d8784c3054596b51da77163317e4b5c2
--- /dev/null
+++ b/layouts/partials/commons/logo.html
@@ -0,0 +1,22 @@
+{{ $logo := . }}
+{{ $file := false}}
+{{ $file_darkmode := false }}
+{{ if eq (printf "%T" $logo) "string" }}
+ {{ $file = $logo }}
+{{ else }}
+ {{ $file = $logo.default }}
+ {{ $file_darkmode = $logo.darkmode }}
+{{ end }}
+
+<a class="logo {{- if $file_darkmode }} with-darkmode {{ end -}}" href="{{ site.Home.Permalink }}">
+ {{ if $file }}
+ {{ $fileDimensions := partial "GetImageDimensions" (dict "context" . "file" $file "static" true) }}
+ <img src="{{ $file }}" alt="{{ site.Title }}" height="{{ index $fileDimensions 1 }}" width="{{ index $fileDimensions 0 }}">
+ {{ if $file_darkmode }}
+ {{ $fileDimensions := partial "GetImageDimensions" (dict "context" . "file" $file_darkmode "static" true) }}
+ <img class="logo-darkmode" src="{{ $file_darkmode }}" alt="{{ site.Title }}" height="{{ index $fileDimensions 1 }}" width="{{ index $fileDimensions 0 }}">
+ {{ end }}
+ {{ else }}
+ <span class="logo-text">{{ site.Title }}</span>
+ {{ end }}
+</a>
\ No newline at end of file
diff --git a/layouts/partials/commons/pagination.html b/layouts/partials/commons/pagination.html
index 8769cb92df6e931c4cf8f73d0a58a621b134f5a1..8bfc1e658433d32e45cd87c20ed1509fd19b1ad7 100644
--- a/layouts/partials/commons/pagination.html
+++ b/layouts/partials/commons/pagination.html
@@ -1,7 +1,7 @@
{{- $paginator := .Paginator -}}
<!-- Number of links either side of the current page. -->
-{{- $adjacent_links := 2 -}}
+{{- $adjacent_links := 1 -}}
<!-- $max_links = ($adjacent_links * 2) + 1 -->
{{- $max_links := (add (mul $adjacent_links 2) 1) -}}
diff --git a/layouts/partials/diplomas/essential.html b/layouts/partials/diplomas/essential.html
index 2f83ffad344502b63f05ccfd6f3402a52f84cdd9..63ee13a5a7130c9029a27ea1bf396ed924984bab 100644
--- a/layouts/partials/diplomas/essential.html
+++ b/layouts/partials/diplomas/essential.html
@@ -1,16 +1,18 @@
-{{- with . -}}
- <dl class="essential">
- {{- if .Params.level -}}
- <dt>{{ i18n "programs.level" }}</dt>
- <dd>{{ partial "PrepareHTML" .Params.level }}</dd>
- {{- end -}}
- {{- if .Params.duration -}}
- <dt>{{ i18n "programs.duration" }}</dt>
- <dd>{{ partial "PrepareHTML" .Params.duration }}</dd>
- {{- end -}}
- {{- if .Params.ects -}}
- <dt>{{ i18n "programs.ects_credits" }}</dt>
- <dd>{{ partial "PrepareHTML" .Params.ects }}</dd>
- {{- end -}}
- </dl>
-{{- end -}}
+<div class="essential-container" id="#{{ urlize (i18n "programs.toc.essential") }}">
+ <div class="container">
+ <dl class="essential">
+ {{- if .Params.level -}}
+ <dt>{{ i18n "programs.level" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.level }}</dd>
+ {{- end -}}
+ {{- if .Params.duration -}}
+ <dt>{{ i18n "programs.duration" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.duration }}</dd>
+ {{- end -}}
+ {{- if .Params.ects -}}
+ <dt>{{ i18n "programs.ects_credits" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.ects }}</dd>
+ {{- end -}}
+ </dl>
+ </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/diplomas/hero-single.html b/layouts/partials/diplomas/hero-single.html
index c45f7fb492f4beff68e818d18d512630ca48d1ca..b6b5481cdd7bd4a0dbb4764e514b5f8a9c3133dc 100644
--- a/layouts/partials/diplomas/hero-single.html
+++ b/layouts/partials/diplomas/hero-single.html
@@ -1,60 +1,9 @@
-{{- $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero" -}}
{{- $title := or .Params.header_text .Title -}}
-{{ $subtitle := "" }}
-{{- $summary := .Params.summary | safeHTML -}}
-{{ if and (eq site.Params.summary.position "hero") $summary }}
- {{ $subtitle = $summary }}
-{{ end }}
-
-<header class="hero {{ if $breadcrumb_is_after_hero -}} hero--no-margin {{- end }}">
- <div class="container">
- {{- if eq site.Params.breadcrumb.position "hero-start" -}}
- {{- if .Params.breadcrumb | default true -}}
- {{ partial "header/breadcrumbs.html" . }}
- {{- end -}}
- {{- end -}}
- <div class="content">
- {{- if $subtitle -}}
- <hgroup>
- <h1>{{ partial "PrepareHTML" $title }}</h1>
- <p class="lead">{{ partial "PrepareHTML" $subtitle }}</p>
- </hgroup>
- {{- else -}}
- <h1>{{ partial "PrepareHTML" $title }}</h1>
- {{- end -}}
- {{- if .Params.image }}
- <figure>
- {{ partial "commons/image.html"
- (dict
- "image" .image
- "sizes" site.Params.image_sizes.sections.diplomas.hero_single
- ) }}
- {{ if .image.credit }}
- <figcaption>
- {{- partial "PrepareHTML" .image.credit -}}
- </figcaption>
- {{ end }}
- </figure>
- {{ end -}}
- </div>
- </div>
- <div class="essential-container" id="#{{ urlize (i18n "programs.toc.essential") }}">
- <div class="container">
- {{- partial "diplomas/essential" . -}}
- </div>
- </div>
-
- {{- if eq site.Params.breadcrumb.position "hero-end" -}}
- {{- if .Params.breadcrumb | default true -}}
- {{ partial "header/breadcrumbs.html" . }}
- {{- end -}}
- {{- end -}}
-</header>
-
-{{- if $breadcrumb_is_after_hero -}}
- {{- if .Params.breadcrumb | default true -}}
- <div class="container breadcrumb-container">
- {{ partial "header/breadcrumbs.html" . }}
- </div>
- {{- end -}}
-{{- end -}}
\ No newline at end of file
+{{ partial "header/hero.html"
+ (dict
+ "title" $title
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.home.hero
+ "context" .
+ "hero_complement" "diplomas/essential.html"
+ )}}
diff --git a/layouts/partials/footer/cookie-banner.html b/layouts/partials/footer/cookie-banner.html
deleted file mode 100644
index 9e70b81c0464933655c3db54bd58442f45108e9e..0000000000000000000000000000000000000000
--- a/layouts/partials/footer/cookie-banner.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{{ if site.Params.cookie_banner.enable }}
- <div class="gdpr-cookie-consent js-gdpr-cookie-consent" tabindex="-1" role="dialog" aria-label="{{ i18n "cookie_banner.label" }}">
- <div>
- <p>
- {{ i18n "cookie_banner.text" }}
- <a href="{{ site.Params.cookie_banner.page | default "https://gdpr.eu/cookies/" }}"{{ if site.Params.cookie_banner.blank }} target="_blank" ref="noopener"{{ end }}>{{ i18n "cookie_banner.more" }}</a>
- </p>
- </div>
- <div role="group">
- <button type="button" class="js-gdpr-cookie-consent-btn-ok">{{ i18n "cookie_banner.accept" }}</button>
- <button type="button" class="js-gdpr-cookie-consent-btn-ko">{{ i18n "cookie_banner.refuse" }}</button>
- </div>
- </div>
-{{ end }}
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index fb2fa584fa76cbd6ef6d3f389a1d8cf826751aa5..ed9ccda3fa809a7848866fb727fb1f5c00dcfcae 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -1,3 +1,37 @@
+<div class="d-help">
+ <a href="#help">
+ <img src="/osuny/icon.png" alt="Aide Osuny" class="d-help__icon" />
+ </a>
+ <div class="d-help__content" id="help">
+ <table>
+ <thead>
+ <tr>
+ <th>Action</th>
+ <th>Raccourci</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Afficher la grille</td>
+ <td>Ctrl + g</td>
+ </tr>
+ <tr>
+ <td>Passer d’une page pleine largeur à une page avec barre latérale, et inversement</td>
+ <td>Ctrl + w</td>
+ </tr>
+ <tr>
+ <td>Contrôler les dimensions des images chargées</td>
+ <td>Ctrl + i</td>
+ </tr>
+ <tr>
+ <td>Ouvre la page en production, si dans config.yaml debug.productionUrl est spécifié</td>
+ <td>Ctrl + p</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</div>
+
<div class="d-grid">
<div>1</div>
<div>2</div>
@@ -14,16 +48,37 @@
</div>
<div class="d-spacing">
- <div><span>0 (12px) </span></div>
- <div><span>1 (24px) </span></div>
- <div><span>2 (48px) </span></div>
- <div><span>3 (64px) </span></div>
- <div><span>4 (128px) </span></div>
- <div><span>5 (256px) </span></div>
+ <div><span>1 (8px) </span></div>
+ <div><span>2 (12px) </span></div>
+ <div><span>3 (24px) </span></div>
+ <div><span>4 (48px) </span></div>
+ <div><span>5 (64px) </span></div>
+ <div><span>6 (128px) </span></div>
+ <div><span>7 (256px) </span></div>
</div>
<div class="d-cross"></div>
<style>
+ .d-help__content {
+ display: none;
+ background: #EEEEEE;
+ border-radius: 24px;
+ position: fixed;
+ width: 600px;
+ bottom: 10px;
+ left: 10px;
+ padding: 10px 20px 60px;
+ }
+ .d-help__content:target {
+ display: block;
+ }
+ .d-help__icon {
+ bottom: 10px;
+ left: 10px;
+ position: fixed;
+ width: 40px;
+ z-index: 1000;
+ }
.d-grid {
bottom: 0;
display: none;
@@ -49,10 +104,6 @@
}
.d-grid > div {
background: fuchsia;
- /*
- border-left: 1px solid yellow;
- border-right: 1px solid yellow;
- */
text-align: center;
}
.d-spacing {
@@ -63,8 +114,7 @@
left: 0;
pointer-events: none;
width: 100%;
- mix-blend-mode: difference;
- opacity: 0.3;
+ opacity: 0.5;
font-family: sans-serif;
font-size: 12px;
}
@@ -76,35 +126,39 @@
}
.d-spacing > div span {
position: absolute;
+ color: var(--color-text);
}
.d-spacing > div {
width: 100%;
- border-bottom: 1px solid white;
+ border-bottom: 1px solid var(--color-text);;
display: block;
color: white;
text-indent: 5px;
}
.d-spacing > div:nth-child(1){
border-top: 1px solid white;
- height: var(--spacing0);
+ height: var(--spacing-1);
}
.d-spacing > div:nth-child(1) span{
margin-top: -10px;
}
.d-spacing > div:nth-child(2){
- height: var(--spacing1);
+ height: var(--spacing-2);
}
.d-spacing > div:nth-child(3){
- height: var(--spacing2);
+ height: var(--spacing-3);
}
.d-spacing > div:nth-child(4){
- height: var(--spacing3);
+ height: var(--spacing-4);
}
.d-spacing > div:nth-child(5){
- height: var(--spacing4);
+ height: var(--spacing-5);
}
.d-spacing > div:nth-child(6){
- height: var(--spacing5);
+ height: var(--spacing-6);
+ }
+ .d-spacing > div:nth-child(7){
+ height: var(--spacing-7);
}
.d-cross {
position: fixed;
@@ -190,6 +244,9 @@
if (e.ctrlKey && e.key === 'i') {
showImageDimension();
}
+ if (e.ctrlKey && e.key === 'p') {
+ openInProd();
+ }
});
window.addEventListener('pointermove', e => {
@@ -217,16 +274,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}
@@ -238,7 +296,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 {
@@ -258,10 +316,23 @@
});
}
+ 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));
return (widthRatio + heightRatio) / 2;
}
+
+ function openInProd() {
+ // To use this debug method, add params.productionUrl key to your hugo config.yaml
+ const productionUrl = '{{ index site.Params.debug "productionUrl" }}';
+ if (productionUrl) {
+ window.open(`${productionUrl}${window.location.pathname}`);
+ }
+ }
+
</script>
\ No newline at end of file
diff --git a/layouts/partials/footer/logo.html b/layouts/partials/footer/logo.html
index 36e19f1aee1b66c0f92bb64f79c67eacae650c24..3331b60e50b592a54724758d72c1b8b3ad84c20d 100644
--- a/layouts/partials/footer/logo.html
+++ b/layouts/partials/footer/logo.html
@@ -1,3 +1 @@
-{{ $file := site.Params.logo.footer }}
-{{ $fileDimensions := partial "GetImageDimensions" (dict "context" . "file" $file "static" true) }}
-<a class="logo" href="{{ site.Home.Permalink }}"><img src="{{ $file }}" alt="{{ site.Title }}" height="{{ index $fileDimensions 1 }}" width="{{ index $fileDimensions 0 }}" loading="lazy"></a>
+{{ partial "commons/logo.html" site.Params.logo.footer }}
\ No newline at end of file
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/head/csp.html b/layouts/partials/head/csp.html
index 841a8a13eef10904e12f7d86738d8f5b263156b4..42e0bcbf7d6dfef5e0727f34c47b9ff123d74904 100644
--- a/layouts/partials/head/csp.html
+++ b/layouts/partials/head/csp.html
@@ -2,7 +2,7 @@
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self' {{ delimit . " " }}
- {{ if or (not hugo.IsProduction) site.Params.debug }}'unsafe-inline'{{ end }}
+ {{ if or (not hugo.IsProduction) site.Params.debug.active }}'unsafe-inline'{{ end }}
{{ if site.Params.search.active }}'wasm-unsafe-eval'{{ end }};
" />
{{- end -}}
diff --git a/layouts/partials/header/button.html b/layouts/partials/header/button.html
index 16d02d90397ba515e7dfc0d233a2bac02dace8b5..1331f60676c9f60b069682a4c939068341e7472c 100644
--- a/layouts/partials/header/button.html
+++ b/layouts/partials/header/button.html
@@ -1,7 +1,8 @@
<button type="button"
aria-controls="navigation"
aria-expanded="false"
- aria-label="{{ i18n "commons.menu.label" }}">
+ aria-label="{{ i18n "commons.menu.label" }}"
+ class="header-button">
<span>{{ i18n "commons.menu.title" }}</span>
<span></span>
</button>
diff --git a/layouts/partials/header/hero.html b/layouts/partials/header/hero.html
index 78fe93990d0d4d01863efb7f7e72523f2d24b740..388a3a3df4564862b086aac7c8731c85728bf0de 100644
--- a/layouts/partials/header/hero.html
+++ b/layouts/partials/header/hero.html
@@ -1,83 +1,99 @@
-{{- $direction := "" -}}
-{{- $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero" -}}
-{{- $subtitle := .subtitle -}}
-{{- $description := .description -}}
+
+{{ $direction := "" }}
+{{ $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero" }}
+{{ $display_breadcrumb := .breadcrumb | default true }}
+{{ $subtitle := .subtitle }}
+{{ $description := .description }}
{{ if .image }}
- {{- $direction = partial "GetImageDirection" .image -}}
+ {{ $direction = partial "GetImageDirection" .image }}
{{ end }}
-{{- $summary := .context.Params.summary | safeHTML -}}
-{{- $subtitle_is_summary := false -}}
+{{ $summary := .context.Params.summary | safeHTML }}
+{{ $subtitle_is_summary := false }}
+
+{{ $button := .button | default .context.Params.header_cta }}
{{ if not $subtitle }}
{{ if and (eq site.Params.summary.position "hero") $summary }}
- {{ $subtitle = $summary }}
- {{ $subtitle_is_summary = true }}
+ {{ $subtitle = $summary }}
+ {{ $subtitle_is_summary = true }}
{{ end }}
{{ end }}
-<header class="hero {{ if .image -}}hero--with-image hero--image-{{- $direction -}}{{- end }} {{ if $breadcrumb_is_after_hero -}} hero--no-margin {{- end }}">
+<header class="hero {{ if .image }}hero--with-image hero--image-{{- $direction }}{{ end }} {{ if $breadcrumb_is_after_hero }} hero--no-margin {{ end }}">
<div class="container">
- {{- if eq site.Params.breadcrumb.position "hero-start" -}}
- {{- if .breadcrumb | default true -}}
- {{ partial "header/breadcrumbs.html" .context }}
- {{- end -}}
- {{- end -}}
+ {{ if and $display_breadcrumb (eq site.Params.breadcrumb.position "hero-start") }}
+ {{ partial "header/breadcrumbs.html" .context }}
+ {{ end }}
<div class="content">
- {{- if or $subtitle $description -}}
- <hgroup>
+ <div class="hero-text">
+ {{ if or $subtitle $description }}
+ <hgroup>
+ <h1>{{ partial "PrepareHTML" .title }}</h1>
+ {{ if $subtitle }}
+ <p {{ if $subtitle_is_summary }} class="lead" {{ end }}>{{ partial "PrepareHTML" $subtitle }}</p>
+ {{ end }}
+ {{ if $description }}
+ <p>{{ partial "PrepareHTML" .description }}</p>
+ {{ end }}
+ </hgroup>
+ {{ else }}
<h1>{{ partial "PrepareHTML" .title }}</h1>
- {{- if $subtitle -}}
- <p {{ if $subtitle_is_summary -}} class="lead" {{- end -}}>{{ partial "PrepareHTML" $subtitle }}</p>
- {{- end -}}
- {{- if $description -}}
- <p>{{ partial "PrepareHTML" .description }}</p>
- {{- end -}}
- </hgroup>
- {{- else -}}
- <h1>{{ partial "PrepareHTML" .title }}</h1>
- {{- end -}}
- {{- if .image }}
+ {{ end }}
+
+ {{ with $button }}
+ {{ if and .display .target .label }}
+ <a href="{{ .target }}" class="btn">{{ .label }}</a>
+ {{ end }}
+ {{ end }}
+
+ {{ if .hero_text_complement }}
+ {{ partial .hero_text_complement .context }}
+ {{ end }}
+ </div>
+
+ {{ if .image }}
<figure>
+ {{ partial "commons/image.html"
+ (dict
+ "image" .image
+ "sizes" ( .sizes | default site.Params.image_sizes.design_system.hero )
+ "lazy" false
+ ) }}
{{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
<a class="glightbox"
role="button"
- data-glightbox="type: image;{{ if .image.credit }}description: {{ partial "PrepareHTML" .image.credit }}{{ end }}"
+ data-glightbox="type: image;{{ with .image.credit }}description: {{ partial "PrepareHTML" . }}{{ end }}"
href="{{ partial "GetLightboxUrl" .image }}"
title="{{- i18n "commons.lightbox.link.title" -}}"
aria-label="{{- i18n "commons.lightbox.link.title" -}}">
- {{ end }}
- {{ partial "commons/image.html"
- (dict
- "image" .image
- "sizes" ( .sizes | default site.Params.image_sizes.design_system.hero )
- "lazy" false
- ) }}
- {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
</a>
{{ end }}
- {{ if partial "GetTextFromHTML" .image.credit }}
- <figcaption tabindex="0">
- <div class="credit-content">
- {{- partial "PrepareHTML" .image.credit -}}
- </div>
- </figcaption>
- {{ end }}
+ {{ with partial "GetTextFromHTML" .image.credit }}
+ <figcaption tabindex="0">
+ <div class="credit-content">
+ {{ partial "PrepareHTML" . }}
+ </div>
+ </figcaption>
+ {{ end }}
</figure>
- {{ end -}}
+ {{ end }}
</div>
- {{- if eq site.Params.breadcrumb.position "hero-end" -}}
- {{- if .breadcrumb | default true -}}
- {{ partial "header/breadcrumbs.html" .context }}
- {{- end -}}
- {{- end -}}
</div>
-</header>
-{{- if $breadcrumb_is_after_hero -}}
- {{- if .breadcrumb | default true -}}
+ {{ if .hero_complement }}
+ {{ partial .hero_complement .context }}
+ {{ end }}
+
+ {{ if and $display_breadcrumb (eq site.Params.breadcrumb.position "hero-end") }}
<div class="container breadcrumb-container">
{{ partial "header/breadcrumbs.html" .context }}
</div>
- {{- end -}}
-{{- end -}}
\ No newline at end of file
+ {{ end }}
+</header>
+
+{{ if and $display_breadcrumb $breadcrumb_is_after_hero }}
+ <div class="container breadcrumb-container">
+ {{ partial "header/breadcrumbs.html" .context }}
+ </div>
+{{ end }}
diff --git a/layouts/partials/header/logo.html b/layouts/partials/header/logo.html
index 50ed28873df3c6136dd59d12cbbe19c41d2bdab2..5505e783236c5876ea564dbf159bb5f818a0c3ce 100644
--- a/layouts/partials/header/logo.html
+++ b/layouts/partials/header/logo.html
@@ -1,3 +1 @@
-{{ $file := site.Params.logo.header }}
-{{ $fileDimensions := partial "GetImageDimensions" (dict "context" . "file" $file "static" true) }}
-<a class="logo" href="{{ site.Home.Permalink }}"><img src="{{ $file }}" alt="{{ site.Title }}" height="{{ index $fileDimensions 1 }}" width="{{ index $fileDimensions 0 }}"></a>
+{{ partial "commons/logo.html" site.Params.logo.header }}
\ No newline at end of file
diff --git a/layouts/partials/organizations/logo.html b/layouts/partials/organizations/logo.html
index 586ead648b88f877a43f76e02e459d2a5e8db316..1086a4503458be2bdd96cc9cd3ecf5858e347ecd 100644
--- a/layouts/partials/organizations/logo.html
+++ b/layouts/partials/organizations/logo.html
@@ -3,7 +3,7 @@
{{ if site.Params.organizations.dark_logo_background }}
{{ $logo_index = "logo_on_dark_background" }}
{{ end }}
- <figure class="logo">
+ <figure class="organization-logo">
{{- partial "commons/image.html"
(dict
"image" (index .Params $logo_index)
diff --git a/layouts/partials/organizations/organization.html b/layouts/partials/organizations/organization.html
index a2d88bc418f25facee2ef920df1d9a3768f35297..bdb9b7746e44a95692b4d4d0405508c7856a3f84 100644
--- a/layouts/partials/organizations/organization.html
+++ b/layouts/partials/organizations/organization.html
@@ -1,7 +1,7 @@
<article class="organization">
<div>
{{ $title := partial "PrepareHTML" .Title }}
- <h2>
+ <h2 class="organization-title">
<a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
{{ $title }}
</a>
diff --git a/layouts/partials/pages/children.html b/layouts/partials/pages/children.html
index fb6dd823c79574a7bf0327742e3b60f5d548817b..84c53adfe3a2b85add42b2b4312e7c950478443e 100644
--- a/layouts/partials/pages/children.html
+++ b/layouts/partials/pages/children.html
@@ -2,13 +2,14 @@
{{ if .Params.bodyclass }}
{{- $page_class = printf "block-page-%s" .Params.bodyclass }}
{{ end }}
+{{ $show_images := eq site.Params.pages.index.layout "grid" }}
-<div class="block block-pages block-pages--grid {{ $page_class }}">
+<div class="block block-pages block-pages--children block-pages--{{ site.Params.pages.index.layout }} {{ $page_class }}">
<div class="container">
<div class="block-content">
- {{- partial "blocks/templates/pages/grid.html" (dict
+ {{- partial (printf "blocks/templates/pages/%s.html" site.Params.pages.index.layout) (dict
"pages" .Params.children
- "show_images" true
+ "show_images" $show_images
"heading_level" 2
"show_descriptions" true
) }}
diff --git a/layouts/partials/pages/sitemap_recursive_pages.html b/layouts/partials/pages/sitemap_recursive_pages.html
new file mode 100644
index 0000000000000000000000000000000000000000..84761ebfee2870f788539b0d19aa9b7926e7ee04
--- /dev/null
+++ b/layouts/partials/pages/sitemap_recursive_pages.html
@@ -0,0 +1,10 @@
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ safeHTML .Title }}</a>
+ {{ if .Pages }}
+ {{ partial "pages/sitemap_recursive_pages.html" . }}
+ {{ end }}
+ </li>
+ {{ end }}
+</ul>
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/persons/hero-single.html b/layouts/partials/persons/hero-single.html
index eb46dc1c8bc238d1dfbcc7cb9933e9e1badcf146..2c6f6e83111afb6bc29e93485425243df6be5455 100644
--- a/layouts/partials/persons/hero-single.html
+++ b/layouts/partials/persons/hero-single.html
@@ -1,44 +1,19 @@
-{{- $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero" -}}
-{{ $subtitle := "" }}
-{{- $summary := .Params.summary | safeHTML -}}
-{{ if and (eq site.Params.summary.position "hero") $summary }}
- {{ $subtitle = $summary }}
-{{ end }}
-
-<header class="hero {{ if $breadcrumb_is_after_hero -}} hero--no-margin {{- end }}">
- <div class="container">
- {{- if eq site.Params.breadcrumb.position "hero-start" -}}
- {{ partial "header/breadcrumbs.html" . }}
- {{- end -}}
- <div class="content">
- {{- if $subtitle -}}
- <hgroup>
- <h1>{{ partial "PrepareHTML" .Title }}</h1>
- <p class="lead">{{ partial "PrepareHTML" $subtitle }}</p>
- </hgroup>
- {{- else -}}
- <h1>{{ partial "PrepareHTML" .Title }}</h1>
- {{- end -}}
+{{- $title := or .Params.header_text .Title -}}
- {{ if .Params.image }}
- <div class="avatar">
- {{ partial "commons/image.html"
- (dict
- "image" .Params.image
- "class" "img-fluid"
- "sizes" site.Params.image_sizes.sections.persons.hero_single
- )}}
- </div>
- {{ end }}
- </div>
- {{- if eq site.Params.breadcrumb.position "hero-end" -}}
- {{ partial "header/breadcrumbs.html" . }}
- {{- end -}}
- </div>
-</header>
+{{/* LEGACY : à retirer une fois que le format de donnée des images des personnes sera homogène aux autres images */}}
+{{- $image := "" -}}
+{{ with .Params.image }}
+ {{ if eq (printf "%T" .) "string" }}
+ {{ $image = dict "id" . }}
+ {{ else }}
+ {{ $image = . }}
+ {{ end }}
+{{ end }}
-{{- if $breadcrumb_is_after_hero -}}
- <div class="container breadcrumb-container">
- {{ partial "header/breadcrumbs.html" . }}
- </div>
-{{- end -}}
\ No newline at end of file
+{{- partial "header/hero.html"
+ (dict
+ "title" $title
+ "image" $image
+ "context" .
+ "sizes" site.Params.image_sizes.sections.persons.hero_single
+ ) -}}
diff --git a/layouts/partials/posts/post-infos.html b/layouts/partials/posts/post-infos.html
index 47b8b35b98b5c55acfc3ebe15977dfb9ff8b5ed6..f5eacaaf6cd03221c7ef2d34547c35a3be0e2d4f 100644
--- a/layouts/partials/posts/post-infos.html
+++ b/layouts/partials/posts/post-infos.html
@@ -1,6 +1,6 @@
<ul class="post-infos">
{{ if .Params.posts_categories }}
- <li>
+ <li class="terms">
<span>{{ i18n "posts.category" ( len .Params.posts_categories ) }}</span>
{{ partial "posts/categories.html" . }}
</li>
diff --git a/layouts/partials/programs/admission.html b/layouts/partials/programs/admission.html
index 50d5ec348d9344bfbf1e2af0a6510036c62efa21..ca69bfbba868559f585c332d6ece9a47cd1e8062 100644
--- a/layouts/partials/programs/admission.html
+++ b/layouts/partials/programs/admission.html
@@ -18,6 +18,27 @@
</section>
{{- end -}}
+ {{- if partial "GetTextFromHTML" .Params.pricing_initial -}}
+ <section id="{{ urlize (i18n "programs.pricing_initial") }}">
+ <h3>{{ i18n "programs.pricing_initial" }}</h3>
+ {{- partial "PrepareHTML" .Params.pricing_initial -}}
+ </section>
+ {{- end -}}
+
+ {{- if partial "GetTextFromHTML" .Params.pricing_continuing -}}
+ <section id="{{ urlize (i18n "programs.pricing_continuing") }}">
+ <h3>{{ i18n "programs.pricing_continuing" }}</h3>
+ {{- partial "PrepareHTML" .Params.pricing_continuing -}}
+ </section>
+ {{- end -}}
+
+ {{- if partial "GetTextFromHTML" .Params.pricing_apprenticeship -}}
+ <section id="{{ urlize (i18n "programs.pricing_apprenticeship") }}">
+ <h3>{{ i18n "programs.pricing_apprenticeship" }}</h3>
+ {{- partial "PrepareHTML" .Params.pricing_apprenticeship -}}
+ </section>
+ {{- end -}}
+
{{- if partial "GetTextFromHTML" .Params.registration -}}
<section id="{{ urlize (i18n "programs.registration") }}">
<h3>{{ i18n "programs.registration" }}</h3>
diff --git a/layouts/partials/programs/essential.html b/layouts/partials/programs/essential.html
index bc5730ecf4c104fa7e239272a49519bf7eee7e05..9e02eda1e47036aa0425e7b656fa043140db8bbb 100644
--- a/layouts/partials/programs/essential.html
+++ b/layouts/partials/programs/essential.html
@@ -1,22 +1,45 @@
-{{ $parent := .Params.parent }}
-{{- with .Params.diplomas -}}
- {{- $diploma := site.GetPage (printf "/diplomas/%s" .) -}}
- {{- with $diploma -}}
- <dl class="essential">
- <dt>{{ i18n "programs.diploma" }}</dt>
- <dd><a href="{{ .Permalink }}">{{ partial "PrepareHTML" .Title }}</a></dd>
- {{- if .Params.level -}}
- <dt>{{ i18n "programs.level" }}</dt>
- <dd>{{ partial "PrepareHTML" .Params.level }}</dd>
+<div class="essential-container" id="#{{ urlize (i18n "programs.toc.essential") }}">
+ <div class="container">
+ {{ $parent := .Params.parent }}
+ {{- with .Params.diplomas -}}
+ {{- $diploma := site.GetPage (printf "/diplomas/%s" .) -}}
+ {{- with $diploma -}}
+ <dl class="essential">
+ <dt>{{ i18n "programs.diploma" }}</dt>
+ <dd><a href="{{ .Permalink }}">{{ partial "PrepareHTML" .Title }}</a></dd>
+ {{- if .Params.level -}}
+ <dt>{{ i18n "programs.level" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.level }}</dd>
+ {{- end -}}
+ {{- with $parent -}}
+ <dt>{{ i18n "programs.mention" }}</dt>
+ <dd><a href="{{ .url }}">{{ partial "PrepareHTML" .title }}</a></dd>
+ {{- end -}}
+ {{- if .Params.duration -}}
+ <dt>{{ i18n "programs.duration" }}</dt>
+ <dd>{{ partial "PrepareHTML" .Params.duration }}</dd>
+ {{- end -}}
+ </dl>
{{- end -}}
- {{- with $parent -}}
- <dt>{{ i18n "programs.mention" }}</dt>
- <dd><a href="{{ .url }}">{{ partial "PrepareHTML" .title }}</a></dd>
- {{- end -}}
- {{- if .Params.duration -}}
- <dt>{{ i18n "programs.duration" }}</dt>
- <dd>{{ partial "PrepareHTML" .Params.duration }}</dd>
- {{- end -}}
- </dl>
- {{- end -}}
-{{- end -}}
+ {{- end -}}
+
+ <div class="buttons">
+ <div class="dropdown-share dropup">
+ <button class="btn" type="button" id="shareProgram" data-bs-toggle="dropdown" aria-expanded="false">{{ i18n "commons.share" }}</button>
+ <div class="dropdown-menu">
+ {{ partial "commons/share.html" . }}
+ </div>
+ </div>
+ {{ with .Params.downloadable_summary }}
+ {{- $file := partial "GetMedia" . -}}
+ {{- if $file -}}
+ {{- $url := $file.url -}}
+ {{- if site.Params.keycdn -}}
+ {{- $url = $file.direct_url -}}
+ {{- end -}}
+ <a href="{{ $url }}" download target="_blank">{{ i18n "commons.download.singular_name" }}</a>
+ {{- end -}}
+ {{ end }}
+ </div>
+ </div>
+</div>
diff --git a/layouts/partials/programs/hero-single.html b/layouts/partials/programs/hero-single.html
index deb0f4ae2da54d0047773693e12b80cc92142c9d..eb7dd28515f74043a151f17f10a099eaea83707c 100644
--- a/layouts/partials/programs/hero-single.html
+++ b/layouts/partials/programs/hero-single.html
@@ -1,65 +1,17 @@
-{{- $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero" -}}
{{- $title := or .Params.header_text .Title -}}
-{{ $subtitle := "" }}
-{{- $summary := .Params.summary | safeHTML -}}
-{{ if and (eq site.Params.summary.position "hero") $summary }}
- {{ $subtitle = $summary }}
-{{ end }}
-
-<header class="hero hero-program {{ if $breadcrumb_is_after_hero -}} hero--no-margin {{- end }}">
- <div class="container">
- {{- if eq site.Params.breadcrumb.position "hero-start" -}}
- {{- if .Params.breadcrumb | default true -}}
- {{ partial "header/breadcrumbs.html" . }}
- {{- end -}}
- {{- end -}}
- <div class="content">
- {{- if $subtitle -}}
- <hgroup>
- <h1>{{ partial "PrepareHTML" $title }}</h1>
- <p class="lead">{{ partial "PrepareHTML" $subtitle }}</p>
- </hgroup>
- {{- else -}}
- <h1>{{ partial "PrepareHTML" $title }}</h1>
- {{- end -}}
- </div>
- </div>
-
- <div class="essential-container" id="#{{ urlize (i18n "programs.toc.essential") }}">
- <div class="container">
- {{- partial "programs/essential" . -}}
- <div class="buttons">
- <div class="dropdown-share dropup">
- <button type="button" id="shareProgram" data-bs-toggle="dropdown" aria-expanded="false">{{ i18n "commons.share" }}</button>
- <div class="dropdown-menu">
- {{ partial "commons/share.html" . }}
- </div>
- </div>
- {{ with .Params.downloadable_summary }}
- {{- $file := partial "GetMedia" . -}}
- {{- if $file -}}
- {{- $url := $file.url -}}
- {{- if site.Params.keycdn -}}
- {{- $url = $file.direct_url -}}
- {{- end -}}
- <a href="{{ $url }}" download target="_blank">{{ i18n "commons.download.singular_name" }}</a>
- {{- end -}}
- {{ end }}
- </div>
- </div>
- </div>
-
- {{- if eq site.Params.breadcrumb.position "hero-end" -}}
- {{- if .Params.breadcrumb | default true -}}
- {{ partial "header/breadcrumbs.html" . }}
- {{- end -}}
- {{- end -}}
-</header>
-
-{{- if $breadcrumb_is_after_hero -}}
- {{- if .Params.breadcrumb | default true -}}
- <div class="container breadcrumb-container">
- {{ partial "header/breadcrumbs.html" . }}
- </div>
- {{- end -}}
+{{- $button := false -}}
+{{- if and (eq site.Params.summary.position "hero") .Params.website_url -}}
+ {{ $button = (dict
+ "display" true
+ "target" .Params.website_url
+ "label" (i18n "programs.website")
+ ) }}
{{- end -}}
+
+{{ partial "header/hero.html"
+ (dict
+ "title" $title
+ "context" .
+ "button" $button
+ "hero_complement" "programs/essential.html"
+ )}}
diff --git a/layouts/partials/programs/list.html b/layouts/partials/programs/list.html
index ddd3d9be1a758789c95498e241221e834d0b42cb..0fccc9daa5c4cc4219349eada600c7ad8ea3d9bd 100644
--- a/layouts/partials/programs/list.html
+++ b/layouts/partials/programs/list.html
@@ -12,8 +12,12 @@
{{ partial "contents/list.html" . }}
<div class="container">
{{ partial "diplomas/diplomas-select.html" . }}
+ {{/* Toutes les formations... */}}
{{ $programs := where .Site.Pages "Section" "programs" }}
+ {{/* mais pas l'accueil des formations... */}}
{{ $programs = where $programs "Permalink" "!=" .FirstSection.Permalink }}
+ {{/* et pas non plus les pages enfants (parcours) */}}
+ {{ $programs = where $programs "Params.parent" "eq" nil }}
{{ partial "programs/programs-list.html" $programs }}
</div>
</div>
diff --git a/layouts/partials/programs/summary.html b/layouts/partials/programs/summary.html
index 85e4edf81a14c7fedc7c790f755b91710a4d9224..d5dec153c5ee5107a5d8c8bf83c9b67c80c8dea9 100644
--- a/layouts/partials/programs/summary.html
+++ b/layouts/partials/programs/summary.html
@@ -1 +1,11 @@
-{{- partial "commons/summary-in-content.html" . -}}
+{{ $summary := .summary | default (.context.Params.summary | safeHTML) }}
+{{ if and (eq site.Params.summary.position "content") $summary }}
+ <div class="container program-summary">
+ <p class="lead" role="heading" aria-level="2">
+ {{ $summary }}
+ </p>
+ {{ if .context.Params.website_url }}
+ <a href="{{- .context.Params.website_url -}}" target="_blank" class="btn">{{ i18n "programs.website" }}</a>
+ {{ end }}
+ </div>
+{{ end }}
diff --git a/layouts/partials/projects/categories.html b/layouts/partials/projects/categories.html
new file mode 100644
index 0000000000000000000000000000000000000000..ffd783f24c83bdb9d034e4bdfeee49a8f297f60c
--- /dev/null
+++ b/layouts/partials/projects/categories.html
@@ -0,0 +1,12 @@
+{{ $categories := .GetTerms "projects_categories" }}
+{{- if $categories -}}
+<ul class="project-categories">
+ {{- range $categories -}}
+ <li>
+ <a href="{{ .Permalink }}">
+ {{- safeHTML .Title -}}
+ </a>
+ </li>
+ {{- end }}
+</ul>
+{{- end -}}
diff --git a/layouts/partials/projects/hero-list.html b/layouts/partials/projects/hero-list.html
new file mode 100644
index 0000000000000000000000000000000000000000..84b8de2d9433fadeaf98bbe1933e228bfe7b5208
--- /dev/null
+++ b/layouts/partials/projects/hero-list.html
@@ -0,0 +1,8 @@
+{{- $title := or .Params.header_text .Title -}}
+{{- partial "header/hero.html"
+ (dict
+ "title" $title
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.projects.hero
+ "context" .
+ ) -}}
diff --git a/layouts/partials/projects/hero-single.html b/layouts/partials/projects/hero-single.html
new file mode 100644
index 0000000000000000000000000000000000000000..e8bfe9f6240f203385fe3b598991974813037fd0
--- /dev/null
+++ b/layouts/partials/projects/hero-single.html
@@ -0,0 +1,9 @@
+{{- $title := or .Params.header_text .Title -}}
+{{- partial "header/hero.html"
+ (dict
+ "title" $title
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.projects.hero_single
+ "hero_text_complement" "projects/project-infos.html"
+ "context" .
+ ) -}}
diff --git a/layouts/partials/projects/project-infos.html b/layouts/partials/projects/project-infos.html
new file mode 100644
index 0000000000000000000000000000000000000000..e33502c59b879e6ca8e207d9a43fea21e81410ed
--- /dev/null
+++ b/layouts/partials/projects/project-infos.html
@@ -0,0 +1,18 @@
+<ul class="project-infos">
+ {{ if .Params.projects_categories }}
+ <li class="terms">
+ <span>{{ i18n "projects.category" ( len .Params.projects_categories ) }}</span>
+ {{ partial "projects/categories.html" . }}
+ </li>
+ {{ end }}
+ {{ with .Params.year }}
+ <li>
+ <span>{{ i18n "projects.year" }}</span>
+ <time datetime="{{ . }}">{{ . }}</time>
+ </li>
+ {{ end }}
+ <li class="social-share">
+ <span>{{ i18n "projects.share" }}</span>
+ {{ partial "commons/share.html" . }}
+ </li>
+</ul>
\ No newline at end of file
diff --git a/layouts/partials/projects/project.html b/layouts/partials/projects/project.html
new file mode 100644
index 0000000000000000000000000000000000000000..c7ec5b2829b8440a7bacdaf57a5554e731d6bb09
--- /dev/null
+++ b/layouts/partials/projects/project.html
@@ -0,0 +1,50 @@
+{{ $project := .project }}
+{{ $heading := .heading | default "h2" }}
+{{ $heading_tag := (dict
+ "open" ((printf "<%s itemprop='name'>" $heading) | safeHTML)
+ "close" ((printf "</%s>" $heading) | safeHTML)
+ ) }}
+
+{{ with $project }}
+
+<article class="project" itemscope itemtype="https://schema.org/CreativeWork">
+
+ <div class="project-content">
+ {{- $title := partial "PrepareHTML" .Title -}}
+
+ {{ $heading_tag.open }}
+ <a href="{{ .Permalink }}" itemprop="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a>
+ {{ $heading_tag.close }}
+
+ {{ if and site.Params.projects.index.show_description (partial "GetTextFromHTML" .Params.summary) }}
+ <p itemprop="abstract">{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.projects.index.truncate_description
+ ) }}</p>
+ {{ end }}
+
+ {{ if site.Params.projects.index.show_categories }}
+ {{- partial "projects/categories" . -}}
+ {{ end }}
+
+ {{ if and site.Params.projects.index.show_year .Params.year }}
+ <div class="project-meta">
+ <time itemprop="datePublished" datetime="{{ .Params.year }}">{{ .Params.year }}</time>
+ </div>
+ {{ end }}
+ </div>
+
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.projects.item
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" "projects" -}}
+ {{- end -}}
+ </div>
+
+</article>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/projects/projects.html b/layouts/partials/projects/projects.html
new file mode 100644
index 0000000000000000000000000000000000000000..bfce05b018c0d2059cba468af1ef26bfbfa5625d
--- /dev/null
+++ b/layouts/partials/projects/projects.html
@@ -0,0 +1,8 @@
+<div class="projects projects--{{- site.Params.projects.index.layout -}}">
+ {{ if not .Pages }}
+ <p>{{ i18n "categories.no_project" }}</p>
+ {{ end }}
+ {{ range .Paginator.Pages }}
+ {{ partial "projects/project.html" (dict "project" . )}}
+ {{ end }}
+</div>
diff --git a/layouts/partials/projects/sidebar.html b/layouts/partials/projects/sidebar.html
new file mode 100644
index 0000000000000000000000000000000000000000..2f27a098fd7676996c77a580f49b2e3471ace1ff
--- /dev/null
+++ b/layouts/partials/projects/sidebar.html
@@ -0,0 +1,14 @@
+<div class="section-sidebar project-sidebar">
+ <div>
+ <aside>
+ {{- partial "projects/project-infos.html" . -}}
+ </aside>
+
+ {{ partial "toc/container.html"
+ (dict
+ "toc" "toc/default.html"
+ "context" .
+ )
+ }}
+ </div>
+</div>
diff --git a/layouts/partials/projects/summary.html b/layouts/partials/projects/summary.html
new file mode 100644
index 0000000000000000000000000000000000000000..85e4edf81a14c7fedc7c790f755b91710a4d9224
--- /dev/null
+++ b/layouts/partials/projects/summary.html
@@ -0,0 +1 @@
+{{- partial "commons/summary-in-content.html" . -}}
diff --git a/layouts/partials/publications/downloads.html b/layouts/partials/publications/downloads.html
index 379bba754f489ef6633dab92ecaeaa57467decab..a24993d24f90f1a7da89c408526444db649cdca6 100644
--- a/layouts/partials/publications/downloads.html
+++ b/layouts/partials/publications/downloads.html
@@ -4,7 +4,7 @@
<nav>
{{ range .Params.links }}
{{ if .url }}
- <a href="{{ .url }}" target="_blank" rel="noopener" class="link-btn">{{ .label }}</a>
+ <a href="{{ .url }}" target="_blank" rel="noopener">{{ .label }}</a>
{{ end }}
{{ end }}
</nav>
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/partials/sitemap/toc.html b/layouts/partials/sitemap/toc.html
index 9fff240ad2d17a4c563032aa727d03ec3d428462..508b5583c8bbb864fd7dd9956d54c95b152a8c1d 100644
--- a/layouts/partials/sitemap/toc.html
+++ b/layouts/partials/sitemap/toc.html
@@ -3,8 +3,11 @@
{{- if .context.Params.contents -}}
{{- partial "blocks/toc.html" .context.Params.contents -}}
{{- end -}}
+ <li>
+ <a href="#pages">{{ i18n "sitemap.pages" }}</a>
+ </li>
{{ range site.Sections }}
- {{ if ne .Type "sitemap" }}
+ {{ if and (ne .Type "sitemap") (ne .Type "pages") }}
<li>
<a href="#{{ .Type }}">{{ safeHTML .Title }}</a>
</li>
diff --git a/layouts/persons/single.html b/layouts/persons/single.html
index becf9384a25780d7e81763172a83e39c76b630fb..a7e24cb19d79641af29453ed213cd1ab7ee503a3 100644
--- a/layouts/persons/single.html
+++ b/layouts/persons/single.html
@@ -28,12 +28,18 @@
<div itemscope itemtype="https://schema.org/Person" class="container">
<meta itemprop="name" content="{{ partial "PrepareHTML" .Title }}">
<meta itemprop="url" content="{{ .Permalink }}">
- {{- if .Params.image -}}
- {{- $image := partial "GetMedia" .Params.image -}}
- {{- if $image -}}
- <meta itemprop="image" content="{{ $image.url }}">
+ {{ with .Params.image }}
+ {{ $image_id := "" }}
+ {{/* LEGACY : à retirer une fois que le format de donnée des images des personnes sera homogène aux autres images */}}
+ {{ if eq (printf "%T" .) "string" }}
+ {{ $image_id = . }}
+ {{ else }}
+ {{ $image_id = index . "id" }}
+ {{ end }}
+ {{- with partial "GetMedia" $image_id -}}
+ <meta itemprop="image" content="{{ .url }}">
{{- end -}}
- {{- end -}}
+ {{ end }}
<div class="informations">
<div>
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 5523950f11e3c1ff4e8a53d5aa63400e7ccabc66..d37649dfa59ca5c2ea16fd6cdcda0d4f0eaa11a0 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -6,7 +6,6 @@
<meta itemprop="url" content="{{ .Permalink }}">
{{ with .Date }}<meta itemprop="datePublished" content="{{ .Format "2006-01-02T15:04" }}">{{ end }}
{{ with .Params.summary }}<meta itemprop="abstract" content="{{ . | safeHTML }}">{{ end }}
- {{ with .Summary }}<meta itemprop="description" content="{{ . | safeHTML }}">{{ end }}
{{ partial "posts/sidebar.html" . }}
diff --git a/layouts/programs/list.html b/layouts/programs/list.html
index db2c2b6b0d703579d20dd42c49efdc100a215010..0b2260601999fdd12a1dc2e1eaa755c58db4f7dc 100644
--- a/layouts/programs/list.html
+++ b/layouts/programs/list.html
@@ -1,9 +1,9 @@
{{ define "main" }}
- {{ if .Params.diplomas }}
- {{ partial "programs/hero-single.html" . }}
- {{ partial "programs/single.html" . }}
- {{ else }}
+ {{ if eq .File.Path "programs/_index.html" }}
{{ partial "programs/hero.html" . }}
{{ partial "programs/list.html" . }}
+ {{ else }}
+ {{ partial "programs/hero-single.html" . }}
+ {{ partial "programs/single.html" . }}
{{ end }}
{{ end }}
diff --git a/layouts/projects/list.html b/layouts/projects/list.html
new file mode 100644
index 0000000000000000000000000000000000000000..ea5fdbb7608debb02ba021ca82920def0e663f65
--- /dev/null
+++ b/layouts/projects/list.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+ {{ partial "projects/hero-list.html" . }}
+ <div class="document-content">
+ {{ partial "commons/list-content.html" . }}
+
+ {{ partial "projects/summary.html" (dict
+ "with_container" true
+ "context" .
+ ) }}
+
+ {{ partial "contents/list.html" . }}
+
+ <div class="container">
+ {{ partial "projects/projects.html" . }}
+ {{ partial "commons/pagination.html" . }}
+ </div>
+ </div>
+{{ end }}
diff --git a/layouts/projects/single.html b/layouts/projects/single.html
new file mode 100644
index 0000000000000000000000000000000000000000..05484c8bc2884bbf5837c6373ecf5da2df02eecf
--- /dev/null
+++ b/layouts/projects/single.html
@@ -0,0 +1,24 @@
+{{ define "main" }}
+ {{ partial "projects/hero-single.html" . }}
+
+ <div class="document-content" itemscope itemtype="https://schema.org/CreativeWork">
+ <meta itemprop="name" content="{{ partial "PrepareHTML" .Title }}">
+ <meta itemprop="url" content="{{ .Permalink }}">
+ {{ with .Params.summary }}<meta itemprop="description" content="{{ . | safeHTML }}">{{ end }}
+
+ {{ partial "projects/summary.html" (dict
+ "context" .
+ "block_wrapped" true
+ ) }}
+
+ {{ partial "contents/list.html" . }}
+
+ {{ partial "commons/siblings-navigation.html" (dict
+ "context" .
+ "previous_label" (i18n "projects.previous")
+ "next_label" (i18n "projects.next")
+ ) }}
+
+ {{ partial "hooks/before-document-content-end.html" . }}
+ </div>
+{{ end }}
diff --git a/layouts/projects_categories/list.html b/layouts/projects_categories/list.html
new file mode 100644
index 0000000000000000000000000000000000000000..dc40e99731e7e266dd5cfe56cd0fd6eff130e318
--- /dev/null
+++ b/layouts/projects_categories/list.html
@@ -0,0 +1,10 @@
+{{ define "main" }}
+ {{ partial "categories/hero-list.html" . }}
+
+ <div class="document-content">
+ <div class="container">
+ {{ partial "categories/categories.html" . }}
+ {{ partial "commons/pagination.html" . }}
+ </div>
+ </div>
+{{ end }}
diff --git a/layouts/projects_categories/term.html b/layouts/projects_categories/term.html
new file mode 100644
index 0000000000000000000000000000000000000000..3e262d032938c69869a8891ace1f2de7428d7b90
--- /dev/null
+++ b/layouts/projects_categories/term.html
@@ -0,0 +1,22 @@
+{{ define "main" }}
+ {{ partial "categories/hero-term.html" . }}
+
+ <div class="document-content">
+ {{ partial "toc/container.html" (dict
+ "toc" "toc/default.html"
+ "context" .
+ ) }}
+
+ {{ partial "categories/summary.html" (dict
+ "context" .
+ "block_wrapped" true
+ ) }}
+
+ {{ partial "contents/list.html" . }}
+
+ <div class="container">
+ {{ partial "projects/projects.html" . }}
+ {{ partial "commons/pagination.html" . }}
+ </div>
+ </div>
+{{ end }}
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 }}
diff --git a/static/assets/fonts/fonticons/IconFont.ttf b/static/assets/fonts/fonticons/IconFont.ttf
index 5b68528dc52998f7fe5923168888f752dd6d6f06..9db0243c3b7db2c95cf174f6c6122aa31f156b21 100644
Binary files a/static/assets/fonts/fonticons/IconFont.ttf and b/static/assets/fonts/fonticons/IconFont.ttf differ
diff --git a/static/assets/fonts/fonticons/IconFont.woff b/static/assets/fonts/fonticons/IconFont.woff
index a48b0132c5172bf646c83091147401fc3b92fe53..3803db73637ce37756dc81f5b5c3bdcc5b7d4685 100644
Binary files a/static/assets/fonts/fonticons/IconFont.woff and b/static/assets/fonts/fonticons/IconFont.woff differ
diff --git a/static/assets/fonts/fonticons/IconFont.woff2 b/static/assets/fonts/fonticons/IconFont.woff2
index 689a16424211c4d4dc1113b0e85bd46e3f600d3f..95f9347c48c39145ff8c6ba9efc9e5741f41b741 100644
Binary files a/static/assets/fonts/fonticons/IconFont.woff2 and b/static/assets/fonts/fonticons/IconFont.woff2 differ
diff --git a/static/osuny-theme-version b/static/osuny-theme-version
index b91cebaa0bc2ae2eff0a46fa7ebd4944e1b065f1..4a2ecbb14995b98b5fb9fac97d6d48e192188d68 100644
--- a/static/osuny-theme-version
+++ b/static/osuny-theme-version
@@ -1 +1 @@
-v5.2
\ No newline at end of file
+v6.0.3
\ No newline at end of file
diff --git a/static/osuny/icon.png b/static/osuny/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8037459303346a4f81c83af38646b8db06a26dc7
Binary files /dev/null and b/static/osuny/icon.png differ