Skip to content
Snippets Groups Projects
Unverified Commit d24f0c75 authored by Alexis BENOIT's avatar Alexis BENOIT Committed by GitHub
Browse files

Merge branch 'main' into fix/mobile

parents f97a7ad9 cc35c8be
No related branches found
No related tags found
No related merge requests found
Showing
with 164 additions and 153 deletions
......@@ -71,9 +71,11 @@ $spacing3: 64px !default
$spacing4: 128px !default
$spacing5: 256px !default
// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
// Grid
$grid-gutter: $spacing3 !default
$grid-max-width: 1980px
$grid-max-width: 1980px !default
$grid-gutter-sm: $spacing1 !default
// Z-index
......@@ -99,7 +101,7 @@ $body-overlay-color: rgba(0, 0, 0, 0.3) !default
// Footer
$footer-color: $main-color !default
$footer-background-color: darken($main-background-color, 2.5) !default
$footer-background-color: color-contrast($main-background-color, 3%) !default
// Hero
$hero-height: 375px !default
......@@ -146,13 +148,13 @@ $block-call-to-action-button-color: invert($block-call-to-action-color) !default
// Block definitions
$definition-border-color: $main-border-color !default
$definition-border-color-hovered: darken($definition-border-color, 100) !default
$definition-border-color-hovered: color-contrast($definition-border-color, 100%) !default
// Block pages
$block-pages-card-background: lighten($main-background-color, 1) !default
$block-pages-card-background: color-contrast($main-background-color, 10%) !default
$block-pages-card-page-background: white !default
$block-pages-card-page-color: $main-color !default
$block-pages-card-page-background-hover: darken($main-background-color, 100) !default
$block-pages-card-page-background-hover: color-contrast($main-background-color, 100%) !default
$block-pages-card-page-color-hover: white !default
// Block timeline
......@@ -160,8 +162,8 @@ $block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default
// Block testimonials
$block-testimonials-xl-font-size: px2rem(50) !default
$block-testimonials-xl-line-height: px2rem(55) !default
$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
......@@ -170,16 +172,18 @@ $block-testimonials-pagination-background: $main-border-color !default
$block-testimonials-pagination-progress-background: $main-color !default
// Block key_figures
$block-key_figures-number-font-size: px2rem(60)
$block-key_figures-number-font-size: px2rem(60) !default
// Sections
$widget-media-background: darken($main-background-color, 2) !default
$widget-title-size: $h4-size !default
$widget-title-size-md: $h4-size-md !default
$post-media-background: $widget-media-background !default
$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
$post-media-background: $article-media-background !default
$post-media-aspect-ratio: 50% !default
$post-categories-color: lighten($main-color, 2) !default
$post-time-color: lighten($main-color, 2) !default
$post-categories-color: color-contrast($main-color, 20%) !default
$post-time-color: color-contrast($main-color, 20%) !default
// Table of content
$toc-color: $main-color !default
......
$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, ("link-blank": "\e903"))
$icons: map-merge($icons, ("play": "\e910"))
$icons: map-merge($icons, ("pause": "\e90f"))
$icons: map-merge($icons, ("social": "\e915"))
$icons: map-merge($icons, ("instagram": "\e90a"))
$icons: map-merge($icons, ("facebook": "\e90b"))
$icons: map-merge($icons, ("linkedin": "\e90c"))
$icons: map-merge($icons, ("twitter": "\e90d"))
// Bootstrap
$primary: #000000 !default
$secondary: #666666 !default
$black: #000000 !default
$light: #f8f9fa !default
$border-radius: 0 !default
$border-radius-sm: 0 !default
$border-radius-lg: 0 !default
$breadcrumb-margin-bottom: 0 !default
$modal-backdrop-opacity: .7 !default
$modal-content-border-width: 0 !default
$modal-inner-padding: 1.5rem !default
$pagination-bg: transparent !default
$pagination-disabled-bg: transparent !default
// header banner
$enable-header-sticky: false !default
$header-background-color: white !default
$header-color: black !default
$header-hover-color: $header-color !default
$header-height: 60px !default
$header-height-md: 70px !default
$header-transition: 0.4s !default
$header-zindex: 10 !default
// menu mobile deploy
$menu-background-color: white !default
// hero
$breadcrumb-link-color: white !default
$hero-background-color: $primary !default
$hero-color: white !default
$hero-height: 375px !default
$hero-height-md: 450px !default
// footer
$footer-background: $light !default
$footer-color: $black !default
// block call to action
$block-call-to-action-background: $primary !default
$block-call-to-action-color: white !default
// block pages
$block-pages-card-background: #F8F9FA !default
$block-pages-card-page-background: white !default
$block-pages-card-page-color: $primary !default
$block-pages-card-page-background-hover: $primary !default
$block-pages-card-page-color-hover: white !default
// block timeline
$block-timeline-horizontal-background: black !default
$block-timeline-horizontal-color: white !default
// table
$table-cell-padding-y: 1rem !default
$table-th-font-weight: bold !default
$table-border-width: 1px !default
$table-border-color: rgba(0, 0, 0, 0.5) !default
// toc
$toc-height: 78px !default
// pages list
$arrow-ease-transition: cubic-bezier(0, 0.65, 0.4, 1.2)
$arrow-ease-transition-2: cubic-bezier(0, 0.65, 0.4, 1)
\ No newline at end of file
......@@ -121,7 +121,7 @@
right: 0
top: 0
@mixin widget($background: null)
@mixin article($background: null)
position: relative
display: flex
flex-direction: column
......@@ -131,7 +131,7 @@
order: -1
overflow: hidden
.title
font-size: $widget-title-size
font-size: $article-title-size
margin-bottom: px2rem(5)
@include media-breakpoint-up(md)
font-size: $widget-title-size-md
......@@ -179,3 +179,8 @@
left: $left
right: $right
top: $top
@function color-contrast($color, $amount)
@if lightness($color) > 50%
$amount: $amount * -1
@return scale-color($color, $lightness: $amount)
\ No newline at end of file
......@@ -12,7 +12,6 @@
img,
picture
display: block
> a
transition: opacity .3s ease
&:hover
......
......@@ -159,15 +159,12 @@ body
font-size: px2rem(13)
text-decoration: none
padding: $spacing0
display: block
&::before
font-size: px2rem(13)
&:hover
opacity: 0.7
&::after
content: none
// &:last-child
// margin-right: -0.75rem
span
display: none
......@@ -198,6 +195,7 @@ body
flex: 1 1
text-align: center
a
display: block
color: invert($hero-color)
......
.pagination
// font-family: $font-family-sans-serif
font-size: px2rem(14)
justify-content: center
margin: #{$grid-gutter * 2.5} 0 0
li
// @extend .page-item
a
// @extend .page-link
.disabled
a::before
opacity: .3
&:not(&-between-pages)
li
&:first-child,
&:nth-child(2),
&:nth-last-child(2),
&:last-child
a
// @extend .icon
&:first-child
a
@include icon(arrow-first)
&:nth-child(2)
a
@include icon(arrow-left)
&:nth-last-child(2)
a
@include icon(arrow-right)
&:last-child
a
@include icon(arrow-last)
a::before
font-size: px2rem(12)
&-between-pages
@include list-reset
display: flex
justify-content: space-between
margin-top: $spacing3
li
flex: 1
a
background-color: transparent
border: 0
text-decoration: none
&:hover
background-color: transparent
text-decoration: underline
span
text-decoration: none
span
// color: $gray-600
&::before, &::after
font-size: px2rem(12)
.previous
padding-left: 0
span
@include icon(arrow-left, before)
&::before
margin-right: px2rem(5)
.next
padding-right: 0
text-align: right
span
@include icon(arrow-right, after)
&::after
margin-left: px2rem(5)
@include media-breakpoint-down(md)
flex-direction: column-reverse
margin-left: 0
margin-right: 0
li.previous,
li.next
// border-top: 1px solid $gray-500
text-align: left
a
padding: px2rem(20) px2rem(40) px2rem(20) 0
&::after
@include icon
font-size: px2rem(12)
opacity: 0.5
position: absolute
right: 0
top: 50%
transform: translateY(-50%)
span
&::after,
&::before
content: none
li.previous
border-bottom: 1px solid $main-border-color
a
@include icon(arrow-left)
li.next
a
@include icon(arrow-right)
......@@ -6,12 +6,12 @@ table
text-align: left
caption
padding: px2rem(10) 0
padding: $spacing0 0
text-align: left
th,
td
padding: px2rem(10) 0
padding: $spacing0 0
thead
th
......
......@@ -20,6 +20,7 @@
@import "design-system/grid"
@import "design-system/header"
@import "design-system/hero"
@import "design-system/pagination"
@import "design-system/nav"
@import "design-system/table"
@import "design-system/table_of_content"
......
.article
@include widget
@include article
.articles
@include grid(2, md)
......
.organization
@include widget
@include article
.organizations
@include grid(2)
......
.page
@include widget
@include article
.title
a
......
.person
@include widget
@include article
.avatar
margin-bottom: $spacing1
......
.post
@include widget($post-media-background)
@include article($post-media-background)
/* TODO toujours d'actualité ou propre à un site ?
.author,
......@@ -34,7 +34,7 @@
.table-infos
border-top: 1px solid $main-border-color
font-size: px2rem(14)
font-size: $small-font-size
margin-bottom: 0
ul
@include list-reset
......@@ -42,7 +42,7 @@
@include visually-hidden
position: relative !important // Fix safari iOS border issue
th
// color: $gray-600
color: color-contrast($main-color, 25%)
font-weight: 400
padding-left: 0
white-space: nowrap
......@@ -53,3 +53,13 @@
text-align: right
.share
justify-content: flex-end
li:last-child
margin-right: -$spacing0
.related
margin-top: $spacing1
.posts
@include grid(2, md)
margin-bottom: 0
.link
@extend .link-more
......@@ -48,7 +48,7 @@
.program
@include widget
@include article
div.programs,
section.programs
......@@ -79,7 +79,6 @@ ol.programs
& + a
text-align: right
.programs__section
.hero
display: block
......
.volume
@include widget
@include article
.volumes
@include grid(2, md)
......
......@@ -8,39 +8,25 @@
{{ if .Params.description_short }}<meta itemprop="abstract" content="{{ partial "PrepareHTML" .Params.description_short }}">{{ end }}
{{ if .Summary }}<meta itemprop="description" content="{{ partial "PrepareHTML" .Summary }}">{{ end }}
{{- if .Params.blocks }}
<div class="content-blocks">
{{ partial "posts/aside.html" . }}
<div class="blocks blocks-chapo">
<div class="container">
<div class="block-content">
{{ partial "posts/chapo.html" .Params.description_short }}
{{ partial "posts/image.html" .Params.image }}
</div>
</div>
</div>
{{ partial "blocks/list.html" .Params.blocks }}
<div class="blocks blocks-pagination">
<div class="container">
<div class="block-content">
{{ partial "posts/prevnext.html" . }}
</div>
</div>
</div>
</div>
{{ else }}
<div class="container">
<div class="content">
{{ partial "posts/aside.html" . }}
<div>
<div class="content-blocks">
{{ partial "posts/aside.html" . }}
<div class="blocks blocks-chapo">
<div class="container">
<div class="block-content">
{{ partial "posts/chapo.html" .Params.description_short }}
{{ partial "posts/image.html" .Params.image }}
{{ partial "posts/body.html" . }}
</div>
</div>
</div>
{{ partial "blocks/list.html" .Params.blocks }}
<div class="blocks blocks-pagination">
<div class="container">
<div class="block-content">
{{ partial "posts/prevnext.html" . }}
</div>
</div>
</div>
{{ end -}}
</div>
</article>
{{ end }}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment