_configuration.sass

// TODO: ranger

// MAIN COLORS
$main-color: black !default // Text color
$main-active-color: blue !default
$main-background-color: white !default // Background color
$main-border-color: lightgray !default // Border color
$main-light-color: #f8f9fa !default
// TODO : faut-il mettre les largeur de border dans le config ? overkill ?

$body-color: $main-color !default
$body-background-color: $main-background-color !default

$link-color: $main-color !default

// TYPOGRAPHY

// Fonts family
// TODO: choisir typo system par défaut
$body-font-family: "Georgia", "Times", serif !default
$heading-font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default

// $font-size-base: 1rem
$line-height-base: 1.4 !default

// Fonts sizes
$body-font-size: px2rem(20) !default
$body-font-size-md: $body-font-size !default
$small-font-size: px2rem(14) !default

$h1-size-md: px2rem(60) !default
$h2-size-md: px2rem(45) !default
$h3-size-md: px2rem(30) !default
$h4-size-md: px2rem(22) !default
$h5-size-md: px2rem(20) !default
$h6-size-md: px2rem(18) !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

// Line-height
$h1-line-height: 120% !default
$h2-line-height: 110% !default
$h3-line-height: 110% !default
$h4-line-height: 130% !default

// Font weight
$heading-font-weight: normal !default

$h1-weight: $heading-font-weight !default
$h2-weight: $heading-font-weight !default
$h3-weight: $heading-font-weight !default
$h4-weight: $heading-font-weight !default
$h5-weight: $heading-font-weight !default
$h6-weight: $heading-font-weight !default

$btn-font-size: px2rem(18) !default
$btn-padding-x: px2rem(12) !default
$btn-padding-y: px2rem(6) !default

// Breadcrumb
$breadcrumb-color: invert($main-color) !default

// Spacing
$spacing0: px2rem(12) !default
$spacing1: px2rem(24) !default
$spacing2: px2rem(48) !default
$spacing3: px2rem(64) !default
$spacing4: px2rem(128) !default
$spacing5: px2rem(256) !default

// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom

// Grid
$grid-gutter: px2rem(64) !default
$grid-max-width: px2rem(1980) !default
$grid-gutter-sm: px2rem(40) !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-aside: 48 !default

// Header
$header-color: $main-color !default
$header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
$header-background: $main-background-color !default
$header-sticky-enabled: true !default
$header-sticky-background: $header-background !default
$header-sticky-color: $header-color !default
$header-transition: 0.3s !default
$header-sticky-transition: $header-transition !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-nav-padding-y: $spacing0 !default
$header-logo-height: 20px !default
$header-logo-height-md: $header-logo-height !default
$header-height: 84px !default
$header-height-md: 74px !default

// Navs
$body-overlay-color: rgba(0, 0, 0, 0.3) !default

// Footer
$footer-color: $main-color !default
$footer-background-color: color-contrast($main-background-color, 3%) !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-md: $footer-logo-height !default

// Hero
$hero-height: 375px !default
$hero-height-md: 550px !default
$hero-color: invert($main-color) !default
$hero-background-color: invert($main-background-color) !default

// Icons
$icons: ()
$icons: map-merge($icons, ("arrow": "\e905"))
$icons: map-merge($icons, ("arrow-first": "\e906"))
$icons: map-merge($icons, ("arrow-last": "\e907"))
$icons: map-merge($icons, ("arrow-left": "\e908"))
$icons: map-merge($icons, ("arrow-right": "\e909"))
$icons: map-merge($icons, ("burger": "\e902"))
$icons: map-merge($icons, ("caret": "\e904"))
$icons: map-merge($icons, ("caret-bottom": "\e911"))
$icons: map-merge($icons, ("caret-left": "\e912"))
$icons: map-merge($icons, ("caret-right": "\e913"))
$icons: map-merge($icons, ("caret-top": "\e914"))
$icons: map-merge($icons, ("close": "\e90e"))
$icons: map-merge($icons, ("download": "\e900"))
$icons: map-merge($icons, ("eye": "\e901"))
$icons: map-merge($icons, ("facebook": "\e90b"))
$icons: map-merge($icons, ("instagram": "\e90a"))
$icons: map-merge($icons, ("link-blank": "\e903"))
$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, ("social": "\e915"))
$icons: map-merge($icons, ("toc": "\e918"))
$icons: map-merge($icons, ("twitter": "\e90d"))

// Breakpoints
// TODO: réécrire en sass les mixins bootstrap
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px)  !default


// System

// Table of content
$toc-color: $main-color !default
$toc-active-color: $main-active-color !default // TODO : checker ce que ça fait
$toc-font-family: $body-font-family !default
$toc-font-size: $body-font-size !default
$toc-font-size-md: $body-font-size-md !default
$toc-title-font-size: $body-font-size !default
$toc-title-font-size-md: $body-font-size-md !default
$toc-line-height: $h4-line-height !default
$toc-font-weight: normal !default

// Table
$table-head-font-size: $body-font-size !default
$table-head-font-size-md: $body-font-size !default
$table-body-font-size: $small-font-size !default
$table-body-font-size-md: $small-font-size !default

// BLOCKS

// Block call to action
$block-call-to-action-background: invert($main-background-color) !default
$block-call-to-action-color: invert($main-color) !default
$block-call-to-action-button-background: invert($block-call-to-action-background) !default
$block-call-to-action-button-color: invert($block-call-to-action-color) !default

// Block definitions
$block-definition-border-color: $main-border-color !default
$block-block-definition-border-color-hovered: color-contrast($block-definition-border-color, 100%) !default
$block-definition-font-size: $body-font-size !default
$block-definition-font-size-md: $body-font-size-md !default

// Block pages
$block-pages-card-background: color-contrast($main-background-color, 10%) !default
$block-pages-card-page-background: invert($main-color) !default
$block-pages-card-page-color: $main-color !default
$block-pages-card-page-background-hover: color-contrast($main-background-color, 100%) !default
$block-pages-card-page-color-hover: invert($main-color) !default

// Block timeline
$block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default

// Block testimonials
$block-testimonials-xl-font-size: $h1-size !default
$block-testimonials-xl-line-height: px2rem(65) !default
$block-testimonials-xl-font-size-long-text: px2rem(36) !default
$block-testimonials-xl-line-height-long-text: px2rem(39.6) !default
$block-testimonials-font-size: px2rem(24) !default
$block-testimonials-line-height: px2rem(28.8) !default
$block-testimonials-pagination-background: $main-border-color !default
$block-testimonials-pagination-progress-background: $main-color !default

// Block key_figures
$block-key_figures-font-size: px2rem(16) !default
$block-key_figures-number-font-size: px2rem(32) !default

$block-key_figures-font-size-md: px2rem(18) !default
$block-key_figures-number-font-size-md: 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

// 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-media-aspect-ratio: 2 !default

$post-media-background: $article-media-background !default
$post-categories-color: color-contrast($main-color, 20%) !default
$post-time-color: color-contrast($main-color, 20%) !default

// Person
$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: $h5-size !default
$program-share-font-size-md: $h5-size-md !default
$program-zindex-toc: $zindex-toc !default

// Layout posts list (ne concerne pas les blocks posts)
$posts-layout-list: false !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