pages.sass 6.30 KiB
.block-pages
.top
h2, h3
+ .description
margin-top: $spacing1
a
text-decoration: none
.grid, .cards
article
position: relative
display: flex
flex-direction: column
.media
order: -1
margin-bottom: $spacing1
img
display: block
aspect-ratio: 16/9
object-fit: cover
h1
@include h3
a
text-decoration: none
@include stretched-link(before)
+ p
margin-top: $spacing0
@include media-breakpoint-up(desktop)
.top
margin-bottom: $spacing2
@include media-breakpoint-down(desktop)
.top
h2, h3
@include h5
.description
@include h2
article
margin-top: $spacing1
@include in-page-without-sidebar
@include media-breakpoint-up(desktop)
.top
@include grid
h2, h3
grid-column: 1 / 5
a
text-decoration: none
@include icon("arrow-right", "after", px2rem(16), true)
@include hover-translate-icon
&::after
display: inline-block
.description
@include h2
grid-column: 5 / 13
margin-top: -0.25em
font-style: $h2-size-desktop
&--grid
.grid
a
@include icon("arrow-right", "after", px2rem(16), true)
@include hover-translate-icon(after, 3)
@include media-breakpoint-up(desktop)
.grid
@include grid(2, desktop)
@include in-page-with-sidebar
grid-column-gap: half($grid-gutter) !important
@include in-page-without-sidebar
@include grid(3, desktop)
&--cards
background-color: $block-pages-card-background
padding-bottom: $grid-gutter
padding-top: $grid-gutter
.blocks &:last-of-type
margin-bottom: 0
.cards
@include grid(2, desktop)
@include in-page-with-sidebar
grid-gap: half($grid-gutter) !important
@include in-page-without-sidebar
@include grid(3, desktop)
// 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
min-width: 100%
.more
@include arrow-right-hover
@include link($block-pages-card-page-color)
@include text-underline
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
&: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
&--list
ul
@include list-reset
li
display: block
line-height: 1
+ li
margin-top: $spacing0
a
@include meta
@include icon("arrow-right", before, px2rem(10))
padding-right: $spacing0
@include hover-translate-icon(before)
@include link
text-decoration-color: rgba(0,0,0,0)
@include media-breakpoint-down(desktop)
.top
margin-bottom: $spacing0
ul
margin-top: $spacing1
@include media-breakpoint-up(desktop)
@include in-page-with-sidebar
.block-content
.top
margin-bottom: $spacing1
.description
margin-bottom: $spacing1
ul
@include grid(2, desktop)
grid-row-gap: $spacing0 !important
grid-column-gap: half($grid-gutter) !important
li
margin-top: 0
@include in-page-without-sidebar
h2
a
@include stretched-link(before)
.block-content
@include grid
grid-row-gap: $spacing1
.top
display: block
grid-column: 1 / 8
margin-bottom: 0
.top + .description
grid-column: 1 / 8
grid-row: 2 / 3
// Default behavior (without page description)
ul
@include grid(4, desktop)
grid-column: 1 / 13
li
margin-top: 0
// If page description
.description + ul
grid-column: 9 / 13
grid-row: 2 / 3
display: block
li + li
margin-top: $spacing0