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

@@ -1,8 +1,51 @@
-#fundraising {
-	background-color: var(--color-seaside);
-	color: rgba(0, 0, 0, 0.9);
+// #fundraising {
+// 	background-color: var(--color-seaside);
+// 	color: rgba(0, 0, 0, 0.9);
 
-	.graphic {
-		max-width: 400px;
-	}
-}
+// 	.graphic {
+// 		max-width: 400px;
+// 	}
+
+// 	.fundraising {
+// 		margin-top: 20px;
+// 		width: 100%;
+		
+// 		.fundraising-bar {
+// 			width: 100%;
+// 			height: 32px;
+// 			border-radius: 10000px;
+// 			background: var(--color-fog);
+// 			overflow: hidden;
+			
+// 			.fundraising-bar-progress {
+// 				width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
+// 				padding-left: calc(32px - 4px * 2);
+// 				height: calc(100% - 4px * 2);
+// 				margin: 4px;
+// 				border-radius: 10000px;
+// 				background: linear-gradient(to right, var(--color-navy), var(--color-crimson));
+// 				transition: opacity 1s, width 2s;
+// 			}
+// 		}
+
+// 		.goal-metrics {
+// 			display: flex;
+// 			justify-content: space-between;
+// 			font-weight: 800;
+// 			margin-top: 8px;
+// 			margin-left: 20px;
+// 			width: calc(100% - 40px);
+
+// 			> span {
+// 				transition: opacity 1s;
+// 			}
+// 		}
+
+// 		&.fundraising.loading {
+// 			.goal-metrics > span,
+// 			.fundraising-bar .fundraising-bar-progress {
+// 				opacity: 0;
+// 			}
+// 		}
+// 	}
+// }