Improve styling

layouts/contact/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <main class="bg-beige lg:py-16">
+  <main class="bg-beige lg:py-32">
     {{- partial "contact-form.html" -}}
   </main>
 {{ end }}

layouts/index.html

@@ -14,7 +14,7 @@
 
       <div class="grid grid-cols-1 lg:grid-cols-2">
         <div class="p-12 lg:px-24 lg:px-36 lg:py-48">
-          <h1 class="mb-8 text-start">Over ons</h1>
+          <h1 class="mb-8 mt-0 text-start">Over ons</h1>
           <p>
             Kleinschalige Ragdoll & Noorse Boskat-cattery in Arnhem die zich
             inzet voor het fokken van sociale en gezonde kittens.
@@ -76,7 +76,7 @@ <h1 class="mb-8 text-start">Over ons</h1>
 
         <div
           class="aspect-video bg-cover lg:aspect-square"
-          {{ with (resources.Get "photos/ginny-kitten.jpg").Process "resize 427x webp" }}
+          {{ with (resources.Get "photos/avatar-kittens-fighting.jpg").Process "resize 427x webp" }}
             style="background-image: url('{{ .RelPermalink }}');"
           {{ end }}
         >

layouts/onze-poezen/section.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <main class="bg-beige lg:pb-16">
+  <main>
     <div class="flex aspect-square h-48 w-full text-white lg:aspect-auto">
       <div class="absolute aspect-auto h-48 w-full">
         {{ with (resources.Get "photos/yuki-ginny-close-up.jpg").Process "resize 1024x webp" }}

layouts/partials/contact-form.html

@@ -1,6 +1,6 @@
 <div class="grid grid-cols-1 bg-white lg:grid-cols-2">
   {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "webp" }}
-    <div class="mt-0 lg:mt-8 flex content-center bg-white lg:hidden">
+    <div class="mt-8 flex content-center bg-white lg:hidden">
       <img
         class="w-100 aspect-[16/9] object-cover"
         src="{{ .RelPermalink }}"
@@ -11,7 +11,7 @@
   {{ end }}
 
 
-  <div class="py-24 lg:px-10 grid place-items-center">
+  <div class="py-24 md:px-20">
     <h1 class="mt-0 text-center">Contact</h1>
     <div class="flex justify-center">
       <div class="mx-2 h-5 w-5">
@@ -24,6 +24,7 @@ <h1 class="mt-0 text-center">Contact</h1>
           {{- partial "facebook-logo" . -}}
         </a>
       </div>
+
       <div class="mx-2 h-5 w-5">
         <a
           class="text-stone-700"
@@ -48,27 +49,31 @@ <h1 class="mt-0 text-center">Contact</h1>
         placeholder="Vul je naam in"
         required
       />
+
       <input
         class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         type="email"
         name="Email"
         placeholder="Vul je e-mailadres in"
         required
       />
+
       <input
         class="mx-2 mb-2 border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         type="text"
         name="Onderwerp"
         placeholder="Vul het onderwerp in"
         required
       />
+
       <textarea
         class="mx-2 mb-2 resize-none border border-white border-b-stone-800 px-2 py-4 hover:border-stone-800"
         name="Bericht"
         cols="40"
         rows="5"
         placeholder="Typ hier je bericht…"
       ></textarea>
+
       <div class="text-center">
         <button
           class="my-4 whitespace-nowrap rounded-full bg-orange px-6 py-4 font-light text-white transition hover:bg-orange/75"
@@ -81,7 +86,7 @@ <h1 class="mt-0 text-center">Contact</h1>
   </div>
 
   <div class="hidden content-center bg-white lg:flex">
-    {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "resize 640x fit webp" }}
+    {{ with (resources.Get "photos/yuki-ginny-balcony-looking-outside-together.jpg").Process "resize 640x webp" }}
       <img
         class="object-cover"
         src="{{ .RelPermalink }}"