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
Use the following tabs to view my link collection by category.
@@ -23,6 +23,7 @@ isContentDivided: true
{{ group.data.title }}
{{ group.templateContent | safe }}
+ Back to tabs
{%- endfor %}
\ 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 */