histoiredunpied/assets/css/main.sass

196 lines
2.8 KiB
Sass

@import "./font"
@import "./grid"
// Couleur
$primary-color: #e72520
// Responsive breakpoints
$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px
$size-2x: 1440px
body
margin: 0
font-family: $font-family
a
color: black
text-decoration-color: $primary-color
&:hover
color: $primary-color
@mixin container
max-width: $size-lg
margin: 0 auto
padding: 0 20px
.container
@include container
.header
position: fixed
z-index: 3
left: 0
right: 0
height: 90px
overflow: hidden
background-color: white
.container
display: flex
height: 100%
.accueil
padding: 15px
margin: 5px 5px 5px -15px
.logo
height: 50px
.menu
margin: auto
margin-right: -20px
a
text-decoration-thickness: 3px
text-underline-offset: 10px
padding: 15px
margin: 5px
ul
list-style: none
margin: 0
padding: 0
li
display: inline
.ancre
position: absolute
top: -126px
@media (max-width: $size-md)
.header
height: 70px
.container
justify-content: space-between
align-items: center
.logo
height: 30px
.ancre
top: -86px
@media (max-width: $size-sm)
.header
.menu
text-align: right
margin: 0
a
padding: 0
margin: 0
text-decoration-thickness: 1px
text-underline-offset: 1px
li
display: block
.bg
position: relative
padding: 20px 0
&.colored
background-color: #f2f2f2
@media (max-width: $size-md)
padding: 10px 0
#content
padding-top: 90px
$gutter: 10px
$padding-card: 20px
$padding-card-body: 20px
.news
display: flex
flex-wrap: wrap
align-items: center
.card
margin: 20px 0
height: 300px
overflow: hidden
display: flex
&:nth-child(even)
.card-image
order: 2
.card-body
order: 1
margin-left: 0
margin-right: -40px
.card-image
width: 45%
overflow: hidden
display: flex
justify-content: center
img
padding: 0
margin: 0
align-self: center
min-height: 300px
.card-body
z-index: 2
width: 55%
box-shadow: 0 1px 3px rgba(0,0,0,.1)
border-bottom: 1px solid #ebebeb
margin-left: -40px
align-self: center
background-color: white
padding: $padding-card-body
h3
padding: 0
margin: 0
time
color: #bcc3ce
*:last-child
margin-bottom: 0
padding-bottom: 0
@media (max-width: $size-md)
.card
.card-image
width: 40%
.card-body
width: 60%
@media (max-width: $size-sm)
.card
height: inherit
.card-image
width: 30%
max-height: 200px
align-self: center
.card-body
align-self: inherit
margin: 0
width: 70%
&:nth-child(even)
.card-body
margin: 0