/* CSS to be used for HTML Org-mode export Author: Yann Esposito */ /* Fonts */ body { font-family: Menlo, Monaco, monospace; font-size: 13px; line-height: 18px; } code { font-family: Menlo, Monaco, monospace; } pre, pre code { font-family: Menlo, Monaco, monospace; } .todo, .done { font-family: Menlo, Monaco, monospace; } /* Layout */ body { margin: 0; padding: 0; border: 0; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens:auto; -ms-hyphens:auto; } h1, h2, h3, h4, h5, h6, pre, code, blockquote, ol, ul, ol ol, ul ul, ul ol, ol ul, li, p, section, header, footer { float: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, pre, code, blockquote, p, ul, ol, section, header, figure { margin-top: 20px; margin-bottom: 20px; } figure { margin: 20px 0px; } h1 { font-size: 1em; } h2 { font-size: 1em; } h3 { font-size: 1em; } h4 { font-size: 1em; } h5 { font-size: 1em; } h6 { font-size: 1em; } h1::before { content: "# "; } h2::before { content: "## "; } h3::before { content: "### "; } h4::before { content: "#### "; } h5::before { content: "##### "; } h6::before { content: "###### "; } hr { position: relative; height: 20px; font-size: 0; line-height: 0; overflow: hidden; border: 0; } hr:after { content: "----------------------------------------------------------------------------------------------------"; position: absolute; top: 0; left: 0; width: 100%; word-wrap: break-word; } pre { max-width: 100%; overflow: scroll; } pre::after,pre::before { content: "~~~~~~~~~"; display: block; } pre::before { content: "~~~~~~~~~ " attr(class); } pre code { background: none; } blockquote { margin-left: 0; position: relative; padding-left: 17px; padding-left: 2ch; overflow: hidden; } .notes *:first-child, blockquote *:first-child { margin-top: 0; } .notes *:last-child, blockquote *:last-child { margin-bottom: 0; } blockquote:after { content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>"; white-space: pre; position: absolute; top: 0; left: 0; } li { position: relative; display: block; } li li { padding-left: 20px; } ul > li:before { content: "– "; font-weight: bold; opacity: 0.5; } ol { counter-reset: ol; } ol > li:before { content: counter(ol) ". "; counter-increment: ol; font-weight: bold; opacity: 0.5; } img { max-width: 100%; max-height: 800px; margin: 20px auto; } p > img, li > img { max-height: 1em; margin: 0; vertical-align: middle; } table { width: 100%; margin: 20px 0; border-collapse: collapse; border: solid 1px; display: block; overflow: scroll; } td, th { height: 20px; padding: 0 10px; text-align: left; vertical-align: middle; border-right: solid 1px; border-left: solid 1px; } navigation { font-weight: bold; display: block; margin: 10px 0; } navigation > a { margin-right: 10px; } /* org mode ids and classes */ .figure { margin-top: 20px; margin-bottom: 20px; } #preamble { border-bottom: solid 1px; margin-bottom: 1em; } #preamble h1, #preamble h2 { margin: 0; } #preamble h2 { font-weight: normal; font-style: italic; } #postamble { border-top: solid 1px; margin-top: 10px; } #content,.content { max-width: 50em; margin: 0 1em; padding: 1px; } #content *:first-child { margin-top: 0; } .timestamp-wrapper { font-size: 12px; } .todo, .done { font-size: 12px; font-weight: bold; padding: 1px 1ex; } .article-date { font-size: 0.8; font-style: italic; float: right; } .footpara { display: inline; } .footdef > sup { vertical-align: middle; } .footdef > sup::after { content: ": "; } .notes { padding: 5px 10px; } .notes::before { content: "☞"; float: left; display: inline-block; width: 1em; } /* colors theme */ :root { color-scheme: light dark; /* support color scheme */ --base03: #002b36; --base02: #073642; --base01: #586e75; --base00: #657b83; --base0: #839496; --base1: #93a1a1; --base2: #eee8d5; --base3: #fdf6e3; --yellow: #b58900; --orange: #cb4b16; --red: #dc322f; --magenta: #d33682; --violet: #6c71c4; --blue: #268bd2; --cyan: #2aa198; --green: #859900; --transparent: rgba(255,255,255,0); /* --main-background: #00151b; /* 0.5 darker than #002b36; */ --main-background: var(--base03); /* 0.5 darker than #002b36; */ --main-foreground: var(--base1); --second-foreground: var(--base0); --reveal-background: var(--base02); --soft-foreground: var(--base01); --border-color: var(--base02); --todo-txt: #000; --color-h1: var(--magenta); --color-h2: var(--violet); --color-h3: var(--blue); --color-h4: var(--cyan); --color-h5: var(--green); --color-h6: var(--yellow); --color-link: var(--yellow); } /* org colors */ @media (prefers-color-scheme: light) { :root { --main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */ --main-foreground: var(--base01); --second-foreground: var(--base00); --reveal-background: var(--base2); --soft-foreground: var(--base1); --border-color: var(--base2); --todo-txt: #FFF; } } #labels { width: 100%; text-align: right; } #labels label { text-decoration: underline; cursor: pointer; font-style: italic; } body > input { display:none; } input#light:checked ~ .main { --main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */ --main-foreground: var(--base01); --second-foreground: var(--base00); --reveal-background: var(--base2); --soft-foreground: var(--base1); --border-color: var(--base2); --todo-txt: #FFF; } input#light:checked ~ #labels { background: #fefaf0; color: var(--base00); } input#dark:checked ~ .main { --main-background: var(--base03); /* 0.5 darker than #002b36; */ --main-foreground: var(--base1); --second-foreground: var(--base0); --reveal-background: var(--base02); --soft-foreground: var(--base01); --border-color: var(--base02); --todo-txt: #000; } input#dark:checked ~ #labels { background: var(--base03); color: var(--base0); } input#raw:checked ~ .main { --main-background: #fff; --main-foreground: #000; --second-foreground: #000; --reveal-background: #fff; --soft-foreground: #000; --border-color: #000; --todo-txt: #000; --color-h1: #000; --color-h2: #000; --color-h3: #000; --color-h4: #000; --color-h5: #000; --color-h6: #000; --color-link: #33d; } input#raw:checked ~ #labels { background: #fff; color: #000; } body,.main { background: var(--main-background); color: var(--main-foreground); min-height: 100vh; } ::selection, .main ::selection, ::-moz-selection, .main ::-moz-selection { color: var(--todo-txt); background-color: var(--yellow); } a, a:visited, .main a, .main a:visited { color: var(--second-foreground); } pre::after,pre::before,hr:after, .main pre::after,.main pre::before,.main hr:after { color: var(--soft-foreground); } a:hover, a:active, a:focus, .main a:hover,.main a:active,.main a:focus { color: var(--color-link); } navigation a, navigation a:visited, .main navigation a,.main navigation a:visited { color: var(--soft-foreground); } navigation a:focus, navigation a:hover, .main navigation a:focus,.main navigation a:hover { color: var(--color-link); } thead, .main thead { background-color: var(--reveal-background); color: var(--second-fg); } tr:hover, .main tr:hover { background-color: var(--reveal-background); } h1, .main h1 { color: var(--color-h1); } #preamble h2, .main #preamble h2 { color: var(--color-h4); } h2, .main h2 { color: var(--color-h2); } h3, .main h3 { color: var(--color-h3); } h4, .main h4 { color: var(--color-h4); } h5, .main h5 { color: var(--color-h5); } h6, .main h6 { color: var(--color-h6); } table, td, th, .main table,.main td,.main th { border-color: var(--border-color); } code, .main code { background: var(--reveal-background); } blockquote:after, .main blockquote:after { color: var(--soft-foreground); } #preamble,#postamble,.main #preamble, .main #postamble { border-color: var(--transparent); } .article-date, .main .article-date { color: var(--soft-foreground); } /* -------- */ /* org colors */ .todo, .done, .main .todo, .main .done { color: var(--todo-txt); } .TODO, .main .TODO { background-color: var(--red); } .IN_PROGRESS, .main .IN_PROGRESS { background-color: var(--yellow); } .IN_REVIEW, .main .IN_REVIEW { background-color: var(--cyan); } .HOLD, .main .HOLD { background-color: var(--violet); } .WAITING, .main .WAITING { background-color: var(--violet); } .DONE, .main .DONE { background-color: var(--green); } .CANCELED, .main .CANCELED { background-color: var(--magenta); } .notes, .main .notes { background-color: var(--reveal-background); color: var(--second-fg); }