/* CSS to be used for HTML Org-mode export Author: Yann Esposito */ /* Fonts */ :root { --lh: 20px; } body { font-size: 14px; font-family: monospace; line-height: var(--lh); min-height: 100vh; } label + pre { margin-top: 2px; } pre, code { line-height: 1em; } code { font-size: 14px; } blockquote pre { line-height: var(--lh); } /* Layout */ body, h1, h2, h3, h4, h5, h6, pre, code, blockquote, ol, ul, ol ol, ul ul, ul ol, ol ul, li, p, section, header, footer, img { float: none; margin: 0; padding: 0; border: 0; hyphens: auto; } h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header, figure,table,label { margin-top: var(--lh); margin-bottom: var(--lh); } blockquote { border-left: solid 2px; padding-left: 1ex; } li { display: block; padding-left: 2ch; } ol > li:before, ul > li:before { content: "– "; float: left; position: relative; left: -2ch; text-align: right; width: 0; } ol { counter-reset: ol; } ol > li:before { content: counter(ol) ". "; counter-increment: ol; } ol > li:nth-child(n+10) { padding-left:3ch; } ol > li:nth-child(n+10):before { left: -3ch; } img { width: 100%; margin: 1em auto; } p > img, li > img { max-height: 1cap; width: auto; margin: 0; vertical-align: middle; } table { max-width: 100%; border-collapse: collapse; overflow: scroll; border-top: solid 2px; border-bottom: solid 2px; } td, th { height: 1em; padding: 0 10px; text-align: left; vertical-align: middle; } sup { vertical-align: top; position: relative; top: -.25em; } sup > a { text-decoration: none; padding: 1px 2px; font-weight: bold; } /* Markdown tricks */ h1 { font-size: 1.5em; } h2,h3,h4,h5,h6 { font-size: 1em; } h1:before,h2:before,h3:before,h4:before,h5:before,h6:before { font-family: "PT Mono", monospace; } h1::before { content: "# "; } h2::before { content: "## "; } h3::before { content: "### "; } h4::before { content: "#### "; } h5::before { content: "##### "; } h6::before { content: "###### "; } hr { border: 0; } #logo { text-align: center; } #preamble h1, #preamble h2 { margin-top: 0; margin-bottom: .5em; } #table-of-contents, #table-of-contents ul, #table-of-contents h2 { padding:0; margin:0; } #table-of-contents { margin-bottom: var(--lh); } hr:after { font-family: "PT Mono", monospace; text-align: center; content: "----------------------------------------------------------"; display:block; width: 100%; overflow: hidden; opacity: .5; height: 1em; } pre { max-width: 100%; overflow-x: scroll; overflow-y: hidden; } pre:after,pre:before { content: "~~~~~~~"; display: block; } pre:before { content: "~~~~~~~ " attr(class); } nav { display: block; padding: 10px 0; } nav .details { font-weight: normal; font-size: .8em; } /* org mode ids and classes */ figure, .figure { margin: 1em 0; } #content,.content { max-width: 45em; margin: 1em auto; padding: 0 1em; } #content:last-child, .notes *:last-child, blockquote *:last-child { margin-bottom: 0; } #content:first-child, .notes *:first-child, blockquote *:first-child{ margin-top: 0; } #postamble { margin-top: var(--lh); } .todo, .done { font-size: 14px; font-weight: bold; padding: 1px 1ex; } .metas { font-weight: normal; } .footpara { display: inline; } .footdef > sup { vertical-align: middle; } .footdef > sup::after { content: ": "; } .notes { padding: 1ex; } .underline { text-decoration: underline; } /* COLORS */ :root { --b03: #2E3440; --b02: #3B4252; --b01: #656b74; --b00: #727781; --b0: #989ea8; --b1: #b0bac7; --b2: #ECEFF4; --b3: #fff; --y: #c18600; --o: #d84100; --r: #e62729; --m: #ec0085; --v: #6c71c4; --b: #0095ff; --c: #00b0a3; --g: #879a00; --bg: var(--b3); --rbg: var(--b2); --fg0: var(--b0); --fg: var(--b02); --rfg: #000; --hl: blue; --fhl: #FF0; } @media (prefers-color-scheme: dark) { :root { --bg: black; --rbg: var(--b03); --fg: var(--b1); --fg0: var(--b00); --rfg: var(--b2); --hl: var(--y); --fhl: #000; } img { filter: brightness(0.5) saturate(0.5); } } /* Default color theme */ body { background: var(--bg); color: var(--fg); } h1, h2, h3, h4, h5, h6 { color: var(--rfg); } a { color: var(--hl); font-weight: 700; padding: 2px; } b, strong, i, em { color: var(--rfg); } sup > a { background: var(--rbg); } h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { color: var(--fg0); } .metas, .metas a, .metas a:visited { color: var(--fg0); } nav a, nav a:visited { color: var(--fg); } a:hover, .metas a:hover, nav a:hover, a:hover * { color: var(--fhl); background: var(--hl); } ol > li:before, pre::after,pre::before,hr:after { color: var(--fg0); } abbr { border-bottom: dashed 1px; display: inline-block; } thead, tr:hover { background: var(--rbg); color: var(--rfg); } table, td, th { border-color: var(--fg0); } code { background: var(--rbg); font-weight: 700; } /* -------- */ /* org colors */ .todo, .done { height: 10px; display: inline-block; line-height: 12px; font-weight: bold; font-size: 10px; border-left: solid 2px; border-right: solid 2px; padding: 0 3px; } .notes { background: var(--rbg); color: var(--rfg); margin: 1em 0; } /* ---- SYNTAX HIGHLIGHTING ---- */ .org-rainbow-delimiters-depth-1, .org-rainbow-delimiters-depth-9, .org-css-selector, .org-nix-attribute, .org-builtin, .IN_REVIEW { color:var(--c); } .org-rainbow-delimiters-depth-2, .org-nix-builtin, .org-variable-name, .org-haskell-definition, .org-haskell-operator, .org-function-name, .org-diff-changed { color:var(--b); } .org-rainbow-delimiters-depth-3, .HOLD, .WAITING { color:var(--v); } .org-rainbow-delimiters-depth-4, .org-diff-hunk-header, .org-sh-quoted-exec, .CANCELED { color:var(--m); } .org-rainbow-delimiters-depth-5, .org-diff-removed, .TODO { color:var(--r); } .org-rainbow-delimiters-depth-6, .org-haskell-constructor { color:var(--o); } .org-rainbow-delimiters-depth-7, .org-type, .org-constant, .org-diff-header, .org-haskell-keyword, .org-haskell-type, .IN_PROGRESS { color:var(--y); } .org-rainbow-delimiters-depth-8, .org-sh-heredoc, .org-diff-added, .org-string, .org-doc, .org-keyword, .DONE { color:var(--g); } .org-highlight-numbers-number, .org-highlight-number-number, .org-diff-none, .org-preprocessor, .org-comment-delimiter, .org-comment, .org-outshine-level-1, .org-outshine-level-2, .org-outshine-level-3, .org-outshine-level-4, .org-outshine-level-5, .org-outshine-level-6, .org-outshine-level-7, .org-outshine-level-8, .org-outshine-level-9 { color:var(--fg0); }