Some scss refactoring

- logo cursor color value is now defined in _variables
 - removed some hard coded colors - using vars instead
This commit is contained in:
Sagi Dayan 2019-07-26 14:47:09 -04:00
parent 44a4ed04c4
commit f013cc5660
4 changed files with 9 additions and 7 deletions

View file

@ -1,5 +1,5 @@
.header { .header {
background: #fafafa; background: $light-background-secondary;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View file

@ -22,10 +22,13 @@
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 1rem; height: 1rem;
background: $cursor-color; background: $light-cursor-color;
margin-left: 5px; margin-left: 5px;
border-radius: 1px; border-radius: 1px;
animation: cursor 1s infinite; animation: cursor 1s infinite;
.dark-theme &{
background: $dark-cursor-color;
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {

View file

@ -1,5 +1,5 @@
.menu { .menu {
background: #fafafa; background: $light-background-secondary;
border-right: 1px solid; border-right: 1px solid;
margin-right: 18px; margin-right: 18px;
z-index: 9999; z-index: 9999;

View file

@ -3,18 +3,17 @@
/* light theme color */ /* light theme color */
$light-background: #fff; $light-background: #fff;
$light-background-secondary: #eaeaea; $light-background-secondary: #eaeaea;
$light-color: #222; $light-color: #494949;
$light-color-secondary: #999; $light-color-secondary: #999;
$light-border-color: #dcdcdc; $light-border-color: #dcdcdc;
$light-cursor-color: #a85656;
/* dark theme colors */ /* dark theme colors */
$dark-background: #34363a; $dark-background: #34363a;
$dark-background-secondary: #404653; $dark-background-secondary: #404653;
$dark-color: #d4d4d4; $dark-color: #d4d4d4;
$dark-color-secondary: #a1a1a1; $dark-color-secondary: #a1a1a1;
$dark-border-color: #4a4b50; $dark-border-color: #4a4b50;
$dark-cursor-color: #a85656;
$cursor-color: #c75f36;
$media-size-phone: "(max-width: 684px)"; $media-size-phone: "(max-width: 684px)";
$media-size-tablet: "(max-width: 900px)"; $media-size-tablet: "(max-width: 900px)";