From f013cc56600a6e81886bc20829e1c55a7a5b59c3 Mon Sep 17 00:00:00 2001 From: Sagi Dayan Date: Fri, 26 Jul 2019 14:47:09 -0400 Subject: [PATCH] Some scss refactoring - logo cursor color value is now defined in _variables - removed some hard coded colors - using vars instead --- assets/scss/_header.scss | 2 +- assets/scss/_logo.scss | 5 ++++- assets/scss/_menu.scss | 2 +- assets/scss/_variables.scss | 7 +++---- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 79cfd5e..98b8811 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -1,5 +1,5 @@ .header { - background: #fafafa; + background: $light-background-secondary; display: flex; align-items: center; justify-content: center; diff --git a/assets/scss/_logo.scss b/assets/scss/_logo.scss index 2491930..3669514 100644 --- a/assets/scss/_logo.scss +++ b/assets/scss/_logo.scss @@ -22,10 +22,13 @@ display: inline-block; width: 10px; height: 1rem; - background: $cursor-color; + background: $light-cursor-color; margin-left: 5px; border-radius: 1px; animation: cursor 1s infinite; + .dark-theme &{ + background: $dark-cursor-color; + } } @media (prefers-reduced-motion: reduce) { diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss index ad754f9..047b421 100644 --- a/assets/scss/_menu.scss +++ b/assets/scss/_menu.scss @@ -1,5 +1,5 @@ .menu { - background: #fafafa; + background: $light-background-secondary; border-right: 1px solid; margin-right: 18px; z-index: 9999; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 32d3908..07e836b 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -3,18 +3,17 @@ /* light theme color */ $light-background: #fff; $light-background-secondary: #eaeaea; -$light-color: #222; +$light-color: #494949; $light-color-secondary: #999; $light-border-color: #dcdcdc; - +$light-cursor-color: #a85656; /* dark theme colors */ $dark-background: #34363a; $dark-background-secondary: #404653; $dark-color: #d4d4d4; $dark-color-secondary: #a1a1a1; $dark-border-color: #4a4b50; - -$cursor-color: #c75f36; +$dark-cursor-color: #a85656; $media-size-phone: "(max-width: 684px)"; $media-size-tablet: "(max-width: 900px)";