From b18c487bfdb96172e16ac75ca5445a1ef34f0f47 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 30 Jun 2024 16:19:01 +0800
Subject: [PATCH] Style tab buttons

---
 src/_includes/main/links.njk  |  5 +++--
 src/assets/css/components.css | 25 +++++++++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/_includes/main/links.njk b/src/_includes/main/links.njk
index 04e15b0c..a5f69b3a 100644
--- a/src/_includes/main/links.njk
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/css/components.css b/src/assets/css/components.css
index d2cef8bd..360e3b8c 100644
--- a/src/assets/css/components.css
+++ b/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 */