histoiredunpied/assets/css/main.sass

196 lines
2.8 KiB
Sass
Raw Normal View History

2020-02-14 16:58:45 +01:00
@import "./font"
2020-02-14 16:40:46 +01:00
@import "./grid"
2020-02-11 09:02:51 +01:00
2020-02-14 16:58:45 +01:00
// Couleur
$primary-color: #e72520
2020-02-14 16:40:46 +01:00
// Responsive breakpoints
$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px
$size-2x: 1440px
2020-02-11 09:02:51 +01:00
body
margin: 0
2020-02-14 16:58:45 +01:00
font-family: $font-family
2020-02-11 09:02:51 +01:00
a
color: black
2020-02-14 16:58:45 +01:00
text-decoration-color: $primary-color
2020-02-14 16:40:46 +01:00
&:hover
2020-02-14 16:58:45 +01:00
color: $primary-color
2020-02-14 16:40:46 +01:00
@mixin container
max-width: $size-lg
margin: 0 auto
padding: 0 20px
.container
@include container
2020-02-11 09:02:51 +01:00
.header
position: fixed
2020-02-14 16:40:46 +01:00
z-index: 3
2020-02-11 09:02:51 +01:00
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
2020-02-14 16:40:46 +01:00
.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
2020-02-11 09:02:51 +01:00
.bg
position: relative
2020-02-14 16:40:46 +01:00
padding: 20px 0
2020-02-11 09:02:51 +01:00
&.colored
2020-02-14 16:40:46 +01:00
background-color: #f2f2f2
@media (max-width: $size-md)
padding: 10px 0
2020-02-11 09:02:51 +01:00
#content
padding-top: 90px
2020-02-14 16:40:46 +01:00
$gutter: 10px
$padding-card: 20px
$padding-card-body: 20px
2020-02-11 09:02:51 +01:00
2020-02-14 16:40:46 +01:00
.news
display: flex
flex-wrap: wrap
align-items: center
2020-02-11 09:02:51 +01:00
2020-02-14 16:40:46 +01:00
.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