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