320 lines
5.8 KiB
Sass
320 lines
5.8 KiB
Sass
// VARIABLE
|
|
$font-size: 18px
|
|
|
|
$vert: #04874b
|
|
$orange: #f0833c
|
|
$grey: #e5e5e5
|
|
$color-primary: black
|
|
$color-secondary: white
|
|
|
|
$size-xs: 480px
|
|
$size-sm: 600px
|
|
$size-md: 840px
|
|
$size-lg: 960px
|
|
$size-xl: 1280px
|
|
|
|
@import "./reset"
|
|
@import "./html"
|
|
@import "./header"
|
|
|
|
img
|
|
display: block
|
|
|
|
&.round
|
|
border-radius: 100%
|
|
|
|
.maire
|
|
padding-bottom: 3rem
|
|
img
|
|
margin: 0 auto
|
|
|
|
// CONTAINER
|
|
|
|
.icons
|
|
width: 50px
|
|
|
|
.container
|
|
max-width: $size-lg
|
|
margin: 0 auto
|
|
padding: 0 1rem
|
|
|
|
// content
|
|
|
|
#content
|
|
margin-top: -10vh
|
|
min-height: 50vh
|
|
|
|
@media screen and (max-width: $size-md)
|
|
min-height: inherit
|
|
|
|
a
|
|
color: $color-primary
|
|
|
|
.container
|
|
background-color: white
|
|
padding: 1rem
|
|
@media screen and (max-width: $size-sm)
|
|
margin: 0
|
|
padding: 1rem 0
|
|
|
|
h1
|
|
text-align: center
|
|
text-transform: uppercase
|
|
color: $vert
|
|
margin: 0 1rem 1rem
|
|
padding: 1rem
|
|
font-size: 2.5rem
|
|
word-wrap: anywhere
|
|
@media screen and (max-width: $size-sm)
|
|
font-size: 1.2rem
|
|
margin: 0
|
|
|
|
strong
|
|
font-size: 3.5rem
|
|
@media screen and (max-width: $size-sm)
|
|
font-size: 1.8rem
|
|
|
|
h2
|
|
font-size: 2rem
|
|
@media screen and (max-width: $size-sm)
|
|
font-size: 1.1rem
|
|
|
|
h3
|
|
font-size: 1.8rem
|
|
@media screen and (max-width: $size-sm)
|
|
font-size: 1rem
|
|
|
|
h4
|
|
font-size: 1.6rem
|
|
@media screen and (max-width: $size-sm)
|
|
font-size: .9rem
|
|
|
|
.infos
|
|
display: flex
|
|
@media screen and (max-width: $size-md)
|
|
flex-direction: column
|
|
.news, .opening
|
|
min-height: 500px
|
|
margin: 1rem
|
|
|
|
.news
|
|
width: 70%
|
|
display: flex
|
|
flex-direction: column
|
|
@media screen and (max-width: $size-xl)
|
|
width: 65%
|
|
@media screen and (max-width: $size-md)
|
|
width: 100%
|
|
margin: 0
|
|
|
|
|
|
$size-la-une: 220px
|
|
$size-news: 100px
|
|
.post
|
|
display: flex
|
|
flex-wrap: nowrap
|
|
margin-bottom: 2rem
|
|
|
|
@media screen and (max-width: $size-sm)
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
.picture
|
|
width: $size-news
|
|
height: $size-news
|
|
background: $orange
|
|
flex-shrink: 0
|
|
@media screen and (max-width: $size-sm)
|
|
margin-bottom: 1rem
|
|
|
|
&.last
|
|
|
|
.picture
|
|
width: $size-la-une
|
|
height: $size-la-une
|
|
@media screen and (max-width: $size-sm)
|
|
width: 100%
|
|
overflow: hidden
|
|
margin: 0
|
|
img
|
|
width: 100%
|
|
.details
|
|
padding: 20px
|
|
background: $grey
|
|
height: $size-la-une
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
@media screen and (max-width: $size-sm)
|
|
height: inherit
|
|
.details
|
|
padding: 0 1rem
|
|
height: $size-news
|
|
max-width: 100%
|
|
overflow: hidden
|
|
@media screen and (max-width: $size-sm)
|
|
height: inherit
|
|
text-align: center
|
|
|
|
span
|
|
font-size: .8rem
|
|
display: block
|
|
h2
|
|
font-size: 1.4rem
|
|
font-weight: bold
|
|
margin: .6rem 0
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
h3
|
|
font-size: 1.1rem
|
|
font-weight: bold
|
|
margin: 0
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
.text
|
|
font-size: .8rem
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
width: 100%
|
|
padding-top: 6px
|
|
|
|
p
|
|
margin: 0
|
|
|
|
|
|
|
|
.opening
|
|
background: $orange
|
|
width: 30%
|
|
padding: 20px
|
|
color: white
|
|
background-image: url(/icons/horloge.svg)
|
|
background-repeat: no-repeat
|
|
background-position: center -50px
|
|
background-size: 70%
|
|
@media screen and (max-width: $size-xl)
|
|
width: 40%
|
|
@media screen and (max-width: $size-md)
|
|
width: 100%
|
|
margin: 0
|
|
background-position-x: 120%
|
|
background-size: 50%
|
|
|
|
h2
|
|
font-size: 1.4rem
|
|
margin: 1rem 0
|
|
font-weight: bold
|
|
|
|
h3
|
|
margin: 1rem 0 .4rem
|
|
font-size: 1.2rem
|
|
font-weight: bold
|
|
|
|
p
|
|
font-size: .8rem
|
|
|
|
&:last-child
|
|
margin-bottom: 0
|
|
|
|
a
|
|
color: white
|
|
|
|
// FOOTER
|
|
|
|
.explain
|
|
text-align: center
|
|
font-size: .6rem
|
|
background-color: $vert
|
|
color: white
|
|
|
|
a
|
|
color: white
|
|
|
|
.footer
|
|
background: $vert
|
|
color: white
|
|
padding: 2rem 0
|
|
|
|
.icons
|
|
height: 30px
|
|
width: 30px
|
|
margin: 1rem 0 .5rem .5rem
|
|
|
|
a
|
|
color: white
|
|
display: inline-block
|
|
|
|
.container
|
|
display: flex
|
|
@media screen and (max-width: $size-md)
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
@media screen and (max-width: $size-sm)
|
|
flex-direction: column
|
|
|
|
.address
|
|
text-align: right
|
|
.logo
|
|
width: 20%
|
|
@media screen and (max-width: $size-md)
|
|
order: -1
|
|
width: 100%
|
|
img
|
|
margin: 0 auto 1rem
|
|
.horaire,
|
|
.address
|
|
width: 40%
|
|
padding: 1rem
|
|
|
|
@media screen and (max-width: $size-sm)
|
|
width: 100%
|
|
text-align: center
|
|
padding: 1rem 0 0
|
|
|
|
h3
|
|
font-size: 1.3rem
|
|
margin: 0 0 .7rem
|
|
font-weight: bold
|
|
|
|
p
|
|
margin: 0
|
|
line-height: 1.1rem
|
|
|
|
#content .commissions
|
|
h3, h4
|
|
color: $vert
|
|
|
|
#content .conseilmunicipal
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
|
|
.person
|
|
margin: 1rem
|
|
width: 250px
|
|
text-align: center
|
|
.card-image
|
|
margin-bottom: 1rem
|
|
|
|
h2
|
|
color: $vert
|
|
font-size: 1.1rem
|
|
padding: 0
|
|
margin: 0 0 .3rem
|
|
|
|
h3
|
|
font-size: 1rem
|
|
padding: 0
|
|
margin: 0
|
|
|
|
.card-body
|
|
font-size: .9rem
|
|
|
|
|
|
.md
|
|
max-width: 645px
|
|
margin-left: auto
|
|
margin-right: auto
|