hero.sass 1.97 KiB
.hero
// Support gradients
background: $hero-background-color
// Fallback color
background-color: $hero-background-color
color: $hero-color
min-height: $hero-height
padding-bottom: $spacing3
padding-top: calc(2rem + var(--header-height))
position: relative
@include media-breakpoint-up(md)
min-height: $hero-height-md
*:focus-visible
outline-color: $hero-color
nav + .content
margin-top: $spacing3
.content
h1
width: col(9)
picture
img
display: block
&--with-image
margin-bottom: $spacing4
.content
display: flex
justify-content: space-between
h1
width: col(7)
picture
width: col(5)
margin-bottom: -$spacing4
// In what case ?
// p
// margin-bottom: 0
// a
// color: $hero-color
// text-decoration-color: rgba($hero-color, 0.3)
// &:hover
// text-decoration-color: $hero-color
// > div:first-of-type
// > div
// margin-top: $spacing1
// @include media-breakpoint-up(xl)
// margin-top: px2rem(70)
// > div + div
// margin-top: auto
// .container
// padding-bottom: $spacing1
// padding-top: $spacing1
// & + .document-nav
// margin-top: 0
// > div
// position: relative
// z-index: 1
// picture
// position: relative
// /* TODO refacto */
// .title-avatar
// @include media-breakpoint-up(md)
// align-items: flex-end
// display: flex
// justify-content: space-between
// margin-bottom: $spacing1
// h1
// margin-bottom: 0
// > div
// width: col(8)
// @include media-breakpoint-up(md)
// width: col(2)