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/sass/article.scss

@@ -1,5 +1,5 @@
 .reading-material {
-	max-width: 800px;
+	width: 100%;
 	flex: 0 1 auto;
 
 	.details {
@@ -19,6 +19,10 @@
 		}
 	}
 
+	article {
+		margin-top: calc(80 * var(--variable-px));
+	}
+
 	.social {
 		width: 100%;
 		display: flex;