@import url('https://fonts.cdnfonts.com/css/proxima-nova-2');

/* * { /\* DEBUGGING *\/ */
/*     outline: 1px solid red; */
/* } */

/* * FIXME: make sub-sections below explicit */
/* tailwind style classes */
.hidden { display: none; }

/*********************/
/* custom org tweaks */
/*********************/
:root {
    --sans-font-family: "Proxima Nova", "Clear Sans", Helvetica, sans-serif;
    --sans-font-family-tufte: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    --serif-font-family-sans-tufte: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    --banner-img-width: 120px;
    --banner-links-padding: 2rem; /* also used for padding-right of postamble etc */
    --breadcrumb-links-flex-direction: column-reverse;
    --li-margin-top-tufte: 0.25rem; /* from tufte.css li:not(:first-child) */
    --preamble-font-size: 1.4rem;
    --preamble-total-line-height-1x: 1.28rem; /* ??? */
    --preamble-total-line-height-2x: 2.56rem;
    --preamble-total-line-height-2x-neg: -2.56rem;
    --preamble-total-line-height-3x: 3.84rem;
    --preamble-total-line-height-5x: 6.4rem;
    --preamble-total-line-height-5x-neg: -6.4rem;
    --body-tufte-max-width: 1400px;
    --body-text-font-size: 1.4rem;
    --body-lhs-padding: 12.5%;
    --body-lhs-padding-neg: -12.5%;
    --body-src-code-bg-color: #FFFFE8; /* hardcoded for plan9 theme */
    --postamble-total-line-height-1x: 1.8rem; /* ??? */
}
.sans {
    font-family: var(--sans-font-family);
}
h2, h3, h4 { /* make it easier to skim/scan */
    font-weight: 550;
    font-style: normal; /* because proxima-nova font doesn't have bold-italic or
                         * semibold-italic*/
}
body article { /* content excluding footer (aka #content) */
    padding: 0 0; /* overriding value from tufte.css */
}
body pre.src,
body code.src { /* source code */
    background-color: var(--body-src-code-bg-color);
}
section div.org-center > figure { /* for posts */
    display: inline-block;
}
article > div.org-center > figure { /* for index.org */
    margin: 0 auto;
}
/* BEGIN: make regular quotes look closer to epigraphs, i.e, italicized */
blockquote {
    font-style: italic;
}
div.verse > blockquote, blockquote > footer {
    font-style: normal
}
/* END: make regular quotes look closer to epigraphs, i.e, italicized */
/* BEGIN SECTION: top banner */
#org-div-home-and-up {
    font-size: var(--body-text-font-size);
}
#org-div-home-and-up nav {
    inline-size: min-content;
}
#org-div-home-and-up nav ul {
    list-style: none;
    margin: 0 0;
}
#org-div-home-and-up nav.banner-links ul {
    padding-left: var(--banner-links-padding);
    padding-right: 0;
}
/* START: reset spacing: <https://stackoverflow.com/a/5256640> */
nav.banner-links > ul,
nav.breadcrumb-links > ul {
    font-size: 0; /* reset spacing: <https://stackoverflow.com/a/5256640> */
}
nav.banner-links > ul li,
nav.breadcrumb-links > ul li { /* undo font-sizing done above */
    font-size: var(--preamble-font-size);
}
/* DONE: reset spacing */
/* START: reverse breadcrumb order: <https://stackoverflow.com/a/35923788> */
nav.breadcrumb-links ul {
    display: flex;
    flex-direction: var(--breadcrumb-links-flex-direction);
    padding-left: 0;
    padding-right: var(--banner-links-padding);
}
nav.breadcrumb-links ul li:not(:last-child) {
    margin-top: var(--li-margin-top-tufte);
}
nav.breadcrumb-links ul li:last-child {
    margin-top: 0; /* same as li:first-child in tufte.css */
}
/* DONE: reverse breadcrumb order */
#org-div-home-and-up img.banner-pic {
    width: var(--banner-img-width);
    float: left;
}
#org-div-home-and-up div.title-wrapper { /* FIXME: eliminate need, if possible */
    margin-left: var(--banner-img-width);
    display: flex
}
#org-div-home-and-up div.title {
    min-width: 35%;
    flex: auto;
    overflow-wrap: break-word;
    white-space: normal;
    margin-bottom: 0;
}
#org-div-home-and-up div.title h1 {
    margin-top: 0;
    display: block;
}
#org-div-home-and-up > hr {
    width: 100%;
    border-top-width: 2px;
    height: 2px;
}
/* END SECTION: top banner */
#preamble {
    margin-left: var(--body-lhs-padding-neg);
    width: var(--body-lhs-padding);
}
#content {
    margin-top: var(--preamble-total-line-height-5x-neg);
    width: 100%; /* needed for chrome? */
}
#preamble .date, #preamble .author {
    min-width: max-content;
    max-width: min-content;
}
#preamble .author-pic {
    /* NOTE: below assumes that the author image is square. to not assume that
     * we'd need to specify the `height` attribute as well. however, then the
     * image get vertically squished on smaller screens */
    width: var(--preamble-total-line-height-3x);
    display: block;
}
article > header,
#footnotes,
#postamble {
    padding-right: var(--banner-links-padding);
}
#postamble .author, #postamble .date {
    font-size: var(--preamble-font-size);
}
#postamble .author, #postamble .date {
    display: inline-block;
    min-width: max-content;
}
#postamble .date {
    float: right;
    margin-left: 0.3rem;
}
#postamble .author-pic {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    width: var(--postamble-total-line-height-1x);
    height: var(--postamble-total-line-height-1x);
}
#postamble {
    display: flex;
    margin-top: 5%;
}
#postamble .license {
    font-size: 50%;
    flex: auto;
    text-align: center;
    display: inline-block;
    overflow-wrap: break-word;
    white-space: normal;
}
/* #postamble .license > br { display: none; } */
.mastodon-embed {
    max-width: 550px !important; /* to match twitter */
    width: 100%;
}

@media (max-width: 760px) {
    :root {
        --body-lhs-padding: 8%;
        --banner-links-padding: 0;
        --banner-img-width: 60px; /* 50% */
        --breadcrumb-links-flex-direction: row-reverse;
        --preamble-font-size: 1.2rem;
    }
    #org-div-home-and-up div.title-wrapper {
        display: revert;
    }
    #org-div-home-and-up nav ul li {
        display: inline;
    }
    #org-div-home-and-up nav {
        width: 100%
    }
    nav.banner-links ul {
        text-align: right;
    }
    nav.banner-links ul li:not(:first-child),
    nav.breadcrumb-links ul li:not(:last-child) {
        margin-top: 0;
        margin-left: var(--li-margin-top-tufte); /* since displayed as a row */
    }
    #preamble {
        margin-left: revert;
        width: revert;
    }
    #preamble .author-pic {
        float: right;
        margin-top: var(--preamble-total-line-height-2x-neg);
        width: var(--preamble-total-line-height-2x);
    }
    #content { margin-top: var(--preamble-total-line-height-2x-neg); }
    #postamble .license img {
        width: unset;
    }
}

/* BEGIN: stylize "todo keywords" */
.STARTED {
    color: yellowgreen;
}
.WAITING {
    color: orange;
}
.CANCELED, .CANCELLED {
    color: gray;
}
/* END: stylize "todo keywords" */

/* BEGIN: fix horizontal scroll on small screens */
@media (max-width: 760px) {
    #postamble .author, #postamble .date {
        min-width: unset;
    }
}
/* END: fix horizontal */

/* BEGIN: custom stylesheet for printing */
@media print {
    :root {
        /* ensure that code is readable upto 80 col width; might be able to
           increase this by reducing side-margins */
        --ox-tufte-code-font-size-sans: 0.7rem;
        --sans-font-family: var(--serif-font-family-sans-tufte);
    }
    header img.banner-pic,
    header nav.banner-links,
    header nav.breadcrumb-links,
    #preamble img.author-pic,
    article > section:last-of-type, /* comments section */
    footer img.author-pic {
        display: none;
    }
    #preamble div.date {
        float: left;
    }
    #preamble div.author {
        float:right;
    }
    .margin-toggle + .marginnote,
    .margin-toggle + .sidenote { /* from ".margin-toggle:checked + .sidenote" in tufte.css */
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
    }
    article > *:last-child { /* not needed for firefox for some reason */
        margin-bottom: 5rem; /* FIXME: why on chrome? */
    }
}
/* END: custom stylesheet for printing */

/* BEGIN: non-standard pages */
#content.not-a-post { margin-top: revert; }
article.not-a-post > header > h1.title { display: none; }
article.not-a-post > section { padding-right: var(--banner-links-padding); }
/* sidenotes and footnotes not supported */
article.not-a-post > p, article.not-a-post section > div { width: 100% }
article.not-a-post #footnotes { display: none; }
/* no author attribution needed if not a post; could also be done by having a */
/* function for setting the pre/postamble (instead of a string) */
#preamble.not-a-post,
#postamble.not-a-post .author, #postamble.not-a-post .author-pic,
#postamble.not-a-post .date {
    display: none;
}

article.about-page .sidenote > img.author-pic { width: 220px; height: auto; }
article.about-page .sidenote { font-size: 60%; }

/* below assumes that last heading of an index.org file includes the sitemap and*/
/* the heading text isn't meaningful (and ought to be hidden) */
article.posts-index > section:last-of-type > h2 {
    display: none;
}
article.posts-index > section:last-of-type {
    padding-top: 0;
}

/* undoing effect of .not-a-post */
article.with-sidenote > p,
article.with-sidenote section > div {
    width: 55%; /* from ox-tufte.css */
}

@media (max-width: 760px) {
    article.with-sidenote > p,
    article.with-sidenote section > div {
        width: 100%; /* from ox-tufte.css */
    }
    article.page-not-found .marginnote {
        display:block;
        float:revert;
        margin-left:auto;
        margin-right: auto;
    }
}

@media print {
    article.not-a-post > section:last-of-type { /* not a comments section */
        display: block;
    }
    article.about-page .sidenote {
        display: none !important;
    }
}

/* END: non-standard pages */

/* BEGIN: dot diagramming support */
object.dot2obj {
    width: fit-content;
}
/* END: dot diagramming support */

/* * Comments */
/* ** Giscus */
figure.wt_giscus {
/* *** Increase width of Giscus block on narrow screens to aid readability */
    max-width: calc(0.55 * var(--body-tufte-max-width));
    width: var(--ox-tufte-fullwidth);
    clear: both; /* ensure no overlap with marginalia */
/* *** */
}
/* * site.tufte.css ends here */