add styling for token table

hugo/assets/scss/the-trail.scss

@@ -0,0 +1,24 @@
+.token-table {
+  width: 100%;
+  font-family: PressStart2P, sans-serif;
+  font-size: clamp(0.75rem, 2vw, 1.5rem);
+  border-collapse: collapse;
+
+  td {
+    padding: 1rem 0;
+    line-height: 1.5;
+  }
+
+  .currency {
+    text-align: right;
+  }
+
+  .level {
+    padding-right: 0.5rem;
+  }
+
+  tr:nth-child(2) > td {
+    border-top: 2px solid var(--lime-green);
+    border-bottom: 2px solid var(--lime-green);
+  }
+}

hugo/content/the-trail.md

@@ -1,6 +1,7 @@
 ---
 title: The Trail
 description: Information about the trail at The Amazing Oregon Trail camporee
+type: the-trail
 ---
 
 You and your patrol will face a series of thrilling challenges and stations along the trail, testing your skills, teamwork, and resourcefulness. Each station represents a vital aspect of life on the Oregon Trail – from fire building and river crossing to hunting and cooking. You'll need to work together to overcome these challenges and make your way safely to the trail's end.

hugo/layouts/shortcodes/token-table.html

@@ -1,19 +1,19 @@
 <table class="token-table">
   <tbody>
     <tr>
-      <td>Level 1</td>
+      <td class="level">Level 1</td>
       <td>Newest Patrols</td>
-      <td>$100</td>
+      <td class="currency">$100</td>
     </tr>
     <tr>
-      <td>Level 2</td>
+      <td class="level">Level 2</td>
       <td>Intermediate Patrols</td>
-      <td>$80</td>
+      <td class="currency">$80</td>
     </tr>
     <tr>
-      <td>Level 3</td>
+      <td class="level">Level 3</td>
       <td>Oldest Patrols</td>
-      <td>$60</td>
+      <td class="currency">$60</td>
     </tr>
   </tbody>
 </table>

hugo/layouts/the-trail/single.html

@@ -0,0 +1,10 @@
+{{ define "head-styles" }}
+  {{ $pageCSS := "scss/the-trail.scss" }}
+  {{ $options := (dict "outputStyle" "compressed") }}
+  {{ $inlineCSS := resources.Get $pageCSS | resources.ToCSS $options }}
+<style>{{ $inlineCSS.Content | safeCSS }}</style>
+{{ end }}
+{{ define "main" }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+{{ end }}