requests page and styling

_includes/footer.njk

@@ -6,12 +6,12 @@
     <li>
       <a href="/daily/">Listings by day</a>
     </li>
-    <li>
-      <a href="/feed.xml">RSS</a>
-    </li>
     <li>
       <a href="https://heckin.technology/inherentlee/fedilearns"
         target="_blank">source code</a>
     </li>
+    <li>
+      <a href="/feed.xml">RSS</a>
+    </li>
   </ul>
 </footer>

_includes/header.njk

@@ -2,9 +2,14 @@
     <nav>
       <ul>
         <li><a id="skip" href="#main">skip to content</a></li>
-        <li><a href="/" {% if page.url === "/" %}aria-current="page"{% endif %}>home page</a></li>
-        <li><a href="/about/" {% if page.url === "/about/" %}aria-current="page"{% endif %}>about this site</a></li>
-        <li><a href="/submit/" {% if page.url === "/submit/" %}aria-current="page"{% endif %}>submit a listing</a></li>
+        <li><a href="/" {% if page.url == "/" %}aria-current="page"{% endif %}
+          >home page</a></li>
+        <li><a href="/about/" {% if page.url == "/about/" %}aria-current="page"{% endif %}
+          >about this site</a></li>
+        <li><a href="/submit/" {% if page.url == "/submit/" %}aria-current="page"{% endif %}
+          >submit a listing</a></li>
+        <li><a href="/requests/" {% if page.url == "/requests/" %}aria-current="page"{% endif %}
+          >requests for help</a></li>
       </ul>
     </nav>
 </header>

css/listings.css

@@ -92,11 +92,13 @@
 
 /* individual listings */
 
-.listing {
+.listing,
+.request {
 	margin-bottom: 1rem;
 }
 
-.listing strong {
+.listing strong,
+.request strong {
 	font-weight: bold;
 }
 
@@ -108,3 +110,26 @@
 	font-size: .85rem;
 	text-align: right;
 }
+
+/* Requests page */
+.title {
+	background-color: var(--color-gray);
+	padding: .25rem;
+	margin-bottom: .5rem;
+	display: flex;
+	justify-content: space-between;
+	flex-flow: row wrap;
+}
+
+.title h2 {
+	text-transform: capitalize;
+	margin: 0;
+}
+
+.title p {
+	font-family: "Bebas Neue", sans-serif;
+	font-size: 1.5rem;
+	margin: 0;
+	text-align: right;
+	margin-left: auto;
+}

src/requests.njk

@@ -0,0 +1,31 @@
+---
+title: Requests for Help
+---
+{% css %}{% include "css/listings.css" %}{% endcss %}
+
+{% if collections.requests | length == 0 %}
+<p>There's nothing here yet. <a href="/submit/">Submit your own</a>.</p>
+{% endif %}
+
+{% for listing in collections.requests | reverse %}
+  {% set tag = listing.data.tags | removeCoreTags %}
+  <div class="request">
+    <div class="title">
+      <h2>{{ listing.data.title }}</h2>
+      <p>{{ tag }}</p>
+    </div>
+    <p class="blurb">
+      <strong>
+        <a href="https://{{ listing.data.url }}"
+        target="_blank">{{ listing.data.handle }}</a>
+      asks:</strong> {{ listing.data.blurb }}
+    </p>
+    {% if listing.data.rate %}
+      <p><strong>Suggested rate:</strong> {{ listing.data.rate }}</p>
+    {% endif %}
+    <p class="listed-on">
+      listed on <time datetime="{{ listing.date | htmlDateString }}"
+        >{{ listing.date | readableDate() }}</time>
+    </p>
+  </div>
+{% endfor %}