elvish-clone/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.4em;
}

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: 12px 0;
}

#content, #navbar {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 4%;
}

/**
 * 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.4em;
}

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

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

.nav-item {
    list-style: none;
    display: inline-block;
}

.nav-link {
    color: white;
}

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

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

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

.nav-item + .nav-item::before {
    content: "|";
}

/**
 * Article header.
 **/

.timestamp {
    margin-bottom: 0.6em;
}

.article-title {
    padding: 16px 0;
    border-bottom: solid 1px #667;
}

/* Extra level needed to be more specific than .article h1 */
.article .article-title h1 {
    font-size: 1.5em;
    margin: 0;
    padding: 0;
    border: none;
}

/**
 * Article content.
 **/

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

.article p, .article ul, .article pre {
    margin-bottom: 16px;
}

.article li {
    margin: 0.5em 0;
}

.article li > p {
    margin: 1em 0;
}

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

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

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

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

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

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

/* We only use h1 to h3. */

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

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

.article h1 {
    font-size: 1.3em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #aaa;
}

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

.article h3 {
    font-style: italic;
}

.article ul, .article ol {
    margin-left: 1em;
}

/**
 * Table of content.
 */

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

/* The first <h1> clears the TOC */
.article-content h1 {
    clear: both;
}

#pandoc-toc {
    margin-left: -0.6em;
}

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

@media (min-width: 900px) {
    #pandoc-toc {
        column-count: 3;
    }
}

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

/**
 * Category content.
 **/

#content.category {
    padding-top: 16px;
}

.category-prelude, .group-intro, .article-list {
    margin-top: 16px;
}

.article-list > li {
    list-style: square inside;
    padding: 3px;
}

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

.article-link, .article-link:visited {
    color: black;
    display: inline;
    line-height: 1.4em;
    border-bottom: 1px solid black;
}

.article-timestamp {
    float: right;
    display: inline-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;
}

/** Section numbers generated by pandoc */
.header-section-number:after, .toc-section-number:after {
    content: ".";
}

/**
 * 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 .article code, .dark .article pre {
    background-color: #181818;
}

.dark #pandoc-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;
}