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

@@ -1,28 +1,25 @@
-.creative-contributions .info-box {
-	&:nth-of-type(1) {
-		background-color: var(--color-seaside);
-	}
-
-	&:nth-of-type(2) {
-		background-color: var(--color-cove);
-	}
+.code-contributions,
+.creative-contributions {
+	gap: 0 calc(80* var(--variable-px));
 }
 
 .code-contributions .info-box {
-	&:nth-of-type(1) {
-		background-color: var(--color-mustard);
-	}
-
-	&:nth-of-type(2) {
-		background-color: var(--color-ale);
-	}
+	background-color: var(--color-seaside);
 }
 
-.creative-contributions,
-.code-contributions {
-	.button.button.button {
-		height: auto;
-		text-align: left;
-		white-space: normal;
+.creative-contributions .info-box {
+	background-color: var(--color-lemon);
+}
+
+.info-box {
+	margin-top: calc(40 * var(--variable-px));
+
+	> img:first-child,
+	> a:first-child > img:only-child {
+		width: calc(100% + 2 * 80 * var(--variable-px));
+		margin-left: calc(-80 * var(--variable-px));
+		margin-top: calc(-80 * var(--variable-px));
+		margin-bottom: calc(40 * var(--variable-px));
+		display: block;
 	}
 }