diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/_root.scss | 15 | ||||
| -rw-r--r-- | assets/css/base.scss | 5 | ||||
| -rw-r--r-- | assets/css/dark.scss | 10 | ||||
| -rw-r--r-- | assets/css/partials/_footer.scss | 6 | ||||
| -rw-r--r-- | assets/css/partials/_header.scss | 8 |
5 files changed, 33 insertions, 11 deletions
diff --git a/assets/css/_root.scss b/assets/css/_root.scss index 5932125..6354cba 100644 --- a/assets/css/_root.scss +++ b/assets/css/_root.scss @@ -8,11 +8,18 @@ line-height: 1.65; font-family: var(--font-body); + --header-background: #efefef; + --header-color: var(--accent-1); + + --body-background: #f5f5f5; + --body-color: #212121; + + --footer-background: #212121; + --footer-color: #ffffff; + --accent-1: hsl(152, 90%, 20%); --accent-2: hsl(152, 90%, 30%); --accent-3: hsl(152, 90%, 40%); - --accent-4: hsl(152, 90%, 50%); - --accent-5: hsl(152, 90%, 60%); - --accent-6: hsl(152, 90%, 70%); - --accent-7: hsl(152, 90%, 80%); + --accent-4: hsl(152, 90%, 60%); + --accent-5: hsl(152, 90%, 80%); }
\ No newline at end of file diff --git a/assets/css/base.scss b/assets/css/base.scss index 1181648..9a54972 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -14,6 +14,9 @@ body { max-width: 100vw; display: flex; flex-direction: column; + + background-color: var(--body-background); + color: var(--body-color); } h1, h2, h3, h4, h5, h6 { @@ -28,7 +31,7 @@ h1 { } a { - color: var(--accent-500); + color: var(--accent-1); } #main-footer-separator { diff --git a/assets/css/dark.scss b/assets/css/dark.scss new file mode 100644 index 0000000..8d18567 --- /dev/null +++ b/assets/css/dark.scss @@ -0,0 +1,10 @@ +:root { + --header-background: hsl(0, 0%, 14%); + --header-color: var(--accent-3); + --body-background: hsl(0, 0%, 18%); + --body-color: #f5f5f5; +} + +main a { + color: var(--accent-3); +}
\ No newline at end of file diff --git a/assets/css/partials/_footer.scss b/assets/css/partials/_footer.scss index 9c6ccc1..77ecc8d 100644 --- a/assets/css/partials/_footer.scss +++ b/assets/css/partials/_footer.scss @@ -1,11 +1,11 @@ footer { - background-color: #333; - color: white; + background-color: var(--footer-background); + color: var(--footer-color); text-align: center; padding: 0.5rem 1rem; a { - color: var(--accent-7); + color: var(--accent-5); } }
\ No newline at end of file diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss index 21e746b..31b3dbb 100644 --- a/assets/css/partials/_header.scss +++ b/assets/css/partials/_header.scss @@ -1,7 +1,7 @@ header { - border-top: 4px solid var(--accent-5); - background-color: #EFEFEF; - color: black; + border-top: 4px solid var(--header-color); + background-color: var(--header-background); + color: var(--header-color); display: flex; flex-direction: column; @@ -29,6 +29,7 @@ header { letter-spacing: 0.15rem; a { + color: var(--header-color); text-decoration: none; } } @@ -68,6 +69,7 @@ header { text-transform: uppercase; letter-spacing: 0.1rem; transition: color 0.2s ease-in-out; + color: var(--header-color); &:hover { color: var(--accent-3); |