Layout and Style

Revisions

This revisions table has been automatically generated from the git history of this website repository, and the change descriptions may not always be as useful as they should.

You can consult the source of this file in its current version here.

2021-03-28 2021 Spring redesign 495f9db
2021-01-24 No more syntax highlighting 1e9ac81
2021-01-16 Tweak margins 0f9ba9f
2020-12-29 Let people use the font of their liking 3fdef39
2020-12-12 Color tweaking 050aefc
2020-12-12 Use Spectral Regular b340096
2020-12-11 Kiss goodbye to the blue links 10d9e4c
2020-12-08 Tweak the theme to increase its book vibe dbb87b8
2020-11-24 Remove a redundant </head> tag in HTML template 465afb3
2020-11-24 Rework header to make it more mobile friendly e41a348
2020-10-09 Variablify the margin of a page 597145c
2020-10-08 Use Linux Libertine c200216
2020-09-23 Small CSS tweaks e62611f
2020-09-03 Fix a mistake in the footer 1b172f8
2020-09-02 Knitting is a thing now 37086ad
2020-08-30 Introducing the Opinions page 4393865
2020-08-29 Start the documentation of the theme build process 23e5c85
2020-08-28 Minor theme tweakings f5c0497
2020-08-27 Additional tweaks to the design d3c4056
2020-08-27 Simplify the theme b065628
2020-07-14 Fix size of code font 77a4004
2020-07-12 Various fixes here and there b85b9bc
2020-04-02 Refactor the build process to use cleopatra the Second 46b2e7a
2020-03-20 Remove the “About” page and use the “Write-up” page as default index b4a2c6e
2020-03-02 Clean-up and writing f0c9841
2020-02-27 More theme tweaking 9a0fef2
2020-02-27 Add a minimal style for the .example class used by Org for results 4d39fc4
2020-02-27 Use monokai-pro as the main theme and fix the CSS of Coq files 512e590
2020-02-27 Tweak the theme to be more responsive fbbc603
2020-02-27 Theme reloading 1a9268f
2020-02-26 Set a width linked to the font size 5a8e9ac
2020-02-26 Introduce a notion of dependency between generation processes 5945bc8
2020-02-25 Rework the revisions table script to make it more readable 51080b6
2020-02-24 More tweaking of too long code lines 1ea740e
2020-02-23 Reduce the size of the `alt' attribute of the header 08f6207
2020-02-23 Explain how equations are rendered offline 21da228
2020-02-23 Move plugin-specific SASS rules in Soupault.org b79765f
2020-02-23 Use font-display, use non-breaking spaces with URL mark 765ed55
2020-02-23 Use a softer theme bdb7137
2020-02-23 Do not remove cleopatra files with 'make clean' 39fd0f0
2020-02-23 Reworking cleopatra presentation 404d052
2020-02-23 Polish cleopatra aa6de8b
2020-02-22 Use `tangle-org.el' during bootstrap d50ee0c
2020-02-22 Provide a generic and reliable way to extends cleopatra dae198a

Setup §

As often when it comes to frontend development, we will use several tools hosted in the npm packages repository. npm is infamous for downloading lots of files and to store it in the node_modules/ directory. We configure cleopatra accordingly.

CONFIGURE += package.json package-lock.json node_modules

Base CSS §

We know construct piece by piece the “base” CSS layout which we will inject inside a <style> tag in each web page.

Layout §

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%;
    }
}

Colors §

: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);
}

Coq §

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;
}

Icons §

.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 CSS §

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

HTML Templates §

It would be best if we had a preprocessing step to inject the minified style, rather than using soupault to do the work once per page.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style></style>
    <link href="https://soap.coffee/+vendors/katex.0.11.1+swap/katex.css" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
    <title></title>
  </head>
  <body>
    <aside>
      <nav>
        <ul>
          <li>
            <a href="/">Technical Posts</a>
          </li>
          <li>
            <a href="/opinions">Opinions</a>
          </li>
          <li>
            <a href="/news">News</a>
          </li>
        </ul>
      </nav>
    </aside>
    <main>
    </main>
  </body>
</html>