cremeaux/assets/styles/main.sass

237 lines
3.9 KiB
Sass

$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 "./fonts"
@import "./header"
@import "./footer"
@import "./posts"
@import "./print"
@import "./css-masonry"
body
color: $color-primary
background-color: $color-secondary
.open-button, .close-button
border-radius: 0
border: 1px solid white
padding: .2rem .5rem
cursor: pointer
&:hover
color: white
.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
.round
border-radius: 100%
// CONTAINER
.icons
width: 30px
.container
max-width: $size-lg
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: $color-primary
> .container
background-color: white
padding: 1rem
@media screen and (max-width: $size-sm)
margin: 0
padding: 1rem
@media screen and (max-width: $size-xs)
padding: 1rem .5rem
.infos
display: flex
@media screen and (max-width: $size-md)
flex-direction: column
.news, .opening
min-height: 500px
margin: 1rem
.news
width: 65%
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
.opening
background: $orange
width: 35%
padding: 20px
color: black
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: 35%
@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: black
.news
aside h2
text-align: center
> small
display: block
text-align: center
hr
margin: 3rem auto
border: 1px dashed $vert
@media screen and (max-width: $size-xs)
margin: 2rem auto
// FOOTER
.explain
text-align: center
font-size: .6rem
background-color: $vert
color: white
a
color: white
#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
.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
// $vert: #04874b
// $orange: #f0833c
// $grey: #e5e5e5
// $color-primary: black
// $color-secondary: white
#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)
background-color: #f0833c
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: $vert
background-color: white