From d05fff95948c730e55a43656e3f4e6009dc114da Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Fri, 14 Mar 2025 14:47:42 +0100
Subject: [PATCH] feat: Explain other types of applets

---
 src/pages/index.astro      | 26 +++++++++++++++++++++++++-
 src/styles/pages/index.css |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6b5d4bc..c00496a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import Page from "../layouts/page.astro";
 
-import "@picocss/pico/css/pico.colors.css";
+// import "@picocss/pico/css/pico.colors.css";
 import "../styles/reset.css";
 import "../styles/fonts.css";
 import "../styles/pages/index.css";
@@ -64,6 +64,30 @@ const themes = [{ url: "themes/sakura/", title: "Sakura" }];
           ))
         }
       </ul>
+
+      <h3>Data storage</h3>
+
+      <p>
+        <em
+          >Applets that manage input and output of the system. Where input is audio files or
+          streams, and output is derived data such as a music playlist.</em
+        >
+      </p>
+
+      <h3>Data processing</h3>
+
+      <p>
+        <em
+          >These applets interact with the bytes provided by the data storage, or provide to. This
+          processed data can then be passed to the UI layer and engine applets.</em
+        >
+      </p>
+
+      <h3>Additional</h3>
+
+      <p>
+        <em>Supplemental applets, such as scrobblers.</em>
+      </p>
     </section>
   </main>
 </Page>
diff --git a/src/styles/pages/index.css b/src/styles/pages/index.css
index 3f7db6d..ce9a709 100644
--- a/src/styles/pages/index.css
+++ b/src/styles/pages/index.css
@@ -65,7 +65,7 @@ h2 {
 h3 {
   font-size: var(--fs-lg);
   font-weight: 800;
-  margin: var(--space-sm) 0 var(--space-sm);
+  margin: var(--space-lg) 0 var(--space-sm);
   text-transform: uppercase;
 }
 
-- 
2.51.2