Add mobile layout

pages/homepage.htm

@@ -7,7 +7,7 @@ is_hidden = 0
 ==
 
 <div class="mx-auto py-10 px-6 max-w-6xl">
-    <div class="flex space-x-6 items-start">
+    <div class="flex md:space-x-6 flex-col md:flex-row items-start">
         <section id="ablauf" class="grow">
             {% partial 'heading' title="Ablauf" %}
             <div>
@@ -20,7 +20,7 @@ is_hidden = 0
             </div>
         </section>
 
-        <section id="anfrage" class="shadow-xl bg-neutral-200 border border-neutral-200 rounded-xl p-3 w-2/5 flex-none">
+        <section id="anfrage" class="shadow-xl mt-10 self-center md:self-none md:mt-0 bg-neutral-200 border border-neutral-200 rounded-xl p-3 max-w-lg w-full md:w-2/5 flex-none">
             {% partial 'heading' title="Anfrage" %}
             <div class="mt-4">
                 {% component 'anfrage' %}

partials/anfrage/default.htm

@@ -1,4 +1,4 @@
-<form data-request="anfrage::onSubmit" data-request-flash class="grid grid-cols-2 gap-3">
+<form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
 
     <div>
       <label for="reason" class="block text-sm font-medium text-gray-900 dark:text-white">Grund für die Feier</label>

partials/listelement.htm

@@ -1,9 +1,9 @@
-<div class="mt-3">
+<div class="mt-5 sm:mt-3">
     <div class="flex items-center">
-        <div class="flex-none bg-neutral-900 text-white w-10 h-10 flex items-center justify-center rounded-full text-xl shadow font-semibold">{{number}}</div>
-        <div class="text-2xl ml-6 font-semibold">{{title}}</div>
+        <div class="flex-none bg-neutral-900 text-white w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center rounded-full sm:text-xl shadow font-semibold">{{number}}</div>
+        <div class="text-lg sm:text-2xl ml-3 sm:ml-6 font-semibold">{{title}}</div>
     </div>
-    <div class="ml-16 text-lg">
+    <div class="sm:ml-16 sm:text-lg">
         {{ content | raw }}
     </div>
 </div>