cremeaux/assets/styles/main.sass

358 lines
6.4 KiB
Sass
Raw Normal View History

2020-11-04 23:45:35 +01:00
$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px
@import "./reset"
@import "./fonts"
2020-11-05 14:14:55 +01:00
@import "./header"
@import "./footer"
@import "./posts"
@import "./print"
@import "./css-masonry"
2020-11-04 23:45:35 +01:00
body
2023-06-05 16:16:20 +02:00
--color-green: #04874B
--color-blue: #586994
2023-06-06 16:54:45 +02:00
--color-orange: #D14200
2023-06-05 16:16:20 +02:00
--color-purple: #4C1036
--color-grey: #E8E9ED
--color-primary: black
--color-secondary: white
color: var(--color-primary)
background-color: var(--color-secondary)
2020-11-09 12:36:28 +01:00
.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
2020-11-09 12:36:28 +01:00
img
margin: 3rem auto
&:first-child img
margin: 0 auto 3rem
&:last-child img
margin: 3rem auto 0
&:first-child:last-child img
2020-11-09 12:36:28 +01:00
margin: 0 auto
2023-05-04 16:38:31 +02:00
.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%
2020-11-05 14:14:55 +01:00
// CONTAINER
2020-11-04 23:45:35 +01:00
2020-11-09 12:36:28 +01:00
.icons
width: 30px
2020-11-09 12:36:28 +01:00
2020-11-05 14:14:55 +01:00
.container
2023-06-05 16:16:20 +02:00
max-width: $size-xl
2020-11-05 14:14:55 +01:00
margin: 0 auto
2020-11-09 12:36:28 +01:00
padding: 0 1rem
@media screen and (max-width: $size-xs)
padding: 0 .5rem
2020-11-09 12:36:28 +01:00
// content
#content
margin-top: -10vh
min-height: 50vh
@media screen and (max-width: $size-md)
min-height: inherit
a
2023-06-05 16:16:20 +02:00
color: var(--color-primary)
2020-11-09 12:36:28 +01:00
> .container
2020-11-09 12:36:28 +01:00
background-color: white
padding: 1rem
2023-05-04 15:57:22 +02:00
position: relative
2020-11-09 12:36:28 +01:00
@media screen and (max-width: $size-sm)
margin: 0
2020-11-25 18:20:38 +01:00
padding: 1rem
@media screen and (max-width: $size-xs)
padding: .5rem
2020-11-09 12:36:28 +01:00
2023-06-06 16:54:45 +02:00
.containerGrid
display: flex
2023-06-07 10:55:33 +02:00
@media screen and (max-width: $size-md)
flex-direction: column
2023-06-06 16:54:45 +02:00
.actus
width: 75%
2023-06-07 10:55:33 +02:00
@media screen and (max-width: $size-md)
width: 100%
2023-06-06 16:54:45 +02:00
.infos
width: 25%
2023-06-07 10:55:33 +02:00
@media screen and (max-width: $size-md)
width: 100%
padding-left: 0
2023-06-06 16:54:45 +02:00
padding: 7rem 0 0 1rem
display: block
.infos
2020-11-09 12:36:28 +01:00
display: flex
@media screen and (max-width: $size-md)
flex-direction: column
.news, .opening
min-height: 500px
margin: 1rem
2020-11-09 12:36:28 +01:00
.news
2023-06-06 16:54:45 +02:00
width: 75%
2020-11-09 12:36:28 +01:00
display: flex
flex-direction: column
@media screen and (max-width: $size-xl)
2023-06-06 16:54:45 +02:00
width: 70%
@media screen and (max-width: $size-md)
width: 100%
margin: 0
2020-11-09 12:36:28 +01:00
.opening
2023-06-05 16:16:20 +02:00
background: var(--color-orange)
2023-06-06 16:54:45 +02:00
width: 25%
padding: 20px
2023-06-06 16:54:45 +02:00
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)
2023-06-06 16:54:45 +02:00
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
2023-06-06 16:54:45 +02:00
color: white
.actu + #content
margin-top: -4rem
@media screen and (max-width: $size-md)
.container
2023-06-06 16:54:45 +02:00
.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
2020-11-09 12:36:28 +01:00
hr
margin: 3rem auto
2023-06-05 16:16:20 +02:00
border: 1px dashed var(--color-green)
@media screen and (max-width: $size-xs)
margin: 2rem auto
2020-11-09 12:36:28 +01:00
// FOOTER
.explain
text-align: center
font-size: .6rem
2023-06-05 16:16:20 +02:00
background-color: var(--color-green)
color: white
a
color: white
2020-11-09 12:36:28 +01:00
#content .conseilmunicipal
display: flex
flex-wrap: wrap
justify-content: center
.person
margin: 1rem
width: 250px
text-align: center
.card-image
margin-bottom: 1rem
h2
2023-06-05 16:16:20 +02:00
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: 1024px
margin-left: auto
margin-right: auto
2023-05-04 15:57:22 +02:00
@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
2021-09-09 00:10:40 +02:00
#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)
2023-06-06 16:54:45 +02:00
border: 1px solid var(--color-purple)
2021-09-09 00:10:40 +02:00
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
2023-06-05 16:16:20 +02:00
color: var(--color-purple)
2021-09-09 00:10:40 +02:00
background-color: white
2023-05-04 15:57:22 +02:00
blockquote
font-size: 1em
2023-05-04 16:38:31 +02:00
margin-top: 50px !important
margin-bottom: 50px !important
2023-05-04 15:57:22 +02:00
font-family: Open Sans
font-style: italic
color: #555555
padding: 1.5rem
2023-06-05 16:16:20 +02:00
border-left: 8px solid var(--color-green)
2023-05-04 15:57:22 +02:00
line-height: 1.4
2023-06-05 16:16:20 +02:00
background: var(--color-grey)
2023-05-04 15:57:22 +02:00
position: relative
& > :first-child
margin-top: 0
padding-top: 0
& > :last-child
margin-bottom: 0
padding-bottom: 0
&::before
font-family: Arial
content: "\201C"
2023-06-05 16:16:20 +02:00
color: var(--color-green)
2023-05-04 15:57:22 +02:00
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
2023-06-06 16:54:45 +02:00
.bandeau
margin: 0;
font-size: 1rem;
margin-top: -.5rem;
text-align: center;
font-weight: bold;
#content .bandeau, #content .bandeau a
color: #e00000;