her.esy.fun/src/assets/css/minimalist.css

/* CSS to be used for HTML Org-mode export

   Author: Yann Esposito
*/
body {
    font-family: menlo, monospace;
    font-size: 15px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
}
#preamble {
    border-bottom: solid 1px;
}
#postamble {
    border-top: solid 1px;
}
#preamble,#postamble {
    padding: 10px 0;
    opacity: 0.5;
}
#preamble:focus,#postamble:focus,
#preamble:hover,#postamble:hover {
    opacity:1;
}
#content,.content {
    max-width: 50em;
    margin: 0 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;
}
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: "----------------------------------------------------------------------------------------------------";
    font-family: menlo, monospace;
    position: absolute;
    opacity: 0.3;
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 20px;
    width: 100%;
    word-wrap: break-word;
}
pre { max-width: 100%; overflow: scroll; }
pre::after,pre::before {
    content: "~~~~~~~~~";
    font-size: 16px;
    line-height: 20px;
    display: block;
    opacity: 0.3; }
pre::before {
    content: "~~~~~~~~~ " attr(class);
}
code {
    font-family: menlo, monospace;
}
pre code { background: none; }
blockquote {
    margin-left: 0;
    position: relative;
    padding-left: 17px;
    padding-left: 2ch;
    overflow: hidden;
}
blockquote *:first-child {margin-top: 0;}
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;
    line-height: 20px;
    opacity: 0.3;
}

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;
}

/* colors */

img {
    max-width: 100%;
    max-height: 800px;
    margin: 20px auto;
}
p > img, li > img {
    max-height: 1em;
    margin: 0;
    vertical-align: middle;
}
footer {
    font-size: 0.8em;
}
.article-date {
    opacity: 0.5;
    font-size: 0.8;
}
table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    border: solid 1px;
}
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;
    font-family: menlo, monospace;
    display: block;
    margin: 0 0 20px 0;
}
navigation > a {
    margin-right: 10px;
}
.footpara { display: inline; }
.footdef > sup {
    font-size: 16px;
    vertical-align: middle;
}
.footdef > sup::after {
    content: ": ";
}

/* org mode statuses */
.timestamp-wrapper { font-family: menlo, monospace; font-size: 12px; }
.todo, .done { font-family: menlo, monospace;
               font-size: 12px;
               font-weight: bold;
               line-height: 20px;
               padding: 1px 1ex;
             }

/* colors */

:root {
    color-scheme: light dark;
    --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-foreground: var(--base0);
    --second-foreground: var(--base0);
    --reveal-background: var(--base03);
    --border-color: var(--base02);
    --todo-txt: #000;
}

@media (prefers-color-scheme: light) {
    :root {
        --main-background: #fafafa;
        --main-foreground: var(--base01);
        --second-foreground: var(--base00);
        --reveal-background: var(--base3);
        --border-color: var(--base2);
        --todo-txt: #FFF;
    }
}

body {
    background: var(--main-background);
    color: var(--main-foreground);
}
a, a:visited { color: var(--base1); }
a:hover, a:active, a:focus { color: var(--yellow); }
thead { background-color: var(--reveal-background);
        color: var(--second-fg); }
tr:hover { background-color: var(--reveal-background); }
#postamble:hover, #preamble:hover {
    background-color: var(--reveal-background);
    border-color:  var(--border-color);
}
h1 { color: var(--violet);}
h2 { color: var(--magenta);}
h3 { color: var(--red);}
h4 { color: var(--orange);}
h5 { color: var(--yellow);}
h6 { color: var(--green);}
table, td, th { border-color: var(--border-color); }
code { background: var(--reveal-background); }
#preamble,#postamble {
    border-color: var(--transparent);
}
/* -------- */
/* org colors */
.todo, .done { color: var(--todo-txt); }
.TODO { background-color: var(--red); }
.IN_PROGRESS { background-color: var(--yellow); }
.IN_REVIEW { background-color: var(--cyan); }
.HOLD { background-color: var(--violet); }
.WAITING { background-color: var(--violet); }
.DONE { background-color: var(--green); }
.CANCELED { background-color: var(--magenta); }