update dark color scheme + cleanup

This commit is contained in:
error 2023-04-25 11:35:21 +02:00
parent 73b6352c5f
commit fb0c8ac2c8

View File

@ -1,202 +1,203 @@
@font-face {
font-family: 'ubuntu';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('../fonts/Ubuntu-R.ttf') format('truetype');
font-family: 'ubuntu';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('../fonts/Ubuntu-R.ttf') format('truetype');
}
:root
{
--teal: #008080;
--maroon: #800000;
--img-border: #FFFFFF;
--gradient: linear-gradient(45deg, #800000 10%, #008080 90%);
--accent-a: #008080;
--accent-b: #800000;
--img-border: #FFFFFF;
--gradient: linear-gradient(45deg, #800000 10%, #008080 90%);
}
@media (prefers-color-scheme: dark) {
:root {
--teal: #7acccc;
--maroon: #cc7a7a;
--img-border: hsl(0, 1%, 25%);
--gradient: linear-gradient(45deg, #cc7a7a 10%, #7acccc 90%);
}
:root {
--accent-a: #7acccc;
--accent-b: #ff0080;
--img-border: hsl(0, 1%, 25%);
--body-bg-color: #1c1c1c;
--gradient: linear-gradient(45deg, #ff0080 10%, #7acccc 90%);
}
}
/* overwrite latex.css colors */
a,
a:visited {
color: var(--teal);
text-decoration: none;
color: var(--accent-a);
text-decoration: none;
}
a:hover {
color: var(--maroon);
color: var(--accent-b);
}
video {
max-width: 100%;
height: auto;
display: block;
max-width: 100%;
height: auto;
display: block;
}
/* don't use superscript text for references */
sup {
vertical-align: inherit;
font-size: 1rem;
vertical-align: inherit;
font-size: 1rem;
}
/* main navigation */
nav.navigation {
border-right-color: var(--teal);
border-right-style: solid;
border-right-width: 4px;
font-family: "ubuntu";
margin-bottom: 1em;
margin-left: -20vw;
min-width: 15vw;
padding-right: 4px;
padding-left: 4px;
position: fixed;
text-align: right;
border-right-color: var(--accent-a);
border-right-style: solid;
border-right-width: 4px;
font-family: "ubuntu";
margin-bottom: 1em;
margin-left: -20vw;
min-width: 15vw;
padding-right: 4px;
padding-left: 4px;
position: fixed;
text-align: right;
}
nav.navigation h1 {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--teal);
text-align: right;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--accent-a);
text-align: right;
}
nav.navigation a {
color: var(--teal);
padding-right: 4px
text-align: right;
color: var(--accent-a);
padding-right: 4px
text-align: right;
}
nav.navigation a:hover {
text-decoration: underline;
text-decoration: underline;
}
nav.navigation footer {
color: var(--maroon);
font-size: 0.8rem;
color: var(--accent-b);
font-size: 0.8rem;
}
nav.navigation footer a,
nav.navigation footer a:hover {
color: var(--maroon);
color: var(--accent-b);
}
/* support small screens */
@media (max-width: 1080px) {
nav.navigation {
position: relative;
border-right-style: none;
margin-left: 0px;
display: flex;
align-items: center;
justify-content: center;
}
nav.navigation {
position: relative;
border-right-style: none;
margin-left: 0px;
display: flex;
align-items: center;
justify-content: center;
}
nav.navigation h1 {
display: block;
border-right-color: var(--teal);
border-right-style: solid;
border-right-width: 4px;
margin-bottom: 0px;
padding-right: 4px;
}
nav.navigation h1 {
display: block;
border-right-color: var(--accent-a);
border-right-style: solid;
border-right-width: 4px;
margin-bottom: 0px;
padding-right: 4px;
}
nav.navigation div {
display: block;
padding-left: 4px;
text-align: left;
}
nav.navigation div {
display: block;
padding-left: 4px;
text-align: left;
}
}
/* Figure couter + lightbox for images */
body::before {
counter-reset: figure-counter;
counter-reset: figure-counter;
}
figure {
counter-increment: figure-counter;
padding-top: 0 0.25em 0.25em;
counter-increment: figure-counter;
padding-top: 0 0.25em 0.25em;
}
figcaption {
font-size: 0.923em;
font-size: 0.923em;
}
figcaption::before {
content: 'Figure ' counter(figure-counter) '. ';
font-weight: bold;
content: 'Figure ' counter(figure-counter) '. ';
font-weight: bold;
}
.lightbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background-color: var(--body-bg-color);
text-align: center;
z-index: 666;
visibility: hidden;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background-color: var(--body-bg-color);
text-align: center;
z-index: 666;
visibility: hidden;
}
figure:target .lightbox {
visibility: visible;
visibility: visible;
}
.lightbox-wrapper {
display: inline-flex;
flex-direction: column;
max-width: 95%;
width: 95vw;
height: 100%;
display: inline-flex;
flex-direction: column;
max-width: 95%;
width: 95vw;
height: 100%;
}
.lightbox a {
font-size: 1.25rem;
align-self: end;
margin-bottom: auto;
font-size: 1.25rem;
align-self: end;
margin-bottom: auto;
}
.lightbox img {
width: auto;
height: auto;
max-width: 100%;
max-height: 90vh;
margin-bottom: auto;
object-fit: contain;
width: auto;
height: auto;
max-width: 100%;
max-height: 90vh;
margin-bottom: auto;
object-fit: contain;
}
dl dd {
text-align: left;
padding-left: 2rem;
text-align: left;
padding-left: 2rem;
}
/* footnotes */
.footnote-ref::before {
content: '[';
content: '[';
}
.footnote-ref::after {
content: ']';
content: ']';
}
.footnote ol {
counter-reset: fn-counter;
padding-left: 2rem;
counter-reset: fn-counter;
padding-left: 2rem;
}
.footnote li {
counter-increment: fn-counter;
counter-increment: fn-counter;
}
.footnote li::marker {
content: '[' counter(fn-counter) '] ';
content: '[' counter(fn-counter) '] ';
}