Change the color scheme to use Love.
This commit is contained in:
parent
0b5a724984
commit
80bd58c65a
|
@ -1,11 +1,7 @@
|
||||||
@mixin constrain-width {
|
@mixin constrain-width {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
transition: 0.5s width;
|
transition: 0.5s width;
|
||||||
width: $large-breakpoint;
|
width: $medium-breakpoint;
|
||||||
|
|
||||||
@media (max-width: $large-breakpoint) {
|
|
||||||
width: $medium-breakpoint;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $medium-breakpoint) {
|
@media (max-width: $medium-breakpoint) {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|
|
@ -13,6 +13,14 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
p {
|
||||||
|
a {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul {
|
ul {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
|
|
@ -31,17 +31,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border: 0.1rem solid map.get($colors, 'background-1');
|
border: 0.25rem solid map.get($colors, 'background-1');
|
||||||
}
|
}
|
||||||
|
|
||||||
thead > tr {
|
thead > tr {
|
||||||
background-color: map.get($colors, 'background-1');
|
background-color: map.get($colors, 'background-1');
|
||||||
border-bottom: 0.1rem solid map.get($colors, 'background-1');
|
border-bottom: 0.25rem solid map.get($colors, 'background-1');
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody > tr {
|
tbody > tr {
|
||||||
background-color: map.get($colors, 'background-3');
|
background-color: map.get($colors, 'background-2');
|
||||||
border-bottom: 0.1rem solid map.get($colors, 'background-1');
|
border-bottom: 0.25rem solid map.get($colors, 'background-1');
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
background-color: scale-color(map.get($colors, 'background-3'), $lightness: -3.5%);
|
background-color: map.get($colors, 'background-2');
|
||||||
border-top: 0.25rem solid map.get($colors, 'accent-2');
|
border-top: 0.25rem solid map.get($colors, 'accent-2');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,23 +3,21 @@ $medium-breakpoint: 900px;
|
||||||
$large-breakpoint: 1200px;
|
$large-breakpoint: 1200px;
|
||||||
$extra-large-breakpoint: 1800px;
|
$extra-large-breakpoint: 1800px;
|
||||||
|
|
||||||
$dark-highlight-1: #e95678;
|
$dark-highlight-1: #f99fb1;
|
||||||
$dark-highlight-2: #fac29a;
|
$dark-highlight-2: #faa56c;
|
||||||
$dark-highlight-3: #b877db;
|
$dark-highlight-3: #d2b83a;
|
||||||
$dark-highlight-4: #25b2bc;
|
$dark-highlight-4: #96c839;
|
||||||
$dark-highlight-5: #09f7a0;
|
$dark-highlight-5: #3bd18a;
|
||||||
|
|
||||||
$dark-highlights: $dark-highlight-1, $dark-highlight-2, $dark-highlight-3, $dark-highlight-4, $dark-highlight-5;
|
$dark-highlights: $dark-highlight-1, $dark-highlight-2, $dark-highlight-3, $dark-highlight-4, $dark-highlight-5;
|
||||||
|
|
||||||
$dark-theme: (
|
$dark-theme: (
|
||||||
'background-1': #16161c,
|
'background-1': #1f1731,
|
||||||
'background-2': #1c1e26,
|
'background-2': #2a2041,
|
||||||
'background-3': #1a1c23,
|
'foreground-1': #f2efff,
|
||||||
'foreground-1': #fdf0ed,
|
'foreground-2': #e6deff,
|
||||||
'foreground-2': #fadad1,
|
'accent-1': #41c8e5,
|
||||||
'foreground-3': #f9cbbe,
|
'accent-2': #f99add,
|
||||||
'accent-1': #59e3e3,
|
|
||||||
'accent-2': #ee64ae,
|
|
||||||
'highlight-1': $dark-highlight-1,
|
'highlight-1': $dark-highlight-1,
|
||||||
'highlight-2': $dark-highlight-2,
|
'highlight-2': $dark-highlight-2,
|
||||||
'highlight-3': $dark-highlight-3,
|
'highlight-3': $dark-highlight-3,
|
||||||
|
@ -28,23 +26,21 @@ $dark-theme: (
|
||||||
'highlights': $dark-highlights,
|
'highlights': $dark-highlights,
|
||||||
);
|
);
|
||||||
|
|
||||||
$light-highlight-1: #da103f;
|
$light-highlight-1: #8b123c;
|
||||||
$light-highlight-2: #f77d26;
|
$light-highlight-2: #6a3b11;
|
||||||
$light-highlight-3: #8931b9;
|
$light-highlight-3: #514610;
|
||||||
$light-highlight-4: #1eaeae;
|
$light-highlight-4: #384d10;
|
||||||
$light-highlight-5: #1eb980;
|
$light-highlight-5: #115133;
|
||||||
|
|
||||||
$light-highlights: $light-highlight-1, $light-highlight-2, $light-highlight-3, $light-highlight-4, $light-highlight-5;
|
$light-highlights: $light-highlight-1, $light-highlight-2, $light-highlight-3, $light-highlight-4, $light-highlight-5;
|
||||||
|
|
||||||
$light-theme: (
|
$light-theme: (
|
||||||
'background-1': #f9cbbe,
|
'background-1': #e6deff,
|
||||||
'background-2': #fadad1,
|
'background-2': #f2efff,
|
||||||
'background-3': scale-color(#fadad1, $lightness: 10%),
|
'foreground-1': #1f1731,
|
||||||
'foreground-1': #16161c,
|
'foreground-2': #2a2041,
|
||||||
'foreground-2': #1c1e26,
|
'accent-1': #17477e,
|
||||||
'foreground-3': #1a1c23,
|
'accent-2': #81156a,
|
||||||
'accent-1': #1d8991,
|
|
||||||
'accent-2': #f43e5c,
|
|
||||||
'highlight-1': $light-highlight-1,
|
'highlight-1': $light-highlight-1,
|
||||||
'highlight-2': $light-highlight-2,
|
'highlight-2': $light-highlight-2,
|
||||||
'highlight-3': $light-highlight-3,
|
'highlight-3': $light-highlight-3,
|
||||||
|
|
Reference in New Issue