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

feat: Avancement général sur le contenu et le design

Browse Source 
fixes #3, fixes #4, fixes #5, fixes #7, fixes #8, fixes #9, fixes #10
This commit is contained in:
Simon
2020-11-25 18:00:03 +01:00
parent 1d59996608
commit f2a78d7375
157 changed files with 530 additions and 3745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/styles/fonts.sass Normal file
View File

@ -0,0 +1,59 @@
@font-face
font-family: 'League Spartan Variable'
src: url('/fonts/LeagueSpartan-VF.woff2') format('woff2-variations')
font-weight: 200 900
html
font-size: 18px
body
font-weight: 400
line-height: 1.2
font-family: 'League Spartan Variable'
h1, h2, h3, h4, h5
font-weight: 600
text-transform: uppercase
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: 1.4rem
margin: 1rem 0
text-transform: uppercase
@media screen and (max-width: $size-sm)
font-size: 1.1rem
h3
font-size: 1.1rem
text-transform: uppercase
@media screen and (max-width: $size-sm)
font-size: 1rem
h4
font-size: 1rem
@media screen and (max-width: $size-sm)
font-size: .9rem
p
margin-top: 1rem
margin-bottom: 1rem
small,
.text_small
font-size: 0.8rem

4
assets/styles/header.sass
View File

@ -130,7 +130,7 @@
&::before
content: ""
border-right: 2px white solid
border-right: 1px white solid
right: 0
height: 20px
@ -146,7 +146,7 @@
text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
img
padding: 0 10px
margin: 0 10px 0 0
@media screen and (max-width: $size-lg) and (min-width: $size-md)
display: none

55
assets/styles/html.sass
View File

@ -1,55 +0,0 @@
/* Box sizing rules */
*,*::before,*::after
box-sizing: border-box
html
/*-webkit-font-smoothing: antialiased*/
/*--moz-osx-font-smoothing: grayscale*/
scroll-behavior: smooth
/* 18px */
font-size: $font-size
body
font-weight: 400
line-height: 1.65
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
color: $color-primary
background-color: $color-secondary
p
margin-bottom: 1.15rem
h1,
h2,
h3,
h4,
h5
margin: 2.75rem 0 1.05rem
font-weight: 400
line-height: 1.15
h4,
h5
margin: 1.375rem 0 0.75rem
font-weight: 400
line-height: 1.15
h1
margin-top: 0
font-size: 4rem
h2
font-size: 3rem
h3
font-size: 3rem
h4
font-size: 2.5rem
h5
font-size: 2rem
small,
.text_small
font-size: 0.889em

172
assets/styles/main.sass
View File

@ -1,6 +1,3 @@
// VARIABLE
$font-size: 18px
$vert: #04874b
$orange: #f0833c
$grey: #e5e5e5
@ -14,29 +11,42 @@ $size-lg: 960px
$size-xl: 1280px
@import "./reset"
@import "./html"
@import "./fonts"
@import "./header"
@import "./posts"
@import "./print"
img
display: block
body
color: $color-primary
background-color: $color-secondary
&.round
border-radius: 100%
.maire
padding-bottom: 3rem
.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: 50px
width: 30px
.container
max-width: $size-lg
margin: 0 auto
padding: 0 1rem
@media screen and (max-width: $size-xs)
padding: 0 .5rem
&.md
padding: 0 .5rem
// content
@ -50,44 +60,14 @@ img
a
color: $color-primary
.container
> .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
@ -98,7 +78,7 @@ img
margin: 1rem
.news
width: 70%
width: 65%
display: flex
flex-direction: column
@media screen and (max-width: $size-xl)
@ -107,87 +87,9 @@ img
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%
width: 35%
padding: 20px
color: white
background-image: url(/icons/horloge.svg)
@ -195,7 +97,7 @@ img
background-position: center -50px
background-size: 70%
@media screen and (max-width: $size-xl)
width: 40%
width: 35%
@media screen and (max-width: $size-md)
width: 100%
margin: 0
@ -203,24 +105,32 @@ img
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
text-transform: inherit
p
font-size: .8rem
margin-top: 0
&:last-child
margin-bottom: 0
p:last-child
margin-bottom: 0
a
color: white
.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

76
assets/styles/posts.sass Normal file
View File

@ -0,0 +1,76 @@
$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
a
width: 100%
height: 100%
display: block
&.big
.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
margin: .6rem 0
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
h3
margin: .3rem 0
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.text
font-size: .9rem
overflow: hidden
text-overflow: ellipsis
width: 100%
padding-top: 6px
p
margin: 0
display: inline

132
assets/styles/print.sass
View File

@ -1,84 +1,80 @@
/* Print */
@media print
*
background: transparent !important
box-shadow: none !important
text-shadow: none !important
*
background: transparent !important
box-shadow: none !important
text-shadow: none !important
body
width: auto
margin: auto
font-family: serif
font-size: 12pt
body
width: auto
margin: auto
font-family: serif
font-size: 12pt
nav,
footer
display: none
p,
.p-like,
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like,
blockquote,
ul,
ol
color: #000
margin: auto
p,
.p-like,
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
h4,
.h4-like,
h5,
.h5-like,
h6,
.h6-like,
blockquote,
ul,
ol
color: #000
margin: auto
img
max-width: 100% !important
img
max-width: 100% !important
.print
display: block
.print
display: block
.no-print
display: none
.no-print
display: none
p,
.p-like,
blockquote
orphans: 3
widows: 3
p,
.p-like,
blockquote
orphans: 3
widows: 3
blockquote,
ul,
ol,
img
page-break-inside: avoid
blockquote,
ul,
ol,
img
page-break-inside: avoid
h1,
.h1-like
page-break-before: always
h1,
.h1-like
page-break-before: always
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
caption
page-break-after: avoid
h1,
.h1-like,
h2,
.h2-like,
h3,
.h3-like,
caption
page-break-after: avoid
a
color: #000
a
color: #000
a[href^="http"]:not([href*="cremeaux.fr"]):after
content: " (" attr(href) ")"
a[href^="http"]:not([href*="pikselkraft.com"]):after
content: " (" attr(href) ")"
a[href^="javascript:"]::after,
a[href^="#"]::after
content: ""
a[href^="javascript:"]::after,
a[href^="#"]::after
content: ""
abbr[title]:after
content: " (" attr(title) ")"
abbr[title]:after
content: " (" attr(title) ")"

11
assets/styles/reset.css
View File

@ -8,6 +8,12 @@ Reset CSS
box-sizing: border-box;
}
html {
/*-webkit-font-smoothing: antialiased*/
/*--moz-osx-font-smoothing: grayscale*/
scroll-behavior: smooth;
}
/* Remove default margin */
body,
h1,
@ -33,11 +39,6 @@ img {
display: block;
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,