More website loading speed and code improvements

Author: Keavon

website/content/_index.md

@@ -3,7 +3,7 @@ title = "Free online vector editor & procedural design tool"
 template = "section.html"
 
 [extra]
-css = ["/index.css", "/balance-text.css"]
+css = ["/page/index.css", "/component/carousel.css", "/component/feature-icons.css", "/component/feature-box.css", "/component/youtube-embed.css", "/layout/balance-text.css"]
 js = ["/js/carousel.js", "/js/youtube-embed.js", "/js/video-autoplay.js"]
 linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
 meta_description = "Open source free software. A vector graphics creativity suite with a clean, intuitive interface. Opens instantly (no signup) and runs locally in a browser. Exports SVG, PNG, JPG."
@@ -456,8 +456,8 @@ Get started with Graphite by following along to a hands-on quickstart tutorial.
 
 <div class="block video-container">
 <div>
-<div class="video-embed aspect-16x9">
-	<img data-video-embed="7gjUhl_3X10" loading="lazy" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
+<div class="youtube-embed aspect-16x9">
+	<img data-youtube-embed="7gjUhl_3X10" loading="lazy" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
 </div>
 </div>
 </div>
@@ -493,8 +493,8 @@ Get started with Graphite by following along to a hands-on quickstart tutorial.
 <section id="demo-video">
 <div class="block">
 Watch this timelapse showing the process of mixing traditional vector art (tracing a physical sketch and colorizing it, first two minutes) with using Imaginate to generate a background (last 45 seconds).
-<div class="video-embed aspect-16x9">
-	<img data-video-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" />
+<div class="youtube-embed aspect-16x9">
+	<img data-youtube-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" />
 </div>
 (Recorded in an older version of Graphite from early 2023.)
 </div>

website/content/about.md

@@ -2,7 +2,7 @@
 title = "About Graphite"
 
 [extra]
-css = ["/about.css"]
+css = ["/page/about.css", "/component/feature-box.css"]
 linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++
 
@@ -117,7 +117,7 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific
 
 <img src="https://static.graphite.rs/content/about/core-team-photo-keavon-chambers.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Keavon Chambers" />
 
-## Keavon Chambers <span class="handle">(@Keavon)</span> <span class="emoji" title="American">🇺🇸</span>
+## Keavon Chambers <span class="handle">(@Keavon)</span> <span class="flag" title="American">🇺🇸</span>
 
 ***Founder, UI & product design, frontend, editor systems***
 
@@ -128,7 +128,7 @@ Keavon is a creative generalist with a love for the fusion of arts and technolog
 
 <img src="https://static.graphite.rs/content/about/core-team-photo-dennis-kobert.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Dennis Kobert" />
 
-## Dennis Kobert <span class="handle">(@TrueDoctor)</span> <span class="emoji" title="German">🇩🇪</span>
+## Dennis Kobert <span class="handle">(@TrueDoctor)</span> <span class="flag" title="German">🇩🇪</span>
 
 ***Graphene node engine, research, architecture***
 
@@ -143,7 +143,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
 
 <img src="https://static.graphite.rs/content/about/core-team-photo-hypercube__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Hypercube" />
 
-## "Hypercube" <span class="handle">(@0Hypercube)</span> <span class="emoji" title="British">🇬🇧</span>
+## "Hypercube" <span class="handle">(@0Hypercube)</span> <span class="flag" title="British">🇬🇧</span>
 
 ***Editor systems, nodes, tools, architecture***
 
@@ -155,7 +155,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
 
 <img src="https://static.graphite.rs/content/about/core-team-photo-adam-gerhant.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Adam Gerhant" />
 
-## Adam Gerhant <span class="handle">(@pendapia)</span> <span class="emoji" title="American">🇺🇸</span>
+## Adam Gerhant <span class="handle">(@pendapia)</span> <span class="flag" title="American">🇺🇸</span>
 
 ***Editor graph tooling, node data formats***
 

website/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.md

@@ -11,6 +11,7 @@ reddit = "https://www.reddit.com/r/graphite/comments/18xmoti/blog_post_looking_b
 twitter = "https://twitter.com/GraphiteEditor/status/1742576805532577937"
 
 js = ["/js/youtube-embed.js"]
+css = ["/component/youtube-embed.css"]
 +++
 
 The new year is here, and with so many accomplishments to share from the past twelve months, let's revisit the highlights of 2023 for the Graphite project. Now that winter has entered, let's swing back to the spring, summarize the summer, and follow this fall's noteworthy developments that brought another year of fruitful progress to Graphite's mission of re-envisioning artists' 2D creative workflows with the best free software we can build for the open source community. This past year as a team, we all got closer— to one another from continents apart; to visiting and connecting with our industry peers; and to reaching exciting new development milestones.
@@ -92,8 +93,8 @@ The next big news of August was my formation of [Graphite Labs, LLC](https://www
 
 I allocated my time at several points throughout the year into growing and evolving this website with a refreshed and more visually-appealing home page, dedicated pages for information [about](/about) the project and its [features](/features), an area providing resources and help for [volunteers](/volunteer) and [code contributors](/volunteer/guide), and just this month— a [user manual](/learn) complete with an introductory tutorial series. The first video went up yesterday:
 
-<div class="video-embed aspect-16x9">
-	<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
+<div class="youtube-embed aspect-16x9">
+	<img data-youtube-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
 </div>
 
 The user manual and tutorial series will continue expanding throughout the coming weeks. Additional website features including user accounts, forums, and other community features are being planned.

website/content/blog/2024-05-09-graphite-progress-report-q1-2024.md

@@ -8,6 +8,7 @@ author = "Keavon Chambers & Hypercube"
 summary = "Graphite's Q1 2024 update introduces a precise snapping system and a customizable grid for enhanced design control. The update also includes improved procedural scattering with the 'Copy to Points' node, demonstrated in new demo artwork."
 reddit = "https://www.reddit.com/r/graphite/comments/1coa0if/blog_post_graphite_progress_report_q1_2024/"
 twitter = "https://twitter.com/GraphiteEditor/status/1788698448348266946"
+css = ["/component/demo-artwork.css"]
 +++
 
 [Graphite](/) is a new 2D vector graphics editor bringing a modern, nondestructive approach to creative workflows with node-based procedural generation. The project is currently three years into development, with a focus on streamlining the creative process for procedural vector artwork. See the [roadmap](/features#roadmap) for a more in-depth summary of the goals for 2024 and beyond.

website/content/blog/2024-07-31-graphite-progress-report-q2-2024.md

@@ -8,6 +8,7 @@ author = "Keavon Chambers & Hypercube"
 summary = "Graphite's Q2 2024 update introduces boolean path operations, a new gradient picker, layer locking, and more improvements."
 reddit = "https://www.reddit.com/r/graphite/comments/1ei9ps2/blog_post_graphite_progress_report_q2_2024/"
 twitter = "https://x.com/GraphiteEditor/status/1819360794028462569"
+css = ["/component/demo-artwork.css"]
 +++
 
 [Graphite](/), a new open source 2D procedural graphics editor, has spent April–June introducing **boolean path operations, a new gradient picker, layer locking**, and more improvements.

website/content/blog/2024-10-15-graphite-progress-report-q3-2024.md

@@ -8,6 +8,7 @@ author = "Keavon Chambers & Hypercube"
 summary = "Graphite's Q3 2024 update introduces improvements to performance, node graph organization, nondestructive path editing, a new render engine, and more helpful nodes."
 reddit = "https://www.reddit.com/r/graphite/comments/1g4h6ya/blog_post_graphite_progress_report_q3_2024/"
 twitter = "https://x.com/GraphiteEditor/status/1846283664562573344"
+css = ["/component/demo-artwork.css"]
 +++
 
 [Graphite](/), a new open source 2D procedural graphics editor, has spent July–September building major improvements to **performance, node graph organization, nondestructive path editing, a new render engine, and more helpful nodes**, amongst over 100 other features and fixes.

website/content/contact.md

@@ -1,5 +1,8 @@
 +++
 title = "Contact the team"
+
+[extra]
+css = ["/layout/reading-material.css"]
 +++
 
 <section class="reading-material">

website/content/donate.md

@@ -2,7 +2,7 @@
 title = "Donate"
 
 [extra]
-# css = ["/donate.css", "/balance-text.css"]
+# css = ["/page/donate.css", "/component/feature-box.css", "/layout/balance-text.css"]
 # js = ["/js/fundraising.js"]
 # linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
 +++

website/content/features.md

@@ -2,7 +2,7 @@
 title = "Graphite features"
 
 [extra]
-css = ["/features.css"]
+css = ["/page/features.css", "/component/feature-box.css", "/component/feature-icons.css"]
 +++
 
 <section>

website/content/learn/_index.md

@@ -6,6 +6,7 @@ page_template = "book.html"
 [extra]
 book = true
 js = ["/js/youtube-embed.js"]
+css = ["/component/youtube-embed.css"]
 +++
 
 Welcome to the Graphite user manual. Keep reading to to learn how the software can help bring your 2D creative ideas to life.
@@ -26,6 +27,6 @@ If you're ever stuck or confused, ask your questions in the `#🧭user-help` cha
 
 The fastest way to get started is to watch and follow along steps-by-step in the hands-on quickstart video:
 
-<div class="video-embed aspect-16x9">
-	<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
+<div class="youtube-embed aspect-16x9">
+	<img data-youtube-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/learn/introduction/tutorial-1-vector-art-quickstart-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
 </div>