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

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 */