Layout and Style

Our goal is to have a three columns layout: one aside menu, with the top-level navigation links (technical articles, news, etc.) and the table of contents of the current pages if relevant, one main area for the webpage content, and a margin column with side notes and margin notes.

:root {
    --main-width: 30rem;
    --gutter-width: 5rem;
    --margin-width: 15rem;
    --body-width: calc(var(--main-width) + var(--gutter-width) + var(--margin-width));
}

@media (max-width: 55rem) {
    :root {
        --body-width: var(--main-width);
    }
}

* {
    box-sizing: border-box;
}

.fullwidth {
    width: var(--body-width);
}

html {
    font-size: 1.1rem;
}

body {
    line-height: 1.3;
    max-width: var(--body-width);
    margin-left: auto;
    margin-right: auto;
}

aside {
    background: var(--bg);
    z-index: 9999;
    width: var(--body-width);
    align-self: flex-start;
    position: sticky;
    top: 0;
}

aside nav {
    text-align: center;
    border-bottom: 1px solid var(--fade);
}

aside nav ul {
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

aside nav li {
    display: inline;
}

aside nav li:not(:first-of-type)::before {
    content: " · ";
}

main {
    counter-reset: sidenote-counter;
    max-width: var(--main-width);
}

main nav {
    font-style: italic;
    font-size: smaller;
    color: var(--fg-plus);
    background: var(--current-line);
    padding: .5rem 1rem;
}

main nav .series-next {
    text-align: right;
}

main nav p.series-next::after {
    content: " →";
}

main nav p.series-prev::before {
    content: "← ";
}

img {
    max-width: 100%;
}

.sidenote,
.marginnote {
    font-size: smaller;
    float: right;
    clear: right;
    margin-right: calc(-1 * (var(--margin-width) + var(--gutter-width)));
    width: var(--margin-width);
    position: relative;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline;
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number::after {
    content: "(" counter(sidenote-counter, lower-greek) ")";
    font-size: 60%;
    top: -0.4rem;
    left: 0.1rem;
}

.sidenote::before {
    content: "(" counter(sidenote-counter, lower-greek) ")";
    font-size: 70%;
    top: -0.5rem;
    right: 0.1rem;
}

div.code,
pre {
    width: var(--body-width);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 2rem;
}

main {
    padding-top: 4.2rem;
}

h1 {
    text-align: center;
}

h2, h3, h4 {
    font-style: italic;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

dt {
    font-weight: bold;
}

div.code,
span.inlinecode,
code,
.doc pre,
tt,
.dmath,
.imath {
    font-family: monospace;
    font-size: 80%;
}

details {
    margin: 1.5rem 0;
}

table {
    border-top: 2px solid var(--fg);
    border-bottom: 2px solid var(--fg);
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

th {
    font-weight: normal;
    text-transform: uppercase;
}

td,
th {
    border-top: 1px solid var(--fade);
    height: 2em;
    padding: 0 1em;
}

td.date,
td.commit {
    text-align: center;
    font-size: 0.75em;
    font-family: monospace;
}

/* max-width has to be equal to --body-width */
@media (max-width: 55rem) {
    body {
        padding: 2rem;
        margin: auto;
        display: block;
    }

    aside {
       width: var(--main-width);
       margin: auto;
    }

    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote,
    .marginnote {
        display: none;
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
    }

    label {
        cursor: pointer;
    }

    pre, aside {
        width: 100%;
    }
}

:root {
    --bg: white;
    --bg-plus: #f9f8f4;
    --current-line: #fbfbfb;
    --fade: #cfcecb;
    --fg: #3c3c3c;
    --fg-plus: #575757;
    --doc: #91003e;
    --warning: #bd745e;
    --red: #b3534b;
    --green: #6d9319;
    --yellow: #d4b100;
}

body {
    font-family: serif;
    color: var(--fg);
    background: var(--bg);
}

a[href] {
    color: inherit;
    text-decoration-color: var(--doc);
}

h2 a.anchor-link,
h3 a.anchor-link,
h4 a.anchor-link {
    display: none;
    font-style: normal;
    text-decoration: none;
    font-family: monospace;
    font-size: smaller;
    color: var(--doc);
}

[id] {
    scroll-margin-top: 4rem;
}

h2:hover a.anchor-link,
h3:hover a.anchor-link,
h4:hover a.anchor-link {
    display: inline;
}

.sidenote,
.marginnote {
    color: var(--fg-plus);
}

.sidenote-number:after,
.sidenote:before,
pre,
code,
div.code,
span.inlinecode,
tt {
    color: var(--doc);
}

div.code {
    white-space: nowrap;
}

div.code,
span.inlinecode {
    font-family : monospace;
}

.paragraph {
    margin-bottom : .8em;
}

.code a[href] {
    color : inherit;
    text-decoration : none;
    background : var(--bg-plus);
    padding : .1rem .15rem .1rem .15rem;
    border-radius : 15%;
}

.code .icon {
    display: none;
}

.icon svg {
    fill: var(--doc);
    display: inline;
    width: 1em;
    height: .9em;
    vertical-align: text-top;
}

.url-mark.fa {
    display: inline;
    font-size: 90%;
    width: 1em;
}

.url-mark.fa-github::before {
    content: "\00a0\f09b";
}

.url-mark.fa-external-link::before {
    content: "\00a0\f08e";
}

minify="$(npm bin)/minify"
normalize="$(npm root)/normalize.css/normalize.css"
style="style.css"

# minify add a newline character at the end of its input
# we remove it using `head'
echo "
@charset \"UTF-8\";
$(cat ${normalize})
$(cat ${style})
" | ${minify} --css | head -c -1 > style.min.css

style.min.css : style.css
	@cleopatra echo "Minifying" "CSS"
	@scripts/css.sh

ARTIFACTS += style.min.css

theme-build : style.min.css