elvish/website/style.css

/**
 * Global styling.
 **/

html {
    /* Prevent font scaling in landscape while allowing user zoom */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Source Serif", Georgia, serif;
    font-size: 17px;
    line-height: 1.4;
}

body.has-js .no-js, body.no-js .has-js {
    display: none !important;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: #0645ad;
}

/**
 * Top-level elements.
 *
 * There are two main elements: #navbar and .content. Both have a maximum
 * width, and is centered when the viewport is wider than that.
 *
 * #navbar is wrapped by #navbar-container, a black stripe that always span
 * the entire viewport.
 **/

#navbar-container {
    width: 100%;
    color: white;
    background-color: #1a1a1a;
    padding: 7px 0;
}

.content, #navbar {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px;
}

/*
832px = max-width + left and right padding of .content.

After this screen width, .content will no longer get wider, but we allow
.extra-wide elements to continue to get wider up to 900px, using negative
left and right margins.
*/
@media screen and (min-width: 832px) {
    .extra-wide  {
        /* 32px is left and right padding of .content. */
        width: calc(min(100vw - 32px, 900px));
        /* upper bound is calculated by substituting 100vw = 900px + 32px */
        margin-inline: calc(max((832px - 100vw) / 2, -50px));
    }
}

/**
 * Elements in the navbar.
 *
 * The navbar is made up of two elements, #site-title and ul#nav-list. The
 * latter contains li.nav-item which contains an a.nav-link.
 */

#site-title, #nav-list {
    display: inline-block;
    /* Add spacing between lines when the navbar cannot fit in one line. */
    line-height: 1.4;
}

#site-title {
    font-size: 1.2em;
    /* Move the title downward 1px so that it looks more aligned with the
     * category list. */
    position: relative;
    top: 1px;
}

#site-title a {
    color: #5b5;
}

#nav-list {
    margin-left: 0.8em;
}

.nav-item {
    list-style: none;
    display: inline-block;
    margin-left: 0.2em;
}

.nav-link {
    color: white;
    border-radius: 3px;
}

.nav-link > code {
    padding: 0px 0.4em;
}

.nav-link:hover {
    background-color: #444;
}

.nav-link.current {
    color: black;
    background-color: white;
}

/**
 * Article header.
 **/

.timestamp {
    margin-bottom: 0.6em;
}

.article-title {
    padding: 16px 0;
    border-bottom: darkred solid 2px;
}

/* Override .content h1 */
.content .article-title h1 {
    font-size: 1.4em;
    margin: 0;
    padding: 0;
    border: none;
}

/**
 * Article content.
 **/

.article-content {
    padding-top: 32px;
}

.content p, .content ul, .content pre {
    margin-bottom: 0.7em;
}

.content li {
    margin: 0.5em 0;
}

/* Block code. */
.content pre {
    padding: 1em;
    overflow: auto;
}

/* Inline code. */
.content p code {
    padding: 0.1em 0;
}

.content p code::before, .content p code::after {
    letter-spacing: -0.2em;
    content: "\00a0";
}

code, pre {
    font-family: "Fira Mono", Menlo, "Roboto Mono", Consolas, monospace;
}

.content code, .content pre {
    background-color: #f0f0f0;
    border-radius: 3px;
}

/* This doesn't have p, so that it also applies to ttyshots. */
.content code {
    font-size: 85%;
}

/* We only use h1 to h3. */

.content h1, .content h2, .content h3 {
    line-height: 1.25;
}

.content h1, .content h2, .content h3 {
    margin-top: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

.content h1 {
    font-size: 1.3em;
}

.content h1 {
    border-left: darkred solid 0.3em;
    padding-left: 0.3em;
    margin-left: -0.6em;
}

.content h2 {
    font-size: 1.2em;
}

.content ul, .content ol {
    margin-left: 1.5em;
}

/**
 * Table of content.
 */

#toc-wrapper {
    background-color: #f0f0f0;
    margin: 0 0 16px 0;
    border-radius: 6px;
    line-height: 1;
}

#toc-header {
    padding: 1em 1em 0.6em 1em;
    border-bottom: solid white 2px;
    cursor: pointer;
}

#toc-status {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 2px;
    border: 6px solid transparent;
    position: relative;
}

#toc-status:not(.closed) {
    border-top: 6px solid black;
    top: 3px;
}

#toc-status.closed {
    border-left: 6px solid black;
    left: 3px;
}

#toc {
    margin-left: -0.6em;
    padding: 1em;
}

@media screen and (min-width: 600px) {
    #toc {
        column-count: 2;
    }
}

/* Override value from .content ul, which is too big for the ToC */
#toc ul {
    margin-left: 1em;
}

#toc li {
    list-style: none;
    /* Keep first-level ToC within one column */
    break-inside: avoid;
}

/*
When the ToC can have two columns, the first item of the second column will not
the intended top margin (this is how columns work in CSS). Work around this by
adding some extra top padding in #toc, and removing the top margin of the very
first <li> element to match.
*/
#toc > ul:first-child > li:first-child {
    margin-top: 0;
}

/**
 * Category content.
 **/

.content.category {
    padding-top: 32px;
}

.article-list > li:hover {
    background-color: #d0d0d0;
}

.article-timestamp {
    float: right;
    display: block;
    margin-left: 1em;
}

/**
 * Layout utilities.
 **/

.clear {
    clear: both;
}

.no-display {
    display: none !important;
}

/**
 * Miscellous elements.
 **/

hr {
    clear: both;
    border-color: #aaa;
    text-align: center;
}

hr:after {
    content: "❧";
    text-shadow: 0px 0px 2px #667;
    display: inline-block;
    position: relative;
    top: -0.5em;
    padding: 0 0.25em;
    font-size: 1.1em;
    color: black;
    background-color: white;
}

kbd {
    display: inline-block;
    border: 1px solid black;
    border-radius: 3px;
    padding: 0 3px;
    margin: 1px;
    font-size: 85%;
    font-family: "Lucida Grande", Arial, sans-serif;
}

/**
 * TTY shots.
 */

pre.ttyshot {
    font-size: 12pt;
    line-height: 1 !important;
    border: 1px solid black;
    display: inline-block;
    margin-bottom: 0 !important;
}

pre.ttyshot, pre.ttyshot code {
    background-color: white;
}

@media screen and (max-width: 600px) {
    pre.ttyshot {
        font-size: 2.6vw;
    }
}

/* SGR classes used in ttyshots. */
.sgr-1 {
    /*
     * Bold text is wider than regular text in most fonts, and can break
     * vertical alignment in ttyshots. Emulate bold font with text-shadow.
     */
    text-shadow: 0.05em 0 0;
}
.sgr-4 {
    text-decoration: underline;
}
/*
 * SGR 7 (inverse) has some special handling by the ttyshot program; see
 * comments there.
 */
.sgr-7fg {
    color: white;
}
.sgr-7bg {
    background-color: black;
}

/* black */
.sgr-30 { color: black; }
.sgr-40 { background-color: black; }
/* red */
.sgr-31 { color: maroon; }
.sgr-41 { background-color: maroon; }
/* green */
.sgr-32 { color: green; }
.sgr-42 { background-color: green; }
/* yellow */
.sgr-33 { color: goldenrod; }
.sgr-43 { background-color: goldrenrod; }
/* blue */
.sgr-34 { color: navy; }
.sgr-44 { background-color: navy; }
/* magenta */
.sgr-35 { color: darkorchid; }
.sgr-45 { background-color: darkorchid; }
/* cyan */
.sgr-36 { color: darkcyan; }
.sgr-46 { background-color: darkcyan; }
/* white */
.sgr-37 { color: lightgrey; }
.sgr-47 { background-color: lightgrey; }

/* bright black */
.sgr-90 { color: grey; }
.sgr-100 { background-color: grey; }
/* bright red */
.sgr-91 { color: red; }
.sgr-101 { background-color: red; }
/* bright green */
.sgr-92 { color: lime; }
.sgr-102 { background-color: lime; }
/* light yellow */
.sgr-93 { color: yellow; }
.sgr-103 { background-color: yellow; }
/* light blue */
.sgr-94 { color: blue; }
.sgr-104 { background-color: blue; }
/* bright magenta */
.sgr-95 { color: fuchsia; }
.sgr-105 { background-color: fuchsia; }
/* bright cyan */
.sgr-96 { color: aqua; }
.sgr-106 { background-color: aqua; }
/* bright white */
.sgr-97 { color: white; }
.sgr-107 { background-color: white; }

/** Header anchors. */
.anchor {
    opacity: 0;
    font-size: 90%;
    color: inherit;
    padding-left: 0.15em;
}

*:hover > .anchor {
    opacity: 1;
}

/**
 * Dark theme.
 */

.dark {
    color: #eee;
    background: black;
}

.dark a {
    color: #6da2fa;
}

.dark a:visited {
    color: #7e72ff;
}

.dark .article-link, .dark .article-link:visited {
    color: #eee;
    border-color: white;
}

.dark .article-list > li:hover {
    background-color: #333;
}

.dark .content code, .dark .content pre {
    background-color: #181818;
}

.dark #toc-wrapper {
    background-color: #181818;
}

.dark hr {
    border-color: #eee;
}

.dark hr:after {
    color: #eee;
    background-color: black;
}

.dark pre.ttyshot, .dark pre.ttyshot code {
    background: black;
}
.dark .sgr-7fg {
    color: black;
}
.dark .sgr-7bg {
    background-color: #eee;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 16px;
}
td, th {
    border: 1px solid #aaa;
    text-align: left;
    padding: 0.4em;
}

.dark td, .dark th {
    border-color: #444;
}