angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add some documentation to the tabs component

Browse source
This commit is contained in:
Yannik Rödel 2021-07-08 16:29:24 +02:00
parent 6a680aad38
commit 447062d183
2 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.md
View file

@ -13,15 +13,6 @@ eleventyNavigation:
## Projekte
{% tabs %}
{% tab "Computerspende" %}
### Computerspende
Velit voluptas cumque nemo. Adipisci voluptas voluptas quia consequuntur facere ut. Sint hic aut veritatis est quis delectus aut accusantium. Quam aut repellendus officiis.
Delectus laboriosam voluptatem itaque. Quas ut ducimus aut. Minima dignissimos unde iusto. Mollitia voluptatem magni quaerat ratione dolores architecto ut assumenda.
{% endtab %}
{% tab "Tinkerfestival" %}
### Tinkerfestival
@ -37,6 +28,15 @@ Et explicabo assumenda facilis aliquam non. Iure placeat qui quia quo. Quia eaqu
Ad eveniet officia unde eligendi velit voluptas. Nemo molestias et ullam alias qui. Explicabo dolores et mollitia consectetur. Magnam sunt mollitia officia. Atque optio deserunt omnis sed.
{% endtab %}
{% tab "Computerspende" %}
### Computerspende
Velit voluptas cumque nemo. Adipisci voluptas voluptas quia consequuntur facere ut. Sint hic aut veritatis est quis delectus aut accusantium. Quam aut repellendus officiis.
Delectus laboriosam voluptatem itaque. Quas ut ducimus aut. Minima dignissimos unde iusto. Mollitia voluptatem magni quaerat ratione dolores architecto ut assumenda.
{% endtab %}
{% endtabs %}
{% endsection %}

18
styles/_components.scss
View file

@ -269,6 +269,24 @@
}
}
// This is an HTML/CSS-only tabs component. It expects the following markup:
//
// <div class="tabs-widget">
// <div id="second" class="tab">Other, totally novel content.</div>
// <a href="#second" rel="tab">Second</a>
// <div id="first" class="tab">Some content, including a heading.</div>
// <a href="#first" rel="tab">First</a>
// </div>
//
// The key thing here is that the container is a flexbox with that flows in
// reverse row direction. That means that the first element in the container
// <div> will be shown last, which means we can use the ~ and + selectors to
// target all and the immediately following tabs and / or their corresponding
// links.
// The last tab in the DOM (which is shown first because of the reversed
// flexbox) is shown by default, while the other ones are hidden. If one of the
// tabs is targeted by the URL's hash, it is shown instead and the default tab
// is hidden.
.tabs-widget {
display: flex;
flex-direction: row-reverse;