#+BEGIN_EXPORT html
Theming and Templating
#+END_EXPORT
* Main HTML Template
#+NAME: js_lazyloading
#+BEGIN_SRC js
let noscript = document.getElementById('lazyloading');
let resources = noscript.innerText.split('\n');
for (var ix in resources) {
noscript.insertAdjacentHTML('beforebegin', resources[ix]);
}
#+END_SRC
#+NAME: html_lazyloading
#+BEGIN_SRC html
<!-- set automatically, see soupault.conf -->
>
#+END_SRC
* Main SASS File
#+BEGIN_SRC sass :tangle site/style/main.sass
$bg-color: #efece3
$code-fg-color: black
$text-fg-color: #505050
$primary-color: black
$todo-bg: #e4d3b3
$todo-fg: #494130
$remark-bg: #c5dbe2
$remark-fg: #4d575e
*
box-sizing: border-box
body, html
width: 100%
height: 100%
padding: 0
margin: 0
font-size: 100%
background: $bg-color
color: $text-fg-color
font-family: 'et-book', serif
h1, h2, h3, h4, h5, a[href]
color: $primary-color
h1, h2, h3, h4, h5
font-family: sans-serif
h1
text-align: center
/* default */
body#default
overflow-x: hidden
nav
padding-top: 1em
padding-bottom: 1em
width: 100%
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
header
text-align: center
img
text-align: center
border-radius: 50%
width: 125px
main
max-width: 600px
margin: auto
padding: 0em 1em 1em 1em
font-size: 130%
body#default main .code, code, pre, .inlinecode, tt
font-family: 'Fira Code', monospace
color: $code-fg-color
font-size: 75%
body#default
main
@import coq, org
.TODO
background: $todo-bg
color: $todo-fg
.REMARK
background: $remark-bg
color: $remark-fg
.TODO, .REMARK
padding: 1em 1em 1em 1em
p
margin: 0
p:not(:list-child)
margin-bottom: 1em
/* 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
/* 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
#+BEGIN_SRC makefile :tangle theme.mk
SASS := site/style/main.sass
CSS := $(SASS:.sass=.css)
${CSS} : ${SASS} ${GENSASS}
@echo " compile $<"
@sassc --style=compressed --sass $< $@
CONTENTS += ${CSS}
#+END_SRC
