diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index d4f78d406f7b85da76cea30e7ee3b62a944c0b4b..34b592aa6d9961b4aa2d89156b83634f7d51fe10 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -12,7 +12,7 @@ class MainMenu {
this.element = document.querySelector(selector);
this.menu = this.element.querySelector('.menu');
this.mainButton = this.element.querySelector('button');
- this.dropdownsButtons = this.element.querySelectorAll('.has-children a[role="button"]');
+ this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
this.state = {
isOpened: false,
@@ -123,7 +123,7 @@ class MainMenu {
y = window.scrollY,
isNearTop = y < offset;
- if (isNearTop) {
+ if (isNearTop) {
this.element.classList.remove(CLASSES.sticky);
} else {
this.element.classList.add(CLASSES.sticky);
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 2900af4139b4242e3b6188b64a2a61fae9e6e097..75a4c47361c3d9d50a53b7437df7170658a33c70 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -176,6 +176,8 @@ $toc-active-color: $main-color !default // TODO : checker ce que ça fait
$persons-avatar-background-color: $main-light-color !default
// Program
+$program-essential-font-size: $h5-size !default
+$program-share-font-size: $h4-size !default
$program-zindex-toc: $zindex-toc !default
// MISC
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index ff8f7f3d7005592d6da71d894aeb4bd61a440ea5..12e3f9054b3ab8677ffb53234c2d255776218253 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -48,7 +48,6 @@
top: $top-md
// NEW UTILS
-
@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(10))
&::#{$pseudo-element}
content: map-get($icons, $icon-name)
@@ -62,6 +61,7 @@
speak: never
text-transform: none
vertical-align: middle
+ @content // TODO : important de documenter ça
@mixin container
margin-left: auto
@@ -74,15 +74,15 @@
padding-left: $grid-gutter
padding-right: $grid-gutter
-@mixin grid($cols: 12, $breakpoint: false)
+@mixin grid($cols: 12, $breakpoint: false, $gap-y: $grid-gutter/2)
@if $breakpoint
@include media-breakpoint-up($breakpoint)
display: grid
- grid-gap: $grid-gutter/2 $grid-gutter
+ grid-gap: $gap-y $grid-gutter
grid-template-columns: repeat($cols, 1fr)
@else
display: grid
- grid-gap: $grid-gutter/2 $grid-gutter
+ grid-gap: $gap-y $grid-gutter
grid-template-columns: repeat($cols, 1fr)
@function col($nb, $base: 12)
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index 1572be38a83af054af17f89eea553d3e8414a91d..ed8fefdb5381dce6b8d2863952101bc841040e1e 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -20,6 +20,12 @@
p
margin-bottom: 0
+ a
+ color: $hero-color
+ text-decoration-color: rgba($hero-color, 0.3)
+ &:hover
+ text-decoration-color: $hero-color
+
> div:first-of-type
> div
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 3cdd4a4c1103284e0be95557af3fd6571168810b..8de2913d3158bbd376d65e6deb45f017ae70883e 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -30,6 +30,19 @@
font-size: px2rem(18)
line-height: px2rem(26)
color: $header-color
+ cursor: pointer
+ transition: text-decoration 0.15s
+ &:not(:hover)
+ text-decoration-color: transparent
+ &[aria-expanded]
+ @include icon(caret, after)
+ font-size: px2rem(6)
+ margin-left: px2rem(5)
+ transition: transform 0.15s
+ &[aria-expanded="true"]
+ &::after
+ transform: rotate(180deg)
+
@include media-breakpoint-up(md)
a:hover,
a:focus
@@ -50,14 +63,12 @@
@include grid(1)
> li
> a, span
- @include icon('caret', 'after')
display: block
padding: $spacing1
-
&:last-child a
padding-right: 0
li.has-children
- a[aria-expanded="true"] + .dropdown-menu
+ [aria-expanded="true"] + .dropdown-menu
display: block
animation-duration: $header-dropdown-transition
animation-fill-mode: both
@@ -69,9 +80,8 @@
@include container
@include grid(4, md)
> li
- &,
- & > a,
- & > span
+ > a,
+ > span
font-size: px2rem(16)
line-height: px2rem(26)
@include media-breakpoint-up(lg)
@@ -84,34 +94,30 @@
@include media-breakpoint-down(md)
&.is-opened
- flex-grow: 1
display: block
- a
- text-decoration: none
- .nav-level-1
- li
- a
- padding: 1rem 0
- > li:not(:last-child)
- border-bottom: 1px solid #adb5bd
- li.has-children
- a[role="button"]
- align-items: center
- display: flex
- justify-content: space-between
- @include icon("caret-bottom", after)
- &::after
- font-size: .375rem
- line-height: 1
- .dropdown-menu
- display: none
- padding-top: 0
-
- a[aria-expanded=true]
- @include icon("caret-top", after)
-
- + .dropdown-menu
- display: block
+ a, span
+ text-decoration: none
+ .nav-level-1
+ display: block
+ li
+ a, span
+ padding: 1rem 0
+ > li:not(:last-child)
+ border-bottom: 1px solid #adb5bd
+ li.has-children
+ [role="button"]
+ align-items: center
+ display: flex
+ justify-content: space-between
+ @include icon("caret-bottom", after)
+ &::after
+ font-size: .375rem
+ line-height: 1
+ .dropdown-menu
+ display: none
+ padding-top: 0
+ [aria-expanded=true] + .dropdown-menu
+ display: block
// TODO : Est-ce au bon endroit ?
body
@@ -163,21 +169,22 @@ body
display: none
vertical-align: middle
-// .dropdown-share
-// @extend .dropdown
-// > button
-// @extend .btn
-// @extend .btn-lg
-// @extend .btn-outline-light
-// &::after
-// @include icon
-// content: map-get($icons, "social")
-// margin-left: px2rem(10)
-// .dropdown-menu
-// padding: 0
-// .share
-// li
-// margin: 0
-// a
-// @extend .dropdown-item
-// color: $body-color
+.dropdown-share
+ > button
+ @include button-reset
+ color: $hero-color
+ border: 1px solid $hero-color
+ padding: $spacing0 $spacing1
+ font-size: $program-share-font-size
+ @include icon(social, after)
+ margin-left: px2rem(10)
+ ul
+ display: none
+ .dropdown-menu
+ padding: 0
+ .share
+ li
+ margin: 0
+ a
+ // @extend .dropdown-item
+ color: $body-color
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 9191969c0768eb7dd83f0bfa0c4f1eb637f74720..b7298641a861ccd1e9f6ed788d610ce9bf624edb 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -84,11 +84,15 @@ a,
.link-more
@include link
- @include icon('arrow', before)
+ @include icon(arrow, before)
&::before
font-size: px2rem(10)
margin-right: px2rem(5)
+dd
+ margin-bottom: 0.5rem
+ margin-left: 0
+
::selection
background: rgba($main-color, .7)
color: $main-background-color
diff --git a/assets/sass/_theme/design-system/vendors/splide.sass b/assets/sass/_theme/design-system/vendors/splide.sass
index c9d62451184d884a4d0fa1135310d46a53169f94..b4960027066eea43bb8f677e952857bd20d9f7ab 100644
--- a/assets/sass/_theme/design-system/vendors/splide.sass
+++ b/assets/sass/_theme/design-system/vendors/splide.sass
@@ -9,10 +9,10 @@
svg
display: none
&--prev
- @include icon('arrow-left')
+ @include icon(arrow-left)
right: 100%
&--next
- @include icon('arrow-right')
+ @include icon(arrow-right)
left: 100%
&__pagination
display: flex
@@ -59,10 +59,10 @@
width: 48px
&__play
- @include icon('play')
+ @include icon(play)
&__pause
- @include icon('pause')
+ @include icon(pause)
display: none
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index 33d8d4b020cb87e625a434f28d880c57b9b7029f..afd6579c6ca7fc833015fcf570733f5366208413 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -22,7 +22,7 @@ ul.diplomas
@extend .h3
button
@include button-reset
- @include icon('caret', 'after')
+ @include icon(caret, after)
.dropdown-menu
@include inset(100%, 0, auto, auto)
@@ -63,4 +63,24 @@ ul.diplomas
// font-weight: 400
// line-height: 1
// margin-left: 0.3125rem
- // vertical-align: middle
\ No newline at end of file
+ // vertical-align: middle
+
+.essential
+ @include grid(12, false, 0)
+ flex-wrap: wrap
+ font-size: $program-essential-font-size
+ margin-bottom: 0
+ dt,
+ dd
+ margin: 0
+ padding-bottom: $spacing0
+ padding-top: $spacing0
+ dt
+ grid-column: 1/4
+ opacity: .8
+ @include media-breakpoint-down(md)
+ padding-bottom: 0
+ dd
+ grid-column: 5/13
+ @include media-breakpoint-down(md)
+ padding-top: 0
diff --git a/assets/sass/_theme/sections/home.sass b/assets/sass/_theme/sections/home.sass
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..4eca2321b30560e0acfb229105241710baa29a94 100644
--- a/assets/sass/_theme/sections/home.sass
+++ b/assets/sass/_theme/sections/home.sass
@@ -0,0 +1,6 @@
+.page__home
+ main
+ header
+ picture
+ img
+ opacity: .5
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 3b4b6a995b0dacfa9b6b482d7584ff9476cd009a..ff121fcd545aa2f47eb506839fdd97ce93d314e5 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -76,6 +76,19 @@ ol.programs
.programs__section
+ .hero
+ display: block
+ .dropdown-share
+ margin-top: $spacing1
+ @include media-breakpoint-up(md)
+ bottom: $spacing1
+ margin-top: 0
+ position: absolute
+ right: $grid-gutter
+ > button
+ @include media-breakpoint-down(md)
+ width: 100%
+
.lead
padding-top: $spacing4
aside