hover and focus, sample data handling, skip to content link, more

_includes/footer.njk

@@ -7,12 +7,5 @@
       <a href="https://heckin.technology/inherentlee/fedi-classifieds"
         target="_blank">source code</a>
     </li>
-    <li>
-      {% 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,15 +1,10 @@
 <header>
     <nav>
-    {% if page.url == "/submit/" %}
+      <ul>
-      <a href="/">Return Home</a>
+        <li>  <a id="skip" href="#main">skip to content</a></li>
-    {% elif page.url == "/" %}
+        <li><a href="/" {% if page.url === "/" %}aria-current="page"{% endif %}>home page</a></li>
-      <a href="/submit/">Submit Your Own</a>
+        <li><a href="/about/" {% if page.url === "/about/" %}aria-current="page"{% endif %}>about this site</a></li>
-    {% endif %}
+        <li><a href="/submit/" {% if page.url === "/submit/" %}aria-current="page"{% endif %}>submit a listing</a></li>
+      </ul>
     </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>

css/home.css

@@ -107,3 +107,18 @@
 	font-size: .85rem;
 	text-align: right;
 }
+
+/* Handling for sample data and wip stuff */
+.draft h3,
+.draft p {
+	opacity: .6;
+}
+
+.wip {
+	border-top: solid var(--color-pink);
+	border-bottom: solid var(--color-pink);
+	border-left: .5rem solid var(--color-cyan);
+	border-right: .5rem solid var(--color-cyan);
+	padding: 1rem 1rem 0;
+	margin: 1rem 0 2rem;
+}

css/main.css

@@ -36,7 +36,6 @@ body {
 
 main {
 	padding-bottom: 2rem;
-	border-bottom: solid var(--color-pink);
 }
 
 @media (max-width: 1050px) {
@@ -83,12 +82,29 @@ p {
 
 a {
 	color: var(--color-cyan);
+	text-decoration-thickness: .1rem;
+	transition: text-decoration-thickness .5s;
+	border-radius: .05rem;
 }
 
 a:visited {
 	color: var(--color-pink);
 }
 
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .2rem;
+	}
+}
+
+a:focus-visible {
+	outline: solid var(--color-pink);
+}
+
+a:visited:focus-visible {
+	outline-color: var(--color-cyan);
+}
+
 main ul {
 	margin-left: 1rem;
 	margin-bottom: 1rem;

css/nav.css

@@ -1,40 +1,44 @@
-nav {
+nav,
-  margin: 1rem 25%;
+footer {
-  text-align: center;
+	padding: 1rem 0;
-  border-bottom: solid var(--color-pink);
 }
 
-nav a,
+nav ul,
+footer ul {
+  list-style: none;
+  display: flex;
+  flex-flow: column;
+  text-align: center;
+	gap: .2rem;
+}
+
+header,
+nav li,
 footer li {
   font-family: "Bebas Neue";
   font-size: 1.3rem;
 }
 
-nav a {
+header {
-  text-decoration: none;
+  border-bottom: solid var(--color-pink);
-}
-
-.wip {
-  margin: 1rem 0;
-  border: solid var(--color-cyan);
-  border-radius: .1rem;
-  padding: 1rem;
-}
-
-.wip p {
-  margin: 0;
 }
 
 footer {
-	padding: 1rem 0;
+  border-top: solid var(--color-pink);
 }
 
-footer ul {
+a[aria-current="page"] {
-	list-style: none;
+  text-decoration: line-through;
-	display: flex;
+  color: rgb(from var(--color-pink) r g b / 65%);
-	justify-content: space-around;
 }
 
-footer li {
+/* Skip link */
-	display: inline;
+#skip {
+	-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+}
+
+#skip:focus-visible {
+	-webkit-clip-path: none;
+	clip-path: none;
 }

src/about.njk

@@ -0,0 +1,48 @@
+---
+layout: base.njk
+title: About the Classifieds
+---
+
+<p>
+  We all have something to share. So let's help others learn.
+</p>
+
+<p>
+  <a href="/submit/">Post a listing</a> for your skill and someone might reach
+  out for help! <a href="/">Read the listings</a> and see if there's things you
+  want to know.
+</p>
+
+<h2>Why not a hashtag?</h2>
+
+<p>
+  I... I love fedi, I really do, but we all know that federation has its flaws.
+  One such flaw is that discovery can be limited, and looking up a hashtag is
+  not really a guarantee that you'll see all the posts under that hashtag. While
+  I was looking at this concept, someone told me about the hashtag
+  <a href="https://flipping.rocks/tags/knowItTeachIt" target="_blank">#knowItTeachIt</a>
+  and of course, I promptly went to check it out. And saw a single post
+  from 2023. Apparently there's more in that tag, but my server doesn't
+  know that. So yeah. Maybe more than a hashtag, then.
+</p>
+
+<h2>Is this paid?</h2>
+
+<p>
+  At current, the assumption is that these are free skillshares. If there's demand
+  for listings for paid skillshares, I can add that field to this listings and
+  let folks specify rate/pro bono. Pretty up to y'all. Let me know.
+</p>
+
+<h2>How do I let you know?</h2>
+
+<p>
+  You can find all my contact methods on the site linked in the footer, or just
+  <a href="https://flipping.rocks/@inherentlee" target="_blank">send me a message
+    on fedi</a>.
+
+<h2>When does all the Lorem Ipsum go away?</h2>
+
+<p>
+  After you add your listing.
+</p>

src/ads/00-test-test.md

@@ -2,6 +2,7 @@
 title: film photography
 handle: 00
 server: test.test
+draft: true
 tags: art and crafts
 blurb: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 date: 2026-04-21

src/ads/01-test-test.md

@@ -2,6 +2,7 @@
 title: let's talk about the roman empire
 handle: 01
 server: test.test
+draft: true
 tags: history and science
 blurb: Quisque mauris erat, tempor non egestas sollicitudin, feugiat id risus. Duis eget ornare nunc. Cras sodales, eros quis finibus luctus, enim sem dictum ante, sed sodales ipsum ante a metus.
 date: 2026-04-22

src/ads/02-test-test.md

@@ -2,6 +2,7 @@
 title: neurodivergent coping strats
 handle: 02
 server: test.test
+draft: true
 tags: interpersonal and life
 blurb: Fusce faucibus mauris ut metus molestie viverra. In varius erat in lectus scelerisque, vitae ornare sapien euismod. Pellentesque ornare aliquam erat, pellentesque eleifend tellus consequat ut. Donec mollis, lacus vitae bibendum hendrerit, nisi metus dignissim lacus, nec tincidunt nisl ligula vel metus.
 date: 2026-04-23

src/ads/03-test-test.md

@@ -2,6 +2,7 @@
 title: editing 102
 handle: 03
 server: test.test
+draft: true
 tags: writing editing and literature
 blurb: Sed a commodo lectus. Curabitur tincidunt, eros vel mollis dapibus, mauris dui pharetra mauris, et dapibus leo nisi vitae eros.
 date: 2026-04-24

src/ads/04-test-test.md

@@ -2,6 +2,7 @@
 title: sourdough starting!
 handle: 04
 server: test.test
+draft: true
 tags: food and drink
 blurb: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae augue ac neque congue pellentesque vitae a enim. Donec euismod dolor sit amet dui dapibus posuere. Donec eget blandit ligula, ac tempor nunc.
 date: 2026-04-25

src/ads/05-test-test.md

@@ -2,6 +2,7 @@
 title: bug identification for beginners
 handle: 05
 server: test.test
+draft: true
 tags: animals and the outdoors
 blurb: Duis interdum purus non iaculis convallis. Nunc mi lorem, consequat sed luctus vitae, lobortis in arcu.
 date: 2026-04-26

src/ads/06-test-test.md

@@ -2,6 +2,7 @@
 title: fix your sink or toilet
 handle: 06
 server: test.test
+draft: true
 tags: repair and diy
 blurb: Aliquam justo justo, scelerisque a ligula sed, elementum pharetra quam. Ut augue nibh, finibus vel dui nec, sagittis bibendum leo. Quisque libero diam, maximus in dui ac, sollicitudin congue enim.
 date: 2026-04-27

src/ads/07-test-test.md

@@ -2,6 +2,7 @@
 title: Navigating Workplace Transition
 handle: 07
 server: test.test
+draft: true
 tags: interpersonal and life
 blurb: Donec nisl ligula, mollis sit amet gravida eget, aliquam vitae nibh. Fusce diam nulla, interdum a ex a, semper lacinia elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia fermentum arcu, molestie ornare purus lobortis eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc convallis turpis nisi, nec volutpat dui semper at.
 date: 2026-04-28

src/ads/08-test-test.md

@@ -2,6 +2,7 @@
 title: Picking the right haircut
 handle: 08
 server: test.test
+draft: true
 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

@@ -4,6 +4,14 @@ title: Fediverse Skillshare Classifieds
 ---
 {% css %}{% include "css/home.css" %}{% endcss %}
 
+<div class="wip">
+  <p>
+    Hey! This is in early days, so please forgive the lack of real data. Any listing
+    that is greyed out is sample data, and should be ignored. As I get real listings,
+    I'll replace the samples!
+  </p>
+</div>
+
 <div id="jump-links">
   <h2>jump to...</h2>
   <ul>
@@ -23,7 +31,7 @@ title: Fediverse Skillshare Classifieds
         <p>{{ tag | getTagline }}</p>
       </div>
       {% for listing in collections[tag] %}
-        <div class="listing">
+        <div class="listing{% if listing.data.draft %} draft{% endif %}">
           <h3>{{ listing.data.title }}</h3>
           <p class="blurb">
             <strong>