Bauke/tildes-issue-log
Bauke
/
tildes-issue-log
Archived
1
Fork 0
This repository has been archived on 2022-10-04. You can view files and clone it, but cannot push or open issues or pull requests.
tildes-issue-log/source/pages/scss/_theme.scss

138 lines
2.9 KiB
SCSS
Raw Normal View History

@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);
}