Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Style tab buttons

This commit is contained in:
Helen Chong 2024-06-30 16:19:01 +08:00
parent d5ce9ef9c1
commit b18c487bfd
2 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/_includes/main/links.njk
View File

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

25
src/assets/css/components.css
View File

@ -154,12 +154,29 @@ p + .adoptables { margin-top: 1em; }
} }
/* Tabs */ /* Tabs */
.tabwrap section { .tabwrap section { display: none; }
display: none; .tabwrap section:target { display: block; }
.tabs {
list-style: none;
padding: 0;
display: flex;
gap: 0.7em;
} }
.tabwrap section:target { .tab__btn {
display: block; 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 */ /* Web ring */