Style tab buttons
This commit is contained in:
parent
d5ce9ef9c1
commit
b18c487bfd
|
@ -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>
|
|
@ -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 */
|
||||||
|
|
Loading…
Reference in New Issue