Shuffle content. Add 404 and some color.

src/404.html

@@ -0,0 +1,19 @@
+---
+layout: default
+
+title: Page Not Found
+description: >
+  The page you're looking for doesn't exist.
+---
+
+<div class="py-20">
+  <div class="wrapper">
+    <div class="text-center">
+      <h1 class="mb-8 pageheading">404: Page Not Found</h1>
+      <img
+        src="/assets/img/theme/404.svg"
+        class="max-w-2xl mx-auto"
+        alt="A majestic pony flying upwards over a rainbow. Just under the rainbow there words 'Oops' are written in a cartoonish style." />
+    </div>
+  </div>
+</div>

src/_includes/nav.html

@@ -6,7 +6,7 @@
       <a href="/about" data-menu-trigger>About</a>
       <ul
         data-menu-list
-        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-bray-50 lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
+        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-ice-cream-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
         <li><a href="/about/" role="menuitem">About DjangoCon US</a></li>
         <li><a href="/about/tickets/" role="menuitem">Tickets</a></li>
         <li><a href="/about/faq/" role="menuitem">FAQ</a></li>
@@ -23,7 +23,7 @@
       <a href="/speaking/" data-menu-trigger>Speaking</a>
       <ul
         data-menu-list
-        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-bray-50 lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[26ch] lg:p-6 rounded font-medium">
+        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-ice-cream-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[26ch] lg:p-6 rounded font-medium">
         <li><a href="/speaking/">Speaking at DjangoCon US</a></li>
         <li><a href="/speaking/speaker-resources/">Speaker Resources</a></li>
       </ul>
@@ -32,7 +32,7 @@
       <a href="/sponsors/" data-menu-trigger>Sponsors</a>
       <ul
         data-menu-list
-        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-bray-50 lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
+        class="flex-col hidden gap-6 px-4 py-2 mt-2 border-l-4 border-ice-cream-purple lg:absolute lg:top-full lg:border-4 lg:bg-white lg:left-1/2 lg:translate-x-[-50%] lg:w-[24ch] lg:p-6 rounded font-medium">
         <li><a href="/sponsors/">Our Sponsors</a></li>
         <li><a href="/sponsors/information/">Sponsorship Prospectus</a></li>
       </ul>

src/_layouts/default.html

@@ -49,7 +49,7 @@
           <a
             href="/"
             aria-label="Go to homepage">
-            <img src="/assets/img/logo.svg" alt="DjangoCon US" class="h-12 lg:h-20">
+            <img src="/assets/img/theme/logo.svg" alt="DjangoCon US" class="h-12 lg:h-20">
           </a>
           <button id="NavToggler" class="lg:hidden">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8" aria-hidden="true">

src/_layouts/post.html

@@ -16,7 +16,7 @@ <h1 class="text-3xl font-bold font-heading lg:text-5xl text-balance">{{ title }}
           <img
             src="{{ cover.url }}"
             alt="{{ cover.alt }}"
-            class="w-full media" />
+            class="w-full" />
         </figure>
       {% endif %}
 

src/about/index.html

@@ -112,19 +112,19 @@ <h2 class="mb-8 text-2xl font-bold font-heading lg:text-5xl">Conference Features
 
     <div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
       <section class="flex flex-col gap-4 p-6 bg-white border-2">
-        <img src="/assets/img/icons/People.svg" alt="Two people. One person is standing slightly in front of the other." class="w-16 h-16 icon" />
+        <img src="/assets/img/theme/icons/People.svg" alt="Two people. One person is standing slightly in front of the other." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading" id="code-of-conduct">Code of Conduct</h3>
         <p class="lg:text-lg">We’re committed to providing a safe and friendly environment for everyone to learn, meet, and enjoy the conference. All organizers, attendees, speakers and sponsors must follow the <strong><a href="/about/conduct/" class="link">Code of Conduct</a></strong>.</p>
       </section>
 
       <section class="flex flex-col gap-4 p-6 bg-white border-2">
-        <img src="/assets/img/icons/Heart.svg" alt="A heart." class="w-16 h-16 icon" />
+        <img src="/assets/img/theme/icons/Heart.svg" alt="A heart." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading" id="commitment-to-diversity">Commitment to Diversity</h3>
         <p class="lg:text-lg">It is a core aim of DjangoCon US 2023 to encourage diversity, enforce our <strong><a href=/about/conduct/" class="link">Code of Conduct</a></strong>, and make our event as inclusive and accessible as possible.</p>
       </section>
 
       <section class="flex flex-col gap-4 p-6 bg-white border-2">
-        <img src="/assets/img/icons/Document.svg" alt="An official document with words written on it." class="w-16 h-16 icon" />
+        <img src="/assets/img/theme/icons/Document.svg" alt="An official document with words written on it." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading" id="opportunity-grants">COVID-19 Safety</h3>
         <p class="lg:text-lg">As part of our commitment to the safety of our attendees, we have a <strong><a href="/about/covid/" class="link">COVID-19 Policy</a></strong> and require all attendees to be vaccinated and masked, and have a negative COVID test prior to attending.</p>
       </section>

src/assets/css/main.css

@@ -124,7 +124,7 @@
     @apply block w-5 h-5;
     @apply bg-ice-cream-purple;
 
-    mask: url('/assets/img/icons/Triangle.svg');
+    mask: url('/assets/img/theme/icons/Triangle.svg');
     mask-size: cover;
     mask-repeat: no-repeat;
 

src/index.html

@@ -35,7 +35,7 @@ <h1 class="mb-4 text-4xl font-extrabold leading-tight lg:text-5xl">
 
       <div class="self-end lg:max-w-2xl">
         <img
-          src="/assets/img/hero-img.webp"
+          src="/assets/img/theme/hero-img.webp"
           alt="A collage of Durham, NC centric stickers and photos."
         />
       </div>
@@ -90,19 +90,19 @@ <h2 class="mb-8 text-2xl font-bold text-center font-heading lg:text-5xl max-w-[2
 
     <div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
       <section class="flex flex-col gap-4 p-6 bg-white border-2">
-        <img src="/assets/img/icons/People.svg" alt="Two people. One person is standing slightly in front of the other." class="w-16 h-16 icon" />
+        <img src="/assets/img/theme/icons/People.svg" alt="Two people. One person is standing slightly in front of the other." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading">Code of Conduct</h3>
         <p class="lg:text-lg">Participants are expected to be respectful to each other. For details on our expectations, and who to contact if you need assistance, see our <strong><a href="/conduct/" class="link">Code of Conduct</a></strong>.</p>
       </section>
 
       <section class="flex flex-col gap-4 p-6 bg-white border-2">
-        <img src="/assets/img/icons/Document.svg" alt="An official document with words written on it." class="w-16 h-16 icon" />
+        <img src="/assets/img/theme/icons/Document.svg" alt="An official document with words written on it." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading">COVID-19</h3>
         <p class="lg:text-lg">Read our <strong><a href="/covid" class="link">COVID-19 Policy</a></strong>, including mask and testing requirements.</p>
       </section>
 
       <section class="flex flex-col gap-4 p-6 bg-white border-2">
-        <img src="/assets/img/icons/Heart.svg" alt="A heart." class="w-16 h-16 icon" />
+        <img src="/assets/img/theme/icons/Heart.svg" alt="A heart." class="w-16 h-16 icon" />
         <h3 class="text-lg font-bold lg:text-2xl font-heading">Accessiblity</h3>
         <p class="lg:text-lg">We offer a range of accommodations, including live captioning, thoughtful lunch options, and a dedicated accessibility team to ensure everyone can fully participate.</p>
       </section>