diff options
| -rw-r--r-- | assets/css/_root.scss | 35 | ||||
| -rw-r--r-- | assets/css/base.scss | 6 | ||||
| -rw-r--r-- | assets/css/markup/_render-heading.scss | 2 | ||||
| -rw-r--r-- | assets/css/partials/_article.scss | 10 | ||||
| -rw-r--r-- | assets/css/partials/_footer.scss | 6 | ||||
| -rw-r--r-- | assets/css/partials/_header.scss | 16 |
6 files changed, 32 insertions, 43 deletions
diff --git a/assets/css/_root.scss b/assets/css/_root.scss index fb8c8f1..57cd83e 100644 --- a/assets/css/_root.scss +++ b/assets/css/_root.scss @@ -1,28 +1,17 @@ -:root { - font-size: 16px; - font-weight: 400; - line-height: 1.65; - font-family: $mainFontStack; - - --body-background: #efefef; - --body-color: #212121; - - --header-background: #ffffff; - --header-color: var(--accent-1); +$accent: hsl(215, 69%, 49%); +$accentLight: hsl(215, 69%, 59%); +$accentDark: hsl(215, 69%, 39%); +$dark: hsl(340, 13%, 5%); +$light: hsl(214, 64%, 98%); +$lightAlt: hsl(0, 0%, 94%); - --footer-background: #212121; - --footer-color: #ffffff; - - --accent-1: hsl(36, 100%, 50%); - --accent-2: hsl(36, 100%, 60%); - --accent-3: hsl(36, 100%, 70%); - --accent-4: hsl(36, 100%, 80%); - --accent-5: hsl(36, 100%, 90%); - - --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); -} +$shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); $floatingRadius: 0.5rem; $breakpointTablet: 480px; -$breakpointDesktop: 1024px;
\ No newline at end of file +$breakpointDesktop: 1024px; + +:root { + font: 400 16px/1.65 $mainFontStack; +} diff --git a/assets/css/base.scss b/assets/css/base.scss index fe8bb86..9ca9b9e 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -19,8 +19,8 @@ body { flex-direction: column; gap: 0.5rem; - background-color: var(--body-background); - color: var(--body-color); + background-color: $light; + color: $dark; background-image: radial-gradient(circle at 1px 1px, #A9A9A988 1px, transparent 0); background-size: 15px 15px; @@ -35,7 +35,7 @@ h1, h2, h3, h4, h5, h6 { } a { - color: var(--accent-1); + color: $accent; } #main-footer-separator { diff --git a/assets/css/markup/_render-heading.scss b/assets/css/markup/_render-heading.scss index e93e4e6..87506a2 100644 --- a/assets/css/markup/_render-heading.scss +++ b/assets/css/markup/_render-heading.scss @@ -1,7 +1,7 @@ main { h1, h2, h3, h4, h5, h6 { a.anchor { - color: var(--accent-1); + color: $accentDark; font-weight: 700; text-decoration: none; diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss index 86d1fc3..7d99b92 100644 --- a/assets/css/partials/_article.scss +++ b/assets/css/partials/_article.scss @@ -3,21 +3,21 @@ main { margin: 0.75rem 1rem 3rem; padding: 1.5rem 2.5rem; border-radius: $floatingRadius; - box-shadow: var(--shadow); + box-shadow: $shadow; align-self: center; max-width: 82ch; font-size: 1.25rem; - background-color: var(--header-background); + background-color: $lightAlt; a { - color: var(--accent-1); + color: $accentDark; transition: color 0.2s ease-in-out; &:hover { - color: var(--accent-2); + color: $accent; } } @@ -30,7 +30,7 @@ main { word-break: break-word; font-family: $monoFontStack; - color: var(--accent-1); + color: $accentDark; background-color: #f6f6f6; } diff --git a/assets/css/partials/_footer.scss b/assets/css/partials/_footer.scss index 77ecc8d..8fdc2b7 100644 --- a/assets/css/partials/_footer.scss +++ b/assets/css/partials/_footer.scss @@ -1,11 +1,11 @@ footer { - background-color: var(--footer-background); - color: var(--footer-color); + background-color: $dark; + color: $light; text-align: center; padding: 0.5rem 1rem; a { - color: var(--accent-5); + color: $accentLight; } }
\ No newline at end of file diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss index 49185b8..f1501b5 100644 --- a/assets/css/partials/_header.scss +++ b/assets/css/partials/_header.scss @@ -1,7 +1,7 @@ header { - background-color: var(--header-background); - color: var(--header-color); - box-shadow: var(--shadow); + background-color: $lightAlt; + color: $accent; + box-shadow: $shadow; display: flex; flex-direction: column; @@ -18,7 +18,7 @@ header { height: 4px; width: 100%; - background-color: var(--header-color); + background-color: $accent; position: absolute; display: block; @@ -44,7 +44,7 @@ header { a { font-family: $mainFontStack; - color: var(--header-color); + color: $accent; text-decoration: none; } } @@ -89,15 +89,15 @@ header { text-transform: uppercase; letter-spacing: 0.1rem; transition: color 0.2s ease-in-out; - color: var(--header-color); + color: $accent; line-height: 1; &:hover { - color: var(--accent-3); + color: $accentDark; } &.active { - color: var(--accent-1); + color: $accentDark; } } |