diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index de8f1e02358630100ce21510d67fc05c73051874..12e3f9054b3ab8677ffb53234c2d255776218253 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -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 b1dee2400052e01c03194f2340b44715a196dbca..0c3f9130dccc9af39128657ad56a69397a13c92c 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -35,7 +35,7 @@
&:not(:hover)
text-decoration-color: transparent
&[aria-expanded]
- @include icon('caret', 'after')
+ @include icon(caret, after)
font-size: px2rem(6)
margin-left: px2rem(5)
transition: transform 0.15s
@@ -169,21 +169,20 @@ 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
+ // @extend .dropdown
+ > button
+ // @extend .btn
+ // @extend .btn-lg
+ // @extend .btn-outline-light
+ @include icon(social, after)
+ margin-left: px2rem(10)
+
+ .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 6063a041870949e00067059d19078d7e3a2d4dba..ce2730df60177e144b62d1d5978967dbb1ed2c24 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)
@@ -45,4 +45,24 @@ ul.diplomas
&:hover
background-color: lighten(black, 3)
&:focus
- color: black
\ No newline at end of file
+ color: black
+
+.essential
+ @include grid(12, false, 0)
+ flex-wrap: wrap
+ font-size: px2rem(18)
+ margin-bottom: 0
+ dt,
+ dd
+ margin: 0
+ padding-bottom: px2rem(12)
+ padding-top: px2rem(12)
+ 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
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index 3b4b6a995b0dacfa9b6b482d7584ff9476cd009a..90d6100ae9d225fac8defba77d722e023c2f59bb 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: 2.25rem
+ margin-top: 0
+ position: absolute
+ right: $grid-gutter
+ > button
+ @include media-breakpoint-down(md)
+ width: 100%
+
.lead
padding-top: $spacing4
aside