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/content/volunteer/_index.md

@@ -6,7 +6,7 @@ css = ["volunteer.css"]
 +++
 
 <section>
-<div class="section">
+<div class="block">
 
 # Volunteer
 
@@ -17,22 +17,67 @@ css = ["volunteer.css"]
 
 <section>
 
-<div class="diptych">
+## Code contributions
 
-<div class="section creative-contributions">
+<div class="info-box">
+
+<a href="/volunteer/guide">
+	<img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
+</a>
+
+**Get started by reading the contributor guide:**
+
+<a href="/volunteer/guide" class="button arrow">Contributor guide</a>
+
+</div>
+
+<div class="diptych code-contributions">
+
+<div class="block info-box">
+
+### EDITOR TEAM
+
+Write code to build and maintain the Graphite editor itself, ranging from the TypeScript/Svelte frontend UI to the tooling business logic written in Rust.
+
+</div>
+<div class="block info-box">
+
+### GRAPHENE TEAM
+
+Develop the engine that powers Graphite's node graph and rendering. Graphene is a programming language, compiler, and distributed runtime ecosystem built upon Rust.
+
+</div>
+
+</div>
+
+</section>
+
+<section>
 
 ## Creative contributions
 
-<a href="https://discord.graphite.rs" class="button arrow">Ask how to begin (Discord)</a>
-
 <div class="info-box">
 
+<a href="https://discord.graphite.rs">
+	<img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
+</a>
+
+**Ask how to get started by reaching out to a [core team member](/about#core-team) on Discord:**
+
+<a href="https://discord.graphite.rs" class="button arrow">Reach out on Discord</a>
+
+</div>
+
+<div class="diptych creative-contributions">
+
+<div class="block info-box">
+
 ### ART TEAM
 
 Use your artistic talents to plan and produce ambitious open art projects published by the Graphite project to stress-test and showcase the editor's capabilities.
 
 </div>
-<div class="info-box">
+<div class="block info-box">
 
 ### PUBLICITY TEAM
 
@@ -40,30 +85,6 @@ Become the author of release notes, feature announcements, blog posts, website c
 
 </div>
 
-</div>
-<div class="section code-contributions">
-
-## Code contributions
-
-<a href="/volunteer/guide" class="button arrow">Contributor guide</a>
-
-<div class="info-box">
-
-### EDITOR TEAM
-
-Write code to build and maintain the Graphite editor itself, ranging from the Svelte/TypeScript frontend UI to the tooling business logic written in Rust.
-
-</div>
-<div class="info-box">
-
-### GRAPHENE TEAM
-
-Develop the core engine that powers Graphite's node graph and rendering. Graphene is a programming language, compiler, and distributed runtime ecosystem built upon Rust.
-
-</div>
-
-</div>
-
 </div>
 
 </section>