hugo-battheme/assets/scss/colors.scss
2022-04-16 15:27:19 +02:00

306 lines
5.1 KiB
SCSS

$light-bg: #ffffff;
$light-bg-alt: #413c74;
$light-fg: #413c74;
$light-ln: #9b5bb4;
$light-accent1: #9b5bb4;
$light-accent2: #5183b9;
$light-accent3: #413c74;
$dark-bg: #413c74;
$dark-bg-alt: #ff8ad0;
$dark-fg: #ff8ad0;
$dark-ln: #ffdc6d;
$dark-accent1: #ffdc6d;
$dark-accent2: #61d478;
$dark-accent3: #ffffff;
$transition-time: 2s;
$trans-short: 0.2s;
* {
transition: $transition-time;
}
body {
&.light {
background-color: $light-bg;
color: $light-fg;
}
background-color: $dark-bg;
color: $dark-fg;
transition: $transition-time;
}
a {
&.light {
background-color: transparent;
color: $light-ln;
}
background-color: transparent;
color: $dark-ln;
transition: $transition-time;
}
a.footer-nav-item.active,
a.footer-nav-item:hover {
&.light {
color: $light-bg-alt;
background-color: $light-bg;
border-color: $light-bg;
}
color: $dark-bg-alt;
background-color: $dark-bg;
border-color: $dark-bg;
transition: $trans-short;
}
footer {
&.light {
background-color: $light-bg-alt;
color: $light-bg;
}
background-color: $dark-bg-alt;
color: $dark-bg;
transition: $transition-time;
}
footer a {
&.light {
color: $light-bg;
background-color: $light-bg-alt;
}
color: $dark-bg;
background-color: $dark-bg-alt;
transition: $transition-time;
}
.togglelabel {
&.light {
background-color: $light-bg-alt;
border-color: $light-bg;
}
background-color: $dark-bg-alt;
border-color: $dark-bg;
transition: $transition-time;
}
.togglelabel.light::after {
background-color: $light-bg;
border-color: $light-bg;
color: $light-bg-alt;
transition: $transition-time;
}
.togglelabel::after {
background-color: $dark-bg;
border-color: $dark-bg;
color: $dark-bg-alt;
transition: $transition-time;
}
body.light #title {
color: $light-bg;
background-color: $light-bg-alt;
transition: $transition-time;
}
body #title {
color: $dark-bg;
background-color: $dark-bg-alt;
transition: $transition-time;
}
article {
&.light {
background-color: $light-bg;
border-color: $light-bg-alt;
}
background-color: $dark-bg;
border-color: $dark-bg-alt;
transition: $transition-time;
}
h2 {
background-color: $dark-accent1;
color: $dark-bg;
transition: $transition-time;
&.light {
color: $light-bg;
}
}
h2 a {
color: $dark-bg;
&.light {
color: $light-bg;
}
}
h3 {
background-color: $dark-accent2;
color: $dark-bg;
transition: $transition-time;
}
h3 a {
color: $dark-bg;
&:hover {
background-color: transparent;
}
}
h3.light {
background-color: $light-accent2;
color: $light-bg;
transition: $transition-time;
&a {
color: $light-bg;
}
}
h5,
h6,
h4 {
background-color: $dark-accent3;
color: $dark-bg;
transition: $transition-time;
& a {
color: $dark-bg;
background-color: transparent;
}
}
h4.light,
h5.light,
h6.light {
background-color: $light-accent3;
color: $light-bg;
transition: $transition-time;
}
h2.light {
background-color: $light-accent1;
color: $light-bg;
transition: $transition-time;
}
article.light a {
background-color: transparent;
color: $light-ln;
transition: $transition-time;
&.hash-link {
color: $light-bg;
}
&.hash-link:hover {
background-color: transparent;
color: $light-bg;
}
}
a:hover {
color: $dark-bg;
background-color: $dark-ln;
transition: $trans-short;
border-color: $dark-ln;
}
.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
article.light a:hover {
color: $light-bg;
background-color: $light-ln;
transition: $trans-short;
border-color: $light-ln;
}
.light.hash-link:hover,
.hash-link:hover {
background-color: transparent;
transition: $transition-time;
}
h1,
h2,
h3,
h4,
h5,
h6 {
&a.light {
background-color: transparent;
color: $light-bg;
&:hover {
background-color: transparent;
}
}
}
header.light {
background-color: $light-bg;
transition: $transition-time;
}
header {
transition: $transition-time;
}
.posttitle a {
background-color: transparent;
color: $dark-bg;
&:hover {
background-color: transparent;
}
}
button {
color: $dark-bg;
background-color: $dark-bg-alt;
border-color: $dark-bg;
&:hover {
transition: $trans-short;
background-color: $dark-bg;
color: $dark-bg-alt;
}
&.light {
color: $light-bg;
background-color: $light-bg-alt;
border-color: $light-bg;
&:hover {
transition: $trans-short;
background-color: $light-bg;
color: $light-bg-alt;
}
}
}
#pageindicator {
&.light {
color: $light-bg;
}
&:hover {background-color: transparent;}
background-color: transparent;
}
#hamburger-bg{
background-color: $dark-bg;
& .hamburger-nav-item {
background-color: transparent;
color: $dark-ln;
border-color: $dark-ln;
&:hover {
background-color: $dark-ln;
color: $dark-bg;
}
}
&.light{
background-color: $light-bg;
& .hamburger-nav-item{
color: $light-ln;
border-color: $light-ln;
&:hover {
background-color: $light-ln;
color: $light-bg;
}
}
}
}