Theming and Templating

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

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

soupault-build : theme-build

ARTIFACTS += ${CSS}

theme.mk

1 Main HTML Template

<html lang="en">
  <<head>>
  <<body>>
</html>

templates/main.html

1.1 `<head>`

<<head>> :=

<head>
  <<encoding>>
  <<viewport>>
  <title></title>
  <<syncloading_html>>
  <<asyncloading_html>>
</head>

1.1.1 Encoding

<<encoding>> :=

<meta charset="utf-8">

1.1.2 Viewport

<<viewport>> :=

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

1.1.3 Assets Loading

<<syncloading_html>> :=

<link rel="stylesheet" href="/style/main.css">
<link rel="icon" type="image/ico"  href="/img/merida.webp">

<<asyncloading_js>> :=

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

<<asyncloading_html>> :=

<noscript id="asyncloading">
  <link href="https://soap.coffee/+vendors/fira-code.2+swap/font.css"
     rel="stylesheet">
  <link href="https://soap.coffee/+vendors/et-book+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">
</nolink>

1.2 `body`

<<body>> :=

<body id="default">
  <nav>
    <ul>
      <li> <a href="/news">News</a></li>
      <li> <a href="/">Write-ups</a></li>
    </ul>
  </nav>
  <header>
    <img src="/img/merida.webp"
         alt="Merida in the movie Ralph 2.0" />
  </header>
  <main>
  <!-- your page content will be inserted here,
       see the content_selector option in soupault.conf -->
  </main>
  <script>
    <<asyncloading_js>>
  </script>
</body>

2 Main SASS File

$bg-color: #2d2a2e
$bg-verbatim : #f4f4f4
$code-fg-color: #fcfcfa
$text-fg-color: #505050
$primary-color: black
$todo-bg: #e4d3b3
$todo-fg: #2f2b24
$remark-bg: #c5dbe2
$remark-fg: #4d575e

$sans-serif : sans-serif

$document-width : 38rem

a
    color : #557de8
a:visited
    color : #40599a

@mixin padding-centered($inc: 0rem)
    @media screen and (min-width : $document-width)
        padding-left : calc(50% - #{$document-width} / 2 - #{$inc})
        padding-right : calc(50% - #{$document-width} / 2 - #{$inc})
    @media screen and (max-width : $document-width)
        padding-left : 1rem
        padding-right : 1rem

@mixin margin-centered($inc: 0rem)
    @media screen and (min-width : $document-width)
        margin-left : calc(50% - #{$document-width} / 2 - #{$inc})
        margin-right : calc(50% - #{$document-width} / 2 - #{$inc})
    @media screen and (max-width : $document-width)
        margin-left : 1rem
        margin-right : 1rem

@mixin text-font
    font-family : serif

@mixin code-font($size : .9rem)
    font-family: 'Fira Code', monospace
    font-size: $size

@mixin code-block
    @include padding-centered
    @include code-font
    background : $bg-color
    color : $code-fg-color
    overflow-x : auto
    scrollbar-width : thin

@mixin verbatim-block
    @include padding-centered
    @include code-font
    background : $bg-verbatim
    overflow-x : auto
    scrollbar-width : thin

*
  box-sizing: border-box

html, body
    margin : 0
    padding : 0
    width : 100%
    height : 100%
    font-size : 115%
    @include text-font

body
    overflow-x : hidden

code, tt
    @include code-font

pre
    @include code-font

body#default
    nav
        @include margin-centered
        padding-top : 1rem
        padding-bottom : 1rem

        ul
            padding : 0
            margin : 0
            width : 100%
            display : flex
            flex-direction : row
            justify-content : center
            list-style-type : none

            li
                padding-left: .5em
                padding-right: .5em
                text-transform: uppercase
                font-family: sans-serif
                font-weight: bold

                a
                    text-decoration: none

    header
        text-align: center

        img
            text-align: center
            border-radius: 50%
            width: 150px

    main
        h1
            text-align: center

        h2, h3, h4, h5, h6
            font-style: italic


            code, tt
                font-size: 100%

        h1, h2, h3, h4, h5, h6, p, summary
            @include padding-centered

        dl, ul, ol
            @include margin-centered

        .TODO
            background : $todo-bg
            color : $todo-fg
            padding-top : .1rem
            padding-bottom : .1rem
            margin-top : 1rem
            margin-bottom : 1rem

        @import coq, org

.index
    dt
        font-weight : bold
        color : $primary-color

    dd
        margin-left : 0
        margin-bottom : 1em

        ol
            margin-top: 0.3em

@import plugins

/* VCARD (index.html) */
body#vcard
    display: flex
    align-items: center
    flex-direction: column
    font-size: 125%

    article
        max-width: 400px
        width: 80%
        margin: auto

        img
            display: block
            border-radius: 50%
            width: 175px
            margin: auto
            margin-bottom: 3em

    h1
        color: $primary-color
        font-size: 300%
        text-align: center

    nav dt
        font-weight: bold

        a
            color: $primary-color

site/style/main.sass

Theming and Templating

1 Main HTML Template

1.1 <head>

1.1.1 Encoding

1.1.2 Viewport

1.1.3 Assets Loading

1.2 body

2 Main SASS File

1.1 `<head>`

1.2 `body`