Fix/mobile

assets/js/theme/nav/mainMenu.js

@@ -68,7 +68,11 @@ class MainMenu {
         classAction = this.state.isOpened ? 'add' : 'remove';
         this.mainButton.setAttribute('aria-expanded', this.state.isOpened);
         this.menu.classList[classAction](CLASSES.mainMenuOpened);
-        document.documentElement.classList[classAction](CLASSES.menusOpened);
+
+        // Close dropdown to avoid keeping overlay when mobile and menu closed 
+        if (this.state.isMobile && !this.state.isOpened) {
+            this.state.hasDropdownOpened = false;
+        }
 
         // Update global overlay
         this.updateOverlay();
@@ -123,7 +127,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);

assets/sass/_theme/_configuration.sass

@@ -26,16 +26,29 @@ $line-height-base: 1.4 !default
 $body-font-size: 16px !default
 $small-font-size: 14px !default
 
-$h1-size: px2rem(60) !default
-$h2-size: px2rem(40) !default
-$h3-size: px2rem(30) !default
-$h4-size: px2rem(20) !default
+$h1-size-md: px2rem(60) !default
+$h2-size-md: px2rem(40) !default
+$h3-size-md: px2rem(30) !default
+$h4-size-md: px2rem(20) !default
+$h5-size-md: px2rem(18) !default
+$h6-size-md: px2rem(16) !default
+
+$h1-size: px2rem(30) !default
+$h2-size: px2rem(24) !default
+$h3-size: px2rem(20) !default
+$h4-size: px2rem(18) !default
 $h5-size: px2rem(18) !default
 $h6-size: px2rem(16) !default
 
 // Font weight
 $heading-font-weight: normal !default
 
+// Line-height
+$h1-line-height: 120 !default
+$h2-line-height: 110 !default
+$h3-line-height: 110 !default
+$h4-line-height: 130 !default
+
 $h1-weight: $heading-font-weight !default
 $h2-weight: $heading-font-weight !default
 $h3-weight: $heading-font-weight !default
@@ -162,6 +175,8 @@ $block-testimonials-pagination-progress-background: $main-color !default
 $block-key_figures-number-font-size: px2rem(60) !default
 
 // Sections
+$article-title-size: $h4-size !default
+$article-title-size-md: $h4-size-md !default
 $article-media-background: color-contrast($main-background-color, 3%) !default
 $article-title-size: $h4-size !default
 
@@ -179,7 +194,9 @@ $persons-avatar-background-color: $main-light-color !default
 
 // Program
 $program-essential-font-size: $h5-size !default
+$program-essential-font-size-md: $h5-size-md !default
 $program-share-font-size: $h4-size !default
+$program-share-font-size-md: $h4-size-md !default
 $program-zindex-toc: $zindex-toc !default
 
 // MISC

assets/sass/_theme/_utils.sass

@@ -133,6 +133,8 @@
     .title
         font-size: $article-title-size
         margin-bottom: px2rem(5)
+        @include media-breakpoint-up(md)
+            font-size: $widget-title-size-md
     a
         @include stretched-link
     p

assets/sass/_theme/blocks/pages.sass

@@ -45,7 +45,7 @@
         padding-bottom: $grid-gutter
         padding-top: $grid-gutter
         .pages
-            @include grid(3)
+            @include grid(3, md)
             .page
                 aspect-ratio: 0.887
                 background-color: $block-pages-card-page-background

assets/sass/_theme/blocks/posts.sass

@@ -0,0 +1,4 @@
+.posts__page
+    aside
+        @include container
+        margin-top: $spacing1

assets/sass/_theme/design-system/grid.sass

@@ -21,7 +21,9 @@
             > .blocks
                 .block-content
                     padding-left: col(5)
-
+    @include media-breakpoint-down(md)
+        aside
+            display: none
     // TODO: mieux gérer la gestion de l'aside dans l'html
     body.full-width &
         aside

assets/sass/_theme/design-system/nav.sass

@@ -178,6 +178,8 @@ body
         border: 1px solid $hero-color
         padding: $spacing0 $spacing1
         font-size: $program-share-font-size
+        @include media-breakpoint-up(md)
+            font-size: $program-share-font-size-md
         @include icon(social, after)
             margin-left: px2rem(10)
     .dropdown-menu

assets/sass/_theme/design-system/typography.sass

@@ -6,21 +6,29 @@ h1, .h1
     @extend %heading
     font-size: $h1-size
     font-weight: $h1-weight
+    @include media-breakpoint-up(md)
+        font-size: $h1-size-md
 
 h2, .h2, .lead
     @extend %heading
     font-size: $h2-size
     font-weight: $h2-weight
+    @include media-breakpoint-up(md)
+        font-size: $h2-size-md
 
 h3, .h3
     @extend %heading
     font-size: $h3-size
     font-weight: $h3-weight
+    @include media-breakpoint-up(md)
+        font-size: $h3-size-md
 
 h4, .h4
     @extend %heading
     font-size: $h4-size
     font-weight: $h4-weight
+    @include media-breakpoint-up(md)
+        font-size: $h4-size-md
 
 h5, .h5
     @extend %heading

assets/sass/_theme/sections/diplomas.sass

@@ -66,10 +66,12 @@ ul.diplomas
     //     vertical-align: middle
 
 .essential
-    @include grid(12, false, 0)
     flex-wrap: wrap
     font-size: $program-essential-font-size
     margin-bottom: 0
+    @include media-breakpoint-up(md)
+        @include grid(12, false, 0)
+        font-size: $program-essential-font-size-md
     dt,
     dd
         margin: 0

assets/sass/_theme/sections/persons.sass

@@ -59,6 +59,7 @@ ol.persons
     @include aspect-ratio(50, 50, 'img')
     background-color: $persons-avatar-background-color
     border-radius: 50%
+    margin-bottom: $spacing2
     overflow: hidden
     position: relative
     width: 100%
@@ -96,16 +97,16 @@ ol.persons
     a
         @extend .link-more
 
-
-.persons__page
-    .informations
-        @include grid
-        margin-bottom: $spacing2
-        > div
-            &:first-of-type
-                grid-column: 1 / 9
-            &:nth-of-type(2)
-                grid-column: 9 / 13
-
-        .lead + div
-            margin-top: $spacing2
+@include media-breakpoint-up(lg)
+    .persons__page
+        .informations
+            @include grid
+            margin-bottom: $spacing2
+            > div
+                &:first-of-type
+                    grid-column: 1 / 9
+                &:nth-of-type(2)
+                    grid-column: 9 / 13
+
+            .lead + div
+                margin-top: $spacing2

assets/sass/_theme/sections/posts.sass

@@ -15,6 +15,7 @@
         font-size: px2rem(14)
 
 .posts
+    @include grid(1)
     @include grid(2, md)
     @include grid(3, xl)
 

assets/sass/_theme/sections/programs.sass

@@ -115,7 +115,8 @@ ol.programs
                 margin-bottom: 0
     .blocks
         .block-content
-            padding-left: col(5)
+            @include media-breakpoint-up(md)
+                padding-left: col(5)
 
     @include media-breakpoint-up(md)
         article

assets/sass/_theme/sections/sitemap.sass

@@ -5,5 +5,7 @@
                 padding-left: col(5)
             ul 
                 list-style: none
-                margin-bottom: 7.5rem
-                padding: 0
+                margin-bottom: calc(7.5rem / 2)
+                padding: 0
+                @include media-breakpoint-up(md)
+                    margin-bottom: 7.5rem