From 447062d183ec64b11b63ada7f549ac90bff8c552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Thu, 8 Jul 2021 16:29:24 +0200
Subject: [PATCH] Add some documentation to the tabs component

---
 index.md                | 18 +++++++++---------
 styles/_components.scss | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/index.md b/index.md
index c85d781..2f72472 100644
--- a/index.md
+++ b/index.md
@@ -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 %}
diff --git a/styles/_components.scss b/styles/_components.scss
index 4960a3c..0d2e5e0 100644
--- a/styles/_components.scss
+++ b/styles/_components.scss
@@ -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;