Style tab buttons

src/_includes/main/links.njk

@@ -10,9 +10,9 @@ isContentDivided: true
 
     <p>Use the following tabs to view my link collection by category.</p>
     <nav>
-        <ul>
+        <ul class="tabs">
         {% for group in linkGroups %}
-            <li><a href="#{{ group.data.title | slugify }}">{{ group.data.title }}</a></li>
+            <li><a class="tab__btn" href="#{{ group.data.title | slugify }}">{{ group.data.title }}</a></li>
         {%- endfor %}
         </ul>
     </nav>
@@ -23,6 +23,7 @@ isContentDivided: true
     <section id="{{ group.data.title | slugify }}" class="content__section">
         <h2>{{ group.data.title }}</h2>
         {{ group.templateContent | safe }}
+        <a href="#linktabs" class="tab__btn" style="margin-top: 3em;">Back to tabs</a>
     </section>
 {%- endfor %}
 </article>

src/assets/css/components.css

@@ -154,12 +154,29 @@ p + .adoptables { margin-top: 1em; }
 }
 
 /* Tabs */
-.tabwrap section {
-	display: none;
+.tabwrap section { display: none; }
+.tabwrap section:target { display: block; }
+
+.tabs {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    gap: 0.7em;
 }
 
-.tabwrap section:target {
-	display: block;
+.tab__btn {
+    display: inline-block;
+    color: var(--clr-code-bg);
+    background-color: var(--clr-title-border);
+    text-decoration: none;
+    padding: 0.4em 0.8em;
+}
+
+.tab__btn:hover { background-color: #d5c2d6; }
+
+.tab__btn:active {
+    color: var(--clr-title-border);
+    background-color: var(--clr-code-bg);
 }
 
 /* Web ring */