Style navigation a bit

app/assets/stylesheets/application.postcss.css

@@ -21,6 +21,29 @@ h4 {
     padding: 6rem 4rem;
 }
 
+header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.section-link {
+    word-break: keep-all;
+    white-space: nowrap;
+    color: black;
+    text-transform: uppercase;
+    font-weight: 500;
+    padding: 1rem 0.5rem;
+    line-height: 2.125rem;
+    text-underline-offset: 0.25rem;
+    text-decoration-line: none;
+    text-decoration-thickness: 0.125rem;
+}
+
+.section-link-active {
+    text-decoration-line: underline;
+}
+
 .title-card-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;

app/controllers/application_controller.rb

@@ -1,6 +1,6 @@
 class ApplicationController < ActionController::Base
   # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
-  allow_browser versions: :modern
+  # allow_browser versions: :modern
 
   before_action :require_authorization
 

app/views/sections/show.html.erb

@@ -1,7 +1,9 @@
 <% content_for(:header) do %>
+    <div class="section-links">
         <% @sections.each do |section| %>
-        <%= link_to section.title, section_url(section) %>
+            <%= link_to section.title, section_url(section), html_options = { class: { "section-link": true, "section-link-active": current_page?(section_url(section)) } } %>
         <% end %>
+    </div>
 <% end %>
 
 <h4><%= @section.title %></h4>