/* Fonts  */
@import "/assets/fonts/hack.css";
@import "/assets/fonts/roboto.css";

/* Defaults */
:root {
    --font-family: Roboto, sans-serif;
    --font-family-monospace: Hack, monospace;
}

/* Theme colors */
:root {
    --color-gray-20: #e0e0e0;
    --color-gray-50: #c0c0c0;
    --color-gray-90: #333;

    --background-color-rgb: 255, 255, 255;
    --background-color: rgb(var(--background-color-rgb));
    --background-color-highlight: #e0e0e0;
    --border-color-posts: #ddd;

    --text-color-code: #111;
    --background-color-code: #ddd;
    --caption-default-background-color: inherit;
    --caption-darker-background-color: var(--background-color-highlight);

    --text-color: var(--color-gray-90);
    --text-color-link: #082840;
    --text-color-link-visited: #17050f;
    --text-color-logo: #111;

    /* screen dependent values */
    --content-width: 37.5em; /* 600px /16 */
    --default-font-size: 1em;
    --image-width: 37.5em;

    /* src: heroicons.com, arrow-top-right-on-square */
    --external-link-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(8,40,64)" width="1rem" height="1rem">\
  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />\
</svg>');
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-20: #101010;
        --color-gray-50: #303030;
        --color-gray-90: #dad8d8;

        /* --text-color is assigned to --color-gray-_ above */
        --text-color-link: #b7e500;
        --text-color-link-visited: #7a9900;
        --text-color-logo: var(--color-gray-90);

        --text-color-code: #ddd;
        --background-color-code: #333;
        --caption-default-background-color: #333;
        --caption-darker-background-color: var(--caption-default-background-color);

        --background-color-rgb: 0, 0, 0;
        --background-color: rgb(var(--background-color-rgb));
        --background-color-highlight: #444;
        --border-color-posts: #333;

        --external-link-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(183,229,0)" width="1rem" height="1rem">\
  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />\
</svg>');
    }
}

@media only screen and (max-width: 22em) {
    /* no logo for minuscule devices */
    .home {
        display: none;
    }
}

@media only screen and (max-width: 28em) {
    /* hide logo text on small devices */
    .home span {
        display: none;
    }
}

@media only screen and (min-width: 64em) {
    /* bigger text for huge devices */
    :root {
        --content-width: 45em;
        --image-width: 37.5em;
        --default-font-size: 1.1em;
    }
}

/* Global stylesheet */
* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--default-font-size);
    color: var(--text-color);
}

/* Header */
header::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-image: url("../img/header.jpg");
    background-repeat: no-repeat;
    background-position: top;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
    }
    header::before {
        filter: grayscale(20%) invert(100%) brightness(60%) hue-rotate(320deg);
    }
}

header {
    background: rgba(var(--background-color-rgb), 0.6);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

/* Header Logo */
.home {
    padding: 0 1rem;
    margin-bottom: 1rem;
    font-size: 1em;
    font-weight: bold;
}
.home :link {
    text-decoration: none;
}
.home img {
    margin: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.home span {
    color: var(--text-color-logo);
}

/* Header Nav */
.nav {
    margin: 0;
    list-style: none;
    padding: 1rem;
}
.nav-item {
    display: inline-block;
    margin-right: 1rem;
}
.nav-item a[href]:not(:hover) {
    text-decoration: none;
}
.nav-item-active {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--text-color-link-visited);
}

/* Footer */
footer {
    width: var(--content-width);
    margin: 0 auto;
    display: none;
}

.footer-buttons {
    list-style-type: none;
    display: flex;

}
.footer-buttons svg {
    width: 2rem;
    height: 2rem;
}

/* Content */
h1 {
    background: rgba(var(--background-color-rgb), 0.6);
    text-align: center;
}

p:last-child {
    margin-bottom: 0;
}
p,
img,
.tmpl-post li {
    max-width: var(--content-width);
}
p,
.tmpl-post li {
    line-height: 1.45;
}

a[href] {
    color: var(--text-color-link);
}
a[href]:visited {
    color: var(--text-color-link-visited);
}
a[rel*="external"]::after {
    content: '';
    background: no-repeat var(--external-link-icon);
    padding-right: .9rem;
}

main {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}
main :first-child {
    margin-top: 0;
}

table {
    margin: 1em 0;
}
table td,
table th {
    padding-right: 1em;
}

pre,
code {
    font-family: var(--font-family-monospace);
}
pre {
    font-size: 14px;
    line-height: 1.375;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    padding: 1em;
    margin: 0.5em 0;
    background-color: #f6f6f6;
}
code {
    font-size: 0.9em;
    border-radius: 5px;
    padding: 0.1em;
    background-color: var(--background-color-code);
    color: var(--text-color-code);
}

/* Posts list */
.postlist {
    list-style: none;
    padding: 0;
}
.postlist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    line-height: 1.5;
    margin-bottom: .5em;
    padding: .5em;
    border: 1px solid var(--border-color-posts);
}
.postlist-date,
.postlist-item:before {
    font-size: 0.8125em; /* 13px /16 */
    color: var(--color-gray-90);
}
.postlist-date {
    display: block;
    width: 100%;
    font-size: 1em;
}
.postlist-link {
    text-underline-position: from-font;
    text-underline-offset: 0;
    text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
    font-weight: bold;
}
.tmpl-home .postlist-link {
    font-size: 1.1875em; /* 19px /16 */
    font-weight: 700;
}
.postlist-description {
    padding-left: 1em;
    margin: 0;
    display: block;
    width: 100%;
}
.postlist-draft-prefix {
    padding-left: 0.25em;
}

/* Tags */
.post-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 0.75em; /* 12px /16 */
    padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */
    margin-left: 0.6666666666667em; /* 8px /12 */
    margin-top: 0.3em; /* 6px /12 */
    margin-bottom: 0.3em; /* 6px /12 */
    color: var(--color-gray-90);
    border: 1px solid var(--color-gray-50);
    border-radius: 0.25em; /* 3px /12 */
    text-decoration: none;
    line-height: 2;
}
a[href].post-tag,
a[href].post-tag:visited {
    color: inherit;
    background: rgba(var(--background-color-rgb), 0.6);
}
a[href].post-tag:hover,
a[href].post-tag:focus {
    background: var(--background-color-highlight);
}
.postlist-item > .post-tag {
    align-self: center;
}

/* Post Images */
.post-card {
    /* don't fill page width with figure */
    display: table;
}

.post-card img {
    /* respect image aspect ratio when shrinking */
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

@media (prefers-color-scheme: light) {
    .post-card-shadow {
        box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
    }
}

figure.post-card {
    /* don't expand when caption gets long */
    max-width: var(--image-width);
    margin: 0 auto;
}

.post-card figcaption {
    padding: 0.5em 1em;
    font-style: italic;
    font-size: smaller;
    background-color: var(--caption-default-background-color);
}

.post-card-darker figcaption {
    /* another choice of background color */
    background-color: var(--caption-darker-background-color);
}

.post-card-bgwhite {
    background-color: white;
}

.post-card-bgwhite img {
    padding: .5em;
}

/* Infobox */
:root {
    --color-infobox: #ffc;
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-infobox: #082840;
    }
}

.infobox {
    background-color: var(--color-infobox);
    color: var(--color-gray-90);
    padding: 1em 0.625em; /* 16px 10px /16 */
    margin: 1em;
    font-weight: 700;
}
.infobox ol:only-child {
    margin: 0;
}

main a {
    word-wrap: break-word;
}

/* Direct Links / Markdown Headers */
.direct-link {
    font-family: var(--font-family);
    text-decoration: none;
    font-style: normal;
    margin-left: 0.1em;
}
a[href].direct-link,
a[href].direct-link:visited {
    color: transparent;
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
    color: #aaa;
}

/* DRAFT callout for posts with "draft: true",
 * based on https://github.com/11ty/11ty-website/blob/de2f196b48aa8f593944a317e85881994eb25428/src/_includes/components/callout.css 
 */
.callout-draft {
    --callout-primary: transparent;
    --callout-secondary: hsl(270deg 50% 90%);
    --callout-tag: rebeccapurple;
    overflow: hidden;
    padding-left: 3.888888888889em; /* 70px /18 */
}
@media (prefers-color-scheme: dark) {
    .callout-draft {
        --callout-primary: hsl(270deg 50% 30%);
        --callout-secondary: hsl(270deg 50% 30%);
        --callout-tag: hsl(270deg 50% 85%);
        --callout-primarytext: #fff;
    }
}
.callout-draft:after {
    display: none;
}
@media (min-width: 37.5em) {
    /* 600px */
    .callout-draft {
        padding-right: 3.888888888889em; /* 70px /18 */
    }
    .callout-draft:after {
        display: block;
    }
}
.callout-draft:after {
    position: fixed;
    content: "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT ";
    width: min-content;
    overflow: hidden;
    top: -2em;
    bottom: -1em;
    background-color: var(--callout-primary);
    color: var(--callout-tag);
    font-weight: 700;
    transform: skewY(-13deg);
    padding: 0 0.2857142857143em; /* 4px /14 */
    margin: 0;
    right: 0;
    left: auto;
    transform: skewY(13deg);
}

/* FOUC hack */
body {
    visibility: visible;
    opacity: 1;
}