em/kocandaci
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Unify color theme

Browse Source
This commit is contained in:
Emil Miler
2024-01-11 21:50:40 +01:00
parent 740ce0a582
commit e3cb58af8c
3 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
sass/_personnel.scss
View File

@@ -9,22 +9,22 @@
.button { .button {
padding: .5em 1.5em; padding: .5em 1.5em;
font-weight: bold; font-weight: bold;
border: 2px solid #ccc; border: 2px solid $col-bg-2-light;
border-radius: .5em; border-radius: .3em;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,0.1); transition: all .2s ease-out;
transition: border-color .2s ease-out;
&:hover, &.active { &: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) { @media (prefers-color-scheme: dark) {
border-color: #ccc; border-color: $col-bg-2-light;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
border-color: #333; border-color: $col-bg-3-dark;
} }
} }
} }

26
sass/_variables.scss
View File

@@ -1 +1,27 @@
$width-mobile: 900px; $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;

20
sass/style.scss
View File

@@ -16,7 +16,8 @@ body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6; line-height: 1.6;
font-size: 16px; font-size: 16px;
color: #333; color: $col-fg-0-light;
background-color: $col-bg-0-light;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -27,8 +28,8 @@ body {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: #ddd; color: $col-fg-0-dark;
background-color: #222; background-color: $col-bg-0-dark;
} }
} }
@@ -43,7 +44,7 @@ nav {
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 8px solid; 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 { .wrap {
width: 100%; width: 100%;
@@ -78,11 +79,15 @@ nav {
} }
} }
} }
@media (prefers-color-scheme: dark) {
background-color: $col-bg-0-dark;
}
} }
a { a {
text-decoration: none; text-decoration: none;
color: #353; color: $col-red-light;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@@ -105,7 +110,7 @@ img {
header { header {
position: relative; position: relative;
min-height: 35em; min-height: 35em;
color: #fff; color: $col-bg-0-light;
overflow: hidden; overflow: hidden;
.wrap { .wrap {
@@ -145,9 +150,10 @@ header {
background-size: contain; background-size: contain;
background-position: center bottom -4px; // -4px fixes a visible line on some resolutions background-position: center bottom -4px; // -4px fixes a visible line on some resolutions
background-repeat: no-repeat; background-repeat: no-repeat;
filter: invert(0%) contrast(94.5%);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
filter: invert(100%) contrast(73%); filter: invert(100%) contrast(81%);
} }
} }
} }