feat(ui): polish site UI, add datapack podcast project

Author: moxvallix

src/_includes/layouts/base.html

@@ -8,7 +8,7 @@
     style="image-rendering: optimizeSpeed; image-rendering: pixelated"
     data-env="{{ node.env }}"
   >
-    <div class="flex w-full max-w-screen-hd grow flex-col">
+    <div class="flex w-full max-w-screen-hd grow flex-col bg-black/40">
       {% include "partials/site-header.html" %} {% block content %}{% endblock
       %}
     </div>

src/_includes/layouts/home.html

@@ -1,11 +1,10 @@
 {% layout "layouts/base.html" %} {% block content %}
 <main
   id="main-content"
-  tabindex="-1"
-  class="flex grow items-start justify-center py-12"
+  class="flex grow items-start justify-center py-4 xs:py-8 sm:py-12"
 >
   <div
-    class="prose prose-invert w-full rounded bg-zinc-700 p-4 shadow-black sm:prose-lg xs:shadow sm:shadow-2xl"
+    class="prose prose-invert mx-2 w-full rounded bg-zinc-700 p-4 shadow-black sm:prose-lg prose-headings:mt-0 prose-headings:mb-2 xs:shadow sm:shadow-2xl"
   >
     {{ content }}
   </div>

src/_includes/layouts/project.html

@@ -66,7 +66,7 @@
     </div>
   </div>
   <div
-    class="prose prose-invert w-full max-w-prose rounded bg-zinc-700 p-4 shadow-2xl shadow-black"
+    class="prose prose-invert prose-h1:font-heading prose-h1:font-normal w-full max-w-prose rounded bg-zinc-700 p-4 shadow-2xl shadow-black"
   >
     {{ content }}
   </div>

src/_includes/partials/cards/docs.html

@@ -9,7 +9,7 @@
   ></div>
   <div class="p-2 pb-8 pt-4">
     <a class="no-style" href="{{ post.data.docs }}"
-      ><h3 class="text-4xl font-bold">{{ post.data.title }}</h3></a
+      ><h3 class="font-heading text-4xl">{{ post.data.title }}</h3></a
     >
     <p>{{ post.data.subtitle }}</p>
   </div>

src/_includes/partials/cards/project.html

@@ -8,7 +8,7 @@
   ></div>
   <div class="p-2 pb-8 pt-4">
     <a class="no-style" href="{{ post.url }}"
-      ><h3 class="text-4xl font-bold">{{ post.data.title }}</h3></a
+      ><h3 class="font-heading text-4xl">{{ post.data.title }}</h3></a
     >
     <p>{{ post.data.subtitle }}</p>
   </div>

src/_includes/partials/site-header.html

@@ -14,7 +14,9 @@
           width="48"
           style="image-rendering: optimizeSpeed; image-rendering: pixelated"
         />
-        <figcaption class="hidden font-minecraft text-2xl sm:block">
+        <figcaption
+          class="font-minecraft text-[20px] xs:hidden sm:block sm:text-[30px]"
+        >
           datapack.dev
         </figcaption>
       </figure>

src/about.md

@@ -2,11 +2,10 @@
 layout: 'layouts/home.html'
 title: 'About'
 ---
-# About GMDU
+# About <span class="font-heading">GMDU</span>
 
-GMDU, or Gears (and) Moxvallix Datapack Universe, is a small team of datapack developers making
-needlessly complicated datapacks for Minecraft: Java Edition. The GMDU team, unsurprisingly, consists
-of Gears, and Moxvallix.
+<span class="font-heading">GMDU</span>, or Gears (and) Moxvallix Datapack Universe, is a small team of datapack developers making needlessly complicated datapacks for Minecraft: Java Edition.
+The <span class="font-heading">GMDU</span> team, unsurprisingly, consists of Gears, and Moxvallix.
 
 Our main focus has been [Code of Copper](/projects/code_of_copper/), but we are looking to work on some other projects
 as well. All of our projects can be found on our [Projects Page](/projects/).