ore updates i don't wanna split this up lbr

.gitignore

@@ -1 +1,2 @@
 _live
+_site

_config/filters.js

@@ -16,6 +16,9 @@ export default function(eleventyConfig) {
 			case "art and crafts":
 				tagline = "makin' stuff";
 				break;
+			case "beauty and health":
+				tagline = "lookin' good";
+				break;
 			case "food and drink":
 				tagline = "good eatin'";
 				break;

_includes/footer.njk

@@ -1,13 +1,18 @@
 <footer>
   <ul>
     <li>
-      maintained by <a href="https://leecat.art">lee</a>
+      maintained by <a href="https://leecat.art" target="_blank">lee</a>
     </li>
     <li>
-      <a href="https://heckin.technology/inherentlee/fedi-classifieds">source code</a>
+      <a href="https://heckin.technology/inherentlee/fedi-classifieds"
+        target="_blank">source code</a>
     </li>
     <li>
-      <a href="/submit/">submit your own</a>
+      {% if page.url == "/" %}
+        <a href="/submit/">submit your own</a>
+      {% elif page.url == "/submit/" %}
+        <a href="/">return home</a>
+      {% endif %}
     </li>
   </ul>
 </footer>

_includes/header.njk

@@ -1,4 +1,15 @@
 <header>
-  <nav>
-  </nav>
+    <nav>
+    {% if page.url == "/submit/" %}
+      <a href="/">Return Home</a>
+    {% elif page.url == "/" %}
+      <a href="/submit/">Submit Your Own</a>
+    {% endif %}
+    </nav>
+
+  <div class="wip">
+    <p>This site is still a bit of a proof-of-concept. I don't know yet if it'll
+    go anywhere! Feel free to sign up regardless and I'll put ya in. (Note: all
+    handles that are @test.test are, I hope obviously, fake data.)</p>
+  </div>
 </header>

_includes/layouts/base.njk

@@ -22,6 +22,7 @@
 
     {# Styles #}
     <style>{% include "css/main.css" %}</style>
+    <style>{% include "css/nav.css" %}</style>
 
     <style>{% getBundle "css" %}</style>
 

css/home.css

@@ -1,15 +1,15 @@
-#ads {
+#listings {
 	columns: 3;
 }
 
 @media (max-width: 1050px) {
-	#ads {
+	#listings {
 		columns: 2;
 	}
 }
 
 @media (max-width: 650px) {
-	#ads {
+	#listings {
 		columns: 1;
 	}
 }
@@ -18,11 +18,11 @@
 #jump-links {
 	padding-bottom: 1rem;
 	margin-bottom: 1rem;
-	border-bottom: solid var(--color-purple);
+	border-bottom: solid var(--color-pink);
 }
 
 #jump-links h2,
-#category-list li {
+#jump-links li {
 	font-family: "Bebas Neue";
 	font-size: 1.3rem;
 	font-weight: normal;
@@ -32,12 +32,16 @@
 	display: inline;
 }
 
-#category-list li {
+#jump-links a {
+	text-decoration: none;
+}
+
+#jump-links li {
 	list-style: none;
   margin: 0;
 }
 
-#category-list li:not(:last-child)::after {
+#jump-links li:not(:last-child)::after {
 	content: "..." / "";
 }
 
@@ -45,8 +49,6 @@
 
 .category {
 	break-inside: avoid;
-	border-bottom: solid var(--color-purple);
-	margin-bottom: 1rem;
 }
 
 .category-title {
@@ -78,27 +80,26 @@
 .category-title h2 {
 	scroll-margin-top: 4rem;
 	font-family: "Bebas Neue";
+	margin: 0;
 }
 
 .category-title p {
 	text-align: right;
 	font-weight: bold;
+	margin: 0;
 }
 
-/* individual ads */
+/* individual listings */
 
-.ad {
+.listing {
 	margin-bottom: 1rem;
 }
-.ad:not(:last-child) {
-	border-bottom: thin solid var(--color-purple);
-	padding-bottom: 1rem;
-}
 
 .blurb {
 	margin-bottom: .5rem;
 }
-.blurb a {
+
+.blurb strong {
 	font-weight: bold;
 }
 

css/main.css

@@ -1,19 +1,21 @@
 :root {
 	color-scheme: light dark;
 
-	--color-dark: #222;
-	--color-light: #ddd;
-	--color-cyan-dark: #134947;
-	--color-cyan-light: #40c5be;
-	--color-purple-dark: #6007b1;
-	--color-purple-light: #ba99fe;
+	--color-dark: #2e303e;
+	--color-dark-alt: #3c3f52;
+	--color-light: #ebeeef;
+	--color-light-alt: #dbe1e3;
+	--color-cyan-dark: #18737b;
+	--color-cyan-light: #25b0bc;
+	--color-pink-dark: #94195d;
+	--color-pink-light: #ee9fcb;
 
 	--color-text: light-dark(var(--color-dark), var(--color-light));
 	--color-bg: light-dark(var(--color-light), var(--color-dark));
-	--color-gray: rgb(0 0 0 / 15%);
+	--color-gray: light-dark(var(--color-light-alt), var(--color-dark-alt));
 	--color-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
 	--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
-	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
+	--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
 }
 
 * {
@@ -34,7 +36,7 @@ body {
 
 main {
 	padding-bottom: 2rem;
-	border-bottom: solid var(--color-purple);
+	border-bottom: solid var(--color-pink);
 }
 
 @media (max-width: 1050px) {
@@ -66,43 +68,36 @@ h1 {
 	}
 }
 
+h2 {
+	margin-bottom: 1rem;
+}
+
 h3 {
 	text-transform: capitalize;
 	margin-bottom: .5rem;
 }
 
+p {
+	margin-bottom: 1rem;
+}
+
 a {
 	color: var(--color-cyan);
 }
 
 a:visited {
-	color: var(--color-purple);
+	color: var(--color-pink);
 }
 
 main ul {
 	margin-left: 1rem;
+	margin-bottom: 1rem;
 }
 
 main li {
 	margin-left: 1rem;
 }
 
-footer {
-	padding: 1rem 0;
-}
-
-footer ul {
-	list-style: none;
-	display: flex;
-	justify-content: space-around;
-}
-
-footer li {
-	display: inline;
-	font-family: "Bebas Neue";
-	font-size: 1.15rem;
-}
-
 /* iframe is on submission page */
 iframe {
 	margin: 2rem 0;

css/nav.css

@@ -0,0 +1,40 @@
+nav {
+  margin: 1rem 25%;
+  text-align: center;
+  border-bottom: solid var(--color-pink);
+}
+
+nav a,
+footer li {
+  font-family: "Bebas Neue";
+  font-size: 1.3rem;
+}
+
+nav a {
+  text-decoration: none;
+}
+
+.wip {
+  margin: 1rem 0;
+  border: solid var(--color-cyan);
+  border-radius: .1rem;
+  padding: 1rem;
+}
+
+.wip p {
+  margin: 0;
+}
+
+footer {
+	padding: 1rem 0;
+}
+
+footer ul {
+	list-style: none;
+	display: flex;
+	justify-content: space-around;
+}
+
+footer li {
+	display: inline;
+}

rsync.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+rsync -uav _site/ ../classifieds-site

src/ads/08-test-test.md

@@ -0,0 +1,8 @@
+---
+title: Picking the right haircut
+handle: 08
+server: test.test
+tags: beauty and health
+blurb: Duis nec varius dui. In mauris neque, scelerisque sed commodo accumsan, sodales vitae tortor.
+date: 2026-04-30
+---

src/index.njk

@@ -6,7 +6,7 @@ title: Fediverse Skillshare Classifieds
 
 <div id="jump-links">
   <h2>jump to...</h2>
-  <ul id="category-list">
+  <ul>
   {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
     <li>
       <a href="#{{ tag | slugify }}">{{ tag }}</a>
@@ -15,23 +15,24 @@ title: Fediverse Skillshare Classifieds
   </ul>
 </div>
 
-<div id="ads">
+<div id="listings">
   {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
     <div class="category">
       <div class="category-title">
         <h2>{{ tag }}</h2>
         <p>{{ tag | getTagline }}</p>
       </div>
-      {% for ad in collections[tag] %}
-        <div class="ad">
-          <h3>{{ ad.data.title }}</h3>
+      {% for listing in collections[tag] %}
+        <div class="listing">
+          <h3>{{ listing.data.title }}</h3>
           <p class="blurb">
-            <a href="https://{{ ad.data.server }}/@{{ ad.data.handle }}"
-              target="_blank">@{{ ad.data.handle }}@{{ ad.data.server}}</a>
-            offers: {{ ad.data.blurb }}
+            <strong>
+              <a href="https://{{ listing.data.server }}/@{{ listing.data.handle }}"
+              target="_blank">@{{ listing.data.handle }}@{{ listing.data.server}}</a>
+            offers:</strong> {{ listing.data.blurb }}
           </p>
           <p class="listed-on">
-            listed on <time datetime="{{ ad.date | htmlDateString }}">{{ ad.date | readableDate() }}</time>
+            listed on <time datetime="{{ listing.date | htmlDateString }}">{{ listing.date | readableDate() }}</time>
           </p>
         </div>
       {% endfor %}

src/submit.njk

@@ -1,21 +1,107 @@
 ---
 layout: base.njk
-title: Submit an Ad
+title: Submit a Listing
 ---
 
+{% css %}
+.category-title {
+  font-family: "Bebas Neue";
+  font-size: 1.5rem;
+  background-color: var(--color-gray);
+  padding: .25rem;
+}
+{% endcss %}
+
 <p>To submit to the Skillshare Classifieds, you'll need:</p>
 
 <ul>
   <li>your fediverse handle</li>
-  <li>the most relevant category for your listing</li>
+  <li>the <a href="#category-guide">most relevant category</a> for your listing</li>
   <li>a title for your offering</li>
   <li>a short description</li>
 </ul>
 
 <p>See <a href="/">the home page</a> for inspiration.</p>
 
+<p> You can submit using the embed below,
+  <a href="https://airtable.com/appbdRJ59MLprB1iC/pagfJTOl4KPwh7trd/form"
+    target="_blank">open the form in a new tab</a>, or
+  <a href="mailto:lee.cattarin@gmail.com?subject=Fediverse%20Skillshare%20Classifieds">email
+    Lee</a> all the information mentioned above.
+</p>
+
+<p>Feel free to submit multiple times in multiple categories, but I'd prefer that
+  all offerings within one category be grouped into one listing if possible!</p>
+
 <iframe class="airtable-embed"
   src="https://airtable.com/embed/appbdRJ59MLprB1iC/pagfJTOl4KPwh7trd/form"
   frameborder="0" onmousewheel="" width="100%" height="533"
   style="background: transparent; border: 1px solid #ccc;">
 </iframe>
+
+<h2>Category guide</h2>
+
+<p>Here's some examples as to what might fall under each category as they currently exist...</p>
+
+<h3 class="category-title">Animals and the outdoors</h3>
+<ul>
+  <li>Raising a cat</li>
+  <li>Mushroom identification</li>
+  <li>Natural navigation</li>
+</ul>
+
+<h3 class="category-title">Art and Crafts</h3>
+<ul>
+  <li>Learning to knit</li>
+  <li>Painting techniques</li>
+  <li>How to get started with woodcarving</li>
+</ul>
+
+<h3 class="category-title">Beauty and Health</h3>
+<ul>
+  <li>Fashion tips</li>
+  <li>How to braid hair</li>
+  <li>Workouts for core strength</li>
+</ul>
+
+<h3 class="category-title">Food and Drink</h3>
+<ul>
+  <li>Sourdough starting</li>
+  <li>Gardening for food (also totally cool in "Animals and the Outdoors")</li>
+  <li>One-pot meals</li>
+</ul>
+
+<h3 class="category-title">History and Science</h3>
+<ul>
+  <li>Exploring ancient history</li>
+  <li>Chemistry basics</li>
+  <li>Philosophy discussion</li>
+</ul>
+
+<h3 class="category-title">Interpersonal and Life</h3>
+<ul>
+  <li>Neurodivergent life tactics</li>
+  <li>Navigating workplace transition</li>
+  <li>Mediating hard discussions</li>
+</ul>
+
+<h3 class="category-title">Repair and DIY</h3>
+<ul>
+  <li>Plumbing basics</li>
+  <li>Fixing broken appliances</li>
+  <li>Mending clothing (also totally cool in "Art and Crafts")</li>
+</ul>
+
+<h3 class="category-title">Technology</h3>
+<ul>
+  <li>Home networking</li>
+  <li>Introductory web development</li>
+  <li>Learning Python</li>
+</ul>
+
+<h3 class="category-title">Writing Editing and Literature</h3>
+<ul>
+  <li>Editing scientific writing</li>
+  <li>Creating relatable characters</li>
+  <li>How to write a book review</li>
+</ul>