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/article.html

@@ -11,13 +11,12 @@
 
 {%- block content -%}{%- set page = page | default(value = section) -%}
 <section class="reading-material">
-	<div class="section">
+	<div class="block">
 		<div class="details">
 			<h1 class="headline">{{ page.title }}</h2>
 			<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format = "%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
 			<img class="banner" src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" />
 		</div>
-		<hr />
 		<article>
 			{{ page.content | safe }}
 		</article>
@@ -26,7 +25,7 @@
 		<div class="social">
 			{% if page.extra.reddit %}
 			<a href="{{ page.extra.reddit | safe }}" target="_blank" class="button arrow">
-				<img src="https://static.graphite.rs/icons/reddit.svg" /><span>Comment on Reddit</span>
+				<img src="https://static.graphite.rs/icons/reddit__2.svg" /><span>Comment on Reddit</span>
 			</a>
 			{% endif %}
 			{% if page.extra.twitter %}