diff options
author | Thomas Letan <lthms@soap.coffee> | 2020-02-15 15:38:47 +0100 |
---|---|---|
committer | Thomas Letan <lthms@soap.coffee> | 2020-02-15 15:41:53 +0100 |
commit | d173e77712917fdb9f76995cc9ac9b857965aaf9 (patch) | |
tree | afc78e1cefc42ec7805a3d32e075ead603b8da5c /site/style | |
parent | Self hosting of Fira Sans and various small fixes (diff) |
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.
Diffstat (limited to 'site/style')
-rw-r--r-- | site/style/main.css | 180 | ||||
-rw-r--r-- | site/style/main.sass | 139 |
2 files changed, 139 insertions, 180 deletions
diff --git a/site/style/main.css b/site/style/main.css deleted file mode 100644 index 62f5e96..0000000 --- a/site/style/main.css +++ /dev/null @@ -1,180 +0,0 @@ -* { - box-sizing: border-box; -} - -body, html { - width: 100%; - height: 100%; - padding: 0; - margin: 0; - font-size: 100%; - background: #29222E; - color: #E0CEED; - font-family: 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; -} - -body#default nav { - padding-top: 1em; - padding-bottom: 1em; - width: 100%; -} - -body#default nav ul { - padding: 0; - margin: 0; - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - list-style-type: none; -} - -body#default nav li { - padding-left: .5em; - padding-right: .5em; - text-transform: uppercase; - font-family: sans-serif; - font-size: 130%; - font-weight: bold; -} - -body#default nav li a { - text-decoration: none; -} - -body#default header { - text-align: center; -} - -body#default img { - text-align: center; - border: 3px solid #68d3a7; - border-radius: 50%; - width: 125px; -} - -body#default main { - max-width: 550px; - margin: auto; - padding: 0em 1em 1em 1em; - font-size: 130%; -} - -/* coqdoc output */ - -body#default main .code, code, pre, .inlinecode { - font-family: 'Fira Code', monospace; - font-size: 75%; -} - -body#default main div.code { - white-space: nowrap; -} - -body#default main .code { - overflow-x: visible; -} - -body#default main .code a[href] { - text-decoration: none; -} - -body#default main .doc { -} - -body#default main .paragraph { - margin-top: 1em; - margin-bottom: 1em; -} - -/* org-mode output */ - -.footpara { - display: inline; - margin-left: .2em; -} - -/* index */ - -ul#index { - padding-left: 20px; -} - -ul#index .date { - font-size: 75%; -} - -/* VCARD (index.html) */ - -body#vcard { - display: flex; - align-items: center; - flex-direction: column; - font-size: 125%; -} - -body#vcard article { - max-width: 400px; - width: 80%; - margin: auto; -} - -body#vcard article img { - display: block; - border: 3px solid #68d3a7; - border-radius: 50%; - width: 175px; - margin: auto; - margin-bottom: 3em; -} - -body#vcard h1 { - color: #68d3a7; - font-size: 300%; - text-align: center; -} - -body#vcard nav dt { - font-weight: bold; -} - -body#vcard nav dd { -} - -body#vcard nav dt a { - color: #68d3a7; -} - -/* indexes */ - -.index dt { - font-weight: bold; - color: #68d3a7; -} - -.index dd { - margin-left: 0; - margin-bottom: 1em; -} - -.index dd ol { - margin-top: 0.3em; -} 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 |