cami/sp-codes.de
1
0
Fork 0
forked from samuel-p/sp-codes.de
Code Issues Pull requests Projects Releases Wiki Activity

added experimental light mode

Browse source
This commit is contained in:
Samuel Philipp 2021-04-10 22:20:57 +02:00
parent 729f8b364b
commit a89ed38280
Signed by untrusted user: samuel-p
GPG key ID: 2AD495D17760CB4E
1 changed files with 81 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
src/scss/main.scss
View file

@ -17,6 +17,9 @@ $fa-font-path: "../font";
$flag-icon-rect-path: ''; $flag-icon-rect-path: '';
@import "node_modules/flag-icon-css/sass/flag-icon"; @import "node_modules/flag-icon-css/sass/flag-icon";
$primary: #fea500;
$primary_dark: #e5a52e;
html, body { html, body {
height: 100%; height: 100%;
display: flex; display: flex;
@ -26,6 +29,7 @@ html, body {
body { body {
background-image: url("../img/bg.png"); background-image: url("../img/bg.png");
color: #fff; color: #fff;
font-weight: 300;
min-height: 100vh; min-height: 100vh;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
@ -40,14 +44,18 @@ ul {
} }
.highlight { .highlight {
color: #fea500; color: $primary;
}
.text-foreground {
color: #fff;
} }
a { a {
color: #fea500; color: $primary;
&:hover { &:hover {
color: #d78c00; color: $primary_dark;
} }
} }
@ -155,7 +163,7 @@ a {
} }
.card { .card {
background-color: #222; background-color: #111;
border: 1px solid #fff; border: 1px solid #fff;
padding: 1rem; padding: 1rem;
} }
@ -183,10 +191,10 @@ a {
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
color: #fea500 !important; color: $primary !important;
&[href]:hover { &[href]:hover {
color: #d78c00 !important; color: $primary_dark !important;
} }
} }
@ -195,8 +203,8 @@ a {
top: 0; top: 0;
right: -1rem; right: -1rem;
font-weight: bold; font-weight: bold;
background-color: #fea500; background-color: $primary;
color: #000000; color: #000;
padding: .5rem 1rem; padding: .5rem 1rem;
border-radius: 10px; border-radius: 10px;
transform: rotate(20deg); transform: rotate(20deg);
@ -220,10 +228,10 @@ a {
} }
&.flat { &.flat {
color: #fea500 !important; color: $primary !important;
&:hover { &:hover {
color: #d78c00 !important; color: $primary_dark !important;
} }
.inner { .inner {
@ -242,19 +250,19 @@ a {
} }
.contact-links a { .contact-links a {
color: #ffffff !important; color: #fff !important;
} }
code { code {
background-color: #fea500; background-color: $primary;
color: #000000; color: #000;
padding: 1px 3px; padding: 1px 3px;
border-radius: 4px; border-radius: 4px;
} }
pre { pre {
background-color: #fea500; background-color: $primary;
color: #000000; color: #000;
padding: 1px 3px; padding: 1px 3px;
border-radius: 4px; border-radius: 4px;
@ -275,16 +283,63 @@ pre {
} }
} }
.svg-icon { @media screen and (prefers-color-scheme: light) {
margin: 0 8px; $primary: #0059fe;
width: 4em; $primary_dark: #2e6ee5;
height: 4em;
body {
background-image: url("../img/bg-light.png");
color: #000;
}
.border-top, .border-bottom {
border-color: #000;
}
.heading a, .menu a, .contact-links a, .service.flat .inner a, .text-foreground {
color: #000 !important;
}
.card {
background-color: #eee;
border-color: #000;
}
.service {
.link {
color: $primary !important;
&[href]:hover {
color: $primary_dark !important;
}
} }
@media (max-width: 767.98px) { .beta {
.svg-icon { background-color: $primary;
margin: 0 4px; box-shadow: -1px 8px 5px rgba(127, 127, 127, 0.3);
width: 2em; color: #fff;
height: 2em; }
&.flat {
color: $primary !important;
&:hover {
color: $primary_dark !important;
}
}
}
.highlight {
color: $primary;
}
a {
color: $primary;
&:hover {
color: $primary_dark;
}
}
code {
background-color: $primary;
color: #fff;
}
pre {
background-color: $primary;
color: #fff;
} }
} }