Skip to content
Snippets Groups Projects
Commit 038c66e4 authored by alexisben's avatar alexisben
Browse files

block pages

parent 3e763c1f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 205 additions and 34 deletions
assets/sass/_theme/_configuration.sass
+ 2
− 2
View file @ 038c66e4
......@@ -252,8 +252,8 @@ $block-definition-font-size-md: $body-size-md !default
$block-pages-card-background: color-contrast($color-background, 10%) !default
$block-pages-card-page-background: invert($color-text) !default
$block-pages-card-page-color: $color-text !default
$block-pages-card-page-background-hover: color-contrast($color-background, 100%) !default
$block-pages-card-page-color-hover: invert($color-text) !default
$block-pages-card-page-background-hover: $color-accent !default
$block-pages-card-page-color-hover: $color-background !default
// Block timeline
$block-timeline-horizontal-background: $color-background-alt !default
......
assets/sass/_theme/_utils.sass
+ 4
− 1
View file @ 038c66e4
......@@ -71,7 +71,7 @@
top: calc(var(--header-height) + #{$offset-y})
// NEW UTILS
@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(10))
@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(10), $non-breaking: false)
&::#{$pseudo-element}
content: map-get($icons, $icon-name)
display: inline-block
......@@ -84,6 +84,9 @@
speak: never
text-transform: none
vertical-align: middle
@if $non-breaking
content: " #{map-get($icons, $icon-name)}"
display: inline
@content // TODO : important de documenter ça
@mixin container
......
assets/sass/_theme/blocks/chapter.sass
+ 0
− 8
View file @ 038c66e4
// .blocks
// .block.block-chapter
// @include in-page-with-or-without-sidebar
// h2, h3
// @extend .h2
.block-chapter
blockquote
@extend .blockquote
p:last-child
margin-bottom: 0
.notes
......
assets/sass/_theme/blocks/gallery.sass
+ 1
− 0
View file @ 038c66e4
......@@ -22,6 +22,7 @@
width: 100%
figcaption
@extend .small
position: relative
p
margin-bottom: 0
......
assets/sass/_theme/blocks/pages.sass
+ 120
− 1
View file @ 038c66e4
.block-pages
.top
margin-bottom: $spacing2
h2, h3
+ p
margin-top: $spacing1
.pages
article
display: flex
flex-direction: column
.media
order: -1
margin-bottom: $spacing1
h1
@extend .h3
a
text-decoration: none
+ p
margin-top: $spacing0
@include in-page-without-sidebar
.top
@include grid
h2, h3
grid-column: 1 / 5
a
text-decoration: none
@include icon("arrow-right", "after", px2rem(16), true)
position: static
p
@extend .h2
grid-column: 5 / 13
margin-top: -0.25em
&--grid
.pages
@include grid(2, md)
a
@include icon("arrow-right", "after", px2rem(16), true)
@include hover-translate-icon(after, 3)
@include in-page-without-sidebar
.pages
@include grid(3, md)
&--cards
background-color: $block-pages-card-background
padding-bottom: $grid-gutter
padding-top: $grid-gutter
.pages
@include grid(2, md)
@include in-page-without-sidebar
.pages
@include grid(3, md)
// TODO: move this //
.block-gallery + &,
.block-pages--cards + &
margin-top: 0
// ----------------- //
.card
padding: $spacing1
background-color: $block-pages-card-page-background
transition: background 0.3s, color 0.3s
display: flex
flex: auto
flex-direction: column
min-height: 320px
&,
a
color: $block-pages-card-page-color
.media
margin-bottom: 0
margin-left: -$spacing1
margin-right: -$spacing1
margin-top: -$spacing1
img
display: block
aspect-ratio: 16/9
object-fit: cover
.more
@include icon("arrow-right", after, px2rem(16))
font-size: $small-size
opacity: 0
transform: translateX(-20px)
transition: 0.55s $arrow-ease-transition
position: absolute
right: 0
@include link($block-pages-card-page-color)
text-decoration-color: $block-pages-card-page-color
text-decoration-line: underline
text-decoration-thickness: 1px
text-underline-offset: 3px
position: relative
margin-top: auto
padding-top: $spacing1
display: flex
justify-content: space-between
align-items: center
&:hover
.more:after
opacity: 1
transform: translateX(0)
a,
.more
transition: text-decoration-color .3s ease, color .3s ease
.title
a
text-decoration: none
+ p:not(.more)
margin-bottom: 1rem
&:hover
background-color: $block-pages-card-page-background-hover
&,
a,
.more
color: $block-pages-card-page-color-hover
.more
text-decoration-color: $block-pages-card-page-color-hover
.block-pages-
margin-top: $spacing4
.pages
@include grid(2, md)
......@@ -52,7 +171,7 @@
display: block
margin-top: $spacing2
@include media-breakpoint-up(lg)
margin-top: calc(#{$spacing2}
margin-top: calc(#{$spacing2})
.page
.title
margin-top: half($spacing1)
......
assets/sass/_theme/design-system/typography.sass
+ 1
− 5
View file @ 038c66e4
......@@ -148,11 +148,7 @@ a,
@include link
overflow-wrap: break-word
&[target="_blank"]:not(.icon)
@include icon("link-blank", "after")
&::after
content: " #{map-get($icons, "link-blank")}"
display: inline
font-size: px2rem(10)
@include icon("link-blank", "after", px2rem(10), true)
&[href^="mailto"]
&::after
content: none
......
layouts/partials/blocks/templates/pages.html
+ 18
− 14
View file @ 038c66e4
......@@ -10,6 +10,7 @@
{{- $show_main_description := .show_main_description -}}
{{- $show_descriptions := .show_descriptions -}}
{{- $show_images := .show_images -}}
{{- $page_link := false -}}
{{/* LEGACY */}}
{{- with .show_description -}}
......@@ -20,7 +21,7 @@
{{- end -}}
{{- if $layout -}}
{{- $layout_class = printf "block-pages--%s" .layout -}}
{{- $layout_class = printf "block-pages--%s" $layout -}}
{{- end -}}
{{ $class = printf "{{$class}} %s" $layout_class }}
......@@ -30,6 +31,7 @@
{{ $page := partial "GetPageByUrl" .page }}
{{- with $page }}
{{- $show_main_page = true -}}
{{- $page_link = $page.Permalink }}
{{ if eq $title "" }}
{{ $title = .Title }}
{{ end }}
......@@ -42,25 +44,26 @@
<section class="block block-pages{{ if $title }} block-with-title{{ end }} {{ $layout_class }} {{ $page_class }}" id="block-{{ $position }}">
<div class="container">
<div class="block-content">
{{- if and $title (not $show_main_page) }}
{{- if $title }}
<div class="top">
{{/* Quand le bloc a un titre, est-ce qu'on prend le titre de la page principale ou le titre du bloc ? */}}
{{ partial "blocks/title" (dict
"title" $title
"context" $context
"link" $page_link
) }}
{{ if $show_main_description }}
<p>{{ partial "PrepareHTML" $page.Params.description_short }}</p>
{{ end }}
</div>
{{ end -}}
{{- with $page -}}
{{- .Scratch.Set "class" "main-page" -}}
{{- .Scratch.Set "show_description" $show_main_description -}}
{{- partial "pages/page.html" . -}}
{{- .Scratch.Delete "class" -}}
{{- .Scratch.Delete "show_description" -}}
{{- end -}}
{{- partial (printf "blocks/templates/pages/%s.html" $layout) (dict
"pages" .pages
"show_images" $show_images
"show_descriptions" $show_descriptions
) }}
{{- if .pages -}}
<div class="pages">
......@@ -69,7 +72,8 @@
{{- if .slug -}}
{{- $page = partial "GetPageByUrl" .slug -}}
{{- end -}}
{{ with $page }}
{{/* {{ with $page }}
<div>
{{- .Scratch.Set "show_image" $show_images -}}
......@@ -87,7 +91,7 @@
{{- end -}}
</div>
{{ end }}
{{ end }} */}}
{{ end -}}
</div>
{{- end -}}
......
layouts/partials/blocks/templates/pages/cards.html
+ 30
− 0
View file @ 038c66e4
{{ $show_descriptions := .show_descriptions }}
{{ $show_images := .show_images }}
<div class="pages">
{{ range .pages }}
{{- $page := partial "GetPageByUrl" .page -}}
{{- if .slug -}}
{{- $page = partial "GetPageByUrl" .slug -}}
{{- end -}}
{{ with $page }}
<article class="card">
<h1>
<a href="{{- .Permalink -}}">
{{- partial "PrepareHTML" .Title -}}
</a>
</h1>
{{ if and $show_descriptions .Params.description_short }}
<p>{{ partial "PrepareHTML" .Params.description_short }}</p>
{{ end }}
<p class="more meta">{{- i18n "commons.more" -}}</p>
{{ if $show_images }}
{{- partial "pages/page-media.html" . -}}
{{ end }}
</article>
{{- end -}}
{{ end }}
</div>
\ No newline at end of file
layouts/partials/blocks/templates/pages/grid.html
+ 26
− 0
View file @ 038c66e4
{{ $show_descriptions := .show_descriptions }}
{{ $show_images := .show_images }}
<div class="pages">
{{ range .pages }}
{{- $page := partial "GetPageByUrl" .page -}}
{{- if .slug -}}
{{- $page = partial "GetPageByUrl" .slug -}}
{{- end -}}
{{ with $page }}
<article>
<h1>
<a href="{{- .Permalink -}}">
{{- partial "PrepareHTML" .Title -}}
</a>
</h1>
{{ if and $show_descriptions .Params.description_short }}
<p>{{ partial "PrepareHTML" .Params.description_short }}</p>
{{ end }}
{{ if $show_images }}
{{- partial "pages/page-media.html" . -}}
{{ end }}
</article>
{{- end -}}
{{ end }}
</div>
\ No newline at end of file
layouts/partials/pages/page-media.html
+ 3
− 3
View file @ 038c66e4
......@@ -3,9 +3,9 @@
{{- partial "commons/image.html"
(dict
"image" .Params.image
"mobile" "351x291"
"tablet" "334x167"
"desktop" "634x317"
"mobile" "350x350"
"tablet" "400x400"
"desktop" "900x900"
) -}}
{{- else -}}
{{- partial "commons/image-default.html" -}}
......
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