minor style changes

This commit is contained in:
error 2022-11-05 14:08:42 +01:00
parent a06fd5da76
commit 0d36ab8d6d

View File

@ -14,10 +14,8 @@
--gradient: linear-gradient(45deg, #800000 10%, #008080 90%); --gradient: linear-gradient(45deg, #800000 10%, #008080 90%);
} }
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: dark) {
{ :root {
:root
{
--teal: #7acccc; --teal: #7acccc;
--maroon: #cc7a7a; --maroon: #cc7a7a;
--img-border: hsl(0, 1%, 25%); --img-border: hsl(0, 1%, 25%);
@ -43,15 +41,13 @@ video {
} }
/* don't use superscript text for references */ /* don't use superscript text for references */
sup sup {
{
vertical-align: inherit; vertical-align: inherit;
font-size: 1rem; font-size: 1rem;
} }
/* main navigation */ /* main navigation */
nav.navigation nav.navigation {
{
border-right-color: var(--teal); border-right-color: var(--teal);
border-right-style: solid; border-right-style: solid;
border-right-width: 4px; border-right-width: 4px;
@ -65,8 +61,7 @@ nav.navigation
text-align: right; text-align: right;
} }
nav.navigation h1 nav.navigation h1 {
{
background: var(--gradient); background: var(--gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@ -74,35 +69,29 @@ nav.navigation h1
text-align: right; text-align: right;
} }
nav.navigation a nav.navigation a {
{
color: var(--teal); color: var(--teal);
padding-right: 4px padding-right: 4px
text-align: right; text-align: right;
} }
nav.navigation a:hover nav.navigation a:hover {
{
text-decoration: underline; text-decoration: underline;
} }
nav.navigation footer nav.navigation footer {
{
color: var(--maroon); color: var(--maroon);
font-size: 0.8rem; font-size: 0.8rem;
} }
nav.navigation footer a, nav.navigation footer a,
nav.navigation footer a:hover nav.navigation footer a:hover {
{
color: var(--maroon); color: var(--maroon);
} }
/* support small screens */ /* support small screens */
@media (max-width: 1080px) @media (max-width: 1080px) {
{ nav.navigation {
nav.navigation
{
position: relative; position: relative;
border-right-style: none; border-right-style: none;
margin-left: 0px; margin-left: 0px;
@ -110,8 +99,8 @@ nav.navigation footer a:hover
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
nav.navigation h1
{ nav.navigation h1 {
display: block; display: block;
border-right-color: var(--teal); border-right-color: var(--teal);
border-right-style: solid; border-right-style: solid;
@ -119,8 +108,8 @@ nav.navigation footer a:hover
margin-bottom: 0px; margin-bottom: 0px;
padding-right: 4px; padding-right: 4px;
} }
nav.navigation div
{ nav.navigation div {
display: block; display: block;
padding-left: 4px; padding-left: 4px;
text-align: left; text-align: left;
@ -128,30 +117,25 @@ nav.navigation footer a:hover
} }
/* Figure couter + lightbox for images */ /* Figure couter + lightbox for images */
body::before body::before {
{
counter-reset: figure-counter; counter-reset: figure-counter;
} }
figure figure {
{
counter-increment: figure-counter; counter-increment: figure-counter;
padding-top: 0 0.25em 0.25em; padding-top: 0 0.25em 0.25em;
} }
figcaption figcaption {
{
font-size: 0.923em; font-size: 0.923em;
} }
figcaption::before figcaption::before {
{
content: 'Figure ' counter(figure-counter) '. '; content: 'Figure ' counter(figure-counter) '. ';
font-weight: bold; font-weight: bold;
} }
.lightbox .lightbox {
{
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -163,36 +147,31 @@ figcaption::before
visibility: hidden; visibility: hidden;
} }
img img {
{
border-style: solid; border-style: solid;
border-width: 4px; border-width: 4px;
border-color: var(--img-border); border-color: var(--img-border);
border-radius: 4px; border-radius: 4px;
} }
figure:target .lightbox figure:target .lightbox {
{
visibility: visible; visibility: visible;
} }
.lightbox-wrapper .lightbox-wrapper {
{
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
max-width: 95%; max-width: 95%;
height: 100%; height: 100%;
} }
.lightbox a .lightbox a {
{
font-size: 1.25rem; font-size: 1.25rem;
align-self: end; align-self: end;
margin-bottom: auto; margin-bottom: auto;
} }
.lightbox img .lightbox img {
{
width: auto; width: auto;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
@ -202,13 +181,11 @@ figure:target .lightbox
} }
/* footnotes */ /* footnotes */
.footnote-ref::before .footnote-ref::before {
{
content: '['; content: '[';
} }
.footnote-ref::after .footnote-ref::after {
{
content: ']'; content: ']';
} }
@ -217,12 +194,10 @@ figure:target .lightbox
padding-left: 2rem; padding-left: 2rem;
} }
.footnote li .footnote li {
{
counter-increment: fn-counter; counter-increment: fn-counter;
} }
.footnote li::marker .footnote li::marker {
{
content: '[' counter(fn-counter) '] '; content: '[' counter(fn-counter) '] ';
} }