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..feae6792b95bbd66c0ac12430956417c061efa16 100644
--- a/assets/js/theme/design-system/mainMenu.js
+++ b/assets/js/theme/design-system/mainMenu.js
@@ -1,4 +1,4 @@
-import { breakpoints } from '../utils/breakpoints';
+import { breakpoints, isMobile } from '../utils/breakpoints';
import { a11yClick } from '../utils/a11y';
const CLASSES = {
@@ -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 = {
@@ -59,19 +59,17 @@ class MainMenu {
}
resize () {
- 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) {
+ if (this.state.isMobile === isMobile()) {
return null;
}
- this.state.isMobile = isMobile;
+ this.state.isMobile = isMobile();
this.closeEverything();
-
}
toggleMainMenu (open = !this.state.isOpened) {
@@ -150,7 +148,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/theme/utils/breakpoints.js b/assets/js/theme/utils/breakpoints.js
index 4bb5c1e37d4fb6de7f1b5115304a224d6d9a4f3b..d0dba054d32f89a40e0571efa2d8d298343a0f40 100644
--- a/assets/js/theme/utils/breakpoints.js
+++ b/assets/js/theme/utils/breakpoints.js
@@ -8,7 +8,7 @@ const breakpoints = {
};
const isMobile = function() {
- return window.innerWidth <= breakpoints.md
+ return window.innerWidth <= breakpoints.lg
}
export {
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 5ac7b61b494fd5b02e728b00924be9bb5320de75..0a5043efa9b81d49656bd169a37bb0e46ccbbc5f 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -1,427 +1,9 @@
-// MAIN COLORS
-$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
-
-// 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
-
-// TYPOGRAPHY
-
-// Fonts family
-$body-font-family: "Baskerville", "Times New Roman", "Times", serif !default
-$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-
-// Headings
-$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-line-height: 120% !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-line-height: 120% !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-line-height: 130% !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-line-height: 130% !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-line-height: 130% !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-line-height: 130% !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-line-height: 120% !default
-$lead-weight: $heading-font-weight !default
-
-$lead-sidebar-font-family: $lead-font-family !default
-$lead-sidebar-size-desktop: px2rem(32) !default
-$lead-sidebar-line-height: $lead-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-weight: $lead-sidebar-weight !default
-
-// Body
-$body-size-desktop: px2rem(22) !default
-$body-size: px2rem(18) !default
-$body-line-height: 160% !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-line-height: 130% !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-line-height: 130% !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-line-height: 150% !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-line-height: 120% !default
-$quote-weight: normal !default
-$quote-style: italic !default
-
-// Link
-$link-underline-offset: 0.2em !default
-$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
-
-// Chip
-$chip-background: $color-background !default
-$chip-background-hover: $color-background-alt !default
-$chip-border: 1px solid $color-border !default
-$chip-border-radius: $btn-border-radius !default
-$chip-color: $color-text !default
-
-// Form
-$form-btn-color: $color-background !default
-$form-btn-background-color: $color-accent !default
-$form-input-border-radius: 4px !default
-
-// Z-index
-$zindex-nav-accessibility: 1010 !default
-$zindex-stretched-link: 2 !default
-$zindex-header: 52 !default
-$zindex-body-overlay: 51 !default
-$zindex-toc: 60 !default
-$zindex-toc-cta: 49 !default
-$zindex-modal: 72 !default
-$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-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-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-logo-height: 32px !default
-$header-logo-height-desktop: $header-logo-height !default
-$header-height: 87px !default
-$header-height-desktop: 96px !default
-$header-sticky-invert-logo: false !default
-$header-border-bottom-width: 1px !default
-
-// Navs
-$body-overlay-color: rgba(0, 0, 0, 0.3) !default
-
-// Footer
-$footer-color: $color-text !default
-$footer-background-color: $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-text-hidden: false !default
-$dropdown-i18n-background-color: $color-background !default
-$dropdown-i18n-color: $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-credit-color: $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
-
-// Icons
-$icons: ()
-$icons: map-merge($icons, ("arrow": "\ff01"))
-$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-next": "\e909"))
-$icons: map-merge($icons, ("arrow-previous": "\e908"))
-$icons: map-merge($icons, ("arrow-right": "\ff00"))
-$icons: map-merge($icons, ("burger": "\e902"))
-$icons: map-merge($icons, ("burger-close": "\e905"))
-$icons: map-merge($icons, ("caret": "\e904"))
-$icons: map-merge($icons, ("caret-top": "\e914"))
-$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, ("check": "\ff06"))
-$icons: map-merge($icons, ("check-inline": "\ff07"))
-$icons: map-merge($icons, ("close": "\e90e"))
-$icons: map-merge($icons, ("copy": "\ff03"))
-$icons: map-merge($icons, ("copy-inline": "\ff04"))
-$icons: map-merge($icons, ("download": "\e900"))
-$icons: map-merge($icons, ("eye": "\e901"))
-$icons: map-merge($icons, ("facebook": "\e90b"))
-$icons: map-merge($icons, ("globe": "\ff10"))
-$icons: map-merge($icons, ("instagram": "\e90a"))
-$icons: map-merge($icons, ("link-blank": "\e903"))
-$icons: map-merge($icons, ("link-blank-block": "\ff05"))
-$icons: map-merge($icons, ("linkedin": "\e90c"))
-$icons: map-merge($icons, ("list-hyphen": "\e917"))
-$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, ("social": "\e915"))
-$icons: map-merge($icons, ("social-facebook": "\ee01"))
-$icons: map-merge($icons, ("social-instagram": "\ee02"))
-$icons: map-merge($icons, ("social-linkedin": "\ee03"))
-$icons: map-merge($icons, ("social-mastodon": "\ee04"))
-$icons: map-merge($icons, ("social-peertube": "\ee05"))
-$icons: map-merge($icons, ("social-rss": "\ee06"))
-$icons: map-merge($icons, ("social-tiktok": "\ee07"))
-$icons: map-merge($icons, ("social-vimeo": "\ee08"))
-$icons: map-merge($icons, ("social-x": "\ee09"))
-$icons: map-merge($icons, ("social-youtube": "\ee0a"))
-$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, ("whatsapp": "\e919"))
-$icons: map-merge($icons, ("email": "\e920"))
-$icons: map-merge($icons, ("telegram": "\e921"))
-
-// Breakpoints
-// TODO: réécrire en sass les mixins bootstrap
-$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, desktop: 992px, lg: 992px, xl: 1200px, xxl: 1440px) !default
-
-// System
-
-// Lightbox
-$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-font-family: $body-font-family !default
-$toc-font-size: $body-size !default
-$toc-font-size-desktop: $body-size-desktop !default
-$toc-line-height: $body-line-height !default
-$toc-title-font-family: $meta-font-family !default
-$toc-title-font-size: $meta-size !default
-$toc-title-font-size-desktop: $meta-size-desktop !default
-$toc-sticky-transition: 0.4s
-$toc-overlay-color: $body-overlay-color !default
-
-// Table
-$table-head-font-size: $h4-size !default
-$table-head-font-size-desktop: $h4-size-desktop !default
-$table-body-size: $body-size !default
-$table-body-size-desktop: $body-size-desktop !default
-
-// BLOCKS
-// Base
-$block-space-y: $spacing3 !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 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 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-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 posts
-$block-posts-grid-columns: 3 !default
-
-// Block timeline
-$block-timeline-horizontal-background: $color-background-alt !default
-$block-timeline-horizontal-color: $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-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 key_figures
-
-// TODO : overkill ?
-$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-font-size: px2rem(16) !default
-$block-key_figures-number-font-size: px2rem(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-lg: px2rem(20) !default
-$block-key_figures-number-font-size-lg: px2rem(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-font-size-xxl: $block-key_figures-font-size-xl !default
-$block-key_figures-number-font-size-xxl: px2rem(80) !default
-
-// Block gallery
-$block-gallery-carousel-background: $color-background-alt !default
-$block-gallery-carousel-max-height: 70vh !default
-
-// Block image
-$block-image-max-height-with-sidebar: calc(100vh - var(--header-height)) !default
-$block-image-max-height-without-sidebar: none !default
-
-// Block video
-$block-video-background: $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
-// 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
-
-// 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
-
-// Animations
-$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
-$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
-
-// Icons
-$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
+// L'ordre d'appel des fichiers est important
+@import configuration/spacings
+@import configuration/colors
+@import configuration/typography
+@import configuration/icons
+@import configuration/animations
+@import configuration/components
+@import configuration/blocks
+@import configuration/sections
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 5d19ea74895cceb39812fd6751342040d802853f..8fe28937e1de3e2fd1d88dda102a1b1d5322e621 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -1,483 +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
-
-@mixin flexbox-grid($cols: 12, $gap-y: $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} )
-
-// 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)
- color: $hero-credit-color
- &: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
- right: 0
- @include media-breakpoint-up(desktop)
- padding-left: $spacing1
- padding-bottom: $spacing0
- padding-top: $spacing0
- padding-right: $spacing1
- 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..c085e5cddb9fa23153df24ff420fe0532de42fab
--- /dev/null
+++ b/assets/sass/_theme/_variables.sass
@@ -0,0 +1,176 @@
+\: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}
+
+ // -------------- //
+ // HEADING //
+ // ---------------//
+
+ --heading-margin-top: #{$heading-margin-top}
+ --heading-margin-bottom: #{$heading-margin-bottom}
+ // In page without sidebar
+ @include media-breakpoint-up(desktop)
+ body:not(.full-width)
+ --heading-margin-top: #{ $heading-margin-top-with-sidebar}
+ --heading-margin-bottom: #{$heading-margin-bottom-with-sidebar}
+ main > .blocks, body.full-width
+ --heading-margin-top: #{ $heading-margin-top-desktop}
+ --heading-margin-bottom: #{$heading-margin-bottom-desktop}
diff --git a/assets/sass/_theme/blocks/base.sass b/assets/sass/_theme/blocks/base.sass
index 0adf48cef3fa0d87d9645aeae2ab83934847f5d5..fa3a7009f10f6c1c6ae3ffb3bc34823f89b7fd8a 100644
--- a/assets/sass/_theme/blocks/base.sass
+++ b/assets/sass/_theme/blocks/base.sass
@@ -1,23 +1,30 @@
.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
+ margin-bottom: var(--heading-margin-bottom)
&:not(:first-child)
- margin-top: $spacing3
- @include in-page-without-sidebar
- margin-top: $spacing4
+ margin-top: var(--heading-margin-top)
@include in-page-without-sidebar
h2
- width: col(8)
+ width: columns(8)
+
+.heading + .block
+ margin-top: var(--heading-margin-bottom)
// Specific
$backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background, .block-chapter--alt_background, .block-timeline--horizontal, .block-pages--cards"
@@ -30,18 +37,8 @@ $backgrounded_blocks: ".block-call_to_action, .block-chapter--accent_background,
&:is(#{$backgrounded_blocks})
margin-bottom: 0
-// Heading + chapter
-.heading + .block-chapter
- margin-top: $spacing1
-
// 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 6cc19179e39b82d2bc7669dfe257599fc6328fd7..d059a9fa2d798608267be1338ddca1914d94a339 100644
--- a/assets/sass/_theme/blocks/gallery.sass
+++ b/assets/sass/_theme/blocks/gallery.sass
@@ -2,21 +2,22 @@
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%
figcaption
@include small
+ margin-top: $spacing-2
position: relative
+ > * + *
+ margin-top: $spacing-1
p
margin-bottom: 0
.credit
@@ -30,39 +31,59 @@
&--grid
.gallery
- align-items: baseline
@include in-page-with-sidebar
- @include flexbox-grid(3, half($grid-gutter))
+ @include flexbox-grid(2)
@include in-page-without-sidebar
@include flexbox-grid(4)
@include media-breakpoint-down(desktop)
- @include flexbox-grid(2, half($grid-gutter-sm))
+ @include flexbox-grid(2)
&--with-text
@include in-page-without-sidebar
- @include flexbox-grid(4, half($grid-gutter), $grid-gutter)
- figure
- display: flex
- flex-direction: column
- gap: space(3)
+ @include flexbox-grid(4)
+
+ &--large
+ figure
+ margin-bottom: $spacing-5
+ @include media-breakpoint-down(desktop)
+ picture
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
+ @include in-page-without-sidebar
+ &.image-portrait,
+ &.image-square
+ picture
+ width: columns(8)
+ margin-left: offset(2)
+ @include in-page-without-sidebar
+ figure
+ &.image-portrait,
+ &.image-square
figcaption
- &::after
- content: 'Â '
+ margin-left: offset(2)
+ margin-right: offset(2)
+ figcaption
+ display: flex
+ justify-content: space-between
+ align-items: baseline
+ p
+ max-width: columns(8)
+ *
+ flex: 1 1
+ .credit
+ margin-top: 0
+ text-align: right
+
&--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
@@ -72,7 +93,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
@@ -81,14 +102,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
@@ -99,18 +118,14 @@
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: space(2)
&__arrows
- margin-left: px2rem(-18)
+ margin-left: pxToRem(-18)
order: 2
@media (min-height: 800px)
padding-top: space(10)
@@ -119,10 +134,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
@@ -131,10 +146,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 31e62c47b843d9f952610f0fc38165016ae6b10d..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
@@ -131,31 +126,30 @@
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
@@ -163,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
@@ -191,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
@@ -206,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
@@ -226,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
@@ -244,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)
@@ -260,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
@@ -285,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
@@ -306,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..c73f7f078284e371a77752d3b55e1493814a64ea 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
- [itemprop=headline]
+ @include author-and-time-side-to-side
+ .post-title
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
- [itemprop=headline]
+ padding-top: $spacing-2
+ .post-title
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
@@ -176,38 +180,38 @@
&--highlight
.highlight-post
- [itemprop=headline]
- margin-bottom: $spacing0
+ .post-title
+ 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
@include media-breakpoint-up(desktop)
.highlight
- [itemprop=headline]
+ .post-title
@include h2
.list
article
- [itemprop=headline]
+ .post-title
@include h4
@include in-page-with-sidebar
@@ -215,15 +219,15 @@
.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)
- [itemprop=headline]
+ .post-title
grid-column: 1 / 7
.post-categories
grid-column: 1 / 7
@@ -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)
+ .post-title
+ @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/configuration/animations.sass b/assets/sass/_theme/configuration/animations.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1ad05c74953e36bd2f191988464d0b309f3246f2
--- /dev/null
+++ b/assets/sass/_theme/configuration/animations.sass
@@ -0,0 +1,3 @@
+// Animations
+$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2) !default
+$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1) !default
diff --git a/assets/sass/_theme/configuration/blocks.sass b/assets/sass/_theme/configuration/blocks.sass
new file mode 100644
index 0000000000000000000000000000000000000000..25331466971a38677f679488fd381897570e1bb0
--- /dev/null
+++ b/assets/sass/_theme/configuration/blocks.sass
@@ -0,0 +1,105 @@
+// HEADING
+// Under desktop breakpoint
+$heading-margin-top: $spacing-4 !default
+$heading-margin-bottom: $spacing-2 !default
+// Upper desktop breakpoint without sidebar
+$heading-margin-top-desktop: $spacing-6 !default
+$heading-margin-bottom-desktop: $spacing-3 !default
+// Upper desktop breakpoint with sidebar
+$heading-margin-top-with-sidebar: $spacing-6 !default
+$heading-margin-bottom-with-sidebar: $spacing-3 !default
+
+// BLOCKS
+// Base
+
+// 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: 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: 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: 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: 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: 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: 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: var(--color-border) !default
+$block-testimonials-pagination-progress-background: var(--color-accent) !default
+
+// Block key_figures
+
+// TODO : overkill ?
+$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: pxToRem(16) !default
+$block-key_figures-number-font-size: pxToRem(32) !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: 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: pxToRem(60) !default
+
+$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
+$block-key_figures-number-font-size-xxl: pxToRem(80) !default
+
+// Block gallery
+$block-gallery-carousel-background: var(--color-background-alt) !default
+$block-gallery-carousel-max-height: 70vh !default
+
+// Block image
+$block-image-max-height-with-sidebar: calc(100vh - var(--header-height)) !default
+$block-image-max-height-without-sidebar: none !default
+
+// Block video
+$block-video-background: var(--color-background-alt) !default
diff --git a/assets/sass/_theme/configuration/colors.sass b/assets/sass/_theme/configuration/colors.sass
new file mode 100644
index 0000000000000000000000000000000000000000..156a5fc3c3c1d06a2e35807a9527399c15677bfb
--- /dev/null
+++ b/assets/sass/_theme/configuration/colors.sass
@@ -0,0 +1,24 @@
+// MAIN COLORS
+$color-accent: #0038FF !default
+$color-text: #000000 !default
+$color-text-alt: #454545 !default
+$color-background: #FFFFFF !default
+$color-background-alt: #F2F2F2 !default
+$color-border: rgba(0, 0, 0, 0.30) !default
+$color-selection: $color-background !default
+$color-selection-background: rgba($color-text, .7) !default
+
+// Scheme Dark colors (enable dark mode in your hugo configuration file)
+$has-dark-mode: 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
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/components.sass b/assets/sass/_theme/configuration/components.sass
new file mode 100644
index 0000000000000000000000000000000000000000..4d77d7bc8c63bae4c07d7d19f5b7a1fe6379be7a
--- /dev/null
+++ b/assets/sass/_theme/configuration/components.sass
@@ -0,0 +1,106 @@
+// 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: 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: var(--color-text) !default
+
+// Form
+$form-btn-color: var(--color-background) !default
+$form-btn-background-color: var(--color-accent) !default
+$form-input-border-radius: 4px !default
+
+// Header
+$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: 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: 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
+$header-height-desktop: 96px !default
+$header-sticky-invert-logo: false !default
+$header-border-bottom-width: 1px !default
+
+// Navs
+$body-overlay-color: rgba(0, 0, 0, 0.3) !default
+
+// Footer
+$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: pxToRem(32) !default
+$footer-text-hidden: false !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: 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: var(--color-text-alt) !default
+
+// System
+
+// Lightbox
+$lightbox-overlay-color: rgba(0, 0, 0, 0.90) !default
+$lightbox-backdrop: blur(16px) !default
+
+// Table of content
+$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
+$toc-line-height: $body-line-height !default
+$toc-title-font-family: $meta-font-family !default
+$toc-title-font-size: $meta-size !default
+$toc-title-font-size-desktop: $meta-size-desktop !default
+$toc-sticky-transition: 0.4s
+$toc-overlay-color: $body-overlay-color !default
+
+// Table
+$table-head-font-size: $h4-size !default
+$table-head-font-size-desktop: $h4-size-desktop !default
+$table-body-size: $body-size !default
+$table-body-size-desktop: $body-size-desktop !default
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/icons.sass b/assets/sass/_theme/configuration/icons.sass
new file mode 100644
index 0000000000000000000000000000000000000000..0a0f0fc871b84e281a63f2b1c110f469f47b25f3
--- /dev/null
+++ b/assets/sass/_theme/configuration/icons.sass
@@ -0,0 +1,83 @@
+// 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-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"))
+$icons: map-merge($icons, ("social-mastodon": "\ee04"))
+$icons: map-merge($icons, ("social-peertube": "\ee05"))
+$icons: map-merge($icons, ("social-rss": "\ee06"))
+$icons: map-merge($icons, ("social-tiktok": "\ee07"))
+$icons: map-merge($icons, ("social-vimeo": "\ee08"))
+$icons: map-merge($icons, ("social-x": "\ee09"))
+$icons: map-merge($icons, ("social-youtube": "\ee0a"))
+$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"))
+
+// Icons
+$icon-burger-margin-right: -12px
+$icon-close-margin-right: -12px
+$icon-toc-margin-right: -14px
+$icon-arrow-previous-margin-left: -18px // cf. testimonial
+$icon-social-margin-right: -14px
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/sections.sass b/assets/sass/_theme/configuration/sections.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8d85e5a47f8f93f5d40132cb32e8043a49e86a23
--- /dev/null
+++ b/assets/sass/_theme/configuration/sections.sass
@@ -0,0 +1,22 @@
+// Sections
+$article-media-aspect-ratio: 2 !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: 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
diff --git a/assets/sass/_theme/configuration/spacings.sass b/assets/sass/_theme/configuration/spacings.sass
new file mode 100644
index 0000000000000000000000000000000000000000..9358d34c229e7c7107002f8624d5c8648bde9d1d
--- /dev/null
+++ b/assets/sass/_theme/configuration/spacings.sass
@@ -0,0 +1,33 @@
+// Breakpoints
+// TODO: réécrire en sass les mixins bootstrap
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, desktop: 992px, lg: 992px, xl: 1200px, xxl: 1440px) !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
+$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
+
+$minimum-accessible-size: pxToRem(44) !default
+
+// Z-index
+$zindex-nav-accessibility: 1010 !default
+$zindex-stretched-link: 2 !default
+$zindex-header: 52 !default
+$zindex-body-overlay: 51 !default
+$zindex-toc-offcanvas: 60 !default
+$zindex-toc: 50 !default
+$zindex-toc-cta: 49 !default
+$zindex-modal: 72 !default
+$zindex-aside: 48 !default
+$zindex-footer: 50 !default
\ No newline at end of file
diff --git a/assets/sass/_theme/configuration/typography.sass b/assets/sass/_theme/configuration/typography.sass
new file mode 100644
index 0000000000000000000000000000000000000000..c43edc029d52b8f811d2462e440e2f0fad35a095
--- /dev/null
+++ b/assets/sass/_theme/configuration/typography.sass
@@ -0,0 +1,131 @@
+// TYPOGRAPHY
+// Fonts family
+$body-font-family: "Baskerville", "Times New Roman", "Times", serif !default
+$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+
+// Headings
+$heading-font-weight: normal !default
+
+// h1
+$h1-font-family: $heading-font-family !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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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
+
+// Link
+$link-underline-offset: 0.2em !default
+$link-underline-thickness: 1px !default
+$link-transition: text-decoration-color .3s ease !default
+$link-unhover-decoration-color-alpha: 0.3 !default
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 1654b45e43da591da911d8d9beadbbb1f457f124..f0870a8a1db94df86db86b976b4d8d0c80ab2ec6 100644
--- a/assets/sass/_theme/design-system/footer.sass
+++ b/assets/sass/_theme/design-system/footer.sass
@@ -1,40 +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: $spacing0
+ 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
@@ -62,21 +61,21 @@ footer#document-footer
&::after
transform: rotate(-180deg)
&::before
- margin-right: $spacing0
+ margin-right: $spacing-2
&::after
- margin-left: $spacing0
+ margin-left: $spacing-2
button[aria-expanded="true"]
- min-width: px2rem(150)
- outline: $spacing0 solid $dropdown-i18n-background-color
+ min-width: $spacing-6
+ outline: $spacing-2 solid $dropdown-i18n-background-color
.dropdown-menu
@include meta
background: $dropdown-i18n-background-color
- margin-left: -$spacing0
- margin-right: -$spacing0
- margin-top: $spacing0
+ margin-left: -$spacing-2
+ margin-right: -$spacing-2
+ margin-top: $spacing-2
a
color: $dropdown-i18n-color
- padding: $spacing0
+ padding: $spacing-2
ul
li + li
margin-top: 0
@@ -86,7 +85,7 @@ footer#document-footer
padding: 0
position: absolute
width: fit-content
- min-width: calc(#{px2rem(150)} + #{$spacing0} * 2)
+ min-width: calc(#{pxToRem(150)} + #{$spacing-2} * 2)
a
padding-top: 0
a:focus-visible
@@ -99,7 +98,7 @@ footer#document-footer
@if $footer-icons-enabled
&-social
.nav-social + .site-links
- margin-top: $spacing1
+ margin-top: $spacing-3
&.site-links li
align-items: center
display: flex
@@ -134,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
@@ -150,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 9dbce7b4f9340785707d5a6d7bb394976f8f6b3c..844e04318e653f1078ac00413b2263d339ae72fd 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -18,9 +18,9 @@
@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: $h2-size
&.toggle-both
@@ -31,7 +31,7 @@
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
@@ -39,63 +39,60 @@
.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
@@ -103,33 +100,33 @@
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
@@ -141,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
@@ -217,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..3082a0a96e1c2818a738c1aa12abb942b005738d 100644
--- a/assets/sass/_theme/design-system/table_of_contents.sass
+++ b/assets/sass/_theme/design-system/table_of_contents.sass
@@ -6,12 +6,12 @@
right: 0
bottom: 0
margin-top: 0
- z-index: $zindex-toc
- width: calc(#{col-outside-container(4)} + #{$grid-gutter} * 2)
+ z-index: $zindex-toc-offcanvas
+ 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,25 @@
// 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)
+ z-index: $zindex-toc
.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 +185,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 058348065720011af57f825b5e7c4f2172d3f0af..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,54 +121,45 @@ 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
- word-break: break-word
- h1, h2, h3, h4, h5, h6, p, ul
- margin-top: $spacing1
- &:first-child, meta + &
- margin-top: 0
-
%multiple-lists
ul, ol
ul, ol
- padding-left: $spacing0
+ padding-left: $spacing-2
@include media-breakpoint-up(desktop)
- padding-left: $spacing1
+ padding-left: $spacing-3
.rich-text
- @include rich-text
+ word-break: break-word
@extend %multiple-lists
+ h1, h2, h3, h4, h5, h6, p, ul
+ margin-top: $spacing-3
+ &:first-child, meta + &
+ margin-top: 0
.content
section
@@ -204,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
@@ -227,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
@@ -256,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
@@ -298,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
@@ -310,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)
@@ -354,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 216dc1a36961d8272f38687b9b0b7dc3b4df5d6a..c99d5465e5a26f6f80347faf510480321c234dff 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -1,80 +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/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 ba00c16d443cde276c11121845f1debb45b206c2..95dc596c4c112238cb5c59e997515f8b274f1967 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
@@ -27,7 +27,7 @@
text-decoration: none
@include media-breakpoint-down(desktop)
.events
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
.archive-link
text-align: left
@@ -35,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
@@ -56,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
@@ -79,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: ', '
@@ -99,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
@@ -116,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)
@@ -140,24 +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
@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
- width: col(2)
+ 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,30 @@
display: flex
flex-direction: row
position: relative
- grid-gap: $grid-gutter
+ gap: var(--grid-gutter)
+ .event
- margin-top: $grid-gutter
+ margin-top: var(--grid-gutter)
&-content
+ display: flex
+ flex-direction: column
+ .event-description
+ order: 2
+ .event-description + .event-categories
+ margin-bottom: $spacing-2
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,27 +252,29 @@
width: 100%
@include media-breakpoint-up(desktop)
.media
- width: col(4, 8)
- &-dates
+ width: columns(4)
+ .event-dates
@include h3
- margin-bottom: $spacing2
+ margin-bottom: $spacing-4
.event-title,
.event-subtitle,
hgroup
@include h2
@include media-breakpoint-down(desktop)
flex-direction: column
- grid-gap: 0
.media
- margin-left: calc(-#{$grid-gutter-sm} /2)
- margin-right: calc(-#{$grid-gutter-sm} /2)
- aspect-ratio: 1
- img
- margin-bottom: $spacing0
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
@include in-page-without-sidebar
align-items: center
- &-dates
+ .event-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/locations.sass b/assets/sass/_theme/sections/locations.sass
new file mode 100644
index 0000000000000000000000000000000000000000..a556be5fff50751699508aff0c7bb350e678e43b
--- /dev/null
+++ b/assets/sass/_theme/sections/locations.sass
@@ -0,0 +1,45 @@
+.locations
+ &--list
+ .location + .location
+ margin-top: $spacing-4
+ @include media-breakpoint-up(desktop)
+ .location
+ flex-direction: row
+ .media
+ width: columns(4)
+ &-content
+ width: columns(6)
+ &--grid
+ .location-title
+ @include h3
+ @include in-page-with-sidebar
+ @include grid(2)
+ @include in-page-without-sidebar
+ @include grid(4)
+
+.location
+ display: flex
+ gap: $spacing-3 var(--grid-gutter)
+ flex-direction: column
+ position: relative
+ a
+ @include stretched-link
+ text-decoration: none
+ .media
+ order: -1
+ aspect-ratio: 1.3
+ background: var(--color-background-alt)
+ img
+ display: block
+ width: 100%
+ height: 100%
+ object-fit: cover
+ &-title
+ @include icon(arrow, after, true)
+ @include hover-translate-icon(after)
+ &-description
+ margin-top: $spacing-3
+ @include media-breakpoint-down(desktop)
+ .media
+ margin-left: var(--grid-gutter-negative)
+ margin-right: var(--grid-gutter-negative)
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/organizations.sass b/assets/sass/_theme/sections/organizations.sass
index 45c1a85a14420c5cd6d3f268331301bd545c1e02..cfdf77b8b406f17d481558b6c7e95ff886491d0c 100644
--- a/assets/sass/_theme/sections/organizations.sass
+++ b/assets/sass/_theme/sections/organizations.sass
@@ -10,11 +10,11 @@
display: block
.media
@include handle-svg-fit
- background: $color-background-alt
- margin-bottom: $spacing0
+ background: $organization-background-color
+ margin-bottom: $spacing-2
order: -1
overflow: hidden
- padding: $spacing1
+ padding: $spacing-3
picture
aspect-ratio: 1
display: block
@@ -42,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
@@ -76,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)
@@ -90,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 af4003d695c34b7bc1566bdf3ffe7d8d128ca581..f22c8ccad9e9ea684b4867536b1589b4fc6a2adf 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,81 +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 picture
+ @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: $spacing3
+ 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 fd0c985ebabac85445a3fab18bb8451498d2ff90..5986cf3786b85b51b9388f9252c2c2965dd5f688 100644
--- a/assets/sass/_theme/sections/posts.sass
+++ b/assets/sass/_theme/sections/posts.sass
@@ -1,25 +1,18 @@
.post
- @include article($post-media-background)
+ @include article
+ .post-title
+ @include h3
+ a
+ @include stretched-link
+ display: block
+ text-decoration: none
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 +20,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
+ .post-title + p
+ 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
@@ -64,17 +57,17 @@
time
font-size: $h5-size
.post-content
- [itemprop=headline],
+ .post-title,
> 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
@@ -91,60 +84,11 @@
.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
@@ -153,4 +97,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..7eb130902101e39a7afc0cdeea68d7137633edd7 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -1,5 +1,7 @@
.program
@include article
+ h2, h3, .program-title
+ @include article-title
div.programs,
section.programs
@@ -13,7 +15,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 +23,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 +51,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 +67,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 +90,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 +100,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 +119,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 +133,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 +145,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 +162,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..f3b7750e4f51620b4007abf10810586ded6485d4
--- /dev/null
+++ b/assets/sass/_theme/sections/projects.sass
@@ -0,0 +1,46 @@
+.project
+ @include article(auto)
+ .project-title
+ @include article-title
+
+.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..d462fff52544510fd2f93834a34639c4dd9f381d 100644
--- a/assets/sass/_theme/sections/volumes.sass
+++ b/assets/sass/_theme/sections/volumes.sass
@@ -1,5 +1,7 @@
.volume
@include article
+ .volume-title
+ @include article-title
.suptitle
@include meta
@@ -23,9 +25,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 +37,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..0c6f5918d19ede470da5427d0b919c32cd164ce7
--- /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
+ 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 article-title
+ @include h3
+ a
+ @include stretched-link
+ display: block
+ text-decoration: none
+
+@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 d4d95864787cd9b55f0f45c3c0fab1c7890637f9..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,
- .block-pages,
- .persons__section, .block-persons,
- .posts__section, .block-posts, .post-sidebar,
- .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 fa8733f4a06d13be3a29d58c30618d166d8531a1..d6feac23512d5be4669da460c4c7c2e3d4167ff1 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,12 +55,18 @@ params:
default_image: false
index:
truncate_description: 200 # Set to 0 to disable truncate
+ layout: grid # grid | list
papers:
default_image: false
sidebar:
direction: start
volumes:
default_image: false
+ locations:
+ default_image: false
+ index:
+ truncate_description: 200
+ layout: list # grid | list
persons:
index:
layout: grid # grid | list
@@ -73,9 +88,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:
@@ -103,7 +138,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
blocks:
call_to_action:
mobile: 375
@@ -116,7 +151,11 @@ params:
features:
mobile: 350
tablet: 400
- desktop: 900
+ desktop: 750
+ key_figures:
+ mobile: 100
+ tablet: 100
+ desktop: 150
image:
mobile: 480x850
tablet: 768x1360
@@ -159,21 +198,29 @@ params:
mobile: 170
tablet: 350
desktop: 415
+ large:
+ mobile: 400
+ tablet: 800
+ desktop: 1920
+ 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
@@ -182,25 +229,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
@@ -213,7 +260,7 @@ params:
hero:
mobile: 400
tablet: 800
- desktop: 900
+ desktop: 750
item:
mobile: 350
tablet: 990
@@ -222,12 +269,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
@@ -240,35 +287,61 @@ 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
- desktop: 300x356
\ No newline at end of file
+ desktop: 300x356
+ locations:
+ hero:
+ mobile: 400
+ tablet: 800
+ desktop: 900
+ hero_single:
+ mobile: 400
+ tablet: 800
+ desktop: 900
+ item:
+ mobile: 350
+ tablet: 450
+ desktop: 900
\ No newline at end of file
diff --git a/i18n/en.yml b/i18n/en.yml
index 6fd7068d1bc737b29117fa46a7e05f8ef87a8fc7..6e6ab11386480a6e0a629b9c63872e0ad5bf98cc 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,9 +231,29 @@ 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
+ certifications:
+ qualiopi: Qualiopi, processus certifié, République Française
contacts: Contacts
evaluation: Evaluation
objectives: Objectives
@@ -262,6 +279,7 @@ programs:
posts: News
toc:
admission: Admission
+ certification: Certification
essential: Essential
pedagogy: Pedagogy
presentation: Presentation
@@ -278,6 +296,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..3012898a19eda4680cbecece12393f81f5c4807a 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,9 +232,29 @@ 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
+ certifications:
+ qualiopi: Qualiopi, processus certifié, République Française
contacts: Contacts
evaluation: Modalités d’évaluation
objectives: Objectifs
@@ -249,6 +264,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
@@ -265,6 +284,7 @@ programs:
posts: Actualités
toc:
admission: Admission
+ certification: Certification
essential: Essentiel
pedagogy: Pédagogie
presentation: Présentation
@@ -281,6 +301,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/diplomas/list.html b/layouts/diplomas/list.html
index 549c0d595b7fea69d9333c8fd0c0d866be5e5ea1..242efe4d103d9d448f8a1c8dcdc1e5f38ea6eed0 100644
--- a/layouts/diplomas/list.html
+++ b/layouts/diplomas/list.html
@@ -11,7 +11,7 @@
{{ partial "contents/list.html" . }}
<div class="container">
- {{ partial "diplomas/diplomas.html" . }}
+ {{ partial "diplomas/diplomas.html" ( dict "diplomas" .Paginator.Pages ) }}
</div>
</div>
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/locations/list.html b/layouts/locations/list.html
new file mode 100644
index 0000000000000000000000000000000000000000..0ea776a646b431000e664d03cccbe328db7aec74
--- /dev/null
+++ b/layouts/locations/list.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+ {{ partial "locations/hero-list.html" . }}
+
+ <div class="document-content">
+ {{ partial "locations/summary.html" (dict
+ "with_container" true
+ "context" .
+ ) }}
+
+ {{ partial "contents/list.html" . }}
+
+ <div class="container">
+ {{ partial "locations/locations.html" . }}
+ {{ partial "commons/pagination.html" . }}
+ </div>
+ </div>
+
+{{ end }}
diff --git a/layouts/locations/term.html b/layouts/locations/term.html
new file mode 100644
index 0000000000000000000000000000000000000000..647b1bfffcfd6d5192e695d639290205be76b875
--- /dev/null
+++ b/layouts/locations/term.html
@@ -0,0 +1,33 @@
+{{ define "main" }}
+ {{ partial "locations/hero-single.html" . }}
+
+ <div class="document-content" itemscope itemtype="https://schema.org/EducationalOrganization">
+ <meta itemprop="name" content="{{ partial "PrepareHTML" .Title }}">
+ <meta itemprop="url" content="{{ .Permalink }}">
+ {{ with .Params.summary }}<meta itemprop="description" content="{{ . | safeHTML }}">{{ end }}
+
+ {{ partial "locations/summary.html" (dict
+ "context" .
+ "block_wrapped" true
+ ) }}
+
+ {{ partial "contents/list.html" . }}
+
+ <div class="container">
+
+ {{ with .Params.diplomas }}
+
+ {{/* Get diplomas collection from diploma's paths */}}
+ {{ $diplomas := slice }}
+ {{ range . }}
+ {{ with site.GetPage (printf "/diplomas/%s" .path) }}
+ {{ $diplomas = $diplomas | append . }}
+ {{ end }}
+ {{ end }}
+
+ {{ partial "diplomas/diplomas.html" ( dict "diplomas" $diplomas ) }}
+ {{ end }}
+ {{ partial "commons/pagination.html" . }}
+ </div>
+ </div>
+{{ end }}
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/H2Extract b/layouts/partials/H2Extract
deleted file mode 100644
index fdf28d8e83e8909c2787a109facdd5fd331cdee0..0000000000000000000000000000000000000000
--- a/layouts/partials/H2Extract
+++ /dev/null
@@ -1,2 +0,0 @@
-{{ $list := findRE "<h2.*?>(.|\n)*?</h2>" . }}
-{{ return $list }}
diff --git a/layouts/partials/blocks/templates/definitions.html b/layouts/partials/blocks/templates/definitions.html
index 64a79a9fc914fd145ad62fea0563e178eaaa8d5e..d61c4ac01e40d80819a2eb1c6eae620bc502bd22 100644
--- a/layouts/partials/blocks/templates/definitions.html
+++ b/layouts/partials/blocks/templates/definitions.html
@@ -8,6 +8,7 @@
{{ partial "blocks/top.html" (dict
"title" $block.title
"heading_level" $block.ranks.self
+ "description" .description
)}}
<div class="definitions">
{{- range .elements }}
diff --git a/layouts/partials/blocks/templates/gallery.html b/layouts/partials/blocks/templates/gallery.html
index c9777aaafc0c754c0dc7cea8587c938c294a5cec..c740d848bb53ceaf2d24840787b4850df71f3d4d 100644
--- a/layouts/partials/blocks/templates/gallery.html
+++ b/layouts/partials/blocks/templates/gallery.html
@@ -14,6 +14,8 @@
{{- if eq $layout "carousel" -}}
{{ partial "blocks/templates/gallery/carousel" . }}
+ {{- else if eq $layout "large" -}}
+ {{ partial "blocks/templates/gallery/large" . }}
{{- else -}}
{{ partial "blocks/templates/gallery/grid" . }}
{{- end -}}
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 afffc61150c5e274c053a8019b729c94f261672b..dc777bd3d947eeaa34ccdce1c58bca0fbe77e800 100644
--- a/layouts/partials/blocks/templates/gallery/grid.html
+++ b/layouts/partials/blocks/templates/gallery/grid.html
@@ -4,12 +4,18 @@
{{- $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 }}
@@ -19,18 +25,10 @@
{{ end }}
<a class="glightbox"
role="button"
- data-glightbox="type: image; {{ if $lightbox_text }}description: {{ partial "PrepareText" $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/gallery/large.html b/layouts/partials/blocks/templates/gallery/large.html
new file mode 100644
index 0000000000000000000000000000000000000000..742b6f5a945554aaa321f075f1d043e08c93e32a
--- /dev/null
+++ b/layouts/partials/blocks/templates/gallery/large.html
@@ -0,0 +1,44 @@
+<div class="gallery">
+ {{ range .images }}
+ {{ if .id }}
+ {{- $image := partial "GetMedia" .id -}}
+ {{- $image_class := printf "image-%s" (partial "GetImageDirection" .) -}}
+ {{- if $image -}}
+ <figure class="{{ $image_class }}">
+ {{ partial "commons/image.html"
+ (dict
+ "image" .file
+ "alt" .alt
+ "sizes" site.Params.image_sizes.blocks.gallery.large
+ )}}
+ {{ if not site.Params.image_sizes.design_system.lightbox.disabled }}
+ {{ $lightbox_text := false }}
+ {{ if and .text .credit }}
+ {{ $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; {{ 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" -}}">
+ </a>
+ {{ end }}
+ {{ if or .text .credit }}
+ <figcaption>
+ {{ with .text }}
+ <p>{{ . | safeHTML }}</p>
+ {{ end }}
+ {{ with .credit }}
+ <div class="credit">{{ . | safeHTML }}</div>
+ {{ end }}
+ </figcaption>
+ {{ end }}
+ </figure>
+ {{- end -}}
+ {{ end }}
+ {{ end }}
+</div>
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/locations.html b/layouts/partials/blocks/templates/locations.html
new file mode 100644
index 0000000000000000000000000000000000000000..2bd4ba1f7b2fa96228c389b0e7927bf29917afb0
--- /dev/null
+++ b/layouts/partials/blocks/templates/locations.html
@@ -0,0 +1,30 @@
+{{ $block := .block }}
+{{ $block_class := partial "GetBlockClass" .block }}
+{{ $layout := .block.data.layout | default "grid" }}
+
+{{- with .block.data -}}
+ <div class="{{ $block_class }}">
+ <div class="container">
+ <div class="block-content">
+ {{ partial "blocks/top.html" (dict
+ "title" $block.title
+ "description" .description
+ "heading_level" $block.ranks.self
+ )}}
+
+ <div class="locations locations--{{- $layout }}">
+ {{ $location_heading := printf "h%d" ( $block.ranks.children | default 2 ) }}
+ {{ range .locations }}
+ {{ $location := site.GetPage ( printf "/locations/%s" .slug ) }}
+ {{ with $location }}
+ {{ partial "locations/location.html" (dict
+ "location" .
+ "heading" $location_heading
+ ) }}
+ {{ end }}
+ {{ end }}
+ </div>
+ </div>
+ </div>
+ </div>
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/pages.html b/layouts/partials/blocks/templates/pages.html
index 64394a082c26a6abd62fc1415e37fdb721eeb2ce..ee6e9a41ab919d2b0d9de97fe15b5fb629adf654 100644
--- a/layouts/partials/blocks/templates/pages.html
+++ b/layouts/partials/blocks/templates/pages.html
@@ -22,7 +22,7 @@
{{ $title = .Title }}
{{ end }}
{{ if .Params.bodyclass }}
- {{- $page_class = printf "block-page-%s" .Params.bodyclass }}
+ {{- $page_class = printf "block-%s" .Params.bodyclass }}
{{ end }}
{{ if $show_main_description }}
{{- $main_description = partial "GetTruncateContent" ( dict
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/highlight.html b/layouts/partials/blocks/templates/posts/highlight.html
index ee6b189ed7612f824693239de569c59ff50f96e4..082a9b00f2c5d48cb468781fbf64f38f4ee89c2f 100644
--- a/layouts/partials/blocks/templates/posts/highlight.html
+++ b/layouts/partials/blocks/templates/posts/highlight.html
@@ -1,7 +1,7 @@
{{ $heading_level := .heading_level | default 3 }}
{{ $heading := printf "h%d" $heading_level }}
{{ $heading_tag := (dict
- "open" ((printf "<%s itemprop='headline'>" $heading) | safeHTML)
+ "open" ((printf "<%s class='post-title' itemprop='headline'>" $heading) | safeHTML)
"close" ((printf "</%s>" $heading) | safeHTML)
) }}
<div class="highlight">
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 edfcc8229ec80e3f3d809709dff10153603ab5e9..302c39f770dae54aded02bcfa11b25aac74397ed 100644
--- a/layouts/partials/commons/image-default.html
+++ b/layouts/partials/commons/image-default.html
@@ -6,7 +6,6 @@
{{ with index site.Params.image_sizes.sections $section_type }}
{{ $sizes := .item }}
- {{ $sizes }}
{{- partial "commons/image.html"
(dict
"image" $image
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/diplomas.html b/layouts/partials/diplomas/diplomas.html
index 0c15a8d06e4c969510d6100de26fdc6a3230a16d..e15146e49d719a4925560bcce729babe74d590cd 100644
--- a/layouts/partials/diplomas/diplomas.html
+++ b/layouts/partials/diplomas/diplomas.html
@@ -1,5 +1,7 @@
+{{ $diplomas := .diplomas }}
+
<ul class="diplomas">
- {{ range .Paginator.Pages }}
+ {{ range $diplomas }}
<li>
<a href="{{ .Permalink }}" aria-label="{{ i18n "commons.more_aria" (dict "Title" .Title) }}">
{{- partial "PrepareHTML" .Title -}}
@@ -21,6 +23,7 @@
</ol>
</div>
</li>
+
{{ end }}
</ul>
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/events/event.html b/layouts/partials/events/event.html
index cc57c58597762a4ecb8d99815e4596e3117f08a2..c8aa12298368a113b958f2bb4353c25dd976dbc1 100644
--- a/layouts/partials/events/event.html
+++ b/layouts/partials/events/event.html
@@ -41,7 +41,7 @@
{{ end -}}
</div>
{{ end }}
- {{ if and .Params.events_categories $show_status }}
+ {{ if and .Params.dates.status $show_status }}
<p class="event-status">
{{ if eq .Params.dates.status "current"}}
{{- i18n "blocks.events.current" -}}
@@ -62,21 +62,21 @@
"length" site.Params.events.index.truncate_description
) }}
</p>
+
+ {{ if eq $layout "large" }}
+ <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
+ {{ end }}
</div>
{{- end -}}
-
- {{ if and .Params.events_categories $show_category }}
- <p class="event-categories">
- {{- range $index, $category := .GetTerms "events_categories" -}}
- <span>{{- $category.Title -}}</span>
- {{- end -}}
- </p>
- {{ end }}
- {{- end -}}
-
- {{ if eq $layout "large" }}
- <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
{{ end }}
+
+ {{ if and .Params.events_categories $show_category }}
+ <p class="event-categories">
+ {{- range $index, $category := .GetTerms "events_categories" -}}
+ <span>{{- $category.Title -}}</span>
+ {{- end -}}
+ </p>
+ {{- end -}}
</div>
<div class="media">
{{- if .Params.image -}}
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/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/locations/hero-list.html b/layouts/partials/locations/hero-list.html
new file mode 100644
index 0000000000000000000000000000000000000000..14226f2b67b7d592e26ea957f9e743476c6aea6b
--- /dev/null
+++ b/layouts/partials/locations/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.locations.hero
+ "context" .
+ ) -}}
diff --git a/layouts/partials/locations/hero-single.html b/layouts/partials/locations/hero-single.html
new file mode 100644
index 0000000000000000000000000000000000000000..45f9ecc0b7cfbbaec5bb1941b497273f1afcb536
--- /dev/null
+++ b/layouts/partials/locations/hero-single.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.locations.hero_single
+ "context" .
+ ) -}}
diff --git a/layouts/partials/locations/location.html b/layouts/partials/locations/location.html
new file mode 100644
index 0000000000000000000000000000000000000000..13d4da3ffdca9b44e91417a4e11be6b8a612175d
--- /dev/null
+++ b/layouts/partials/locations/location.html
@@ -0,0 +1,40 @@
+{{ $location := .location }}
+{{ $heading := .heading | default "h2" }}
+{{ $heading_tag := (dict
+ "open" ((printf "<%s itemprop='headline' class='location-title'>" $heading) | safeHTML)
+ "close" ((printf "</%s>" $heading) | safeHTML)
+ ) }}
+
+{{ with $location }}
+ <article class="location" itemscope itemtype="https://schema.org/EducationalOrganization">
+ <div class="location-content">
+ {{- $title := partial "PrepareHTML" .Title -}}
+ {{ $heading_tag.open }}
+ <a href="{{ .Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">{{ $title }}</a>
+ {{ $heading_tag.close }}
+
+ {{- if (partial "GetTextFromHTML" .Params.summary) -}}
+ <div class="location-description">
+ <p itemprop="description">
+ {{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.locations.index.truncate_description
+ ) }}
+ </p>
+ </div>
+ {{- end -}}
+ </div>
+
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.sections.locations.item
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" "locations" -}}
+ {{- end -}}
+ </div>
+ </article>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/locations/locations.html b/layouts/partials/locations/locations.html
new file mode 100644
index 0000000000000000000000000000000000000000..c86f3b5eb4ad9f276ad7c4b3e3a82b59532815e6
--- /dev/null
+++ b/layouts/partials/locations/locations.html
@@ -0,0 +1,8 @@
+<div class="locations locations--{{- site.Params.locations.index.layout -}}">
+ {{ range .Paginator.Pages }}
+ {{ partial "locations/location.html" (dict
+ "location" .
+ "heading" "h2"
+ ) }}
+ {{ end }}
+</div>
diff --git a/layouts/partials/locations/summary.html b/layouts/partials/locations/summary.html
new file mode 100644
index 0000000000000000000000000000000000000000..089279d8e6196a9d0353cd6bb18928a2eaeedaca
--- /dev/null
+++ b/layouts/partials/locations/summary.html
@@ -0,0 +1 @@
+{{- partial "commons/summary-in-content.html" . -}}
\ 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/pages/body.html b/layouts/partials/pages/body.html
deleted file mode 100644
index b0cd31be797ee21e7c7e69cb1f823cc58b4b3d52..0000000000000000000000000000000000000000
--- a/layouts/partials/pages/body.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{{ if (partial "GetTextFromHTML" .) }}
- <section>
- <div class="container">
- <div itemprop="articleBody" id="page-informations">
- {{
- partial "PrepareHTML" (
- partial "H2AddId" .
- )
- }}
- </div>
- </div>
- </section>
-{{ end }}
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..6cfcd2d4fb1671c29531b6949d4e2429927a9c88 100644
--- a/layouts/partials/persons/hero-single.html
+++ b/layouts/partials/persons/hero-single.html
@@ -1,44 +1,9 @@
-{{- $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 }}
+{{- $title := or .Params.header_text .Title -}}
-<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 -}}
-
- {{ 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>
-
-{{- 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" .Params.image
+ "context" .
+ "sizes" site.Params.image_sizes.sections.persons.hero_single
+ ) -}}
diff --git a/layouts/partials/posts/body.html b/layouts/partials/posts/body.html
deleted file mode 100644
index 081e75e35be1a8dcb5530dfe5350df14dae84706..0000000000000000000000000000000000000000
--- a/layouts/partials/posts/body.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div itemprop="articleBody">
- {{
- partial "PrepareHTML" (
- partial "H2AddId" .Content
- )
- }}
- {{ partial "PrepareHTML" .Params.text }}
-</div>
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/posts/post.html b/layouts/partials/posts/post.html
index 0137312c24227bf98f93550bec9aec4ead3f75d3..eb9f661498990a25fe620c8d05ae53db427a3329 100644
--- a/layouts/partials/posts/post.html
+++ b/layouts/partials/posts/post.html
@@ -2,7 +2,7 @@
{{- $direction := "" -}}
{{ $heading := .heading | default "h2" }}
{{ $heading_tag := (dict
- "open" ((printf "<%s itemprop='headline'>" $heading) | safeHTML)
+ "open" ((printf "<%s class='post-title' itemprop='headline'>" $heading) | safeHTML)
"close" ((printf "</%s>" $heading) | safeHTML)
) }}
{{ $index := .index}}
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/certification.html b/layouts/partials/programs/certification.html
new file mode 100644
index 0000000000000000000000000000000000000000..c857a4cb51f424af1bfd2da05994c12a98db7087
--- /dev/null
+++ b/layouts/partials/programs/certification.html
@@ -0,0 +1,16 @@
+{{- if .Params.certifications.qualiopi.certified -}}
+<section id="{{ urlize (i18n "programs.toc.certification") }}">
+ <div class="container">
+ <div class="content">
+ <h2>{{ i18n "programs.toc.certification" }}</h2>
+ <div>
+ <section id="{{ urlize (i18n "programs.qualiopi") }}">
+ <img src="/assets/images/certifications/qualiopi.svg" alt="{{ i18n "programs.certifications.qualiopi" }}">
+ {{- if partial "GetTextFromHTML" .Params.certifications.qualiopi.text -}}
+ {{- partial "PrepareHTML" .Params.certifications.qualiopi.text -}}
+ {{- end -}}
+ </section>
+ </div>
+ </div>
+</section>
+{{- end -}}
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/single.html b/layouts/partials/programs/single.html
index 1d184cd910b42fdaa63976ba0409a8d7f8b82a0a..a8fcaa614b95a9279e421eb2fcfac4e6b0a57540 100644
--- a/layouts/partials/programs/single.html
+++ b/layouts/partials/programs/single.html
@@ -33,6 +33,7 @@
{{- partial "programs/pedagogy.html" . -}}
{{- partial "programs/results.html" . -}}
{{- partial "programs/admission.html" . -}}
+ {{- partial "programs/certification.html" . -}}
{{- $category := site.GetPage (printf "/posts_categories/%s" .Params.related_category ) -}}
{{- partial "programs/related.html" $category -}}
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/programs/toc.html b/layouts/partials/programs/toc.html
index 1d66911494f60be672a8bddf884a77366e523865..9ddea5d93943a275ddbedaf389dabc6730ae1da3 100644
--- a/layouts/partials/programs/toc.html
+++ b/layouts/partials/programs/toc.html
@@ -14,6 +14,8 @@
{{ $accessibility := partial "GetTextFromHTML" .context.Params.accessibility }}
{{ $other := partial "GetTextFromHTML" .context.Params.other }}
+{{ $certification := .context.Params.certifications.qualiopi.certified }}
+
{{ $roles := .context.Params.roles }}
{{ $contacts := partial "GetTextFromHTML" .context.Params.contacts }}
@@ -101,6 +103,11 @@
</ol>
{{ end -}}
</li>
+ {{- if $certification -}}
+ <li>
+ <a href="#{{ urlize (i18n "programs.toc.certification") }}">{{ i18n "programs.toc.certification" }}</a>
+ </li>
+ {{- end -}}
{{- if gt (len $related_posts) 0 -}}
<li>
<a href="#{{ urlize (i18n "programs.toc.related") }}">{{ i18n "programs.toc.related" }}</a>
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..c6f825ad4e665bbeca3429981ae2228d122aed08
--- /dev/null
+++ b/layouts/partials/projects/project.html
@@ -0,0 +1,50 @@
+{{ $project := .project }}
+{{ $heading := .heading | default "h2" }}
+{{ $heading_tag := (dict
+ "open" ((printf "<%s class='project-title' 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/partials/volumes/volume.html b/layouts/partials/volumes/volume.html
index 2ff521816ad11ff47f33a8e972279017f04d6368..d5ca03d13c8aabbf06f453f23d0a764d81a6d9d4 100644
--- a/layouts/partials/volumes/volume.html
+++ b/layouts/partials/volumes/volume.html
@@ -1,7 +1,7 @@
<article class="volume" itemscope itemtype="https://schema.org/Book https://schema.org/PublicationVolume">
<hgroup>
<p class="suptitle" itemprop="volumeNumber">{{ i18n "volumes.volume_number" (dict "Number" .Params.Number) }}</p>
- <h2><a href="{{ .Permalink }}" title="{{ i18n "commons.more_aria" (dict "Title" .Title) }}" itemprop="name">{{ partial "PrepareHTML" .Title }}</a></h2>
+ <h2 class="volume-title"><a href="{{ .Permalink }}" title="{{ i18n "commons.more_aria" (dict "Title" .Title) }}" itemprop="name">{{ partial "PrepareHTML" .Title }}</a></h2>
</hgroup>
<div class="media">
{{- if .Params.image -}}
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 33406b15b666bdd13c88d3ec708f91cfe16c5185..0b2260601999fdd12a1dc2e1eaa755c58db4f7dc 100644
--- a/layouts/programs/list.html
+++ b/layouts/programs/list.html
@@ -2,7 +2,7 @@
{{ if eq .File.Path "programs/_index.html" }}
{{ partial "programs/hero.html" . }}
{{ partial "programs/list.html" . }}
-{{ else }}
+ {{ else }}
{{ partial "programs/hero-single.html" . }}
{{ partial "programs/single.html" . }}
{{ 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/assets/images/certifications/qualiopi.svg b/static/assets/images/certifications/qualiopi.svg
new file mode 100644
index 0000000000000000000000000000000000000000..890e4989a911e80310541cbfdf7a17a174037c2c
--- /dev/null
+++ b/static/assets/images/certifications/qualiopi.svg
@@ -0,0 +1,57 @@
+<svg width="274" height="140" viewBox="0 0 274 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="274" height="140" fill="white"/>
+<path d="M26.0714 71.9621H27.6344V72.9994C28.4818 72.0941 29.5741 71.6037 30.93 71.6037C33.8301 71.6037 35.6944 73.9047 35.6944 76.6017C35.6944 79.2988 33.8489 81.5998 30.93 81.5998C29.5929 81.5998 28.4818 81.1094 27.6344 80.2041V85.7491H26.0714V71.9621ZM30.7417 80.1287C32.7002 80.1287 34.0561 78.5632 34.0561 76.6017C34.0561 74.6403 32.719 73.0748 30.7417 73.0748C29.4611 73.0748 28.35 73.6972 27.6344 74.8477V78.3746C28.35 79.5063 29.4611 80.1475 30.7417 80.1475V80.1287Z" fill="#332878"/>
+<path d="M39.9881 71.9621V73.1126C40.666 72.3016 41.5134 71.7735 42.681 71.7735C42.9823 71.7735 43.246 71.8112 43.4719 71.8866V73.5086C43.1895 73.4332 42.9258 73.3766 42.5492 73.3766C41.3439 73.3766 40.553 73.999 39.9692 74.942V81.2226H38.4062V71.9621H39.9881Z" fill="#332878"/>
+<path d="M54.7145 76.5829C54.7145 79.2799 52.6807 81.5809 49.7052 81.5809C46.7298 81.5809 44.696 79.2799 44.696 76.5829C44.696 73.8858 46.711 71.5849 49.7052 71.5849C52.6995 71.5849 54.7145 73.8858 54.7145 76.5829ZM53.0573 76.5829C53.0573 74.6591 51.6449 73.056 49.7241 73.056C47.8032 73.056 46.3344 74.6591 46.3344 76.5829C46.3344 78.5066 47.7467 80.1098 49.7241 80.1098C51.7014 80.1098 53.0573 78.4878 53.0573 76.5829Z" fill="#332878"/>
+<path d="M64.4317 78.733L65.6746 79.6949C64.8083 80.8453 63.4713 81.5809 61.7764 81.5809C58.7068 81.5809 56.7483 79.2799 56.7483 76.5829C56.7483 73.8858 58.7068 71.5849 61.7764 71.5849C63.4524 71.5849 64.8083 72.3393 65.6746 73.4709L64.4317 74.4328C63.8667 73.6029 62.9251 73.056 61.7952 73.056C59.8179 73.056 58.4055 74.6214 58.4055 76.5829C58.4055 78.5444 59.8179 80.1098 61.8141 80.1098C62.944 80.1098 63.8667 79.5628 64.4317 78.733Z" fill="#332878"/>
+<path d="M71.9456 81.5998C68.8195 81.5998 66.8986 79.2988 66.8986 76.6017C66.8986 73.9047 68.7065 71.6037 71.5689 71.6037C74.0924 71.6037 75.7119 73.32 75.7119 75.6399C75.7119 75.9982 75.6554 76.3754 75.5989 76.6395H68.5182V76.6772C68.5182 78.7141 69.9117 80.2041 71.9832 80.2041C73.1508 80.2041 74.1489 79.6571 74.7515 78.8273L75.9002 79.7326C75.034 80.8831 73.6592 81.6186 71.9267 81.6186L71.9456 81.5998ZM68.6312 75.3758H74.13C74.0735 74.0367 73.0943 72.924 71.5689 72.924C70.0435 72.924 69.0078 73.7727 68.6312 75.3758Z" fill="#332878"/>
+<path d="M78.612 78.997C79.2523 79.808 80.0244 80.2795 80.966 80.2795C82.0017 80.2795 82.5855 79.6571 82.5855 78.8461C82.5855 76.7526 78.0471 77.5259 78.0471 74.1876C78.0471 72.6976 79.2711 71.5849 81.0225 71.5849C82.3784 71.5849 83.5271 72.2073 84.1674 73.1126L83.0751 74.0556C82.5667 73.32 81.8887 72.9051 81.0413 72.9051C80.0809 72.9051 79.5724 73.4143 79.5724 74.1688C79.5724 76.2811 84.1109 75.5456 84.1109 78.7896C84.1109 80.5247 82.7173 81.5998 80.9848 81.5998C79.5159 81.5998 78.3672 81.0151 77.5198 79.9589L78.6308 78.997H78.612Z" fill="#332878"/>
+<path d="M86.898 78.997C87.5383 79.808 88.3104 80.2795 89.2519 80.2795C90.2877 80.2795 90.8715 79.6571 90.8715 78.8461C90.8715 76.7526 86.333 77.5259 86.333 74.1876C86.333 72.6976 87.5571 71.5849 89.3084 71.5849C90.6643 71.5849 91.8131 72.2073 92.4533 73.1126L91.3611 74.0556C90.8526 73.32 90.1747 72.9051 89.3273 72.9051C88.3669 72.9051 87.8584 73.4143 87.8584 74.1688C87.8584 76.2811 92.3969 75.5456 92.3969 78.7896C92.3969 80.5247 91.0033 81.5998 89.2708 81.5998C87.8019 81.5998 86.6532 81.0151 85.8057 79.9589L86.9168 78.997H86.898Z" fill="#332878"/>
+<path d="M101.568 71.9621H103.15V77.2053C103.15 79.9778 101.549 81.5998 99.0445 81.5998C96.5398 81.5998 94.958 79.9778 94.958 77.2053V71.9621H96.521V77.2619C96.521 79.0913 97.5003 80.1287 99.0821 80.1287C100.664 80.1287 101.606 79.0725 101.606 77.2619V71.9621H101.568Z" fill="#332878"/>
+<path d="M106.54 78.997C107.18 79.808 107.952 80.2795 108.893 80.2795C109.929 80.2795 110.513 79.6571 110.513 78.8461C110.513 76.7526 105.975 77.5259 105.975 74.1876C105.975 72.6976 107.199 71.5849 108.95 71.5849C110.306 71.5849 111.455 72.2073 112.095 73.1126L111.003 74.0556C110.494 73.32 109.816 72.9051 108.969 72.9051C108.008 72.9051 107.5 73.4143 107.5 74.1688C107.5 76.2811 112.038 75.5456 112.038 78.7896C112.038 80.5247 110.645 81.5998 108.912 81.5998C107.443 81.5998 106.295 81.0151 105.447 79.9589L106.558 78.997H106.54Z" fill="#332878"/>
+<path d="M126.859 78.733L128.102 79.6949C127.236 80.8453 125.899 81.5809 124.204 81.5809C121.134 81.5809 119.176 79.2799 119.176 76.5829C119.176 73.8858 121.134 71.5849 124.204 71.5849C125.88 71.5849 127.236 72.3393 128.102 73.4709L126.859 74.4328C126.294 73.6029 125.352 73.056 124.223 73.056C122.245 73.056 120.833 74.6214 120.833 76.5829C120.833 78.5444 122.245 80.1098 124.241 80.1098C125.371 80.1098 126.294 79.5628 126.859 78.733Z" fill="#332878"/>
+<path d="M134.373 81.5998C131.247 81.5998 129.326 79.2988 129.326 76.6017C129.326 73.9047 131.134 71.6037 133.996 71.6037C136.52 71.6037 138.139 73.32 138.139 75.6399C138.139 75.9982 138.083 76.3754 138.026 76.6395H130.945V76.6772C130.945 78.7141 132.339 80.2041 134.411 80.2041C135.578 80.2041 136.576 79.6571 137.179 78.8273L138.328 79.7326C137.461 80.8831 136.087 81.6186 134.354 81.6186L134.373 81.5998ZM131.058 75.3758H136.557C136.501 74.0367 135.522 72.924 133.996 72.924C132.471 72.924 131.435 73.7727 131.058 75.3758Z" fill="#332878"/>
+<path d="M142.565 71.9621V73.1126C143.243 72.3016 144.09 71.7735 145.258 71.7735C145.559 71.7735 145.823 71.8112 146.049 71.8866V73.5086C145.766 73.4332 145.502 73.3766 145.126 73.3766C143.921 73.3766 143.13 73.999 142.546 74.942V81.2226H140.983V71.9621H142.565Z" fill="#332878"/>
+<path d="M149.476 73.3955H147.725V71.9621H149.476V69.6423H151.058V71.9621H154.278V73.3955H151.058V78.1294C151.058 79.5817 151.792 79.9778 152.903 79.9778C153.506 79.9778 153.939 79.9023 154.278 79.7514V81.1471C153.845 81.3357 153.336 81.4112 152.677 81.4112C150.625 81.4112 149.457 80.3738 149.457 78.1106V73.3766L149.476 73.3955Z" fill="#332878"/>
+<path d="M156.557 68.4352C156.557 67.8505 157.046 67.3413 157.668 67.3413C158.289 67.3413 158.76 67.8316 158.76 68.4352C158.76 69.0387 158.289 69.5479 157.668 69.5479C157.046 69.5479 156.557 69.0576 156.557 68.4352ZM156.877 71.9432H158.44V81.2037H156.877V71.9432Z" fill="#332878"/>
+<path d="M162.489 71.9621V70.8305C162.489 68.8501 163.788 67.4544 165.784 67.4544C166.82 67.4544 167.611 67.8128 168.176 68.3597L167.197 69.4914C166.858 69.1142 166.443 68.869 165.803 68.869C164.786 68.869 164.071 69.6045 164.071 70.7927V71.9621H167.291V73.3955H164.071V81.2226H162.489V73.3955H160.737V71.9621H162.489Z" fill="#332878"/>
+<path d="M169.099 68.4352C169.099 67.8505 169.588 67.3413 170.21 67.3413C170.831 67.3413 171.302 67.8316 171.302 68.4352C171.302 69.0387 170.831 69.5479 170.21 69.5479C169.588 69.5479 169.099 69.0576 169.099 68.4352ZM169.419 71.9432H170.982V81.2037H169.419V71.9432Z" fill="#332878"/>
+<path d="M178.759 81.5998C175.633 81.5998 173.712 79.2988 173.712 76.6017C173.712 73.9047 175.52 71.6037 178.383 71.6037C180.906 71.6037 182.526 73.32 182.526 75.6399C182.526 75.9982 182.469 76.3754 182.413 76.6395H175.332V76.6772C175.332 78.7141 176.725 80.2041 178.797 80.2041C179.965 80.2041 180.963 79.6571 181.565 78.8273L182.714 79.7326C181.848 80.8831 180.473 81.6186 178.74 81.6186L178.759 81.5998ZM175.445 75.3758H180.944C180.887 74.0367 179.908 72.924 178.383 72.924C176.857 72.924 175.803 73.7727 175.445 75.3758ZM177.667 70.491L179.569 67.4356H181.339L179.192 70.491H177.667Z" fill="#332878"/>
+<path d="M192.281 53.592H220.811L192.281 82.7691V53.592Z" fill="#E10814"/>
+<path d="M192.281 53.592H220.811L192.281 24.5658V53.592Z" fill="#332878"/>
+<path d="M220.792 53.592H249.341L220.792 82.7691V53.592Z" fill="#332878"/>
+<path d="M220.792 53.592H249.341L220.792 24.5658V53.592Z" fill="#E10814"/>
+<path d="M38.8958 24.0189C40.9485 24.0189 42.8693 24.4149 44.6772 25.1882C46.485 25.9803 48.0669 27.0365 49.4416 28.3756C50.7975 29.7147 51.8709 31.2801 52.6618 33.0907C53.4528 34.9013 53.8294 36.844 53.8294 38.8809C53.8294 40.5406 53.5846 42.106 53.0761 43.5771C52.5677 45.0671 51.8897 46.4062 50.9858 47.6321C51.8521 48.462 52.53 49.4427 53.0573 50.5744C53.5658 51.6871 53.8294 52.913 53.8294 54.1956H47.4643C47.4643 53.7052 47.3513 53.2714 47.1065 52.8753C46.8617 52.4793 46.5603 52.1586 46.1837 51.9134C45.0726 52.517 43.9239 52.9696 42.6998 53.3091C41.4758 53.6486 40.214 53.8183 38.8958 53.8183C36.8432 53.8183 34.9223 53.4223 33.1333 52.649C31.3443 51.8569 29.7624 50.7818 28.4254 49.4239C27.0695 48.0659 26.0149 46.4628 25.224 44.6522C24.433 42.8416 24.0564 40.9178 24.0564 38.862C24.0564 36.8062 24.4518 34.8825 25.224 33.0719C26.0149 31.2613 27.0695 29.677 28.4254 28.3568C29.7812 27.0177 31.3443 25.9615 33.1333 25.1693C34.9223 24.3772 36.8432 24 38.8958 24V24.0189ZM30.4027 38.8997C30.4027 40.0879 30.6287 41.2007 31.0618 42.2192C31.5138 43.2376 32.1164 44.1429 32.8885 44.9162C33.6606 45.6895 34.5645 46.293 35.6003 46.7457C36.636 47.1983 37.7471 47.4058 38.8958 47.4058C40.0446 47.4058 41.1933 47.1795 42.229 46.7457C43.2648 46.293 44.1875 45.6895 44.9596 44.9162C45.7506 44.1429 46.3532 43.2565 46.8052 42.2192C47.2571 41.2007 47.4643 40.0879 47.4643 38.8997C47.4643 37.7115 47.2383 36.6365 46.8052 35.5992C46.3532 34.5618 45.7506 33.6565 44.9596 32.8833C44.1687 32.11 43.2648 31.5065 42.229 31.0538C41.1933 30.6012 40.0822 30.3937 38.8958 30.3937C37.7094 30.3937 36.636 30.62 35.6003 31.0538C34.5645 31.5065 33.6606 32.11 32.8885 32.8833C32.1164 33.6565 31.5138 34.5618 31.0618 35.5992C30.6098 36.6365 30.4027 37.7493 30.4027 38.8997Z" fill="#332878"/>
+<path d="M67.4071 54.3464C65.9006 54.3464 64.4882 54.0635 63.1888 53.4977C61.8894 52.9319 60.7783 52.1398 59.8556 51.1213C58.9328 50.1028 58.1984 48.9146 57.6711 47.519C57.1438 46.1233 56.8801 44.6145 56.8801 42.9547V31.4876H62.8686V42.9547C62.8686 43.6337 62.9628 44.2938 63.1323 44.9351C63.3018 45.5763 63.5843 46.161 63.9609 46.6514C64.3375 47.1606 64.8083 47.5567 65.3733 47.8773C65.9382 48.1791 66.6162 48.3488 67.3883 48.3488C68.1604 48.3488 68.8383 48.1979 69.4974 47.915C70.1565 47.6321 70.7027 47.2361 71.1923 46.7645C71.6819 46.293 72.0585 45.7084 72.341 45.0482C72.6235 44.3881 72.7742 43.6903 72.7742 42.9547V31.4876H78.7627V54.3087H72.7742V52.9696C71.9832 53.4034 71.1358 53.7429 70.2319 53.9881C69.3091 54.2333 68.3675 54.3464 67.3883 54.3464H67.4071Z" fill="#332878"/>
+<path d="M97.7262 31.8837H103.677V54.0258H97.7262V52.9696C96.0502 53.8938 94.2612 54.3464 92.3404 54.3464C90.7773 54.3464 89.3084 54.0447 87.9337 53.46C86.559 52.8565 85.3538 52.0455 84.318 51.0081C83.2823 49.9708 82.4537 48.7637 81.8699 47.3869C81.2673 46.0101 80.9848 44.539 80.9848 42.9736C80.9848 41.4082 81.2861 39.9371 81.8699 38.5603C82.4725 37.1834 83.2823 35.9764 84.318 34.9579C85.3538 33.9394 86.559 33.1285 87.9337 32.5249C89.3084 31.9214 90.7773 31.6385 92.3404 31.6385C93.3196 31.6385 94.2424 31.7516 95.1463 31.978C96.0502 32.2043 96.9165 32.5438 97.7262 32.9776V31.8837ZM92.3404 48.3488C93.0748 48.3488 93.7716 48.1979 94.4307 47.915C95.0898 47.6321 95.6736 47.2361 96.1444 46.7645C96.634 46.2742 97.0106 45.7084 97.2931 45.0671C97.5756 44.4258 97.7262 43.7092 97.7262 42.9547C97.7262 42.2003 97.5756 41.5213 97.2931 40.8612C97.0106 40.2011 96.634 39.6164 96.1444 39.1449C95.6547 38.6546 95.0898 38.2773 94.4307 37.9944C93.7716 37.7115 93.0748 37.5607 92.3404 37.5607C91.6059 37.5607 90.8903 37.7115 90.2312 37.9944C89.5721 38.2773 89.0071 38.6546 88.5363 39.1449C88.0467 39.6353 87.6701 40.2011 87.3876 40.8612C87.1051 41.5213 86.9545 42.2192 86.9545 42.9547C86.9545 43.6903 87.1051 44.407 87.3876 45.0671C87.6701 45.7084 88.0467 46.2742 88.5363 46.7645C89.026 47.2549 89.5909 47.6321 90.2312 47.915C90.8715 48.1979 91.5871 48.3488 92.3404 48.3488Z" fill="#332878"/>
+<path d="M112.697 24.8299V53.8561H106.577V24.8299H112.697Z" fill="#332878"/>
+<path d="M119.345 24.4715C120.287 24.4715 121.078 24.811 121.737 25.4711C122.377 26.1312 122.716 26.9422 122.716 27.8852C122.716 28.8283 122.396 29.6204 121.737 30.2805C121.096 30.9218 120.287 31.2613 119.345 31.2613C118.404 31.2613 117.594 30.9406 116.935 30.2805C116.276 29.6393 115.937 28.8283 115.937 27.8852C115.937 26.9422 116.276 26.1312 116.935 25.4711C117.594 24.811 118.404 24.4715 119.345 24.4715ZM122.339 32.0534V53.8749H116.219V32.0534H122.339Z" fill="#332878"/>
+<path d="M136.84 30.9972C138.459 30.9972 139.985 31.299 141.397 31.9025C142.809 32.5061 144.052 33.3359 145.107 34.3921C146.162 35.4483 146.99 36.6742 147.593 38.1076C148.195 39.5221 148.497 41.0498 148.497 42.6718C148.497 44.2938 148.195 45.8215 147.593 47.2361C146.99 48.6506 146.162 49.8954 145.107 50.9516C144.052 52.0077 142.828 52.8376 141.397 53.4411C139.966 54.0447 138.459 54.3464 136.84 54.3464C135.22 54.3464 133.695 54.0447 132.283 53.4411C130.87 52.8376 129.627 52.0077 128.573 50.9516C127.518 49.8954 126.689 48.6694 126.087 47.2361C125.484 45.8215 125.183 44.2938 125.183 42.6718C125.183 41.0498 125.484 39.5221 126.087 38.1076C126.689 36.6931 127.518 35.4483 128.573 34.3921C129.627 33.3359 130.851 32.5061 132.283 31.9025C133.695 31.299 135.22 30.9972 136.84 30.9972ZM136.84 48.3865C137.631 48.3865 138.365 48.2357 139.062 47.9339C139.759 47.6321 140.38 47.2361 140.889 46.708C141.397 46.1987 141.811 45.5952 142.094 44.8785C142.395 44.1807 142.546 43.4262 142.546 42.653C142.546 41.8797 142.395 41.1253 142.094 40.4274C141.793 39.7296 141.397 39.1072 140.889 38.598C140.38 38.0887 139.759 37.6738 139.062 37.3909C138.365 37.0891 137.612 36.9383 136.84 36.9383C136.068 36.9383 135.314 37.0891 134.618 37.3909C133.921 37.6927 133.299 38.0887 132.791 38.598C132.283 39.1072 131.868 39.7107 131.567 40.4274C131.266 41.1253 131.115 41.8797 131.115 42.653C131.115 43.4262 131.266 44.1807 131.567 44.8785C131.868 45.5763 132.264 46.1987 132.791 46.708C133.299 47.2172 133.902 47.6321 134.618 47.9339C135.314 48.2357 136.068 48.3865 136.84 48.3865Z" fill="#332878"/>
+<path d="M163.28 54.3087C162.3 54.3087 161.359 54.1956 160.436 53.9692C159.513 53.7429 158.666 53.4034 157.894 52.9696V60.9099H151.905V31.8837H157.894V32.9398C159.513 32.0157 161.302 31.563 163.28 31.563C164.843 31.563 166.312 31.8648 167.686 32.4495C169.061 33.0341 170.266 33.864 171.283 34.9013C172.3 35.9387 173.11 37.1457 173.712 38.5225C174.315 39.8993 174.598 41.3705 174.598 42.9359C174.598 44.5013 174.296 45.9724 173.712 47.3492C173.11 48.726 172.3 49.9331 171.283 50.9516C170.266 51.97 169.061 52.781 167.686 53.3846C166.312 53.9692 164.843 54.271 163.28 54.271V54.3087ZM163.28 37.5607C162.526 37.5607 161.83 37.7115 161.17 37.9944C160.53 38.2773 159.946 38.6546 159.476 39.1449C158.986 39.6353 158.609 40.2011 158.327 40.8424C158.044 41.4836 157.894 42.2003 157.894 42.9547C157.894 43.7092 158.044 44.3881 158.327 45.0482C158.609 45.7084 158.986 46.293 159.476 46.7645C159.965 47.2549 160.53 47.6321 161.17 47.915C161.811 48.1979 162.526 48.3488 163.28 48.3488C164.033 48.3488 164.711 48.1979 165.37 47.915C166.029 47.6321 166.613 47.2361 167.084 46.7645C167.573 46.2742 167.95 45.7084 168.232 45.0482C168.515 44.3881 168.665 43.6903 168.665 42.9547C168.665 42.2192 168.515 41.5025 168.232 40.8424C167.95 40.2011 167.573 39.6164 167.084 39.1449C166.594 38.6546 166.029 38.2773 165.37 37.9944C164.711 37.7115 164.014 37.5607 163.28 37.5607Z" fill="#332878"/>
+<path d="M180.247 24.4715C181.189 24.4715 181.98 24.811 182.639 25.4711C183.279 26.1312 183.618 26.9422 183.618 27.8852C183.618 28.8283 183.298 29.6204 182.639 30.2805C181.998 30.9218 181.189 31.2613 180.247 31.2613C179.305 31.2613 178.496 30.9406 177.837 30.2805C177.177 29.6393 176.838 28.8283 176.838 27.8852C176.838 26.9422 177.177 26.1312 177.837 25.4711C178.496 24.811 179.305 24.4715 180.247 24.4715ZM183.241 32.0534V53.8749H177.121V32.0534H183.241Z" fill="#332878"/>
+<path d="M36.5985 115.002C36.7114 114.889 36.8433 114.757 36.9563 114.625C37.1822 114.379 37.3894 114.134 37.653 113.908C37.7284 113.832 37.8037 113.776 37.879 113.719C37.8978 113.7 37.8978 113.663 37.9167 113.644C37.8225 113.682 37.7472 113.776 37.653 113.814C37.653 113.814 37.6154 113.795 37.653 113.776C37.7284 113.719 37.8037 113.663 37.879 113.606C37.879 113.606 37.8602 113.606 37.8602 113.568C37.5965 113.531 37.3894 113.719 37.2011 113.889C37.1634 113.908 37.1257 113.87 37.0881 113.87C36.7679 113.983 36.542 114.247 36.2406 114.379V114.342C36.1088 114.379 35.9958 114.455 35.864 114.493C35.6757 114.53 35.5062 114.511 35.3367 114.511C35.0919 114.53 34.8283 114.587 34.5835 114.643H34.5646C34.4328 114.681 34.301 114.738 34.188 114.794C34.188 114.794 34.188 114.813 34.1503 114.832C34.0938 114.87 34.0562 114.926 33.9997 114.945C33.8678 115.021 33.7737 115.115 33.6607 115.209C33.6607 115.209 33.6419 115.209 33.623 115.209C33.51 115.322 33.3971 115.417 33.2841 115.53C33.2841 115.53 33.2464 115.53 33.2087 115.53C33.2087 115.53 33.2087 115.53 33.2087 115.511C33.2087 115.473 33.2464 115.454 33.2652 115.417C33.2841 115.379 33.3029 115.341 33.3217 115.322C33.3406 115.285 33.3782 115.228 33.4159 115.19V115.172C33.4159 115.172 33.3971 115.172 33.3782 115.172C33.4912 115.077 33.6042 114.983 33.736 114.908C33.736 114.908 33.6984 114.908 33.7172 114.889C33.7172 114.87 33.736 114.851 33.7549 114.832C33.7549 114.832 33.6795 114.851 33.6607 114.889C33.6042 114.926 33.5665 115.021 33.4912 115.021C33.4912 115.021 33.4912 115.021 33.4535 115.021C33.4535 115.021 33.4535 115.021 33.4347 115.021C33.4347 115.021 33.4347 115.021 33.4347 115.002C33.4347 115.002 33.4347 115.002 33.4347 114.983C33.4347 114.983 33.4347 114.983 33.4347 114.964C33.4347 114.964 33.4347 114.926 33.4535 114.926C33.4535 114.926 33.4535 114.926 33.4535 114.908C33.4535 114.908 33.4535 114.889 33.4724 114.87V114.832C33.51 114.776 33.5665 114.738 33.6042 114.7C33.6042 114.7 33.7737 114.606 33.849 114.568C33.849 114.568 33.8678 114.549 33.8867 114.549C33.7737 114.587 33.6607 114.643 33.5477 114.719C33.5477 114.719 33.5289 114.719 33.51 114.719C33.51 114.719 33.4912 114.719 33.4535 114.719C33.4724 114.681 33.5289 114.662 33.5854 114.625C33.6042 114.625 33.623 114.625 33.623 114.643C34.2821 114.115 35.2049 114.247 35.977 113.983C36.0335 113.946 36.1088 113.908 36.1653 113.851C36.2783 113.814 36.3536 113.7 36.4855 113.644C36.6549 113.512 36.7679 113.38 36.8433 113.172C36.8433 113.154 36.8244 113.135 36.8244 113.135C36.5608 113.418 36.2406 113.663 35.9017 113.814C35.4685 114.04 34.9978 114.002 34.527 114.059C34.5458 114.021 34.5835 114.021 34.6399 114.021C34.6399 113.964 34.6776 113.946 34.7153 113.889H34.7718C34.7718 113.889 34.7718 113.851 34.8094 113.851C34.8471 113.851 34.9224 113.832 34.8848 113.832C34.8283 113.757 34.6964 113.889 34.5835 113.832C34.6211 113.795 34.6023 113.719 34.6399 113.7H34.7153L34.7529 113.606C35.0731 113.418 35.3556 113.267 35.6569 113.116C35.6004 113.116 35.5439 113.172 35.4874 113.135C35.525 113.135 35.4874 113.078 35.525 113.078C35.751 113.021 35.9393 112.889 36.1653 112.814C36.09 112.814 36.0147 112.871 35.9393 112.814C35.977 112.795 35.9958 112.757 36.0712 112.757V112.701C36.0712 112.701 36.09 112.682 36.1088 112.682C36.09 112.682 36.0712 112.663 36.0712 112.663C36.09 112.625 36.1465 112.644 36.203 112.607C36.1842 112.607 36.1465 112.607 36.1465 112.588C36.203 112.512 36.316 112.493 36.4101 112.456C36.3913 112.418 36.3348 112.456 36.3348 112.418C36.3348 112.418 36.3348 112.418 36.3725 112.418H36.3348C36.3348 112.418 36.316 112.361 36.316 112.343C36.429 112.192 36.429 112.003 36.5043 111.833C36.4855 111.833 36.4666 111.833 36.4666 111.814C36.2595 112.041 35.9205 112.135 35.6192 112.21H35.525C35.412 112.248 35.2802 112.248 35.1672 112.21C35.0919 112.173 35.0354 112.097 34.9601 112.041C34.7906 111.946 34.6211 111.852 34.4328 111.796C33.9243 111.626 33.3782 111.55 32.8321 111.569C33.0581 111.437 33.3029 111.437 33.5665 111.362C33.9243 111.267 34.2445 111.135 34.6211 111.154C34.5646 111.135 34.4705 111.154 34.414 111.154C34.1315 111.135 33.8302 111.211 33.5289 111.286C33.3217 111.324 33.1334 111.418 32.9263 111.456C32.7944 111.494 32.7379 111.626 32.5873 111.607V111.55C32.7944 111.305 33.0392 111.06 33.3782 111.022C33.7549 110.966 34.1127 111.022 34.4705 111.06C34.7341 111.079 34.9978 111.135 35.2614 111.211C35.3744 111.211 35.3932 111.381 35.4685 111.399C35.6004 111.437 35.7134 111.399 35.8452 111.475C35.8452 111.437 35.8263 111.399 35.8452 111.343C35.9205 111.267 36.0335 111.343 36.1088 111.324C36.2783 111.211 35.9582 111.041 35.8828 110.89C35.8828 110.871 35.9017 110.853 35.9017 110.853C36.0712 111.003 36.1842 111.173 36.3913 111.267C36.4855 111.305 36.7491 111.362 36.7114 111.249C36.6173 111.022 36.3913 110.834 36.2406 110.626V110.551C36.2406 110.551 36.203 110.532 36.1842 110.513V110.438C36.1842 110.438 36.1277 110.306 36.0712 110.249C36.0147 110.136 36.0523 110.004 36.0147 109.872C35.977 109.74 35.9582 109.645 35.9393 109.513C35.8828 109.155 35.7887 108.853 35.751 108.514C35.7134 108.118 35.977 107.797 36.1653 107.458C36.316 107.212 36.4855 106.967 36.7491 106.798C36.8056 106.552 36.9751 106.345 37.1446 106.137C37.3141 105.93 37.5965 105.817 37.7849 105.722C38.0673 105.59 38.331 105.515 38.331 105.515H24V116.53H34.188C34.5835 116.247 34.9789 116.115 35.525 115.832C35.7887 115.7 36.3913 115.436 36.5796 115.228M33.3782 113.738C33.3782 113.738 33.2464 113.757 33.2841 113.719C33.2841 113.606 33.4535 113.606 33.5289 113.568C33.5665 113.55 33.623 113.512 33.6795 113.531C33.7172 113.587 33.7737 113.568 33.8302 113.606C33.6984 113.738 33.5477 113.663 33.3971 113.738M30.2145 113.286C30.2145 113.286 30.1957 113.267 30.1957 113.248C30.4593 112.889 30.6664 112.569 30.8548 112.192C31.1184 112.041 31.3444 111.833 31.5704 111.607C31.9282 111.23 32.3048 110.909 32.7379 110.702C32.9074 110.645 33.1146 110.664 33.2841 110.702C33.2276 110.777 33.1146 110.758 33.0392 110.834C33.0204 110.834 33.0016 110.834 32.9828 110.815C33.0016 110.796 33.0016 110.777 33.0016 110.758C32.7944 110.985 32.4931 111.098 32.3425 111.362C32.2106 111.569 32.1353 111.833 31.8717 111.909C31.7964 111.928 31.8905 111.852 31.8717 111.871C31.2314 112.267 30.7606 112.739 30.271 113.304M32.0035 111.928C32.0035 111.928 31.9658 111.965 31.947 112.022C31.9282 112.06 31.9093 112.078 31.8717 112.097C31.8528 112.097 31.834 112.097 31.834 112.078C31.8528 112.003 31.9093 111.909 32.0035 111.89C32.0223 111.89 32.0223 111.89 32.0223 111.928M32.9828 115.04C32.9828 115.04 32.9451 115.077 32.9263 115.096C32.9451 115.096 32.9639 115.096 32.9451 115.134C32.9074 115.172 32.8509 115.228 32.7944 115.247C32.7944 115.247 32.7944 115.247 32.7568 115.247C32.7379 115.266 32.7003 115.304 32.6814 115.322C32.6626 115.341 32.5496 115.322 32.5873 115.304C32.6438 115.247 32.6814 115.209 32.7379 115.153C32.7756 115.115 32.7944 115.096 32.8321 115.077C32.8321 115.077 32.8509 115.04 32.8698 115.04C32.8886 115.04 33.0016 115.021 32.9828 115.04ZM32.6061 114.87C32.5308 114.926 32.4555 114.983 32.3801 115.021C32.286 115.077 32.1918 115.115 32.0977 115.153C32.0977 115.153 32.0788 115.153 32.06 115.153C31.9847 115.19 31.9093 115.247 31.8528 115.304C31.8528 115.304 31.834 115.304 31.8152 115.322C31.8152 115.322 31.7964 115.341 31.7775 115.341C31.7775 115.341 31.7399 115.379 31.7399 115.398C31.7399 115.398 31.7399 115.398 31.7022 115.436C31.7022 115.436 31.6457 115.436 31.6645 115.436C31.6645 115.436 31.6457 115.436 31.6269 115.436C31.6269 115.436 31.608 115.436 31.5892 115.436C31.5704 115.454 31.5327 115.473 31.5139 115.492C31.4762 115.53 31.4197 115.568 31.4009 115.624C31.4009 115.624 31.4009 115.624 31.4009 115.643C31.4009 115.643 31.4009 115.643 31.3821 115.643C31.3821 115.643 31.3821 115.605 31.3632 115.605C31.3821 115.587 31.4009 115.549 31.4385 115.53C31.4385 115.53 31.4385 115.511 31.4574 115.492L31.495 115.454C31.5139 115.417 31.5327 115.398 31.5515 115.36C31.5515 115.36 31.5515 115.322 31.5704 115.322C31.5704 115.322 31.5704 115.304 31.5892 115.285C31.5892 115.285 31.5892 115.247 31.608 115.228C31.608 115.228 31.608 115.228 31.608 115.209C31.608 115.209 31.608 115.19 31.608 115.172C31.6269 115.134 31.6645 115.096 31.6834 115.058C31.6457 115.077 31.6269 115.115 31.608 115.134C31.5892 115.134 31.5515 115.134 31.5704 115.096C31.5892 115.096 31.608 115.058 31.608 115.058C31.6457 115.021 31.6834 114.983 31.721 114.945C31.7399 114.945 31.7587 114.908 31.7775 114.889C31.7775 114.889 31.8152 114.851 31.8152 114.832C32.0223 114.643 32.3425 114.643 32.6061 114.53C32.7191 114.493 32.8321 114.549 32.9451 114.53C33.0016 114.53 33.0769 114.53 33.1334 114.568C32.9451 114.662 32.7756 114.794 32.6061 114.889M33.0392 113.436C33.0392 113.436 33.0957 113.436 33.1146 113.399H32.9451C32.9451 113.399 32.9263 113.38 32.9263 113.361C32.8133 113.38 32.7003 113.418 32.5873 113.436C32.4366 113.474 32.3236 113.587 32.1542 113.625C31.9282 113.7 31.7399 113.889 31.495 113.983C31.4762 113.983 31.4762 113.965 31.4762 113.946C31.495 113.87 31.5892 113.87 31.6269 113.795C31.6269 113.776 31.6269 113.757 31.608 113.757C31.7775 113.531 32.0035 113.399 32.2106 113.21V113.153C32.2106 113.153 32.3801 113.021 32.4178 112.927C32.4366 112.871 32.5308 112.776 32.6249 112.739C32.6249 112.72 32.5685 112.72 32.5685 112.682C32.4931 112.682 32.399 112.72 32.3236 112.663C32.3613 112.625 32.399 112.607 32.4555 112.588C32.4555 112.588 32.4178 112.588 32.399 112.55C32.3801 112.512 32.4366 112.456 32.512 112.456C32.6061 112.437 32.7003 112.437 32.7568 112.361C32.6061 112.342 32.4366 112.399 32.3048 112.324C32.399 112.06 32.5685 111.833 32.8321 111.701C32.8509 111.701 32.8886 111.701 32.8886 111.72C32.8886 111.833 32.8321 111.909 32.7191 111.928C32.8886 111.965 33.0581 111.965 33.2276 112.06C33.2087 112.097 33.1711 112.06 33.1522 112.06C33.2652 112.116 33.3782 112.078 33.4912 112.173C33.4347 112.229 33.3594 112.173 33.3029 112.173C33.9432 112.361 34.6399 112.512 35.1672 112.927C34.7153 113.154 34.2256 113.267 33.736 113.361C33.6795 113.361 33.623 113.361 33.5665 113.342C33.5665 113.361 33.5665 113.399 33.5477 113.399C33.4724 113.399 33.3971 113.399 33.3406 113.436C33.2652 113.474 33.1334 113.493 33.0769 113.436" fill="#332878"/>
+<path d="M54.338 105.289H42.5116C42.5116 105.289 42.5305 105.289 42.6246 105.345C42.7188 105.402 42.8506 105.458 42.9259 105.496C43.0766 105.572 43.2272 105.685 43.3214 105.836C43.3591 105.892 43.4155 106.024 43.3779 106.1C43.3402 106.194 43.3214 106.364 43.2084 106.42C43.0766 106.477 42.9259 106.477 42.7753 106.458C42.6999 106.458 42.6058 106.439 42.5305 106.42C42.8506 106.552 43.1331 106.684 43.3402 106.986C43.3591 107.024 43.4532 107.043 43.5285 107.043C43.5474 107.043 43.5474 107.08 43.5474 107.099C43.5097 107.137 43.472 107.156 43.4909 107.231H43.5474C43.6604 107.194 43.6415 106.986 43.7733 107.043C43.8675 107.099 43.924 107.25 43.8487 107.363C43.7733 107.439 43.6792 107.514 43.6039 107.571C43.585 107.609 43.585 107.684 43.6039 107.722C43.6604 107.797 43.6792 107.891 43.7169 107.967C43.7734 108.118 43.7922 108.288 43.8675 108.42C43.9428 108.74 44.037 109.042 44.0182 109.363C44.0182 109.532 43.9428 109.664 43.9993 109.834C44.037 110.004 44.15 110.117 44.2253 110.268C44.3006 110.4 44.3948 110.475 44.4513 110.607C44.5831 110.815 44.8091 111.022 44.6961 111.267C44.6396 111.418 44.4136 111.381 44.263 111.475C44.1312 111.588 44.2441 111.739 44.3006 111.852C44.4136 112.041 44.1688 112.173 44.037 112.229C44.0747 112.286 44.1688 112.267 44.1877 112.305C44.2065 112.399 44.3195 112.475 44.2441 112.569C44.1688 112.701 43.9052 112.757 44.037 112.946C44.1123 113.097 44.0747 113.248 44.0182 113.399C43.9617 113.587 43.7922 113.663 43.6415 113.719C43.5097 113.757 43.3779 113.757 43.2461 113.738C43.2084 113.719 43.1707 113.7 43.1142 113.7C42.7564 113.663 42.3986 113.55 42.0597 113.55C41.9467 113.568 41.8525 113.587 41.7584 113.625C41.6642 113.7 41.5889 113.776 41.5135 113.851C41.5135 113.851 41.4759 113.889 41.4759 113.908C41.4759 113.908 41.457 113.927 41.457 113.946C41.457 113.946 41.457 113.946 41.4382 113.964C41.3817 114.04 41.3252 114.115 41.2687 114.21C41.2687 114.21 41.2687 114.21 41.2687 114.247C41.1934 114.379 41.1557 114.493 41.1181 114.625C40.9863 115.096 41.0427 115.511 41.1369 115.605C41.1746 115.624 41.8148 115.832 42.2856 116.039C42.4928 116.133 42.6434 116.209 42.7753 116.284H54.3945V105.27L54.338 105.289Z" fill="#E10814"/>
+<path d="M43.2084 109.306C43.2084 109.306 43.4155 109.325 43.4155 109.363C43.3779 109.532 43.1331 109.57 43.0012 109.74H42.9448C42.9448 109.74 42.9071 109.891 42.8318 109.891C42.7753 109.872 42.6999 109.891 42.6434 109.891C42.7188 109.966 42.8318 110.042 42.9448 110.023C42.9636 110.023 43.0012 110.06 43.0012 110.098C43.0012 110.098 43.0201 110.098 43.0389 110.079C43.0577 110.079 43.0766 110.079 43.0766 110.098V110.174C43.0766 110.174 42.9071 110.211 42.8318 110.23C43.0013 110.268 43.1707 110.268 43.3026 110.23C43.4344 110.192 43.3026 109.985 43.3779 109.872C43.3402 109.872 43.3779 109.815 43.3402 109.815C43.3779 109.777 43.4155 109.702 43.472 109.683C43.5097 109.683 43.585 109.664 43.6039 109.627C43.6039 109.589 43.5285 109.57 43.5474 109.532C43.6792 109.457 43.7734 109.325 43.7357 109.193C43.7169 109.136 43.5474 109.136 43.4532 109.08C43.3402 109.042 43.2272 109.08 43.0954 109.099C43.0013 109.099 42.8883 109.155 42.7941 109.174C42.6434 109.212 42.5305 109.306 42.3986 109.381C42.5493 109.325 42.6999 109.306 42.8506 109.249C42.9636 109.249 43.0766 109.212 43.2084 109.249" fill="#808080"/>
+<path d="M33.8301 114.907C33.8679 114.907 33.8868 114.87 33.9057 114.851C33.8679 114.87 33.849 114.888 33.8301 114.907Z" fill="#293173"/>
+<path d="M37.8609 113.549C37.8609 113.549 37.8609 113.549 37.8224 113.569C37.8224 113.569 37.8609 113.569 37.8609 113.549Z" fill="#293173"/>
+<path d="M37.8797 113.587C37.8797 113.587 37.8797 113.587 37.8412 113.606C37.8412 113.606 37.8797 113.606 37.8797 113.587Z" fill="#293173"/>
+<path d="M59.9309 105.383H63.2641C65.6557 105.383 67.1435 106.609 67.1435 108.646C67.1435 109.947 66.5032 110.947 65.3921 111.475L68.8195 116.303H66.1642L63.2641 111.89H62.1342V116.303H59.9309V105.383ZM62.1342 107.269V110.004H63.3771C64.3187 110.004 64.8648 109.513 64.8648 108.608C64.8648 107.778 64.3187 107.269 63.3771 107.269H62.1342Z" fill="black"/>
+<path d="M70.3449 105.383H76.6912V107.269H72.5482V109.796H76.0697V111.682H72.5482V114.417H76.6912V116.303H70.3449V105.383ZM72.4917 104.44L74.243 102.327H76.5217L74.4878 104.44H72.4728H72.4917Z" fill="black"/>
+<path d="M79.4406 105.383H83.0375C85.4291 105.383 86.898 106.609 86.898 108.646C86.898 110.683 85.4291 111.89 83.0375 111.89H81.6439V116.303H79.4406V105.383ZM81.6439 107.269V110.004H83.1316C84.0732 110.004 84.6193 109.513 84.6193 108.608C84.6193 107.778 84.0544 107.269 83.1316 107.269H81.6439Z" fill="black"/>
+<path d="M97.5003 105.383V112.022C97.5003 114.888 95.8242 116.605 93.0748 116.605C90.3254 116.605 88.6682 114.888 88.6682 112.022V105.383H90.8715V112.21C90.8715 113.681 91.7001 114.53 93.0748 114.53C94.4495 114.53 95.2781 113.662 95.2781 112.21V105.383H97.5003Z" fill="black"/>
+<path d="M100.419 105.383H103.526C105.805 105.383 107.18 106.514 107.18 108.344C107.18 109.211 106.765 109.985 106.031 110.494C107.18 111.003 107.82 111.946 107.82 113.078C107.82 115.077 106.276 116.284 103.771 116.284H100.438V105.364L100.419 105.383ZM102.622 109.645H103.564C104.412 109.645 104.882 109.23 104.882 108.438C104.882 107.703 104.393 107.25 103.564 107.25H102.622V109.645ZM102.622 111.55V114.398H103.865C104.901 114.398 105.523 113.851 105.523 112.946C105.523 112.04 104.901 111.55 103.865 111.55H102.622Z" fill="black"/>
+<path d="M110.212 105.383H112.415V114.285H116.558V116.303H110.212V105.383Z" fill="black"/>
+<path d="M118.667 105.383H120.87V116.303H118.667V105.383Z" fill="black"/>
+<path d="M135.522 117.057C135.748 117.057 136.068 117.02 136.294 116.925V118.793C135.936 118.943 135.616 119 135.145 119C133.921 119 132.81 118.51 131.736 117.567L130.437 116.416C129.966 116.548 129.477 116.605 128.949 116.605C125.503 116.605 123.149 113.945 123.149 110.833C123.149 107.721 125.503 105.062 128.949 105.062C132.396 105.062 134.731 107.721 134.731 110.833C134.731 112.663 133.921 114.323 132.584 115.398L133.243 116.02C134.09 116.793 134.825 117.057 135.54 117.057H135.522ZM132.452 110.833C132.452 108.74 130.983 107.137 128.949 107.137C126.915 107.137 125.428 108.74 125.428 110.833C125.428 112.927 126.897 114.53 128.949 114.53C131.002 114.53 132.452 112.927 132.452 110.833Z" fill="black"/>
+<path d="M145.615 105.383V112.022C145.615 114.888 143.939 116.605 141.19 116.605C138.441 116.605 136.783 114.888 136.783 112.022V105.383H138.987V112.21C138.987 113.681 139.815 114.53 141.19 114.53C142.565 114.53 143.393 113.662 143.393 112.21V105.383H145.615Z" fill="black"/>
+<path d="M148.516 105.383H154.862V107.269H150.719V109.796H154.24V111.682H150.719V114.417H154.862V116.303H148.516V105.383Z" fill="black"/>
+<path d="M161.811 105.383H168.157V107.269H164.014V109.796H167.536V111.682H164.014V116.303H161.811V105.383Z" fill="black"/>
+<path d="M170.266 105.383H173.599C175.991 105.383 177.479 106.609 177.479 108.646C177.479 109.947 176.838 110.947 175.727 111.475L179.155 116.303H176.499L173.599 111.89H172.47V116.303H170.266V105.383ZM172.47 107.269V110.004H173.712C174.654 110.004 175.2 109.513 175.2 108.608C175.2 107.778 174.654 107.269 173.712 107.269H172.47Z" fill="black"/>
+<path d="M183.919 105.383H186.819L190.943 116.303H188.59L187.554 113.474H183.185L182.149 116.303H179.795L183.919 105.383ZM186.857 111.569L185.369 107.476L183.882 111.569H186.876H186.857Z" fill="black"/>
+<path d="M192.77 105.383H195.614L200.491 113.191V105.383H202.694V116.303H199.851L194.973 108.457V116.303H192.77V105.383Z" fill="black"/>
+<path d="M213.617 113.04L215.368 114.379C214.521 115.53 213.221 116.341 211.64 116.548L210.284 118.811H208.325L209.7 116.529C206.856 116.039 204.992 113.625 204.992 110.852C204.992 107.74 207.346 105.081 210.792 105.081C212.769 105.081 214.389 105.967 215.387 107.288L213.636 108.646C213.014 107.759 212.035 107.156 210.792 107.156C208.739 107.156 207.271 108.759 207.271 110.852C207.271 112.946 208.739 114.549 210.792 114.549C212.035 114.549 213.014 113.945 213.636 113.059L213.617 113.04Z" fill="black"/>
+<path d="M220.114 105.383H223.014L227.138 116.303H224.784L223.748 113.474H219.379L218.344 116.303H215.99L220.114 105.383ZM223.052 111.569L221.564 107.476L220.076 111.569H223.07H223.052Z" fill="black"/>
+<path d="M228.984 105.383H231.187V116.303H228.984V105.383Z" fill="black"/>
+<path d="M235.029 113.304C235.688 114.153 236.554 114.643 237.439 114.643C238.324 114.643 238.833 114.172 238.833 113.38C238.833 111.437 233.842 111.871 233.842 108.231C233.842 106.496 235.255 105.062 237.326 105.062C238.964 105.062 240.226 105.798 241.149 106.91L239.529 108.363C238.889 107.533 238.174 107.005 237.345 107.005C236.573 107.005 236.083 107.495 236.083 108.136C236.083 110.079 241.074 109.626 241.074 113.323C241.036 115.36 239.454 116.605 237.458 116.605C235.612 116.605 234.37 115.926 233.409 114.775L235.01 113.285L235.029 113.304Z" fill="black"/>
+<path d="M243.559 105.383H249.906V107.269H245.763V109.796H249.284V111.682H245.763V114.417H249.906V116.303H243.559V105.383Z" fill="black"/>
+</svg>
diff --git a/static/osuny-theme-version b/static/osuny-theme-version
index 67e96b63ffe71b766b18857948830f2a6e1a91dc..4a2ecbb14995b98b5fb9fac97d6d48e192188d68 100644
--- a/static/osuny-theme-version
+++ b/static/osuny-theme-version
@@ -1 +1 @@
-v5.2.1
\ 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