Skip to content
Snippets Groups Projects
Commit 0bd74070 authored by alexisben's avatar alexisben
Browse files

typo system and gallery block

parent cd1b02a6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 152 additions and 78 deletions
assets/sass/_theme/_configuration.sass
+ 61
− 27
View file @ 0bd74070
......@@ -16,48 +16,79 @@ $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
// Base
$font-size-base: 16px !default
$line-height-base: 140% !default
// Fonts sizes
$body-font-size: px2rem(20) !default
$body-font-size-md: $body-font-size !default
$small-font-size: px2rem(14) !default
// Headings
$heading-font-weight: normal !default
// h1
$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
$h2-size-md: px2rem(45) !default
$h2-size: px2rem(24) !default
$h2-line-height: 110% !default
$h2-weight: $heading-font-weight !default
// h3
$h3-size-md: px2rem(30) !default
$h3-size: px2rem(20) !default
$h3-line-height: 110% !default
$h3-weight: $heading-font-weight !default
// h4
$h4-size-md: px2rem(22) !default
$h4-size: px2rem(18) !default
$h4-line-height: 130% !default
$h4-weight: $heading-font-weight !default
// h5 or Section
$h5-size-md: px2rem(20) !default
$h5-size: px2rem(18) !default
$h5-weight: $heading-font-weight !default
// h6 or Tab
$h6-size-md: px2rem(18) !default
$h6-size: px2rem(16) !default
$h6-weight: $heading-font-weight !default
// Body
$body-font-size: px2rem(20) !default
$body-font-size-md: $body-font-size !default
// Small
$small-font-size: px2rem(14) !default
// Lead
$lead-font-family: $heading-font-family !default
$lead-size-md: px2rem(60) !default
$lead-size: px2rem(24) !default
$lead-line-height: 120% !default
$lead-weight: $heading-font-weight !default
// Signature
$signature-font-family: $heading-font-family !default
$signature-size-md: px2rem(22)
$signature-size: px2rem(18)
$signature-line-height: 130% !default
$signature-weight: $heading-font-weight !default
// Meta
$meta-font-family: $heading-font-family !default
$meta-size-md: px2rem(18)
$meta-size: px2rem(14)
$meta-line-height: 150% !default
$meta-weight: $heading-font-weight !default
// Buttons
$btn-font-size: px2rem(18) !default
$btn-padding-x: px2rem(12) !default
$btn-padding-y: px2rem(6) !default
......@@ -225,6 +256,9 @@ $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
// Block gallery
$block-gallery-carousel-background: $main-light-color
// Sections
$article-title-size: $h4-size !default
$article-title-size-md: $h4-size-md !default
......
assets/sass/_theme/blocks/gallery.sass
+ 56
− 35
View file @ 0bd74070
.block-gallery
.top
@include grid(2, md)
align-items: center
.description
width: col(7)
@include in-page-without-sidebar
.top
@include grid(2, md)
align-items: baseline
figure
display: block
margin-bottom: 0
......@@ -12,6 +10,7 @@
img,
picture
display: block
margin-bottom: $spacing0
> a
transition: opacity .3s ease
&:hover
......@@ -34,49 +33,64 @@
&--grid
.gallery
@include grid(3, md)
align-items: baseline
@include in-page-with-sidebar
@include grid(3, md, calc(#{$grid-gutter} / 2), calc(#{$grid-gutter} / 2))
@include in-page-without-sidebar
@include grid(5, md)
@include grid(4, md)
@include media-breakpoint-down(md)
@include grid(2)
grid-gap: calc(#{$grid-gutter-sm} / 2) !important
figure
&:after
content: ' ' // This is used to allow align baseline without figcaption
&--carousel
background: $block-gallery-carousel-background
padding-bottom: $grid-gutter
padding-top: $grid-gutter
.block-gallery + &,
.block-pages--cards + &
margin-top: 0
.container
padding-right: 0
.top
padding-right: calc(#{$grid-gutter-sm} / 2)
@include media-breakpoint-up(md)
padding-right: calc(#{$grid-gutter} / 2)
.splide
display: flex
flex-direction: column
&__slide
flex-shrink: initial
figure // TODO : affichage écrasé
max-width: 80%
min-width: 80% // to check
@include in-page-without-sidebar
min-width: 50%
// &:last-of-type
// max-width: 100%
// padding-right: 20%
&:last-child
min-width: 100%
padding-right: 20%
img
width: 100%
figure
margin-right: $grid-gutter
picture
height: 50vh
overflow: hidden // solution provisoire : j'ai créé un masque avec le picture
width: 100%
@media (min-height: 800px)
height: 680px
max-height: 100%
img
max-height: 70vh
width: auto
height: auto
width: 100%
@media (min-height: 800px)
height: 100%
max-width: unset
max-width: calc(100vw - #{$grid-gutter-sm} * 2)
@include media-breakpoint-up(md)
picture
img
max-height: 70vh
width: auto
// @include media-breakpoint-up(md)
// height: 100%
// max-height: 45vh
// min-height: 45vh
p
@media (min-height: 800px)
font-size: px2rem(16)
height: auto
max-width: 50vw
@include in-page-without-sidebar
height: 70vh
max-width: none
figcaption
display: flex
justify-content: space-between
&__arrows
margin-left: -13px
order: 2
......@@ -95,3 +109,10 @@
display: none
&--next
@include icon("arrow-right", before)
@include in-page-without-sidebar
.splide
&__slide
&:first-child
margin-left: $grid-gutter
&__track
margin-left: -$grid-gutter
\ No newline at end of file
assets/sass/_theme/design-system/typography.sass
+ 14
− 1
View file @ 0bd74070
......@@ -10,7 +10,7 @@ h1, .h1
@include media-breakpoint-up(md)
font-size: $h1-size-md
h2, .h2, .lead
h2, .h2
@extend %heading
font-size: $h2-size
font-weight: $h2-weight
......@@ -51,6 +51,15 @@ h2, .h2
&:hover
text-decoration-thickness: 1px
.lead
margin-top: 0
font-family: $lead-font-family
font-size: $lead-size
font-weight: $lead-weight
line-height: $lead-line-height
@include media-breakpoint-up(md)
font-size: $lead-size-md
[itemprop="articleBody"]
h1, h2, h3, h4, h5, h6
margin-block-start: 2em
......@@ -73,6 +82,10 @@ li, .li
small, .small
font-size: $small-font-size
p
margin-top: 0
margin-bottom: 0
blockquote, .blockquote
margin: 0
cite
......
layouts/partials/blocks/templates/gallery/layout-carousel.html
+ 13
− 10
View file @ 0bd74070
......@@ -4,7 +4,7 @@
{{ end }}
{{- if $is_carousel }}
<div class="splide" role="group" data-splide='{"arrows":true,"gap":"24px","pagination":false,"autoWidth":true,"autoplay":false}'>
<div class="splide" role="group" data-splide='{"arrows":true,"pagination":false,"autoWidth":true,"autoplay":false}'>
<div class="splide__track">
<div class="splide__list">
{{ end -}}
......@@ -21,7 +21,7 @@
{{- $lightbox_sizes := "1280x2560" -}}
<figure{{ if $is_carousel }} class="splide__slide"{{ end }}>
<a class="glightbox"
data-glightbox="type: image;"
data-glightbox="type: image;{{ if .credit }}description: {{ partial "PrepareHTML" .credit }}{{ end }}"
href="{{ partial "GetImageUrl" (dict "url" $url "size" $lightbox_sizes ) }}">
{{ partial "commons/image.html"
(dict
......@@ -32,20 +32,23 @@
"desktop" "967x679"
)}}
</a>
<figcaption>
{{ if .text }}
<p>{{ partial "PrepareHTML" .text }}</p>
{{ end }}
{{ if .credit }}
<p class="credit">{{ partial "PrepareHTML" .credit }}</p>
{{ end }}
</figcaption>
{{ if or .text .credit }}
<figcaption>
{{ if .text }}
<div>{{ partial "PrepareHTML" .text }}</div>
{{ end }}
{{ if .credit }}
<div class="credit">{{ partial "PrepareHTML" .credit }}</div>
{{ end }}
</figcaption>
{{ end }}
</figure>
{{- end -}}
{{ end }}
{{ end }}
{{- if $is_carousel }}
</div>
</div>
</div>
{{ end -}}
layouts/partials/blocks/templates/gallery/layout-grid.html
+ 5
− 5
View file @ 0bd74070
......@@ -22,11 +22,11 @@
"desktop" "416"
)}}
</a>
<figcaption>
{{ if .text }}
<p>{{ partial "PrepareHTML" .text }}</p>
{{ end }}
</figcaption>
{{ if .text }}
<figcaption>
{{- partial "PrepareHTML" .text -}}
</figcaption>
{{ end }}
</figure>
{{- end -}}
{{ end }}
......
layouts/partials/footer/debug.html
+ 3
− 0
View file @ 0bd74070
......@@ -108,5 +108,8 @@
document.querySelector('.d-grid').classList.toggle('is-visible');
document.querySelector('.d-spacing').classList.toggle('is-visible');
}
if (e.ctrlKey && e.key === 'w') {
document.body.classList.toggle('full-width');
}
});
</script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment