138 lines
2.9 KiB
SCSS
138 lines
2.9 KiB
SCSS
@use 'sass:list';
|
|
@use 'sass:map';
|
|
|
|
@mixin theme($colors) {
|
|
background-color: map.get($colors, 'background-1');
|
|
color: map.get($colors, 'foreground-1');
|
|
|
|
a,
|
|
a:visited {
|
|
color: map.get($colors, 'accent-1');
|
|
|
|
&:hover {
|
|
color: map.get($colors, 'accent-2');
|
|
}
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
background-color: map.get($colors, 'background-1');
|
|
}
|
|
|
|
ul > li {
|
|
$highlights: map.get($colors, 'highlights');
|
|
@for $index from 1 through list.length($highlights) {
|
|
$highlight: nth($highlights, $index);
|
|
|
|
&:nth-child(#{list.length($highlights)}n + #{$index})::marker {
|
|
color: $highlight;
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
border: 0.1rem solid map.get($colors, 'background-1');
|
|
}
|
|
|
|
thead > tr {
|
|
background-color: map.get($colors, 'background-1');
|
|
border-bottom: 0.1rem solid map.get($colors, 'background-1');
|
|
}
|
|
|
|
tbody > tr {
|
|
background-color: map.get($colors, 'background-3');
|
|
border-bottom: 0.1rem solid map.get($colors, 'background-1');
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
#header {
|
|
a {
|
|
color: map.get($colors, 'foreground-1');
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
color: map.get($colors, 'accent-1');
|
|
|
|
&:hover {
|
|
background-color: map.get($colors, 'accent-2');
|
|
}
|
|
}
|
|
}
|
|
|
|
#main {
|
|
background-color: map.get($colors, 'background-2');
|
|
}
|
|
|
|
#footer {
|
|
background-color: scale-color(map.get($colors, 'background-3'), $lightness: -3.5%);
|
|
border-top: 0.25rem solid map.get($colors, 'accent-2');
|
|
}
|
|
|
|
#post {
|
|
$highlights: map.get($colors, 'highlights');
|
|
|
|
h2 {
|
|
border-bottom: 0.5rem solid map.get($colors, 'accent-1');
|
|
}
|
|
|
|
@for $index from 1 through list.length($highlights) {
|
|
$highlight: nth($highlights, $index);
|
|
|
|
h3:nth-of-type(#{list.length($highlights)}n + #{$index}) {
|
|
border-bottom: 0.5rem solid $highlight;
|
|
}
|
|
}
|
|
|
|
.link-group {
|
|
color: map.get($colors, 'highlight-2');
|
|
|
|
&:hover {
|
|
color: map.get($colors, 'accent-2');
|
|
}
|
|
}
|
|
|
|
.link-user {
|
|
color: map.get($colors, 'highlight-5');
|
|
|
|
&:hover {
|
|
color: map.get($colors, 'accent-2');
|
|
}
|
|
}
|
|
}
|
|
|
|
#posts .year {
|
|
$highlights: map.get($colors, 'highlights');
|
|
@for $index from 1 through list.length($highlights) {
|
|
$highlight: nth($highlights, $index);
|
|
|
|
&:nth-child(#{list.length($highlights)}n + #{$index}) {
|
|
h3 {
|
|
border-bottom: 0.5rem solid $highlight;
|
|
}
|
|
|
|
a {
|
|
border-bottom: 0.25rem solid scale-color($highlight, $alpha: -75%);
|
|
border-left: 0.25rem solid scale-color($highlight, $alpha: -75%);
|
|
|
|
&:hover {
|
|
background-color: $highlight;
|
|
color: map.get($colors, 'background-1');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#dark-theme {
|
|
@include theme($dark-theme);
|
|
}
|
|
|
|
#light-theme {
|
|
@include theme($light-theme);
|
|
}
|