hugo.soucy.cc

The personnal website source code of Hugo Soucy. Creates from an homebrewed static website generator (Ferron).
Log | Files | Refs

commit 42e885d8d76d29a2798c1ff90caef57e29149a53
parent 9512bb7ae3a1c1fb81a13cb40127d6795f796a8c
Author: Hugo Soucy <hugo.soucy@equisoft.com>
Date:   Mon, 26 Aug 2019 21:08:42 -0400

Add and apply new font and color abstractions

Diffstat:
Mstatic/src/css/global/_base.scss | 22++++++++++++++--------
Mstatic/src/css/global/abstractions/_root.scss | 22++++++++++++++--------
Mstatic/src/css/global/tokens/_colors.scss | 4++--
3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/static/src/css/global/_base.scss b/static/src/css/global/_base.scss @@ -1,13 +1,5 @@ /* BASE STYLES */ html, -button, -input, -select, -textarea { - color: var(--base-fg-color); -} - -html, body { height:100%; min-height:100%; @@ -16,4 +8,18 @@ body { body { background: var(--base-bg-color) url("//assets.soucy.cc/images/noise.png") repeat; + margin: 0; +} + +body, +button, +input, +select, +textarea { + color: var(--base-fg-color); + font: 1rem/1.6 var(--base-font-family); +} + +.logo { + font: 400 3rem/1 var(--logo-font-family); } diff --git a/static/src/css/global/abstractions/_root.scss b/static/src/css/global/abstractions/_root.scss @@ -1,11 +1,17 @@ /* Global Vars */ :root { - /* Colors */ - --base-bg-color: #{$color-omega}; - --base-fg-color: #{$color-alpha}; - --base-link-color: #{$color-beta}; - --base-visited-color: #{$color-zeta}; - --code-bg-color: #{$color-gamma}; - --code-fg-color: #{$color-delta}; - --shadow-color: #{$color-epsilon}; + font-size: calc(1vw + 1vh + .5vmin); + + /* Colors */ + --base-bg-color: #{$color-omega}; + --base-fg-color: #{$color-alpha}; + --base-link-color: #{$color-beta}; + --base-visited-color: #{$color-zeta}; + --code-bg-color: #{$color-gamma}; + --code-fg-color: #{$color-delta}; + --shadow-color: #{$color-epsilon}; + + /* Fonts */ + --base-font-family: #{map-get(map-get($fonts, 'iso'), 'name')}, #{map-get(map-get($fonts, 'iso'), 'fallback')}; + --logo-font-family: #{map-get(map-get($fonts, 'leitura'), 'name')}, #{map-get(map-get($fonts, 'leitura'), 'fallback')}; } diff --git a/static/src/css/global/tokens/_colors.scss b/static/src/css/global/tokens/_colors.scss @@ -1,8 +1,8 @@ -/* Color Tokens*/ +// Color Tokens $color-alpha: #111111; $color-beta: #0000ff; $color-gamma: rgba(255,255,255,0.4); $color-delta: #333333; $color-epsilon: #cccccc; $color-zeta: #8A2BE2; -$color-omega: #f1f1f1; +$color-omega: #ffffff;