352 lines
6.3 KiB
Sass
352 lines
6.3 KiB
Sass
$size-xs: 480px
|
|
$size-sm: 600px
|
|
$size-md: 840px
|
|
$size-lg: 960px
|
|
$size-xl: 1280px
|
|
|
|
@import "./reset"
|
|
@import "./fonts"
|
|
@import "./header"
|
|
@import "./footer"
|
|
@import "./posts"
|
|
@import "./print"
|
|
@import "./css-masonry"
|
|
|
|
body
|
|
--color-green: #04874B
|
|
--color-blue: #586994
|
|
--color-orange: #D14200
|
|
--color-purple: #4C1036
|
|
--color-grey: #E8E9ED
|
|
--color-primary: black
|
|
--color-secondary: white
|
|
|
|
color: var(--color-primary)
|
|
background-color: var(--color-secondary)
|
|
|
|
.open-button, .close-button
|
|
border-radius: 0
|
|
border: 1px solid white
|
|
padding: .2rem .5rem
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
color: white
|
|
|
|
li
|
|
padding-bottom: .3rem
|
|
|
|
|
|
.md p
|
|
img
|
|
margin: 3rem auto
|
|
&:first-child img
|
|
margin: 0 auto 3rem
|
|
&:last-child img
|
|
margin: 3rem auto 0
|
|
&:first-child:last-child img
|
|
margin: 0 auto
|
|
|
|
.grand
|
|
margin: 1rem calc((960px - 650px) / 2 * -1)
|
|
@media screen and (max-width: $size-lg)
|
|
margin: 1rem calc((960px - 650px) / 3 * -1)
|
|
@media screen and (max-width: $size-md)
|
|
margin: 1rem -2rem
|
|
@media screen and (max-width: $size-sm)
|
|
margin: 1rem -1rem
|
|
@media screen and (max-width: $size-xs)
|
|
margin: 1rem -.5rem
|
|
|
|
.round
|
|
border-radius: 100%
|
|
|
|
// CONTAINER
|
|
|
|
.icons
|
|
width: 30px
|
|
|
|
.container
|
|
max-width: $size-xl
|
|
margin: 0 auto
|
|
padding: 0 1rem
|
|
@media screen and (max-width: $size-xs)
|
|
padding: 0 .5rem
|
|
|
|
// content
|
|
|
|
#content
|
|
margin-top: -10vh
|
|
min-height: 50vh
|
|
|
|
@media screen and (max-width: $size-md)
|
|
min-height: inherit
|
|
|
|
a
|
|
color: var(--color-primary)
|
|
|
|
> .container
|
|
background-color: white
|
|
padding: 1rem
|
|
position: relative
|
|
@media screen and (max-width: $size-sm)
|
|
margin: 0
|
|
padding: 1rem
|
|
@media screen and (max-width: $size-xs)
|
|
padding: 1rem .5rem
|
|
|
|
.containerGrid
|
|
display: flex
|
|
@media screen and (max-width: $size-md)
|
|
flex-direction: column
|
|
.actus
|
|
width: 75%
|
|
@media screen and (max-width: $size-md)
|
|
width: 100%
|
|
.infos
|
|
width: 25%
|
|
@media screen and (max-width: $size-md)
|
|
width: 100%
|
|
padding-left: 0
|
|
padding: 7rem 0 0 1rem
|
|
display: block
|
|
|
|
.infos
|
|
display: flex
|
|
@media screen and (max-width: $size-md)
|
|
flex-direction: column
|
|
.news, .opening
|
|
min-height: 500px
|
|
margin: 1rem
|
|
|
|
.news
|
|
width: 75%
|
|
display: flex
|
|
flex-direction: column
|
|
@media screen and (max-width: $size-xl)
|
|
width: 70%
|
|
@media screen and (max-width: $size-md)
|
|
width: 100%
|
|
margin: 0
|
|
|
|
.opening
|
|
background: var(--color-orange)
|
|
width: 25%
|
|
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: 30%
|
|
@media screen and (max-width: $size-md)
|
|
width: 100%
|
|
margin: 0
|
|
background-position-x: 120%
|
|
background-size: 50%
|
|
|
|
h2
|
|
margin: 1rem 0
|
|
|
|
h3
|
|
margin: 1rem 0 .4rem
|
|
text-transform: inherit
|
|
|
|
p
|
|
margin-top: 0
|
|
|
|
p:last-child
|
|
margin-bottom: 0
|
|
|
|
a
|
|
color: white
|
|
|
|
.nouveautes
|
|
border: 1px solid black
|
|
padding: 20px
|
|
|
|
ul
|
|
padding-left: 1rem
|
|
|
|
.opening2
|
|
background: var(--color-orange)
|
|
margin-top: 2rem
|
|
margin-bottom: 2rem
|
|
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-md)
|
|
background-position-x: 120%
|
|
background-size: 50%
|
|
|
|
h2
|
|
margin: 1rem 0
|
|
|
|
h3
|
|
margin: 1rem 0 .4rem
|
|
text-transform: inherit
|
|
|
|
p
|
|
margin-top: 0
|
|
|
|
p:last-child
|
|
margin-bottom: 0
|
|
|
|
a
|
|
color: white
|
|
|
|
.news
|
|
aside h2
|
|
text-align: center
|
|
> small
|
|
display: block
|
|
text-align: center
|
|
|
|
hr
|
|
margin: 3rem auto
|
|
border: 1px dashed var(--color-green)
|
|
@media screen and (max-width: $size-xs)
|
|
margin: 2rem auto
|
|
// FOOTER
|
|
|
|
.explain
|
|
text-align: center
|
|
font-size: .6rem
|
|
background-color: var(--color-green)
|
|
color: white
|
|
|
|
a
|
|
color: white
|
|
|
|
#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: var(--color-green)
|
|
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: 650px
|
|
margin-left: auto
|
|
margin-right: auto
|
|
@media screen and (max-width: $size-sm)
|
|
padding: 0
|
|
|
|
.obfuscate:before
|
|
content: attr(data-param2)
|
|
unicode-bidi: bidi-override
|
|
direction: rtl
|
|
|
|
&.at
|
|
content: attr(data-param4) "\002E" attr(data-param3) "\0040" attr(data-param2)
|
|
|
|
details > summary
|
|
cursor: pointer
|
|
padding: .5rem 0
|
|
|
|
#content .cards
|
|
margin: 0 -1rem
|
|
padding: 0
|
|
list-style-type: none
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
.card
|
|
flex: 0 0 calc(100% * 3 / 12)
|
|
border: 1px solid var(--color-purple)
|
|
margin: 1rem
|
|
padding: 1rem
|
|
border-radius: 4px
|
|
text-align: center
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
color: white
|
|
|
|
h2
|
|
text-transform: none
|
|
padding: 0
|
|
margin: 0
|
|
font-size: 1.2rem
|
|
|
|
&:hover
|
|
box-shadow: none
|
|
color: var(--color-purple)
|
|
background-color: white
|
|
|
|
blockquote
|
|
font-size: 1em
|
|
margin-top: 50px !important
|
|
margin-bottom: 50px !important
|
|
font-family: Open Sans
|
|
font-style: italic
|
|
color: #555555
|
|
padding: 1.5rem
|
|
border-left: 8px solid var(--color-green)
|
|
line-height: 1.4
|
|
background: var(--color-grey)
|
|
|
|
position: relative
|
|
|
|
& > :first-child
|
|
margin-top: 0
|
|
padding-top: 0
|
|
|
|
& > :last-child
|
|
margin-bottom: 0
|
|
padding-bottom: 0
|
|
|
|
&::before
|
|
font-family: Arial
|
|
content: "\201C"
|
|
color: var(--color-green)
|
|
font-size: 10rem
|
|
position: absolute
|
|
left: 1rem
|
|
top: 2rem
|
|
opacity: .5
|
|
line-height: 0
|
|
|
|
@media screen and (max-width: $size-sm)
|
|
padding: 1rem
|
|
|
|
blockquote span
|
|
display: block
|
|
color: #333333
|
|
font-style: normal
|
|
font-weight: bold
|
|
margin-top: 1em
|
|
|
|
.bandeau
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
margin-top: -.5rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
|
|
#content .bandeau, #content .bandeau a
|
|
color: #e00000;
|