lestoitsduval/assets/css/actu.sass

107 lines
1.8 KiB
Sass

// ACTUALITES
$space: 1rem
.actualites
margin: 0 -$space
padding: 0
> .cell
height: 300px
padding: $space
position: relative
overflow: hidden
&.empty
width: 100%
a
display: flex
width: 100%
height: 100%
text-decoration-color: rgba($color-primary, 0)
box-sizing: border-box
padding: $space
&:hover
background: rgba($color-primary, 0.5)
&::after
content: inherit
.info
padding: 2rem
background: rgba($color-primary, 0.25)
border: $space solid rgba(255,255,255,.25)
box-sizing: border-box
width: 100%
height: 100%
align-content: center
text-align: center
h3
color: white
font-size: 1.8rem
text-align: center
margin: 0
padding: 0
flex: 0
time
color: white
font-size: 1rem
flex: 0
.image
position: absolute
top: $space
bottom: $space
left: $space
right: $space
z-index: -2
overflow: hidden
img
height: 100%
object-fit: cover
figure.center
text-align: center
img
margin: 0 auto
max-width: 100%
$imageBorder: 2px
.actu-image
text-align: center
padding: 1rem 0 0
max-width: 100%
@media screen and (min-width: 840px)
.actu-image
padding: 2rem 0
@media screen and (max-width: 839px)
$space: .5rem
.actualites
margin: 0 -$space
> .cell
padding: $space
a
padding: $space
.info
padding: $space * 2
border: $space solid rgba(255,255,255,.25)
.image
top: $space
bottom: $space
left: $space
right: $space
@media screen and (max-width: 599px)
.actualites
> .cell
max-width: 460px