From d294c100c6d8d430aa12ef05d3880950269fa951 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Sat, 23 Jul 2022 23:13:44 +0200
Subject: [PATCH] feat: improve WelcomeModal table of contents layout

---
 src/components/WelcomeModal.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index ec76c5b..a286bd1 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -199,7 +199,7 @@ const WelcomeModal: Component = (props) => {
               </div>
             </div>
 
-            <div class="mt-28 text-base flex flex-wrap text-center gap-7 items-center justify-center">
+            <div class="mt-24 text-base grid grid-cols-3 lg:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
               <a
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-quickstart"
@@ -210,8 +210,7 @@ const WelcomeModal: Component = (props) => {
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-why-free"
               >
-                Wieso ist Räppli <br />
-                <strong>komplett kostenlos</strong>?
+                <strong>Komplett kostenlos</strong>!
               </a>
               <a
                 class="link text-secondary-focus hover:text-secondary"
@@ -223,18 +222,16 @@ const WelcomeModal: Component = (props) => {
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-patron"
               >
-                Das Projekt
-                <br />
-                unterstützen
+                Das Projekt unterstützen
               </a>
               <a
-                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
+                class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-opensource"
               >
                 Open Source
               </a>
               <a
-                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
+                class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-thankyou"
               >
                 Danksagungen