From 80813d48e380098297ffccd0951f5f2f8b5f77d7 Mon Sep 17 00:00:00 2001
From: E <e@pastel.codes>
Date: Sun, 12 Sep 2021 11:48:35 +0100
Subject: [PATCH] Fix UI issues on desktop and mobile (#31)

---
 .gitignore        |  2 +-
 views/about.pug   | 24 ++++++++++++------------
 views/contact.pug | 15 ++++++++-------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4f6c1ed..5ae11d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -200,4 +200,4 @@ notes
 
 public/stylesheets/style.css
 ngrok
-
+.dccache
diff --git a/views/about.pug b/views/about.pug
index 68d2704..b0242f0 100644
--- a/views/about.pug
+++ b/views/about.pug
@@ -33,30 +33,30 @@ block content
             
             div
                 each val in project
-                    div
-                        div
-                            a(href=val.url)
+                    div(class="mb-10 text-center sm:text-left")
+                        div.contents
+                            a(href=val.url).contents
                                 if val.feature_image
-                                    img(class="w-2/3" src=val.feature_image)
+                                    img(class="sm:w-2/3 mx-auto sm:mx-0" src=val.feature_image)
                                 else
                                     img(src="/images/logo.png")
-                        div.mb-5
+                        div.mt-2
                             a(href=val.url)
-                                h1.font-sans.text-3xl.mt-3.mb-3 #{val.title}
+                                span(class="font-sans text-2xl sm:text-3xl mt-3 mb-3") #{val.title}
                             p.text-lg #{val.excerpt}
 
             div
                 h1.font-sans.text-6xl.wavy.my-10 Blog.
             div
                 each val in blog
-                    div
-                        div
-                            a(href=val.url)
+                    div(class="mb-10 text-center sm:text-left")
+                        div.contents
+                            a(href=val.url).contents
                                 if val.feature_image
-                                    img(class="w-2/3" src=val.feature_image)
+                                    img(class="sm:w-2/3 mx-auto sm:mx-0" src=val.feature_image)
                                 else
                                     img(src="/images/logo.png")
-                        div.mb-5
+                        div.mt-2
                             a(href=val.url)
-                                h1.font-sans.text-3xl.mt-3.mb-3 #{val.title}
+                                span(class="font-sans text-2xl sm:text-3xl mt-3 mb-3") #{val.title}
                             p.text-lg #{val.excerpt}
diff --git a/views/contact.pug b/views/contact.pug
index 8047aa1..0cf1f58 100644
--- a/views/contact.pug
+++ b/views/contact.pug
@@ -45,14 +45,15 @@ block content
                 div.mb-5
                     label(for='message') Message
                     textarea#message(class="w-full border-2 border-pink bg-black p-2 text-base" name='message' class="form-control" placeholder='Enter your message here' rows='3' required='true')
-                div.mb-5
+                div(class="mb-5 justify-center sm:justify-items-start flex sm:block")
                     .h-captcha(data-sitekey='49abba50-1813-4ab3-acbf-2a8bfff1f7c3')
-                button(type='submit' class="rounded-lg px-3 py-2 bg-pink text-black text-lg hover:ring-pink hover:ring-2 hover:bg-black hover:text-pink") Submit
+                button(type='submit' class="rounded-lg px-3 py-2 bg-pink text-black text-lg hover:ring-pink hover:ring-2 hover:bg-black hover:text-pink sm:w-auto w-full sm:text-base") Submit
 
         div
             if message
-                #contact-message
-                    p=message
-                    if success
-                        p=success
-                            span#email=email
+                div(class="mt-10 mb-6 sm:text-left text-center")
+                    #contact-message
+                        p=message
+                        if success
+                            p=success
+                                span#email.text-green=email