From 49cab47b853a36e9376ae04a79d6186893fc3be3 Mon Sep 17 00:00:00 2001 From: Eerik Sven Puudist <35540617+eeriksp@users.noreply.github.com> Date: Wed, 16 Jun 2021 00:50:01 +0300 Subject: Update latex.css --- static/css/latex.css | 177 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 153 insertions(+), 24 deletions(-) diff --git a/static/css/latex.css b/static/css/latex.css index c8e5772..7b033b4 100644 --- a/static/css/latex.css +++ b/static/css/latex.css @@ -1,8 +1,10 @@ /*! - * LaTeX.css (https://latex.now.sh/) + * Taken from LaTeX.css (https://latex.now.sh/) * * Source: https://github.com/vincentdoerig/latex-css * Licensed under MIT (https://github.com/vincentdoerig/latex-css/blob/master/LICENSE) + * + * Modified for this usecase. */ @font-face { @@ -69,17 +71,20 @@ dd { margin: 0; } -/* Make default font-size 1rem and add smooth scrolling to anchors */ +/* Add smooth scrolling to anchors */ html { - font-size: 1rem; scroll-behavior: smooth; } +body.libertinus { + font-family: 'Libertinus', Georgia, Cambria, 'Times New Roman', Times, serif; +} + body { font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif; line-height: 1.8; - max-width: 80ch; + max-width: 90ch; min-height: 100vh; overflow-x: hidden; margin: 0 auto; @@ -87,6 +92,7 @@ body { counter-reset: theorem; counter-reset: definition; + counter-reset: sidenote-counter; color: hsl(0, 5%, 10%); background-color: hsl(210, 20%, 98%); @@ -96,10 +102,9 @@ body { /* Justify and hyphenate all paragraphs */ p { + font-size: large; text-align: justify; hyphens: auto; - -webkit-hyphens: auto; - -moz-hyphens: auto; margin-top: 1rem; } @@ -122,6 +127,7 @@ a:focus { /* Make images easier to work with */ img { max-width: 100%; + height: auto; display: block; } @@ -170,26 +176,66 @@ kbd { font-size: 75%; } -/* Make table 100% width, add borders between rows */ +/* Better tables */ table { border-collapse: collapse; border-spacing: 0; - width: 100%; + width: auto; max-width: 100%; + border-top: 2.27px solid black; + border-bottom: 2.27px solid black; + /* display: block; */ + overflow-x: auto; /* does not work because element is not block */ + /* white-space: nowrap; */ + counter-increment: caption; +} +/* add bottom border on column table headings */ +table tr > th[scope='col'] { + border-bottom: 1.36px solid black; +} +/* add right border on row table headings */ +table tr > th[scope='row'] { + border-right: 1.36px solid black; } +table > tbody > tr:first-child > td, +table > tbody > tr:first-child > th { + border-top: 1.36px solid black; +} +table > tbody > tr:last-child > td, +table > tbody > tr:last-child > th { + border-bottom: 1.36px solid black; +} + th, td { text-align: left; padding: 0.5rem; + line-height: 1.1; } -td { - border-bottom: 1px solid hsl(0, 0%, 85%); +/* Table caption */ +caption { + text-align: left; + font-size: 0.923em; + /* border-bottom: 2pt solid #000; */ + padding: 0 0.25em 0.25em; + width: 100%; + margin-left: 0; } -thead th { - border-bottom: 2px solid hsl(0, 0%, 70%); + +caption::before { + content: 'Table ' counter(caption) '. '; + font-weight: bold; +} + +/* allow scroll on the x-axis */ +.scroll-wrapper { + overflow-x: auto; } -tfoot th { - border-top: 2px solid hsl(0, 0%, 70%); + +/* if a table is wrapped in a scroll wrapper, + the table cells shouldn't wrap */ +.scroll-wrapper > table td { + white-space: nowrap; } /* Center align the title */ @@ -280,6 +326,98 @@ dl dd { text-align: center; } +/* Sidenotes */ + +.sidenote { + font-size: 0.8rem; + float: right; + clear: right; + width: 18vw; + margin-right: -20vw; + margin-bottom: 1em; +} + +.sidenote.left { + float: left; + margin-left: -20vw; + margin-bottom: 1em; +} + +/* (WIP) add border when a sidenote is clicked on */ +.sidenote:target { + border: hsl(55, 55%, 70%) 1.5px solid; + padding: 0 .5rem; + scroll-margin-block-start: 10rem; +} + +/* sidenote counter */ +.sidenote-number { + counter-increment: sidenote-counter; +} + +.sidenote-number::after, +.sidenote::before { + position: relative; + vertical-align: baseline; +} + +/* add number in main content */ +.sidenote-number::after { + content: counter(sidenote-counter); + font-size: 0.7rem; + top: -0.5rem; + left: 0.1rem; +} + +/* add number in front of the sidenote */ +.sidenote-number ~ .sidenote::before { + content: counter(sidenote-counter) ' '; + font-size: 0.7rem; + top: -0.5rem; +} + +label.sidenote-toggle:not(.sidenote-number) { + display: none; +} + +/* sidenotes inside blockquotes are indented more */ +blockquote .sidenote { + margin-right: -24vw; + width: 18vw; +} + + +label.sidenote-toggle { + display: inline; + cursor: pointer; +} + +input.sidenote-toggle { + display: none; +} + +@media (max-width: 1050px) { + label.sidenote-toggle:not(.sidenote-number) { + display: inline; + } + .sidenote { + display: none; + } + .sidenote-toggle:checked + .sidenote { + display: block; + margin: 0.5rem 1.25rem 1rem 0.5rem; + float: left; + left: 1rem; + clear: both; + width: 95%; + } + /* tweak indentation of sidenote inside a blockquote */ + blockquote .sidenote { + margin-right: -25vw; + width: 16vw; + } +} + /* Make footnote text smaller and left align it (looks bad with long URLs) */ .footnotes p { text-align: left; @@ -291,15 +429,6 @@ dl dd { border-top: 1px solid hsl(0, 0%, 39%); } -/* Center title and paragraph */ -.abstract, -.abstract p { - text-align: center; -} -.abstract { - margin: 2.25rem 0; -} - /* Format the LaTeX symbol correctly (a higher up, e lower) */ .latex span:nth-child(1) { text-transform: uppercase; @@ -380,4 +509,4 @@ h4, h5, h6 { margin-bottom: 0.8rem; -} \ No newline at end of file +} -- cgit v1.2.3