From aae9af8e6298e5c65347bc5210fa6bea110150d8 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Thu, 10 Nov 2022 12:49:57 +0600 Subject: [PATCH] fixed illustration --- assets/css/_mixins.scss | 6 + assets/css/main.scss | 12 +- assets/svg/howdy.svg | 636 +++++++++++++++++++++++++++---- assets/svg/react-logo.svg | 18 +- components/ui/UiActionButton.vue | 1 + components/ui/UiStars.vue | 2 +- 6 files changed, 584 insertions(+), 91 deletions(-) diff --git a/assets/css/_mixins.scss b/assets/css/_mixins.scss index bf8d574..a22ce3a 100644 --- a/assets/css/_mixins.scss +++ b/assets/css/_mixins.scss @@ -25,3 +25,9 @@ } } } + +@mixin light_theme { + :root.light { + @content; + } +} diff --git a/assets/css/main.scss b/assets/css/main.scss index 8ee4dc3..d2466d3 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -152,6 +152,7 @@ blockquote { :root { // palette --color-primary: #e84a72; + --color-primary-contrast: #ffffff; --color-background: #16161c; --color-menu-background: #1a1c23; --color-line: #2d2f36; @@ -171,6 +172,7 @@ blockquote { --color-menu-link-active: #e84a72; --color-menu-line: #2e303e; --color-table-head: #{mix(#e84a72, #1a1c23, 10%)}; + --color-rating-0: #fee3d2; --color-rating-1: #ded187; --color-rating-2: #dbde87; --color-rating-3: #bade87; @@ -182,11 +184,13 @@ blockquote { :root.light { $pinky: #{mix(#fadad1, #fce9e4, 50%)}; + $rating: #e4b882; --color-primary: #e84a72; + --color-primary-contrast: #ffffff; --color-background: #fce9e4; --color-menu-background: #{$pinky}; - --color-line: #{$pinky}; + --color-line: #d9c5c5; --color-menu-overlay-background: #{transparentize(#16161c, 0.1)}; --color-code-background: #{$pinky}; --color-code-language-background: #{lighten(#1a1c23, 4%)}; @@ -203,6 +207,12 @@ blockquote { --color-menu-link-active: #e84a72; --color-menu-line: #f9cbbe; --color-table-head: #{mix(#e84a72, #fadad1, 10%)}; + --color-rating-0: #cecece; + --color-rating-1: #{$rating}; + --color-rating-2: #{adjust-hue($rating, -10deg)}; + --color-rating-3: #{adjust-hue($rating, -20deg)}; + --color-rating-4: #{adjust-hue($rating, -30deg)}; + --color-rating-5: #{adjust-hue($rating, -40deg)}; --color-highlight-color: var(--color-text); --color-highlight-background: #fab795; } diff --git a/assets/svg/howdy.svg b/assets/svg/howdy.svg index 8ec4f0f..bb2caaf 100644 --- a/assets/svg/howdy.svg +++ b/assets/svg/howdy.svg @@ -16,7 +16,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> diff --git a/assets/svg/react-logo.svg b/assets/svg/react-logo.svg index e07b101..91abb7c 100644 --- a/assets/svg/react-logo.svg +++ b/assets/svg/react-logo.svg @@ -1,9 +1,11 @@ - React Logo - - - - - - - \ No newline at end of file + + React Logo + + + + + + + + diff --git a/components/ui/UiActionButton.vue b/components/ui/UiActionButton.vue index f454062..c086fa3 100644 --- a/components/ui/UiActionButton.vue +++ b/components/ui/UiActionButton.vue @@ -73,6 +73,7 @@ withDefaults(defineProps(), { &:hover { box-shadow: var(--color-background) 0 0 0 1px; + color: var(--color-primary-contrast); &::after { transform: scale(1); diff --git a/components/ui/UiStars.vue b/components/ui/UiStars.vue index 0ae38a4..59131a0 100644 --- a/components/ui/UiStars.vue +++ b/components/ui/UiStars.vue @@ -45,7 +45,7 @@ defineProps(); ); &.filled { - fill: var(--color-line); + fill: var(--color-rating-0); } }