292 lines
4.8 KiB
Sass
292 lines
4.8 KiB
Sass
|
|
@font-face
|
|
font-family: "subscriber"
|
|
src: url("/fonts/subscriber.woff") format("woff")
|
|
|
|
h1, h2
|
|
font-family: subscriber
|
|
|
|
h2
|
|
text-transform: uppercase
|
|
text-align: center
|
|
|
|
html, body
|
|
min-height: 100%
|
|
background-color: white
|
|
padding: 0
|
|
margin: 0
|
|
|
|
.container
|
|
width: $content-width
|
|
margin: 0 auto
|
|
|
|
@media screen and (max-width: 800px)
|
|
.container
|
|
width: inherit
|
|
|
|
.jaune
|
|
h2
|
|
color: $jaune
|
|
.rouge
|
|
h2
|
|
color: $rouge
|
|
.vert
|
|
h2
|
|
color: $vert
|
|
.bleu
|
|
h2
|
|
color: $bleu
|
|
|
|
@media screen and (max-width: 800px)
|
|
.header .title
|
|
z-index: 20000
|
|
display: block
|
|
top: 1rem
|
|
position: absolute
|
|
left: 0
|
|
right: 0
|
|
background: white
|
|
|
|
.nav
|
|
// display: none
|
|
display: flex
|
|
position: absolute
|
|
top: 100px
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
z-index: 1000
|
|
background-color: white
|
|
width: 100vw
|
|
height: calc(100vh - 100px)
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.menu
|
|
margin: 0
|
|
padding: 0
|
|
list-style: none
|
|
|
|
> li
|
|
padding: .5rem 1rem
|
|
text-align: center
|
|
|
|
> a
|
|
margin: 0 auto
|
|
padding: .2rem
|
|
color: red
|
|
border: 2px solid red
|
|
width: 200px
|
|
display: block
|
|
|
|
&.vert
|
|
a
|
|
color: $vert
|
|
border-color: $vert
|
|
background-color: scale-color($vert, $lightness: +50%)
|
|
|
|
&.jaune
|
|
a
|
|
color: $jaune
|
|
border-color: $jaune
|
|
background-color: scale-color($jaune, $lightness: +50%)
|
|
|
|
&.rouge
|
|
a
|
|
color: $rouge
|
|
border-color: $rouge
|
|
background-color: scale-color($rouge, $lightness: +50%)
|
|
|
|
&.bleu
|
|
a
|
|
color: $bleu
|
|
border-color: $bleu
|
|
background-color: scale-color($bleu, $lightness: +50%)
|
|
|
|
.sousmenu
|
|
padding: 0
|
|
li
|
|
display: inline
|
|
a
|
|
background-color: white!important
|
|
|
|
.header button
|
|
display: block
|
|
|
|
@media screen and (min-width: 800px)
|
|
.nav
|
|
margin-bottom: 22px
|
|
|
|
ul
|
|
display: flex
|
|
margin: 0
|
|
padding: 0
|
|
list-style: none
|
|
|
|
ul.menu
|
|
|
|
.sousmenu
|
|
position: absolute
|
|
display: none
|
|
padding-top: 20px
|
|
top: calc(100% - 18px)
|
|
left: 0
|
|
right: 0
|
|
justify-content: space-around
|
|
background-color: white
|
|
|
|
&::before,
|
|
&::after
|
|
content: ""
|
|
border-top: 1px $gris dashed
|
|
height: 1px
|
|
width: 100%
|
|
position: absolute
|
|
|
|
&::after
|
|
bottom: -1px
|
|
|
|
&::before
|
|
top: 18px
|
|
|
|
a
|
|
border: 0
|
|
color: $gris!important
|
|
|
|
.sousmenu.active
|
|
display: flex
|
|
|
|
|
|
li
|
|
margin: .2rem
|
|
|
|
&:hover ul
|
|
display: flex
|
|
z-index: 20
|
|
|
|
|
|
&:last-child
|
|
margin-right: 0
|
|
|
|
a
|
|
padding: .5rem
|
|
border: 2px solid white
|
|
text-decoration: none
|
|
font-size: 1rem
|
|
color: white
|
|
|
|
&:hover
|
|
opacity: .8
|
|
|
|
.vert
|
|
a
|
|
color: $vert
|
|
border-color: $vert
|
|
|
|
.jaune
|
|
a
|
|
color: $jaune
|
|
border-color: $jaune
|
|
|
|
.rouge
|
|
a
|
|
color: $rouge
|
|
border-color: $rouge
|
|
|
|
.bleu
|
|
a
|
|
color: $bleu
|
|
border-color: $bleu
|
|
|
|
.active
|
|
a
|
|
background-color: white
|
|
border-style: dashed
|
|
border-color: white!important
|
|
|
|
&.jaune
|
|
a
|
|
color: $jaune
|
|
border-bottom-color: $jaune
|
|
|
|
&.rouge
|
|
a
|
|
color: $rouge
|
|
border-bottom-color: $rouge
|
|
|
|
&.vert
|
|
a
|
|
color: $vert
|
|
border-bottom-color: $vert
|
|
|
|
&.bleu
|
|
a
|
|
color: $bleu
|
|
border-bottom-color: $bleu
|
|
|
|
#content
|
|
width: 800px
|
|
margin: 0 auto
|
|
margin-bottom: 2rem
|
|
|
|
.footer
|
|
background-color: #222
|
|
color: white
|
|
|
|
h4
|
|
text-align: center
|
|
|
|
.container
|
|
padding: 2rem 0
|
|
display: flex
|
|
|
|
> div
|
|
margin: 0 10px
|
|
padding: 10px
|
|
background-color: scale-color(#222, $lightness: +15%)
|
|
|
|
div:first-child
|
|
margin-left: 0
|
|
|
|
div:last-child
|
|
margin-right: 0
|
|
|
|
.title
|
|
height: 130px
|
|
display: flex
|
|
align-items: flex-end
|
|
justify-content: center
|
|
|
|
.conseilmunicipal
|
|
display: flex
|
|
margin: 0 auto
|
|
padding: 0 10px 10px
|
|
list-style: none
|
|
flex-wrap: wrap
|
|
max-width: 1300px
|
|
justify-content: space-around
|
|
|
|
li
|
|
width: 250px
|
|
padding: 10px
|
|
|
|
figcaption
|
|
text-align: center
|
|
|
|
h3
|
|
margin: 10px 0
|
|
font-size: 1em
|
|
|
|
p
|
|
margin: 0
|
|
font-size: .8em
|
|
line-height: 1em
|
|
|
|
img.round
|
|
border-radius: 100%
|
|
|
|
img.paysage
|
|
width: 100%
|
|
height: 600px
|
|
object-fit: cover
|