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/blog.scss

@@ -1,5 +1,5 @@
 #intro {
-	.section {
+	.block {
 		flex: 1 1 100%;
 		width: 100%;
 
@@ -60,6 +60,10 @@
 			}
 		}
 
+		~ section {
+			margin-top: calc(120 * var(--variable-px));
+		}
+
 		.banner {
 			width: 400px;
 			flex: 0 0 auto;
@@ -79,8 +83,9 @@
 
 			.headline {
 				margin-top: -0.5em;
-				
+
 				a {
+					font-weight: 700;
 					text-decoration: none;
 					color: var(--color-navy);
 				}
@@ -103,7 +108,7 @@
 				-webkit-line-clamp: 3;
 
 				// Safari workaround: https://stackoverflow.com/a/72170897/775283
-				// There is still an issue where the ellipsis is rendered inside the text but there doesn't appear to be a fix, or even a way to disable the ellipsis in Safari
+				// But there remains an issue where the ellipsis is rendered inside the text. There doesn't appear to be a fix, or even a way to disable the ellipsis in Safari.
 				p {
 					display: inline;