/* style.css - Erik Mortimer */

html { overflow-x: hidden; }

body {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    padding: 14px 16px 10px;
    background: #000;
    color: #e0e0e0;
    border-top: 3px solid #88c0ff;
    max-width: 900px;
}

/* ---- site header / nav -------------------------------------------------- */
.site-header {
    margin: 0 0 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #333;
}

.site-title {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.3em;
    color: #88c0ff;
    text-decoration: none;
    margin-right: 1.5em;
}

.site-nav { display: inline; }

.site-nav a {
    margin-right: 0.9em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    color: #aaa;
    text-decoration: none;
}

.site-nav a:hover { color: #88c0ff; }

/* ---- breadcrumb / post header ------------------------------------------ */
.breadcrumb {
    font-family: ui-monospace, monospace;
    font-size: 0.85em;
    color: #888;
    margin: 0 0 0.4em;
}
.breadcrumb a { color: #aaa; text-decoration: none; }
.breadcrumb a:hover { color: #88c0ff; }

.post-title {
    font-size: 2em;
    margin: 0.2em 0 0.3em;
    text-wrap: balance;
}

.post-meta {
    font-family: ui-monospace, monospace;
    font-size: 0.88em;
    color: #888;
    margin: 0 0 1em;
}

.post-lede {
    font-size: 1.05em;
    color: #ccc;
    margin: 0 0 1.2em;
    padding-left: 0.8em;
    border-left: 2px solid #555;
}

.post-footer {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #333;
    font-size: 0.9em;
    color: #888;
}

/* ---- home page hero ----------------------------------------------------- */
.hero { margin: 0.5em 0 2em; }
.hero-lede { font-size: 1.1em; margin: 0.3em 0 0.8em; }

.cat-list {
    list-style: none;
    padding-left: 0;
}
.cat-list li { margin: 0.4em 0; }
.cat-list a { font-weight: bold; }

/* ---- post listings ------------------------------------------------------ */
.post-list {
    list-style: none;
    padding-left: 0;
}

.post-item {
    margin: 0.6em 0 1.4em;
    padding-bottom: 0.6em;
    border-bottom: 1px dotted #333;
}
.post-item:last-child { border-bottom: 0; }

.post-date {
    display: inline-block;
    width: 7em;
    font-family: ui-monospace, monospace;
    font-size: 0.9em;
    color: #888;
}

.post-link { font-weight: bold; }

.post-cat,
.post-readtime {
    display: inline-block;
    margin-left: 0.6em;
    padding: 1px 6px;
    background: #1a1a1a;
    border: 1px solid #333;
    font-family: ui-monospace, monospace;
    font-size: 0.78em;
    color: #aaa;
}

.post-desc {
    margin: 0.3em 0 0 7em;
    color: #bbb;
    font-size: 0.95em;
}

@media (max-width: 600px) {
    .post-date { display: block; width: auto; }
    .post-desc { margin-left: 0; }
    .site-title { display: block; margin-bottom: 0.4em; }
}

/* ---- footer ------------------------------------------------------------- */
.site-footer {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid #333;
    color: #666;
    font-size: 0.85em;
    padding-bottom: 1em;
}

/* ---- typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-family: serif;
    margin: 1em 0 0.4em;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

p, ul, ol, dl, blockquote, pre, table, figure {
    margin: 0.8em 0;
}

a { color: #88c0ff; }
a:visited { color: #b0a0d0; }
a:hover { color: #aad4ff; }

ul, ol { padding-left: 2em; }

/* ---- code --------------------------------------------------------------- */
code, kbd, samp, pre {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95em;
}

code { background: #1a1a1a; padding: 1px 4px; }

pre {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 8px;
    overflow-x: auto;
    line-height: 1.4;
}

pre code { background: transparent; padding: 0; }

div.sourceCode {
    background: #1a1a1a;
    border: 1px solid #333;
    overflow-x: auto;
    margin: 0.8em 0;
}

div.sourceCode pre { border: 0; margin: 0; }

/* ---- quotes ------------------------------------------------------------- */
blockquote {
    border-left: 3px solid #555;
    padding-left: 0.8em;
    margin-left: 0;
    color: #aaa;
}
blockquote > :last-child { margin-bottom: 0; }

/* ---- rules -------------------------------------------------------------- */
hr { border: 0; height: 1px; background: #333; margin: 1em 0; }

/* ---- tables ------------------------------------------------------------- */
table { border-collapse: collapse; margin: 0.8em 0; }
th, td { text-align: left; padding: 4px 8px; border: 1px solid #555; }

/* ---- media -------------------------------------------------------------- */
img, video, canvas, svg { max-width: 100%; height: auto; }

::selection { background: #335; color: #fff; }

/* ---- syntax highlighting (breezedark) ---------------------------------- */
code span.al { color: #ff6e6e; }
code span.an { color: #7ec699; font-style: italic; }
code span.at { color: #e0c46c; }
code span.bn { color: #e0c46c; }
code span.bu { color: #e0c46c; }
code span.cf { color: #cc99cc; }
code span.ch { color: #7ec699; }
code span.cn { color: #e0c46c; }
code span.co { color: #777; font-style: italic; }
code span.cv { color: #777; font-style: italic; }
code span.do { color: #777; font-style: italic; }
code span.dt { color: #e0c46c; }
code span.dv { color: #e0c46c; }
code span.er { color: #ff6e6e; }
code span.ex { color: #6eb4ff; }
code span.fl { color: #e0c46c; }
code span.fu { color: #6eb4ff; }
code span.im { color: #cc99cc; }
code span.in { color: #777; font-style: italic; }
code span.kw { color: #cc99cc; }
code span.op { color: #e0e0e0; }
code span.ot { color: #cc99cc; }
code span.pp { color: #ff6e6e; }
code span.sc { color: #7ec699; }
code span.ss { color: #ff6e6e; }
code span.st { color: #7ec699; }
code span.va { color: #ff6e6e; }
code span.vs { color: #7ec699; }
code span.wa { color: #e0c46c; }

/* ---- reading progress bar (progressive enhancement) -------------------- */
@supports (animation-timeline: scroll()) {
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: #88c0ff;
        transform-origin: 0 50%;
        transform: scaleX(0);
        animation: reading-progress linear;
        animation-timeline: scroll(root);
        z-index: 100;
    }
    @keyframes reading-progress {
        to { transform: scaleX(1); }
    }
}