histoiredunpied/assets/css/main.sass

125 lines
1.7 KiB
Sass
Raw Normal View History

2020-02-14 16:58:45 +01:00
// Couleur
$primary-color: #e72520
2020-02-20 18:29:02 +01:00
$bg-color: #f2f2f2
2020-02-14 16:58:45 +01:00
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
2020-02-20 18:29:02 +01:00
@import "./font"
@import "./grid"
@import "./card"
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-20 18:29:02 +01:00
font-size: 13px
2020-02-11 09:02:51 +01:00
2020-02-20 18:29:02 +01:00
h2
color: grey
2020-02-17 14:32:31 +01:00
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
2020-02-20 18:29:02 +01:00
@media (max-width: $size-sm - 1px)
2020-02-14 16:40:46 +01:00
.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-20 18:29:02 +01:00
background-color: $bg-color
2020-02-14 16:40:46 +01:00
@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
.news
display: flex
flex-wrap: wrap
align-items: center