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

156
assets/styles/header.sass
View File

@ -6,6 +6,8 @@
&.home
height: 80vh
.hero
height: 80vh
.hero
position: absolute
@ -16,8 +18,10 @@
z-index: -1
object-fit: cover
width: 100%
height: 100%
height: 40vh
background-color: $orange
$nav-height: 70px
.nav
position: absolute
top: 50px
@ -25,7 +29,7 @@
left: 0
right: 0
background-color: $vert
height: 70px
height: $nav-height
@media screen and (max-width: $size-md)
top: 30px
@ -34,10 +38,7 @@
.container
display: flex
align-items: center
justify-content: center
@media screen and (max-width: $size-md)
justify-content: space-between
justify-content: space-between
.logo
$size-border-logo: 20px
@ -61,11 +62,14 @@
img
position: relative
height: 70px
height: $nav-height
width: 214px
z-index: 30
text-align: center
@media screen and (max-width: $size-md)
height: 50px
width: 154px
#menu
list-style-type: none
@ -73,10 +77,83 @@
align-items: center
padding: 0
margin: 0
height: $nav-height
@media screen and (max-width: $size-xl)
font-size: .95rem
.submenu
list-style-type: none
display: none
position: absolute
color: $vert
background: white
top: $nav-height
flex-direction: column
margin: 0
padding: 1rem
width: max-content
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px
a
color: $vert
padding: 10px 0 0
&:hover
text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
.menu:hover .submenu
display: flex
.menu.withSubmenu:hover::after
content: ''
display: block
position: absolute
left: calc(50% - 7.5px)
top: 100%
width: 0
height: 0
border-top: 15px solid $vert
border-right: 15px solid transparent
border-bottom: 0 solid transparent
border-left: 15px solid transparent
z-index: 10000
.menu
display: flex
align-items: center
position: relative
height: 100%
&:first-child::before
content: none
&::before
content: ""
border-right: 2px white solid
right: 0
height: 20px
a
color: white
display: flex
align-items: center
padding: 0 10px
height: 100%
text-decoration: none
&:hover
text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
img
padding: 0 10px
@media screen and (max-width: $size-lg) and (min-width: $size-md)
display: none
span
white-space: nowrap
@media screen and (max-width: $size-md)
display: none
position: fixed
@ -84,6 +161,7 @@
bottom: 0
left: 0
right: 0
height: 100vh
z-index: 100
background: $vert
flex-direction: column
@ -98,40 +176,42 @@
img
display: inherit
li
display: flex
align-items: center
.menu
height: auto
flex-direction: column
margin-bottom: 1rem
&:last-child::after
.menu.withSubmenu
padding: 10px
.submenu
display: flex
position: relative
top: 0
padding: 0
margin-top: 1rem
border-radius: 6px
&::before
content: ''
display: block
position: absolute
left: calc(50% - 15px)
top: -15px
width: 0
height: 0
border-top: 0 solid transparent
border-right: 15px solid transparent
border-bottom: 15px solid white
border-left: 15px solid transparent
z-index: 10000
a
padding: 2px 10px
.menu:before
content: none
&::after
content: ""
border-right: 2px white solid
height: 20px
@media screen and (max-width: $size-md)
content: none
a
color: white
display: flex
align-items: center
padding: 10px
text-decoration: none
&:hover
color: $orange
img
padding: 0 10px
@media screen and (max-width: $size-lg) and (min-width: $size-md)
display: none
span
white-space: nowrap
.open-button
display: none
white-space: nowrap

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