Update the website layout with narrower default width and better typography (#1753)

- Reduces the default width from 1600px to 1200px of the web page and reduce the size of various elements and text. This fixes the problem that I designed the website assuming everyone is viewing from the same 2560px wide screen as I used to design it, which is a bad assumption. Most websites are around the 1200px mark.
- Removes the use of the EB Garamond font, replacing more headers with a bold Inter instead, leaving only Bona Nova for h1 headers at the tops of pages (except the home page, which might have further revamp soon).
- Adds nice flavor graphics to a redesigned volunteer page.
- Cleans up and organizes the Zola templating code and CSS style sheets.
- Improves image carousel to fade out images when dragged past the start or end.

website/templates/macros/replacements.html

@@ -0,0 +1,14 @@
+{% macro blog_posts(count) %}
+{% set articles = get_section(path="blog/_index.md") %}
+{% set latest = articles.pages | slice(end = count) %}
+{% for article in latest %}
+<div class="block">
+	<a class="banner" href="{{ article.permalink | safe }}"><img src="{{ article.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
+	<h2 class="headline"><a href="{{ article.permalink | safe }}">{{ article.title }}</a></h2>
+	<div class="summary">
+	{{ article.summary | safe }}
+	</div>
+	<a href="{{ article.permalink | safe }}" class="link arrow">Keep reading</a>
+</div>
+{% endfor %}
+{% endmacro blog_posts %}