CSS

/* Trilium lets you theme the shares with CSS by adding a code note and
 * linking it with the shareCss relation. Did I mention that Trilium is awesome? :D */

html.theme-dark {
    --background-primary: #1D1A1A;
    --background-secondary: #201d1d;
    --background-highlight: #2d2c2c;
    --background-active: #383131;
    --text-primary: #c4b0b0;
    --text-heading: #bb9e9e;
    --text-menu: #c4b0b0;
    --text-link: #a94848;
    --text-menu-active: #a94848;
}

body {
    font-family: 'Noto Serif', serif;
}

.active .collapse-button, #menu a.active, #childLinks li a:hover, #content-footer .navigation a:hover { color: var(--text-menu-active); }

#header-logo { font-family: 'Noto Mono', monospace; }
#header-logo img { display: none; }

/* TODO this is probably worth upstreaming. inline-flex is a bad choice since it wraps awkwardly */
a[href^="https://"] {
    display: inline;
}

a[href^="https://"]::after {
    margin-left: 6px;
}

.ck-content { line-height: 1.65; }
.ck-content li { margin-bottom: 6px; }


#title { margin-top: 30px; }
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { padding-bottom: 0; }

.toc-anchor { opacity: 0.5; transition: opacity 0.25s; }
.toc-anchor:hover { opacity: 0.75; }

#childLinks { display: block; }
#childLinks ul {
    display: flex; justify-content: start; flex-wrap: wrap;

    li {
        flex: 1 0 0; min-width: 300px;
        a { padding: 20px; width: 100%; }
    }
}