hugo-battheme/assets/scss/colors.scss

307 lines
5.1 KiB
SCSS
Raw Normal View History

2022-04-13 18:05:14 +00:00
$light-bg: #ffffff;
$light-bg-alt: #413c74;
$light-fg: #413c74;
2022-04-15 21:49:55 +00:00
$light-ln: #9b5bb4;
2022-04-13 18:05:14 +00:00
$light-accent1: #9b5bb4;
2022-04-15 21:49:55 +00:00
$light-accent2: #5183b9;
2022-04-13 18:05:14 +00:00
$light-accent3: #413c74;
2022-04-13 17:04:38 +00:00
2022-04-13 18:05:14 +00:00
$dark-bg: #413c74;
$dark-bg-alt: #ff8ad0;
$dark-fg: #ff8ad0;
$dark-ln: #ffdc6d;
$dark-accent1: #ffdc6d;
$dark-accent2: #61d478;
$dark-accent3: #ffffff;
2022-04-11 17:22:28 +00:00
2022-04-13 17:04:38 +00:00
$transition-time: 2s;
$trans-short: 0.2s;
2022-04-09 19:42:12 +00:00
2022-04-13 17:43:52 +00:00
* {
transition: $transition-time;
}
2022-04-09 16:00:33 +00:00
body {
&.light {
background-color: $light-bg;
color: $light-fg;
}
background-color: $dark-bg;
color: $dark-fg;
2022-04-10 16:52:13 +00:00
transition: $transition-time;
}
2022-04-09 16:00:33 +00:00
a {
&.light {
2022-04-13 14:00:22 +00:00
background-color: transparent;
color: $light-ln;
}
2022-04-13 14:00:22 +00:00
background-color: transparent;
color: $dark-ln;
2022-04-10 16:52:13 +00:00
transition: $transition-time;
2022-04-09 16:00:33 +00:00
}
2022-04-11 20:44:06 +00:00
a.footer-nav-item.active,
2022-04-11 21:56:20 +00:00
a.footer-nav-item:hover {
&.light {
2022-04-11 20:44:06 +00:00
color: $light-bg-alt;
background-color: $light-bg;
2022-04-15 19:07:54 +00:00
border-color: $light-bg;
}
2022-04-11 20:44:06 +00:00
color: $dark-bg-alt;
background-color: $dark-bg;
2022-04-15 21:49:55 +00:00
border-color: $dark-bg;
2022-04-13 17:04:38 +00:00
transition: $trans-short;
2022-04-09 16:00:33 +00:00
}
footer {
&.light {
background-color: $light-bg-alt;
color: $light-bg;
}
background-color: $dark-bg-alt;
color: $dark-bg;
2022-04-10 16:52:13 +00:00
transition: $transition-time;
}
footer a {
2022-04-10 14:55:46 +00:00
&.light {
color: $light-bg;
background-color: $light-bg-alt;
}
color: $dark-bg;
background-color: $dark-bg-alt;
2022-04-10 16:52:13 +00:00
transition: $transition-time;
2022-04-10 14:55:46 +00:00
}
.togglelabel {
&.light {
2022-04-11 20:44:06 +00:00
background-color: $light-bg-alt;
border-color: $light-bg;
2022-04-10 14:55:46 +00:00
}
2022-04-11 20:44:06 +00:00
background-color: $dark-bg-alt;
border-color: $dark-bg;
2022-04-10 16:52:13 +00:00
transition: $transition-time;
2022-04-10 14:55:46 +00:00
}
2022-04-10 16:52:13 +00:00
.togglelabel.light::after {
2022-04-11 20:44:06 +00:00
background-color: $light-bg;
2022-04-15 19:07:54 +00:00
border-color: $light-bg;
2022-04-11 20:44:06 +00:00
color: $light-bg-alt;
transition: $transition-time;
2022-04-10 14:55:46 +00:00
}
2022-04-10 16:52:13 +00:00
.togglelabel::after {
2022-04-11 20:44:06 +00:00
background-color: $dark-bg;
2022-04-15 19:07:54 +00:00
border-color: $dark-bg;
2022-04-11 20:44:06 +00:00
color: $dark-bg-alt;
transition: $transition-time;
}
body.light #title {
color: $light-bg;
background-color: $light-bg-alt;
transition: $transition-time;
}
2022-04-11 21:56:20 +00:00
body #title {
2022-04-10 14:55:46 +00:00
color: $dark-bg;
2022-04-11 20:44:06 +00:00
background-color: $dark-bg-alt;
2022-04-10 16:52:13 +00:00
transition: $transition-time;
2022-04-09 16:00:33 +00:00
}
2022-04-11 17:22:28 +00:00
2022-04-11 20:44:06 +00:00
article {
&.light {
background-color: $light-bg;
border-color: $light-bg-alt;
2022-04-11 17:22:28 +00:00
}
2022-04-11 20:44:06 +00:00
background-color: $dark-bg;
border-color: $dark-bg-alt;
2022-04-12 21:13:48 +00:00
transition: $transition-time;
2022-04-11 17:22:28 +00:00
}
2022-04-13 17:43:52 +00:00
h2 {
2022-04-12 21:13:48 +00:00
background-color: $dark-accent1;
color: $dark-bg;
2022-04-12 21:13:48 +00:00
transition: $transition-time;
2022-04-13 17:19:58 +00:00
&.light {
color: $light-bg;
2022-04-13 17:04:38 +00:00
}
2022-04-12 21:13:48 +00:00
}
2022-04-13 17:43:52 +00:00
h2 a {
color: $dark-bg;
2022-04-15 21:49:55 +00:00
&.light {
2022-04-13 18:09:09 +00:00
color: $light-bg;
}
2022-04-13 17:43:52 +00:00
}
h3 {
2022-04-12 21:13:48 +00:00
background-color: $dark-accent2;
color: $dark-bg;
transition: $transition-time;
}
2022-04-13 17:43:52 +00:00
h3 a {
color: $dark-bg;
&:hover {
background-color: transparent;
}
}
2022-04-13 17:04:38 +00:00
h3.light {
2022-04-12 21:13:48 +00:00
background-color: $light-accent2;
color: $light-bg;
transition: $transition-time;
2022-04-13 17:04:38 +00:00
&a {
color: $light-bg;
}
2022-04-12 21:13:48 +00:00
}
2022-04-13 14:00:22 +00:00
2022-04-13 17:04:38 +00:00
h5,
h6,
h4 {
2022-04-12 21:13:48 +00:00
background-color: $dark-accent3;
color: $dark-bg;
transition: $transition-time;
2022-04-13 17:04:38 +00:00
& a {
color: $dark-bg;
background-color: transparent;
}
2022-04-12 21:13:48 +00:00
}
2022-04-13 17:04:38 +00:00
h4.light,
h5.light,
2022-04-13 17:19:58 +00:00
h6.light {
2022-04-12 21:13:48 +00:00
background-color: $light-accent3;
color: $light-bg;
transition: $transition-time;
}
2022-04-13 17:04:38 +00:00
h2.light {
2022-04-12 21:13:48 +00:00
background-color: $light-accent1;
color: $light-bg;
2022-04-12 21:13:48 +00:00
transition: $transition-time;
}
article.light a {
2022-04-13 17:04:38 +00:00
background-color: transparent;
color: $light-ln;
2022-04-12 21:13:48 +00:00
transition: $transition-time;
2022-04-13 17:19:58 +00:00
&.hash-link {
2022-04-13 17:04:38 +00:00
color: $light-bg;
}
2022-04-13 17:19:58 +00:00
&.hash-link:hover {
2022-04-13 17:04:38 +00:00
background-color: transparent;
color: $light-bg;
}
2022-04-12 21:13:48 +00:00
}
a:hover {
2022-04-13 14:00:22 +00:00
color: $dark-bg;
background-color: $dark-ln;
2022-04-13 17:04:38 +00:00
transition: $trans-short;
2022-04-15 19:07:54 +00:00
border-color: $dark-ln;
2022-04-12 21:13:48 +00:00
}
2022-04-13 17:04:38 +00:00
.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
2022-04-12 21:13:48 +00:00
article.light a:hover {
2022-04-13 17:04:38 +00:00
color: $light-bg;
background-color: $light-ln;
transition: $trans-short;
2022-04-15 19:07:54 +00:00
border-color: $light-ln;
2022-04-13 17:04:38 +00:00
}
.light.hash-link:hover,
.hash-link:hover {
background-color: transparent;
transition: $transition-time;
}
2022-04-13 17:19:58 +00:00
h1,
h2,
h3,
h4,
h5,
h6 {
&a.light {
2022-04-13 17:04:38 +00:00
background-color: transparent;
2022-04-13 17:19:58 +00:00
color: $light-bg;
&:hover {
background-color: transparent;
}
2022-04-13 17:04:38 +00:00
}
}
2022-04-13 17:19:58 +00:00
header.light {
2022-04-13 17:04:38 +00:00
background-color: $light-bg;
transition: $transition-time;
}
2022-04-13 17:19:58 +00:00
header {
2022-04-13 17:04:38 +00:00
transition: $transition-time;
}
2022-04-13 17:19:58 +00:00
.posttitle a {
2022-04-13 17:04:38 +00:00
background-color: transparent;
color: $dark-bg;
2022-04-13 17:19:58 +00:00
&:hover {
2022-04-13 17:04:38 +00:00
background-color: transparent;
}
}
2022-04-15 21:49:55 +00:00
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;
}
2022-04-16 13:27:19 +00:00
#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;
}
}
}
}