inclusion of manually set featured topics (#48)

Author: jordyarms

_data/featured_topics.yml

@@ -0,0 +1,15 @@
+# Featured topics to display on the homepage
+# Each topic should match a slug from _data/tags.yml
+topics:
+  - slug: democracy
+    title: Democracy
+  - slug: climate
+    title: Climate
+  - slug: housing
+    title: Housing
+  - slug: open-data
+    title: Open Data
+  - slug: public-engagement
+    title: Public Engagement
+  - slug: artificial-intelligence
+    title: Artificial Intelligence

_pages/index.md

@@ -198,6 +198,24 @@ permalink: "/"
 
 </section>
 
+<!-- === Featured Topics ===  -->
+
+<section>
+  <header>
+    <h2>Explore Topics</h2>
+  </header>
+  <div class="feautured-topic-links">
+    {% for topic in site.data.featured_topics.topics %}
+      <a role="button" class="outline" href="{{ '/tags/topic/' | append: topic.slug | append: '/' | relative_url }}">
+        {{ topic.title }}
+      </a>
+    {% endfor %}
+  </div>
+  <div class="frontpage-action">
+    <a href="{{ '/tags/topic' | relative_url }}">See all topics here.</a>
+  </div>
+</section>
+
 <!-- === Call to Actions ===  -->
 
 <section>

assets/css/custom.css

@@ -100,7 +100,7 @@ dd {
 }
 
 /* Breadcrumb */
-nav[aria-label='breadcrumb'] {
+nav[aria-label="breadcrumb"] {
   margin-bottom: var(--pico-spacing);
 }
 
@@ -345,8 +345,8 @@ header.sticky {
 .main-with-sidebar {
   display: grid;
   grid-template-areas:
-    'main'
-    'sidebar';
+    "main"
+    "sidebar";
   grid-template-columns: 1fr;
   gap: 1.5rem;
   margin-bottom: 2rem;
@@ -363,7 +363,7 @@ header.sticky {
 /* Two-column layout on tablet+ */
 @media (min-width: 1024px) {
   .main-with-sidebar {
-    grid-template-areas: 'main sidebar';
+    grid-template-areas: "main sidebar";
     grid-template-columns: 2fr 1fr; /* or 3fr 1fr depending on your balance */
   }
 }
@@ -521,3 +521,11 @@ aside .ogimage {
 .listed {
   max-width: 450px;
 }
+
+.feautured-topic-links {
+  /* Home page featured topic links */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding-bottom: 1rem;
+}