diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass index 8f94e1b96dc12719bb0903b82ccfa9bddb72d64f..5b9d7c7f780418bbc4662a55237ab29de1612f4b 100644 --- a/assets/sass/_theme/_configuration.sass +++ b/assets/sass/_theme/_configuration.sass @@ -48,6 +48,7 @@ $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: 120% !default $h1-weight: bold !default $h1-text-transform: none !default @@ -56,6 +57,7 @@ $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: 120% !default $h2-weight: $heading-font-weight !default $h2-text-transform: none !default @@ -64,6 +66,7 @@ $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: 130% !default $h3-weight: bold !default $h3-text-transform: none !default @@ -72,6 +75,7 @@ $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: 130% !default $h4-weight: bold !default $h4-text-transform: none !default @@ -80,6 +84,7 @@ $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: 130% !default $h5-weight: $heading-font-weight !default $h5-text-transform: uppercase !default @@ -88,6 +93,7 @@ $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: 130% !default $h6-weight: $heading-font-weight !default $h6-text-transform: uppercase !default diff --git a/assets/sass/_theme/_variables.sass b/assets/sass/_theme/_variables.sass index ac0f8878e8d57e67a89d214f0415943124eb414e..654378ff124161777b8e3aa6d53396eb34221a1a 100644 --- a/assets/sass/_theme/_variables.sass +++ b/assets/sass/_theme/_variables.sass @@ -1,4 +1,8 @@ \:root + // -------------- // + // GRID // + // ---------------// + // Largeur maximum de la grille définie dans _configuration.sass --grid-max-width: #{$grid-max-width} @@ -22,3 +26,43 @@ @include media-breakpoint-up(xxl) --grid-gutter: #{$grid-gutter-xxl} --grid-gutter-negative: #{-$grid-gutter-xxl} + + // -------------- // + // 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} + + @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} diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass index 72f4ed4f2d991324d01b3ce7ccce5bb65ab49946..16d2c6fa149250c10d4fe3875f2500acbc905c6f 100644 --- a/assets/sass/_theme/design-system/typography.sass +++ b/assets/sass/_theme/design-system/typography.sass @@ -25,60 +25,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 +78,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