mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
178 lines
3.2 KiB
SCSS
178 lines
3.2 KiB
SCSS
$light-bg: #dde4ff ;
|
|
$light-bg-alt: #733c7c ;
|
|
$light-fg: #4b3d44;
|
|
$light-ln: #733c7c ;
|
|
$light-accent1: #007582 ;
|
|
$light-accent2: #225091 ;
|
|
$light-accent3: #27234c ;
|
|
|
|
$dark-bg: #27234c ;
|
|
$dark-bg-alt: #f2504b ;
|
|
$dark-fg: #e88dc3 ;
|
|
$dark-ln: #f2504b ;
|
|
$dark-accent1: #b296ff;
|
|
$dark-accent2: #39b8a3 ;
|
|
$dark-accent3: #dde4ff ;
|
|
|
|
$transition-time: 1s;
|
|
|
|
body {
|
|
&.light {
|
|
background-color: $light-bg;
|
|
color: $light-fg;
|
|
}
|
|
background-color: $dark-bg;
|
|
color: $dark-fg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
a {
|
|
&.light {
|
|
background-color: $light-ln;
|
|
color: $light-bg;
|
|
}
|
|
background-color: $dark-ln;
|
|
color: $dark-bg;
|
|
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: 0.24s;
|
|
}
|
|
|
|
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;
|
|
color: $light-bg-alt;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
.togglelabel::after {
|
|
background-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;
|
|
}
|
|
|
|
article h2 {
|
|
background-color: $dark-accent1;
|
|
color: $dark-bg;
|
|
transition: $transition-time;
|
|
}
|
|
article h3 {
|
|
background-color: $dark-accent2;
|
|
color: $dark-bg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
article.light h3 {
|
|
background-color: $light-accent2;
|
|
color: $light-bg;
|
|
transition: $transition-time;
|
|
}
|
|
article h4 {
|
|
background-color: $dark-accent3;
|
|
color: $dark-bg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
article.light h4 {
|
|
background-color: $light-accent3;
|
|
color: $light-bg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
article.light h2 {
|
|
background-color: $light-accent1;
|
|
color: $light-bg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
article h5,
|
|
article h6,
|
|
article a {
|
|
background-color: $dark-ln;
|
|
color: $dark-bg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
article.light h5,
|
|
article.light h6,
|
|
article.light a {
|
|
background-color: $light-ln;
|
|
color: $light-bg;
|
|
transition: $transition-time;
|
|
}
|
|
|
|
a:hover {
|
|
&.light {
|
|
color: $light-ln;
|
|
background-color: transparent;
|
|
}
|
|
color: $dark-ln;
|
|
background-color: transparent;
|
|
}
|
|
|
|
article.light a:hover {
|
|
color: $light-ln;
|
|
background-color: transparent;
|
|
}
|