Theme reloading

6 files changed, 195 insertions, 156 deletions

diff --git a/site/cleopatra/Bootstrap.org b/site/cleopatra/Bootstrap.org
index 3d954e6..b1a76ff 100644
--- a/site/cleopatra/Bootstrap.org
+++ b/site/cleopatra/Bootstrap.org
@@ -56,17 +56,8 @@ In a nutshell,
 - ~ROOT~ ::
   Tell Emacs where the root of your website sources is, so that tangled output
   filenames can be given relative to it rather than the org files.  So for
-  instance, the ~BLOCK_SRC~ headers for ~Makefile~ looks like
-
-  #+BEGIN_SRC org
-#+BEGIN_SRC makefile :tangle Makefile :noweb yes
-  #+END_SRC
-
-  instead of, /e.g./,
-
-  #+BEGIN_SRC org
-#+BEGIN_SRC makefile :tangle ../../Makefile :noweb yes
-  #+END_SRC
+  instance, the ~BLOCK_SRC~ tangle parameter for ~Makefile~ looks like ~:tangle
+  Makefile~, instead of ~:tangle ../../Makefile~.
 - ~CLEODIR~ ::
   Tell *~cleopatra~* where its sources live. If you place it inside the ~site/~
   directory (as it is intended), and you enable the use of ~org~ files to author
@@ -76,7 +67,7 @@ In a nutshell,
 
 For this website, these constants are defined as follows.
 
-#+BEGIN_SRC makefile :tangle Makefile :noweb tangle
+#+BEGIN_SRC makefile :tangle Makefile :noweb no-export
 ROOT := $(shell pwd)
 CLEODIR := site/cleopatra
 #+END_SRC
@@ -92,7 +83,7 @@ and providing rules to remove them.
   Long-term artifacts whose generation can be time consuming. They will only be
   removed by ~make cleanall~.
 
-#+BEGIN_SRC makefile :tangle Makefile :noweb tangle
+#+BEGIN_SRC makefile :tangle Makefile
 ARTIFACTS := build.log
 CONFIGURE :=
 #+END_SRC
@@ -128,7 +119,7 @@ restore it using ~git~.
 We define variables that ensure that the ~ROOT~ environment variable is set and
 ~tangle-org.el~ is loaded when using Emacs.
 
-#+BEGIN_SRC makefile :tangle Makefile :noweb tangle
+#+BEGIN_SRC makefile :tangle Makefile
 EMACSBIN := emacs
 EMACS := ROOT="${ROOT}" ${EMACSBIN}
 TANGLE := --batch \
@@ -140,7 +131,7 @@ Finally, we introduce a
 [[https://www.gnu.org/software/make/manual/html_node/Canned-Recipes.html#Canned-Recipes][canned
 recipe]] to seamlessly tangle a given file.
 
-#+BEGIN_SRC makefile :tangle Makefile :noweb tangle
+#+BEGIN_SRC makefile :tangle Makefile
 define emacs-tangle =
 echo "  tangle  $<"
 ${EMACS} $< ${TANGLE}
@@ -155,7 +146,7 @@ processes. This chain is divided into three stages: ~prebuild~, ~build~, and
 
 This translates as follows in ~Makefile~.
 
-#+BEGIN_SRC makefile :tangle Makefile :noweb tangle
+#+BEGIN_SRC makefile :tangle Makefile
 default : postbuild ignore
 
 init :
@@ -306,7 +297,7 @@ Eventually, the second step will be automated, but in the meantime
 this customization is mandatory.
 #+END_TODO
 
-#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb tangle :exports none
+#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb yes :exports none
 <<extends(IN="Theme.org", PROC="theme", AUX="templates/main.html site/style/main.sass")>>
 #+END_SRC
 
@@ -329,7 +320,7 @@ Eventually, generation processes shall be allowed to produce specific ~soupault~
 widgets to be integrated into ~soupault.conf~.
 #+END_TODO
 
-#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb tangle :exports none
+#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb yes :exports none
 <<extends(IN="Soupault.org", PROC="soupault", AUX="soupault.conf plugins/urls-rewriting.lua plugins/external-urls.lua site/style/plugins.sass scripts/history.sh templates/history.html package.json scripts/katex.js")>>
 #+END_SRC
 
@@ -355,7 +346,7 @@ In the present website, contents can be written in the following format:
   [[./Contents/Org.org][Learn more about the generation process for Org
   documents]]
 
-#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb tangle :exports none
+#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb yes :exports none
 <<extends(IN="Contents/Coq.org", PROC="coq", AUX="site/style/coq.sass")>>
 <<extends(IN="Contents/Org.org", PROC="org", AUX="scripts/packages.el scripts/export-org.el site/style/org.sass")>>
 #+END_SRC
@@ -367,8 +358,7 @@ In the present website, contents can be written in the following format:
 stages.
 #+END_TODO
 
-#+BEGIN_SRC bash :tangle scripts/update-gitignore.sh :tangle-mode (identity #o755)
-#!/bin/bash
+#+BEGIN_SRC bash :tangle scripts/update-gitignore.sh :shebang "#+/bin/bash"
 
 BEGIN_MARKER="# begin generated files"
 END_MARKER="# begin generated files"
diff --git a/site/cleopatra/Contents/Coq.org b/site/cleopatra/Contents/Coq.org
index a792ef9..937467e 100644
--- a/site/cleopatra/Contents/Coq.org
+++ b/site/cleopatra/Contents/Coq.org
@@ -30,13 +30,22 @@ COQDOCARG := --no-index --charset utf8 --short \
 #+BEGIN_SRC sass :tangle site/style/coq.sass
 div.code
     white-space: nowrap
-    overflow-x: auto
-    scrollbar-width: thin
 
-pre
-    padding: .3em 0 .3em 0
-    overflow-x: auto
-    scrollbar-width: thin
+.doc
+    @include padding-centered
+    margin-top : 1em
+    margin-bottom : 1em
+
+.code
+    @include padding-centered
+    @include code-block
+
+.inlinecode
+    @include code-font
+
+h1, h2, h3, h4, h5, h6
+    .inlinecode
+        font-size: 100%
 
 .code a[href]
     text-decoration: none
diff --git a/site/cleopatra/Contents/Org.org b/site/cleopatra/Contents/Org.org
index 8320ca1..2eac322 100644
--- a/site/cleopatra/Contents/Org.org
+++ b/site/cleopatra/Contents/Org.org
@@ -119,6 +119,17 @@ INIT := --batch --load="${ROOT}/scripts/packages.el" \
 #+END_SRC
 
 #+BEGIN_SRC sass :tangle site/style/org.sass
+.org-src-container
+    @include code-block
+    padding-top : .1rem
+    padding-bottom : .1rem
+
+.org-src-tangled-to, .org-src-name
+    @include padding-centered(4rem)
+
+.footdef
+    @include padding-centered
+
 .footpara
     display: inline
     margin-left: .2em
@@ -132,11 +143,6 @@ INIT := --batch --load="${ROOT}/scripts/packages.el" \
 .section-number-6
     display: none
 
-.org-src-container
-    width: 100%
-    overflow-x: auto
-    scrollbar-width: thin
-
 dl
   dt
     font-weight: bold
@@ -144,17 +150,17 @@ dl
     margin-top: 0
 
 .org-literate-programming
+  padding-top : 1rem
+  padding-bottom : 1rem
   .org-src-name
-    font-family: 'Fira Code', monospace
+    @include code-font
     font-weight: bold
-    font-size: 80%
 
   .org-src-tangled-to:before
     content: "⮩"
 
   .org-src-tangled-to
-    font-family: 'Fira Code', monospace
+    @include code-font
     font-weight: bold
-    font-size: 80%
     text-align: right
 #+END_SRC
diff --git a/site/cleopatra/Soupault.org b/site/cleopatra/Soupault.org
index a5703be..6b1ed58 100644
--- a/site/cleopatra/Soupault.org
+++ b/site/cleopatra/Soupault.org
@@ -9,7 +9,7 @@ soupault-build :
 	@echo "     run  soupault"
 	@soupault
 
-serve : build
+serve : soupault-prebuild
 	@echo "   start  a python server"
 	@cd build; python -m http.server 2>/dev/null
 
@@ -419,6 +419,7 @@ main "$(cat)" "${1}"
 #+BEGIN_SRC sass :tangle site/style/plugins.sass
 #history
   table
+    @include margin-centered(2rem)
     border-top: 2px solid $primary-color
     border-bottom: 2px solid $primary-color
     border-collapse: collapse;
diff --git a/site/cleopatra/Theme.org b/site/cleopatra/Theme.org
index afe0934..0d7c5e8 100644
--- a/site/cleopatra/Theme.org
+++ b/site/cleopatra/Theme.org
@@ -17,19 +17,64 @@ ARTIFACTS += ${CSS} ${SASS}
 
 * Main HTML Template
 
-#+NAME: js_lazyloading
+#+BEGIN_SRC html  :tangle templates/main.html :noweb no-export
+<html lang="en">
+  <<head>>
+  <<body>>
+</html>
+#+END_SRC
+
+** ~<head>~
+
+#+NAME: head
+#+BEGIN_SRC html :noweb no-export
+<head>
+  <<encoding>>
+  <<viewport>>
+  <title></title>
+  <<syncloading_html>>
+  <<asyncloading_html>>
+</head>
+#+END_SRC
+
+*** Encoding
+
+#+NAME: encoding
+#+BEGIN_SRC html
+<meta charset="utf-8">
+#+END_SRC
+
+*** Viewport
+
+#+NAME: viewport
+#+BEGIN_SRC html
+<meta name="viewport"
+      content="width=device-width, initial-scale=1.0">
+#+END_SRC
+
+*** Assets Loading
+
+#+NAME: syncloading_html
+#+BEGIN_SRC html
+<link rel="stylesheet" href="/style/main.css">
+<link rel="icon" type="image/ico"  href="/img/merida.webp">
+#+END_SRC
+
+#+NAME: asyncloading_js
 #+BEGIN_SRC js
-let noscript = document.getElementById('lazyloading');
+let noscript = document.getElementById('asyncloading');
 let resources = noscript.innerText.split('\n');
 
 for (var ix in resources) {
     noscript.insertAdjacentHTML('beforebegin', resources[ix]);
 }
+
+noscript.parentNode.removeChild(noscript);
 #+END_SRC
 
-#+NAME: html_lazyloading
+#+NAME: asyncloading_html
 #+BEGIN_SRC html
-<noscript id="lazyloading">
+<noscript id="asyncloading">
   <link rel="stylesheet" href="/vendors/fira-code.2+swap/font.css">
   <link rel="stylesheet" href="/vendors/et-book+swap/font.css">
   <link rel="stylesheet" href="/vendors/katex.0.11.1+swap/katex.css">
@@ -38,38 +83,30 @@ for (var ix in resources) {
 </nolink>
 #+END_SRC
 
-#+BEGIN_SRC html  :tangle templates/main.html :noweb tangle
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title> <!-- set automatically, see soupault.conf --> </title>
-    <meta name="viewport"
-          content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/style/main.css">
-    <link rel="icon" type="image/ico"  href="/img/merida.webp">
-    <<html_lazyloading>>
-  </head>
-  <body id="default">
-    <nav>
-      <ul>
-        <li> <a href="/news">News</a></li>
-        <li> <a href="/posts">Write-ups</a></li>
-        <li> <a href="/">About</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>
-      <<js_lazyloading>>
-    </script>
-  </body>
-</html>
+** ~body~
+
+#+NAME: body
+#+BEGIN_SRC html :noweb no-export
+<body id="default">
+  <nav>
+    <ul>
+      <li> <a href="/news">News</a></li>
+      <li> <a href="/posts">Write-ups</a></li>
+      <li> <a href="/">About</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>
 #+END_SRC
 
 * Main SASS File
@@ -84,57 +121,72 @@ $todo-fg: #494130
 $remark-bg: #c5dbe2
 $remark-fg: #4d575e
 
-*
-  box-sizing: border-box
+$sans-serif : sans-serif
 
-body, html
-    width: 100%
-    height: 100%
-    padding: 0
-    margin: 0
-    font-size: 100%
+$document-width : 33rem
+
+@mixin padding-centered($inc: 0rem)
+    padding-left : calc(50% - #{$document-width} / 2 - #{$inc})
+    padding-right : calc(50% - #{$document-width} / 2 - #{$inc})
+
+@mixin margin-centered($inc: 0rem)
+    margin-left : calc(50% - #{$document-width} / 2 - #{$inc})
+    margin-right : calc(50% - #{$document-width} / 2 - #{$inc})
+
+@mixin text-font
+    font-family : et-book, 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: $text-fg-color
-    font-family: 'et-book', serif
+    color: $code-fg-color
 
-h1, h2, h3, h4, h5, a[href]
-    color: $primary-color
+*
+  box-sizing: border-box
 
-h1, h2, h3, h4, h5
-    font-family: sans-serif
+html, body
+    margin : 0
+    padding : 0
+    width : 100%
+    height : 100%
+    font-size : 120%
+    @include text-font
 
-h1
-    text-align: center
+code, tt
+    @include code-font
 
-/* default */
+pre
+    @include code-font
 
 body#default
-    overflow-x: hidden
-
     nav
-        padding-top: 1em
-        padding-bottom: 1em
-        width: 100%
+        @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-size: 130%
-            font-weight: bold
-
-            a
-                text-decoration: none
+            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
@@ -142,42 +194,39 @@ body#default
         img
             text-align: center
             border-radius: 50%
-            width: 125px
+            width: 150px
 
     main
-        max-width: 30em
-        margin: auto
-        padding: 0em 1em 1em 1em
-        font-size: 130%
+        h1
+            text-align: center
 
-body#default main .code, code, pre, .inlinecode, tt
-    font-family: 'Fira Code', monospace
-    color: $code-fg-color
-    font-size: 75%
+        h1, h2, h3, h4, h5, h6
+            font-family : $sans-serif
 
+            code, tt
+                font-size: 100%
 
-body#default
-    main
-        summary
-          color: $primary-color
-          font-weight: bold
+        h1, h2, h3, h4, h5, h6, p, summary
+            @include padding-centered
+
+        dl, ul, ol
+            @include margin-centered
 
         @import coq, org
 
-        .TODO
-            background: $todo-bg
-            color: $todo-fg
-        .REMARK
-            background: $remark-bg
-            color: $remark-fg
+.index
+    dt
+        font-weight : bold
+        color : $primary-color
 
-        .TODO, .REMARK
-            padding: 1em 1em 1em 1em
+    dd
+        margin-left : 0
+        margin-bottom : 1em
+
+        ol
+            margin-top: 0.3em
 
-            p
-                margin: 0
-            p:not(:list-child)
-                margin-bottom: 1em
+@import plugins
 
 /* VCARD (index.html) */
 body#vcard
@@ -208,20 +257,4 @@ body#vcard
 
         a
             color: $primary-color
-
-/* indexes */
-
-.index
-    dt
-        font-weight: bold
-        color: $primary-color
-
-    dd
-        margin-left: 0
-        margin-bottom: 1em
-
-        ol
-            margin-top: 0.3em
-
-@import plugins
 #+END_SRC
diff --git a/site/posts/DiscoveringCommonLisp.org b/site/posts/DiscoveringCommonLisp.org
index f7bf74d..479f76c 100644
--- a/site/posts/DiscoveringCommonLisp.org
+++ b/site/posts/DiscoveringCommonLisp.org
@@ -59,7 +59,7 @@ Quicklisp is not a native feature of sbcl, and has to be loaded to be available.
 To do it automatically, you have to create a file ~${HOME}/.sbclrc~, with the
 following content:
 
-#+BEGIN_SRC
+#+BEGIN_SRC common-lisp
 (load "~/quicklisp/setup")
 #+END_SRC