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

feat: Mise en place du site

Browse Source
This commit is contained in:
Simon
2021-06-12 01:58:10 +02:00
parent b60416834e
commit bbe2cf563e
89 changed files with 2203 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
assets/styles/basic/html.sass Normal file
View File

@ -0,0 +1,92 @@
html
/*-webkit-font-smoothing: antialiased*/
/*--moz-osx-font-smoothing: grayscale*/
scroll-behavior: smooth
/* 18px */
font-size: 112.5%
@media screen and (max-width: $size-small)
font-size: 100%
body
font-weight: 400
line-height: 1.65
font-family: var(--font)
color: var(--color-paragraph)
background-color: var(--color-background)
min-height: 100vh
p
margin-bottom: 1.15rem
h1,
h2,
h3,
h4,
h5
font-weight: 400
line-height: 1.15
color: var(--color-headline)
font-family: "Libre Franklin Black"
h1
word-spacing: 1rem
font-size: 3rem
text-align: center
overflow-wrap: anywhere
line-height: 1.5
//hyphens: auto
@media screen and (max-width: $size-small)
font-size: 1.5rem
word-spacing: inherit
h2
font-size: 1.602em
overflow-wrap: anywhere
//hyphens: auto
h3
font-size: 1.424em
h4
font-size: 1.266em
h5
font-size: 1.125em
small,
.text_small
font-size: 0.889em
a
color: var(--color-headline)
font-weight: bold
&:hover, &:active
color: var(--color-secondary)
h2 + blockquote
margin-top: 1rem
ul.no-style
margin: 0
padding: 0
list-style-type: none
blockquote
padding: 1rem 1.5rem
margin: 2rem 0 3rem
width: calc(100% - 1rem)
border: solid 2px var(--color-highlight-border)
border-radius: var(--radius-corner)
box-shadow: 1rem 1rem 0 0 var(--color-highlight-bg)
background-color: var(--color-white)
overflow-wrap: anywhere
hyphens: auto
@media screen and (max-width: $size-small)
margin: 1rem 0 1.5rem
padding: .5rem .75rem
width: calc(100% - .5rem)
box-shadow: .5rem .5rem 0 0 var(--color-highlight-bg)
ul
padding-left: 20px

48
assets/styles/basic/reset.scss Normal file
View File

@ -0,0 +1,48 @@
/*********
Reset CSS
*********/
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
p,
ul[class]
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

83
assets/styles/container.sass Normal file
View File

@ -0,0 +1,83 @@
.container
max-width: $size-small
width: 100%
margin: 0 auto
padding: $size-space
display: flex
justify-content: space-between
flex-wrap: wrap
@media screen and (max-width: $size-small)
justify-content: center
padding: $size-space/2
&.md
max-width: 660px
&.nowrap
flex-wrap: nowrap
&.center
justify-content: center
align-items: center
text-align: center
&.column
flex-direction: column
main > section:first-child
padding: $size-space*2 $size-space $size-space*3
// Color
.section, .header, .footer
background-color: var(--background)
color: var(--paragraph)
h2, h3, h4
color: var(--headline)
a
color: var(--link)
&:hover
text-shadow: 0 0 1px currentColor
.card
background-color: var(--card-background)
z-index: 10
padding: 1rem
border-radius: var(--border-radius)
max-width: 31%
margin-bottom: 1rem
img
margin: 0 auto
p
margin-bottom: 0
@media screen and (max-width: $size-small)
max-width: 288px
margin-bottom: 1rem
text-align: center
.section, .header, .footer
--background: var(--color-background)
--paragraph: var(--color-paragraph)
--headline: var(--color-headline)
--link: var(--color-link)
--card-background: var(--color-card-background)
&.secondary
--background: var(--color-secondary-background)
--paragraph: var(--color-secondary-paragraph)
--headline: var(--color-secondary-headline)
--link: var(--color-secondary-link)
--card-background: var(--color-secondary-card-background)
&.tertiary
--background: var(--color-tertiary-background)
--paragraph: var(--color-tertiary-paragraph)
--headline: var(--color-tertiary-headline)
--link: var(--color-tertiary-link)
--card-background: var(--color-tertiary-card-background)

51
assets/styles/font.sass Normal file
View File

@ -0,0 +1,51 @@
@font-face
font-family: "blackout-midnight"
src: url("/webfonts/blackout/blackout_midnight-webfont2.woff") format("woff")
font-weight: normal
font-style: normal
@font-face
font-family: "blackout-sunrise"
src: url("/webfonts/blackout/blackout_sunrise-webfont.woff") format("woff")
font-weight: normal
font-style: normal
@font-face
font-family: "blackout-two-am"
src: url("/webfonts/blackout/blackout_two_am-webfont.woff") format("woff")
font-weight: normal
font-style: normal
@font-face
font-family: "prociono"
src: url("/webfonts/prociono/Prociono-Regular-webfont.woff") format("woff")
font-weight: normal
font-style: normal
@font-face
font-family: "LeagueMono"
src: url("/webfonts/LeagueSpartan-Light.woff2") format("woff2")
font-weight: normal
font-style: normal
@font-face
font-family: "Raleway"
src: url("/webfonts/Raleway-Light.woff2") format("woff2")
font-weight: normal
font-style: normal
@font-face
font-family: 'Libre Franklin Regular'
font-style: normal
font-weight: 400
font-display: swap
src: url(/webfonts/libre-franklin/libre-franklin-regular-400.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
@font-face
font-family: 'Libre Franklin Black'
font-style: normal
font-weight: 900
font-display: swap
src: url(/webfonts/libre-franklin/libre-franklin-black-900.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

2
assets/styles/footer.sass Normal file
View File

@ -0,0 +1,2 @@
body > footer.container
padding-bottom: 0

66
assets/styles/header.sass Normal file
View File

@ -0,0 +1,66 @@
// Container
body > header.container
flex-wrap: nowrap
justify-content: space-between
align-items: center
// Menu
#menu ul
display: flex
align-items: center
height: 50px
@media screen and (max-width: $size-small)
height: 30px
li
display: block
max-height: 100%
svg
display: block
max-height: 100%
// Logo
#logo
.st1
fill: var(--color-headline)
img
height: 100%
width: 100%
a
width: 186px
height: 79px
display: block
@media screen and (max-width: $size-small)
width: 120px
height: 51px
// Button Toggle
.btn-toggle
font-size: 1.5rem
background: inherit
border: inherit
padding: 0 0 0 1rem
cursor: pointer
height: 50px
@media screen and (max-width: $size-small)
padding: 0 0 0 .5rem
height: 30px
.light-theme .btn-toggle
filter: grayscale(0)!important
.dark-theme .btn-toggle
filter: grayscale(.5)!important
@media (prefers-color-scheme: dark)
.btn-toggle
filter: grayscale(.5)

68
assets/styles/home.sass Normal file
View File

@ -0,0 +1,68 @@
#presentation
text-align: center
position: relative
&::before
height: 8px
width: 100%
background: var(--color-highlight)
content: ""
position: absolute
left: 0
right: 0
top: 11rem
#contact
.cadre
margin: 2rem 0
display: inline-block
padding: 1rem
line-height: 2
// background: no-repeat center url(/pictos/cadre.svg)
// background-size: container
border: 8px solid var(--color-highlight)
a
padding: 1rem
#info
display: flex
justify-content: center
flex-wrap: wrap
align-items: center
section
margin: 2rem auto
margin-left: -1rem
margin-right: -1rem
h3
text-align: center
margin: 2rem 0
#valeurs
background-color: var(--color-background-card)
// transform: rotate(-2deg)
padding: 1rem
#partenaire
ul
display: flex
justify-content: center
align-items: flex-start
width: 100%
@media screen and (max-width: $size-small)
flex-wrap: wrap
li
text-align: center
padding: $size-space/2
img
height: 75px
margin: 0 auto
filter: grayscale(1)
&:hover
filter: grayscale(0)

158
assets/styles/main.sass Normal file
View File

@ -0,0 +1,158 @@
@import "./basic/reset"
// Variables
@import "../../themes/hugo-theme-lowtech/assets/styles/font"
$size-small: 1024px
$color-dark: #010101
$color-light: #fffffe
$size-space: 2rem
@mixin dark-theme
// https://www.happyhues.co/palettes/4
--color-black: #{$color-dark}
--color-white: #{$color-light}
--color-stroke: #010101
--color-main: #fffffe
--color-highlight: #7f5af0
--color-secondary: #72757e
--color-tertiary: #2cb67d
--color-background: #16161a
--color-headline: #fffffe
--color-paragraph: #94a1b2
--color-card-background: #242629
--color-card-headline: #fffffe
--color-card-paragraph: #94a1b2
--color-link: #fffffe
--color-secondary-background: #242629
--color-secondary-headline: #fffffe
--color-secondary-paragraph: #94a1b2
--color-secondary-card-background: #16161a
--color-secondary-card-headline: #fffffe
--color-secondary-card-paragraph: #94a1b2
--color-secondary-link: #fffffe
--color-tertiary-background: black
--color-tertiary-headline: #fffffe
--color-tertiary-paragraph: #94a1b2
--color-tertiary-card-background: #16161a
--color-tertiary-card-headline: #fffffe
--color-tertiary-card-paragraph: #94a1b2
--color-tertiary-link: #2cb67d
@mixin light-theme
// https://www.happyhues.co/palettes/2
--color-black: #{$color-light}
--color-white: #{$color-dark}
--color-stroke: #00214d
--color-main: #fffffe
--color-highlight: #00ebc7
--color-secondary: #ff5470
--color-tertiary: #fde24f
--color-background: #fffffe
--color-headline: #00214d
--color-paragraph: #1b2d45
--color-card-background: #f2f4f6
--color-card-headline: #00214d
--color-card-paragraph: #1b2d45
--color-link: #00214d
--color-secondary-background: #f2f4f6
--color-secondary-headline: #00214d
--color-secondary-paragraph: #1b2d45
--color-secondary-card-background: #fffffe
--color-secondary-card-headline: #00214d
--color-secondary-card-paragraph: #1b2d45
--color-secondary-link: #00214d
--color-tertiary-background: #001534
--color-tertiary-headline: #fffffe
--color-tertiary-paragraph: #b7c9e4
--color-tertiary-card-background: #fffffe
--color-tertiary-card-headline: #00214d
--color-tertiary-card-paragraph: #1b2d45
--color-tertiary-link: #fffffe
svg
.stroke
stroke: var(--color-stroke)
.main
fill: var(--color-main)
.highlight
fill: var(--color-highlight)
.secondary
fill: var(--color-secondary)
.tertiary
fill: var(--color-tertiary)
body
color-scheme: light dark
--font: "Libre Franklin Regular"
--border-radius: 4px
@include light-theme
&.dark-theme
@include dark-theme
@media (prefers-color-scheme: dark)
body
@include dark-theme
&.light-theme
@include light-theme
h1
display: inline-block
position: relative
padding: 2rem 4rem
@media screen and (max-width: $size-small)
padding: 1rem
&::after,
&::before
height: 8px
width: 100%
background: var(--color-highlight)
content: ""
position: absolute
border-radius: 1rem 1rem 1rem 1rem / 1rem 1rem 1rem 1rem
left: 0
right: 0
transform: rotate(-2deg)
&::before
top: -1rem
&::after
bottom: -1rem
#me .container
align-items: center
@media screen and (max-width: $size-small)
flex-direction: column-reverse
justify-content: center
div
width: 450px
max-width: 100%
svg
width: 400px
height: 400px
@media screen and (max-width: $size-small)
width: calc(200px + #{$size-space*2})
height: calc(200px + #{$size-space*2})
margin: 0 auto
padding: $size-space
@import "./home"
@import "./basic/html"
@import "./font"
@import "./header"
@import "./footer"
@import "./container"