Technical Articles / Opinions / News / Projects

Theming and Templating

The purpose of this build process is to implement the default layout of this website. To that end, it provides a template file (main.html), and a collection of SASS files that cleopatra then compiles into a single CSS file using sassc.

We first discuss the structure of the website, by defining the default HTML template soupault will use to generate the website. Then, we specify its minimal design, implemented in SASS. Finally, we discuss the necessary build instructions for cleopatra.

1 Main HTML Template 

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title><!-- page title will be inserted here --></title>
    <link href="https://soap.coffee/+vendors/normalize.css.8.0.1/normalize.css"
          rel="stylesheet">
    <link rel="stylesheet" href="/style/main.css">
    <link rel="icon" type="image/ico" href="/img/merida.webp">
    <noscript id="asyncloading">
      <link href="https://soap.coffee/+vendors/fira-code.2+swap/font.css"
            rel="stylesheet">
      <link href="https://soap.coffee/+vendors/katex.0.11.1+swap/katex.css"
            rel="stylesheet">
      <link href="https://soap.coffee/+vendors/fork-awesome.1.1.7+swap/css/fork-awesome.min.css"
            rel="stylesheet">
    </noscript>
  </head>
  <body>
    <header>
      <a href="/">Technical Articles</a> /
      <a href="/opinions">Opinions</a> /
      <a href="/news">News</a> /
      <a href="/projects">Projects</a>
    </header>
    <main>
    <!-- page content will be inserted here -->
    </main>
    <footer>
      <img src="https://soap.coffee/~lthms/img/merida.webp"
           alt="Merida from the movie Ralph 2.0 from Disney is the
                avatar I use most of the time on the Internet"
           title="lthms’ avatar" />
  
      <p>
        Hi, I’m <strong>lthms</strong>, and this is my humble corner of the
        Internet. You are very welcome here! If you are interested in
        <em>functional programming</em>, <em>formal verification</em>, or <em>free
        software projects in the making</em>, you may even enjoy your stay!
      </p>
  
      <p>
        This website has been generated using a collection of <a
        href="/posts/Thanks.html">awesome free software projects</a>. You can have
        a look at <a href="https://code.soap.coffee/writing/lthms.git/">the source
        of this website</a> or <a href="/cleopatra.html">how it is being
        generated</a>, and if you run into an error, feel free to <a
        href="mailto:lthms@soap.coffee">shoot me a friendly email</a>.
      </p>
    </footer>
    <script>
      let noscript = document.getElementById('asyncloading');
      noscript.insertAdjacentHTML('beforebegin', noscript.innerText);
      noscript.parentNode.removeChild(noscript);
    </script>
  </body>
</html>

1.1 <head> 

<meta charset="utf-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

1.1.1 Assets Loading 

<link href="https://soap.coffee/+vendors/normalize.css.8.0.1/normalize.css"
      rel="stylesheet">
<link rel="stylesheet" href="/style/main.css">
<link rel="icon" type="image/ico" href="/img/merida.webp">

let noscript = document.getElementById('asyncloading');
noscript.insertAdjacentHTML('beforebegin', noscript.innerText);
noscript.parentNode.removeChild(noscript);

<noscript id="asyncloading">
  <link href="https://soap.coffee/+vendors/fira-code.2+swap/font.css"
        rel="stylesheet">
  <link href="https://soap.coffee/+vendors/katex.0.11.1+swap/katex.css"
        rel="stylesheet">
  <link href="https://soap.coffee/+vendors/fork-awesome.1.1.7+swap/css/fork-awesome.min.css"
        rel="stylesheet">
</noscript>

1.2 body 

<body>
  <header>
    <a href="/">Technical Articles</a> /
    <a href="/opinions">Opinions</a> /
    <a href="/news">News</a> /
    <a href="/projects">Projects</a>
  </header>
  <main>
  <!-- page content will be inserted here -->
  </main>
  <footer>
    <img src="https://soap.coffee/~lthms/img/merida.webp"
         alt="Merida from the movie Ralph 2.0 from Disney is the
              avatar I use most of the time on the Internet"
         title="lthms’ avatar" />

    <p>
      Hi, I’m <strong>lthms</strong>, and this is my humble corner of the
      Internet. You are very welcome here! If you are interested in
      <em>functional programming</em>, <em>formal verification</em>, or <em>free
      software projects in the making</em>, you may even enjoy your stay!
    </p>

    <p>
      This website has been generated using a collection of <a
      href="/posts/Thanks.html">awesome free software projects</a>. You can have
      a look at <a href="https://code.soap.coffee/writing/lthms.git/">the source
      of this website</a> or <a href="/cleopatra.html">how it is being
      generated</a>, and if you run into an error, feel free to <a
      href="mailto:lthms@soap.coffee">shoot me a friendly email</a>.
    </p>
  </footer>
  <script>
    <<asyncloading_js>>
  </script>
</body>

2 Main SASS File

First, we introduce a set of variables. 

$content-width : 30rem
$large-side-margin : 7rem
$small-side-margin : 2rem
$monospace-color : #FF006D

Then, we introduce a key CSS variable whose definition will change according to the current width of the page (something we cannot achieve with SASS variables, whose behavior is purely static). 

\:root
    @media screen and (min-width: calc(#{$content-width} + 2 * #{$large-side-margin}))
        --side-margin : #{$large-side-margin}
    @media screen and (max-width: calc(#{$content-width} + 2 * #{$large-side-margin}))
        --side-margin : #{$small-side-margin}

Then, we style! 

*
    box-sizing : border-box

html
    width : 100%
    height : 100%
    font-size : 100%
    font-weight : normal
    color : #222

a
    color : black

a:visited
    color : #222

body
    font-family : serif
    margin : 0 var(--side-margin) 0 calc(var(--side-margin) - 2rem) !important
    padding : 2rem
    @media screen and (min-width: calc(#{$content-width} + 2 * #{$large-side-margin}))
        border-left : 1px solid #ccc

main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main ul,
main dl,
main ol,
header,
footer
    max-width : $content-width
    line-height : 140%

main h1,
main h2,
main h3,
main h4,
main h5,
main h6
    font-weight : bold
    color : #0c0016

header a,
footer p
    font-size : 90%

main
    padding-top : 4rem
    padding-bottom : 4rem

    dl dd
        margin-left : 0

    dl dt
        font-weight : bold

    dl dt:not(:first-child)
        padding-top : .5rem

    details
        font-size : 90%
        filter : opacity(0.8)

footer img
    border-radius : 100%
    max-width : 7rem
    float : right
    margin-left : 1rem
    margin-bottom : 1rem

pre
    padding-left : 1.5rem
    padding-right : 1.5rem
    overflow-x : auto

code,
tt,
pre
    font-family : 'Fira Code', monospace
    font-size : 80%
    line-height : 140%
    color : $monospace-color

#gallery
    display : flex
    flex-wrap : wrap
    align-content : flex-start

    img
        max-width : 20rem

@import plugins
@import org
@import coq

3 Build Instructions

The build instruction are pretty straightforward. We start by how to compile the main CSS file. 

SASS := $(wildcard site/style/*.sass)
MAIN_SASS := site/style/main.sass
CSS := $(MAIN_SASS:.sass=.css)

${CSS} : ${SASS}
	@cleopatra echo Compiling  "${CSS}"
	@sassc --style=compressed --sass ${MAIN_SASS} ${CSS}

Since the HTML template does not need any particular processing, the theme-build phase is only responsible for generating the main CSS file. The soupault build phase needs to start after the CSS file is compiled (since it copies all relevant files to the build/ directory), so we explicit this dependency. 

theme-build : ${CSS}
soupault-build : theme-build

Therefore, at the end of this generation process only one file has been generated. 

ARTIFACTS += ${CSS}