Unify color theme
This commit is contained in:
parent
740ce0a582
commit
e3cb58af8c
@ -9,22 +9,22 @@
|
||||
.button {
|
||||
padding: .5em 1.5em;
|
||||
font-weight: bold;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: .5em;
|
||||
border: 2px solid $col-bg-2-light;
|
||||
border-radius: .3em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
transition: border-color .2s ease-out;
|
||||
transition: all .2s ease-out;
|
||||
|
||||
&:hover, &.active {
|
||||
border-color: #333;
|
||||
border-color: $col-bg-3-dark;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: #ccc;
|
||||
border-color: $col-bg-2-light;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: #333;
|
||||
border-color: $col-bg-3-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1 +1,27 @@
|
||||
$width-mobile: 900px;
|
||||
|
||||
$col-bg-0-light: #f8f8f8;
|
||||
$col-bg-1-light: #e8e8e8;
|
||||
$col-bg-2-light: #d8d8d8;
|
||||
$col-bg-3-light: #b8b8b8;
|
||||
$col-fg-0-light: #181818;
|
||||
$col-fg-1-light: #282828;
|
||||
$col-fg-2-light: #383838;
|
||||
$col-fg-3-light: #585858;
|
||||
|
||||
$col-bg-0-dark: #181818;
|
||||
$col-bg-1-dark: #282828;
|
||||
$col-bg-2-dark: #383838;
|
||||
$col-bg-3-dark: #585858;
|
||||
$col-fg-0-dark: #f8f8f8;
|
||||
$col-fg-1-dark: #e8e8e8;
|
||||
$col-fg-2-dark: #d8d8d8;
|
||||
$col-fg-3-dark: #b8b8b8;
|
||||
|
||||
$col-red-light: #bf616a;
|
||||
$col-orange-light: #d08770;
|
||||
$col-yellow-light: #ebcb8b;
|
||||
$col-green-light: #a3be8c;
|
||||
$col-cyan-light: #86c1b9;
|
||||
$col-blue-light: #7cafc2;
|
||||
$col-purple-light: #b48ead;
|
||||
|
@ -16,7 +16,8 @@ body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
color: $col-fg-0-light;
|
||||
background-color: $col-bg-0-light;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -27,8 +28,8 @@ body {
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: #ddd;
|
||||
background-color: #222;
|
||||
color: $col-fg-0-dark;
|
||||
background-color: $col-bg-0-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +44,7 @@ nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 8px solid;
|
||||
border-image: linear-gradient(to right, #BF616A 20%, #D08770 20%, #D08770 40%, #EBCB8B 40%, #EBCB8B 60%, #A3BE8C 60%, #A3BE8C 80%, #B48EAD 80%) 5;
|
||||
border-image: linear-gradient(to right, $col-red-light 20%, $col-orange-light 20%, $col-orange-light 40%, $col-yellow-light 40%, $col-yellow-light 60%, $col-green-light 60%, $col-green-light 80%, $col-purple-light 80%) 5;
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
@ -78,11 +79,15 @@ nav {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $col-bg-0-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #353;
|
||||
color: $col-red-light;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@ -105,7 +110,7 @@ img {
|
||||
header {
|
||||
position: relative;
|
||||
min-height: 35em;
|
||||
color: #fff;
|
||||
color: $col-bg-0-light;
|
||||
overflow: hidden;
|
||||
|
||||
.wrap {
|
||||
@ -145,9 +150,10 @@ header {
|
||||
background-size: contain;
|
||||
background-position: center bottom -4px; // -4px fixes a visible line on some resolutions
|
||||
background-repeat: no-repeat;
|
||||
filter: invert(0%) contrast(94.5%);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert(100%) contrast(73%);
|
||||
filter: invert(100%) contrast(81%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user