feat: Add theme variables

This commit is contained in:
Simon 2022-02-04 15:59:24 +01:00
parent 30359777ad
commit a2ce87050e
2 changed files with 104 additions and 10 deletions

View File

@ -8,11 +8,109 @@ html
p, li
line-height: 1.4
body
--color-background: #fff8eb
--color-paragraph: #2d3824
--color-highlight: #c14508
// COLOR
$color-darkest: #001e1d
$color-darken: #0f3433
$color-dark: #004643
$color-main: #abd1c6
$color-light: #e8e4e6
$color-lightest: #fffffe
$color-secondary: #f9bc60
$color-tertiary: #e16162
@mixin theme
// https://www.happyhues.co/palettes/10
--color-stroke: #{$color-darkest}
--color-main: #{$color-light}
--color-highlight: #{$color-secondary}
--color-secondary: #{$color-main}
--color-tertiary: #{$color-tertiary}
--color-background: #{$color-dark}
--color-headline: #{$color-lightest}
--color-paragraph: var(--color-secondary)
--color-link: var(--color-highlight)
--color-button: var(--color-highlight)
--color-button-text: var(--color-stroke)
--color-card-background: var(--color-main)
--color-card-headline: var(--color-stroke)
--color-card-paragraph: #{$color-darken}
--color-card-link: var(--color-background)
--color-card-button: var(--color-background)
--color-card-button-text: var(--color-headline)
--color-secondary-background: var(--color-secondary)
--color-secondary-headline: var(--color-darkest)
--color-secondary-paragraph: #{$color-darken}
--color-secondary-link: var(--color-highlight)
--color-secondary-button: var(--color-highlight)
--color-secondary-button-text: var(--color-stroke)
--color-secondary-card-background: var(--color-background)
--color-secondary-card-headline: var(--color-headline)
--color-secondary-card-paragraph: var(--color-paragraph)
--color-secondary-card-link: var(--color-link)
--color-secondary-card-button: var(--color-button)
--color-secondary-card-button-text: var(--color-button-text)
@mixin theme-primary
color: var(--color-paragraph)
background: var(--color-background)
h1, h2, h3, h4, h5, h6
color: var(--color-headline)
button, .button
background: var(--color-button)
color: var(--color-button-text)
a
color: var(--color-link)
.card, .cards > *
color: var(--color-card-paragraph)
background: var(--color-card-background)
h1, h2, h3, h4, h5, h6
color: var(--color-card-headline)
button, .button
background: var(--color-card-button)
color: var(--color-card-button-text)
a
color: var(--color-card-link)
@mixin theme-secondary
color: var(--color-secondary-paragraph)
background: var(--color-secondary-background)
h1, h2, h3, h4, h5, h6
color: var(--color-secondary-headline)
button, .button
background: var(--color-secondary-button)
color: var(--color-secondary-button-text)
a
color: var(--color-secondary-link)
.card
color: var(--color-secondary-card-paragraph)
background: var(--color-secondary-card-background)
h1, h2, h3, h4, h5, h6
color: var(--color-secondary-card-headline)
button, .button
background: var(--color-secondary-card-button)
color: var(--color-secondary-card-button-text)
a
color: var(--color-secondary-card-link)
body
@include theme
@include theme-primary
.theme-secondary
@include theme-secondary
.card, .cards > *
padding: 1rem
margin: 1rem
body
--border-style: dashed
--border-size: 4px
--link-style: dotted
@ -21,8 +119,7 @@ body
font-size: 1.125rem
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
color: var(--color-paragraph)
background: var(--color-background)
margin: 0 auto
padding: 0 var(--tile)
max-width: 800px
@ -70,9 +167,6 @@ ul.no-style
padding: 0
line-height: $line-height
a, h1, h2, h3
color: var(--color-highlight)
a
text-decoration: underline var(--link-style)
&:hover

View File

@ -31,7 +31,7 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale
- ![Éco-conception de site internet](/icons/website.svg)
#### Site web statique
Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure.
{ .flex .services }
{ .flex .services .cards }
### Comment bénéficier des services de RésiLien ?
{.center .frame}