feat: Add theme variables
This commit is contained in:
parent
30359777ad
commit
a2ce87050e
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale
|
|||
- 
|
||||
#### 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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue