cremeaux/assets/styles/main.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