Improve styling

pindab0ter · Nov 12, 2023 · 98ad615 · 98ad615
1 parent 3dd4dd7
commit 98ad615
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 18 deletions.
diff --git a/assets/photos/avatar-kittens-fighting.jpg b/assets/photos/avatar-kittens-fighting.jpg
diff --git a/content/nieuws/2023-01-18-de-kittens-zijn-er/index.html b/content/nieuws/2023-01-18-de-kittens-zijn-er/index.html
@@ -8,19 +8,17 @@
     src: yuki-met-de-kleintjes.webp
 ---
 
-<p>
+<p class="mb-12">
   Vanmiddag om half 3 begon de bevalling. Yuki ging in de kraamkist liggen en
   wist precies wat ze moest doen. Kitten 1 en 2 kwamen snel ter wereld. Na een
   pauze kwamen 3 en 4. Nummer 5 liet bijna een uur op zich wachten en kwam in
   stuit. Alle kittens hebben een gewicht tussen de 94-124 gram. Yuki deed het
   super voor haar (en ons!) eerste keer, we zijn enorm trots op haar!
 </p>
 
-<p>
-  <a
-    class="whitespace-nowrap rounded-full bg-orange px-4 py-3 font-light text-white transition hover:bg-orange/75"
-    href="/kittens"
-  >
-    De kittens van Hamana
-  </a>
-</p>
+<a
+  class="whitespace-nowrap rounded-full bg-orange px-4 py-3 font-light text-white transition hover:bg-orange/75"
+  href="/kittens"
+>
+  De kittens van Hamana
+</a>
diff --git a/layouts/contact/single.html b/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 }}
diff --git a/layouts/index.html b/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 }}
         >

diff --git a/layouts/nieuws/section.html b/layouts/nieuws/section.html
@@ -29,8 +29,8 @@ <h2 class="mt-4 text-center">{{ .Title }}</h2>
             class="mx-16 mb-10 hidden grid-cols-2 bg-white last:mb-0 lg:grid"
           >
             <div class="grid content-center px-8">
-              <div>
-                <h2 class="text-center">
+              <div class="my-16">
+                <h2 class="text-center mt-0">
                   {{ .Title }}
                 </h2>
 

diff --git a/layouts/onze-poezen/section.html b/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" }}

diff --git a/layouts/partials/contact-form.html b/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 }}"