Make the website 3rd-party free and improve loading performance

- Use webp in place of a regular png
- Lazy loading of CSS files (compatible with javascript-less browsers)
- KaTeX in place of MathJax
- Minified CSS (using sass)
- Vendoring fonts, scripts, and CSS.

1 files changed, 139 insertions, 0 deletions

diff --git a/site/style/main.sass b/site/style/main.sass
new file mode 100644
index 0000000..ca24d50
--- /dev/null
+++ b/site/style/main.sass
@@ -0,0 +1,139 @@
+*
+  box-sizing: border-box
+
+body, html
+    width: 100%
+    height: 100%
+    padding: 0
+    margin: 0
+    font-size: 100%
+    background: #29222E
+    color: #E0CEED
+    font-family: 'et-book', serif
+
+h1, h2, h3, h4, h5, a[href]
+    color: #68d3a7
+
+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: 3px solid #68d3a7
+            border-radius: 50%
+            width: 125px
+
+    main
+        max-width: 550px
+        margin: auto
+        padding: 0em 1em 1em 1em
+        font-size: 130%
+
+
+body#default main .code, code, pre, .inlinecode
+    font-family: 'Fira Code', monospace
+    font-size: 75%
+
+
+body#default
+    main
+        /* coqdoc output */
+
+        div.code
+            white-space: nowrap
+            overflow-x: visible
+
+        .code a[href]
+            text-decoration: none
+
+        .paragraph
+            margin-top: 1em
+            margin-bottom: 1em
+
+        /* org-mode output */
+
+        .footpara
+            display: inline
+            margin-left: .2em
+
+/* 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: 3px solid #68d3a7
+            border-radius: 50%
+            width: 175px
+            margin: auto
+            margin-bottom: 3em
+
+    h1
+        color: #68d3a7
+        font-size: 300%
+        text-align: center
+
+    nav dt
+        font-weight: bold
+
+        a
+            color: #68d3a7
+
+/* indexes */
+
+.index
+    dt
+        font-weight: bold
+        color: #68d3a7
+
+    dd
+        margin-left: 0
+        margin-bottom: 1em
+
+        ol
+            margin-top: 0.3em