fix: much needed updates

- Sidenote, marginnote and figure element restyling (flexbox)
- Table styling fixes (right alignment issues)
- Switch MathJax over to SVG embeds (performance fixes)
- Simplify HTML skeleton of main pages, remove overkill classes
- Remove lazysizes.js to save on load times
- Fallback on font-display for font loading
- Inline all CSS for faster initial paint
- Minor link :hover coloring
- Add missing image link on example page
- Update details post

Author: bradleytaunt

_includes/critical.css

@@ -0,0 +1,13 @@
+<div class="bottom-footer">
+    <span class="mini-note">You've reached the end of the page. Good job! 👍</span>
+</div>
+
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+        extensions: ["tex2jax.js", "TeX/AMSmath.js"],
+        jax: ["input/TeX", "output/SVG"],
+    })
+</script>
+<script type="text/javascript" async
+  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=default">
+</script>

_includes/footer-post.html

@@ -16,10 +16,11 @@
     <link href='{{ site.baseurl }}/feed.xml' rel='alternate' type='application/atom+xml'>
     <link rel="canonical" href="{{ site.baseurl }}{{ page.url }}">
     <link rel="manifest" href="{{ site.baseurl }}/manifest.json">
-    <link rel="stylesheet" href="{{ site.baseurl}}/css/style.css">
-    <!-- INLINE CRITICAL CSS -->
+    {% capture critical %}
+        {% include style.scss %}
+    {% endcapture %}
     <style>
-        {% include critical.css %}
+        {{ critical | scssify }}
     </style>
 </head>