Weko/cremeaux
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: Avancement dans l'architecture du site

Browse Source
This commit is contained in:
Simon
2020-11-23 11:31:02 +01:00
parent f1fcafd47b
commit 2ff814cd9b
47 changed files with 536 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
assets/styles/main.sass
View File

@ -34,7 +34,7 @@ img
width: 50px
.container
max-width: $size-xl
max-width: $size-lg
margin: 0 auto
padding: 0 1rem
@ -42,10 +42,16 @@ img
#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
margin: 0 1rem
padding: 1rem
@media screen and (max-width: $size-sm)
margin: 0
@ -55,166 +61,190 @@ img
text-align: center
text-transform: uppercase
color: $vert
margin: 1rem 2rem 2rem
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
.container.news
padding: 1rem 5rem
h2
font-size: 2rem
@media screen and (max-width: $size-sm)
padding: 0 1rem
.infos
display: flex
@media screen and (max-width: $size-md)
flex-direction: column
.news, .opening
min-height: 500px
margin: 1rem
font-size: 1.1rem
.news
width: 70%
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
flex-direction: column
@media screen and (max-width: $size-xl)
width: 65%
@media screen and (max-width: $size-md)
width: 100%
margin: 0
flex-direction: column
.news, .opening
min-height: 500px
margin: 1rem
$size-la-une: 220px
$size-news: 100px
.post
.news
width: 70%
display: flex
flex-wrap: nowrap
margin-bottom: 2rem
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
flex-direction: column
justify-content: center
align-items: center
.picture
width: $size-la-une
height: $size-la-une
width: $size-news
height: $size-news
background: $orange
flex-shrink: 0
@media screen and (max-width: $size-sm)
width: 100%
overflow: hidden
margin: 0
img
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: 20px
background: $grey
height: $size-la-une
padding: 0 1rem
height: $size-news
max-width: 100%
overflow: hidden
text-overflow: ellipsis
@media screen and (max-width: $size-sm)
height: inherit
.details
padding: 0 1rem
height: $size-news
overflow: hidden
@media screen and (max-width: $size-sm)
height: inherit
text-align: center
text-align: center
a
color: black
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
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
.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
@media screen and (max-width: $size-sm)
padding: 1rem 0
.icons
height: 30px
width: 30px
margin: 1rem 0 .5rem .5rem
a
color: white
display: inline-block
.container
display: flex
@ -232,7 +262,7 @@ img
order: -1
width: 100%
img
margin: 0 auto
margin: 0 auto 1rem
.horaire,
.address
width: 40%
@ -244,10 +274,46 @@ img
padding: 1rem 0 0
h3
font-size: 1.5rem
margin-top: 0
font-size: 1.3rem
margin: 0 0 .7rem
font-weight: bold
p
margin: 0
line-height: 1.3rem
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