From acb6b329380f8361ab37b51fe3f1d746a06c38e0 Mon Sep 17 00:00:00 2001 From: Oliver Booth Date: Sun, 12 May 2024 13:31:08 +0100 Subject: [PATCH] style: begin to organise app.scss monolith colors now defined separately --- src/scss/app.scss | 40 +++++++++++++++++++++------------------- src/scss/colors.scss | 12 ++++++++++++ 2 files changed, 33 insertions(+), 19 deletions(-) create mode 100644 src/scss/colors.scss diff --git a/src/scss/app.scss b/src/scss/app.scss index 6960532..435640c 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -1,9 +1,11 @@ +@use "sass:color"; +@import "colors"; @import "markdown"; @import "blog"; html, body { - background: #121212; - color: #f5f5f5; + background: $background; + color: $foreground; font-size: 16px; } @@ -14,7 +16,7 @@ html, body { } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; + box-shadow: 0 0 0 0.1rem $ui-foreground, 0 0 0 0.25rem #258cfb; } html { @@ -35,11 +37,11 @@ main.container { a { &:link, &:visited, &:hover, &:active { text-decoration: none; - color: #03A9F4; + color: $link-text; } &:hover { - color: #ffffff; + color: $link-hover; } } @@ -47,19 +49,19 @@ a { a { &:link, &:visited, &:hover, &:active { text-decoration: none; - color: white; + color: $ui-foreground; * { font-family: 'Roboto Mono', monospace; text-decoration: none; - color: white; + color: $ui-foreground; } } } } hr.page-separator { - border-top: 5px dashed #ffffff; + border-top: 5px dashed $ui-foreground; opacity: 1; margin: 50px 0; } @@ -86,7 +88,7 @@ ul.contact-reasons { a { &:link, &:visited, &:hover, &:active { text-decoration: none; - color: white; + color: $ui-foreground; } &:hover { @@ -98,10 +100,10 @@ ul.contact-reasons { .card { background: #212121; - color: #ffffff; + color: $ui-foreground; a.btn, button { - color: #ffffff; + color: $ui-foreground; } } @@ -128,7 +130,7 @@ nav { &:link, &:visited, &:hover, &:active { text-decoration: none; - color: white; + color: $ui-foreground; } &:hover { @@ -144,7 +146,7 @@ nav { } article { - background: #333333; + background: $content-background; padding: 20px; border-radius: 5px; @@ -153,7 +155,7 @@ article { } blockquote { - border-left: 2px solid #f03; + border-left: 2px solid $blockquote; padding-left: 10px; } @@ -173,7 +175,7 @@ article { abbr { text-decoration: none; - border-bottom: 1px dotted #ffffff; + border-bottom: 1px dotted $link-hover; } span.timestamp { @@ -185,7 +187,7 @@ article { .project-card { position: relative; - background: #000; + background: $project-background; box-shadow: 0 0 15px rgba(0, 0, 0, .1); &:hover { @@ -213,7 +215,7 @@ article { a { &:link, &:visited, &:hover &:active { - color: #fff; + color: $ui-foreground; } } @@ -225,7 +227,7 @@ article { width: 100%; margin: -34px 0 0; padding: 5px; - background-color: rgba(#000, 50%); + background-color: rgba($project-background, 50%); } } } @@ -414,7 +416,7 @@ td.trim-p p:last-child { } &:hover { - color: #03A9F4; + color: $accent; background-color: #1E1E1E !important; } } diff --git a/src/scss/colors.scss b/src/scss/colors.scss new file mode 100644 index 0000000..cdb4847 --- /dev/null +++ b/src/scss/colors.scss @@ -0,0 +1,12 @@ +@use "sass:color"; + +$background: #121212; +$foreground: #f5f5f5; +$accent: #03a9f4; +$ui-foreground: #ffffff; +$content-background: #333333; +$blockquote: #ff0033; +$project-background: #000000; + +$link-text: $accent; +$link-hover: lighten($link-text, 50%);