extra.css

/* BBF CSS to be used in addition to bbf.css or github.css */

/* hidden element */

.hidden {
    display: none;
}

/* more specific version of the above, which is useful where
   pandoc has auto-added sections with the same classes as
   the headers that they contain */
h1.hidden-header, h2.hidden-header, h3.hidden-header,
h4.hidden-header, h5.hidden-header, h6.hidden-header {
    display: none;
}


/* spacer (intended with a div to insert vertical space */

.spacer {
    margin-top: 1rem;
}

/* various "box" div styles */

div.bug,
div.note,
div.see-also,
div.tip {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    background-size: 12px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    border-radius: 5px;
    line-height: 1.2;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 35px;
    padding-right: 5px;
    opacity: 0.8;
}

div.bug p,
div.note p,
div.see-also p,
div.tip p {
    margin-top: 5px;
    margin-bottom: 5px;
}

div.bug {
    background-size: 24px;
    background-position: 2px 10px;
    background-color: #ffe;
    background-image: url(bee.png);
    border: solid 1px #ff8;
}

div.note {
    background-color: #f1f8fc;
    background-image: url(pencil.png);
    border: solid 1px #3498db;
}

div.see-also::before {
    content: "See also:";
    font-weight: bold;
}

div.see-also {
    background-color: #efe;
    background-image: url(right.png);
    border: solid 1px #8f8;
}

div.see-also ul {
    margin-left: 10px;
    margin-bottom: 0px;
    padding-left: 10px;
}

div.tip {
    background-color: #fee;
    background-image: url(tick.png);
    border: solid 1px #f88;
}

/* "subheading" div / span style (some Word docs use a Subheading style) */

div.subheading, span.subheading {
    font-weight: bold;
}

/* "emphasis" div / span / a style */

div.emphasis, span.emphasis, a.emphasis {
    font-style: italic;
}

/* "strong" div / span / a style (ditto) */

div.strong, span.strong, a.strong {
    font-weight: bold;
}

/* "underline" div / span / a style */

/* various a styles */
a.heading, a.table, a.figure, a.requirement, a.term, a.hyperlink {
    font-style: italic;
}

/* XXX disabled because pandoc has built-in support for the
       underline class
div.underline, span.underline, a.underline {
    text-decoration: underline;
}
*/

/* "gray" div / span style */

div.gray, span.gray {
    color: lightgray;
}

/* "code" div / span style (useful with pandoc line blocks)
   XXX this should be combined with bbf.css's pre? */

div.code, span.code {
    color: #000;
    font-family: 'Courier New', Courier, 'Liberation Mono', monospace;
    word-wrap: break-word;
    line-height: 1.2;
    font-size: 0.98em;
}

/* "borderless" table style */

table.borderless, table.borderless th, table.borderless td {
    padding-left: 0em;
    border-style: none;
}

/* "boldfirst" (column) table style */

table.boldfirst td:first-child {
    font-weight: bold;
}

/* "codefirst" etc. (column) table style */

table.codefirst td:nth-child(1),
table.codesecond td:nth-child(2),
table.codethird td:nth-child(3)
{
    font-family: 'Courier New', Courier, 'Liberation Mono', monospace;
}

/* vertical-align top/middle/bottom table styles */

table.vertical-align-top td, table.valign-top td {
    vertical-align: top;
}

table.vertical-align-middle td, table.valign-middle td {
    vertical-align: middle;
}

table.vertical-align-bottom td, table.valign-bottom td {
    vertical-align: bottom;
}

/* figure overrides (github.css doesn't center captions) */

figure {
    text-align: center;
}

/* "left" and "right" styles */

div.left {
    width: 49%;
    float: left;
    /* border: solid 1px; */
}

div.right {
    width: 49%;
    float: right;
    /* border: solid 1px; */
}

div.clear {
    clear: both;
}

/* headerlink logic derived from Sphinx basic.css */
/* XXX this can be deleted now? */

a.headerlink,
nav li > a img {
    display: none;
}

h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink,
h5:hover > a.headerlink,
h6:hover > a.headerlink,
div:hover > a.headerlink,
span:hover > a.headerlink,
caption:hover > a.headerlink,
figcaption:hover > a.headerlink {
    display: inline;
}

/* description lists */

dt {
    font-weight: bold;
}

/* table-like description lists, modified from a comment at
   https://clicknathan.com/web-design/styling-html-5-description-lists-
     formerly-known-as-definition-lists-properly */

/* XXX not the default; enabled by the dltable class

/* XXX should so something similar for Typst? */

.dltable dl {
    --dl-width: 95%;
    --dt-width: 15%;
    --dd-width: calc(var(--dl-width) - var(--dt-width));
}

.dltable.narrow dl {
    --dt-width: 10%;
}

.dltable.wide dl {
    --dt-width: 25%;
}

.dltable dl {
    display: flex;
    flex-wrap: wrap;
    width: var(--dl-width);
}

.dltable dl > * {
    padding-top: 0.5em;
}

.dltable dt {
    width: var(--dt-width);
    text-align: left;
}

.dltable dd {
    width: var(--dd-width);
    padding-left: 1em;
    margin-left: 0px;
}

.dltable dd + dd {
    width: var(--dl-width);
    padding-left: calc(var(--dt-width) + 1em);
}

.dltable dt + dt {
    padding-right: var(--dd-width);
}

.dltable dt + dt + dd {
    margin-top: -1.625em; /* own height including padding */
    padding-left: calc(var(--dt-width) + 1em);
}

/* this makes elements invisible */
.display-none {
    display: none;
}

/* media settings originally from https://gist.github.com/killercup/5917178 */

@media only screen and (min-width: 480px) {
    body {
        font-size: 14px;
    }
}
@media only screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media print {
    * {
        /* XXX this hid the pencil icon in notes
        background: transparent !important; */
        color: black !important;
        filter: none !important;
        -ms-filter: none !important;
    }

    body {
        font-size: 12pt;
        max-width: 100%;
    }

    a, a:visited {
        text-decoration: underline;
    }

    hr {
        height: 1px;
        border: 0;
        border-bottom: 1px solid black;
    }

    /* XXX this isn't desirable
    a[href]:after {
        content: " (" attr(href) ")";
    }
   */

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: "";
    }

    pre, blockquote {
        /* XXX this doesn't look nice
        border: 1px solid #999; */
        padding-right: 1em;
        page-break-inside: avoid;
    }

    tr, img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page :left {
        margin: 15mm 20mm 15mm 10mm;
    }

    @page :right {
        margin: 15mm 10mm 15mm 20mm;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    .annex1, .appendix1, .new-page {
        page-break-before: always;
    }
}