Fix UI issues on desktop and mobile (#31)

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-AXIOS-1579269

.gitignore

@@ -200,4 +200,4 @@ notes
 
 public/stylesheets/style.css
 ngrok
-
+.dccache

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.8.0
+FROM node:16-bullseye-slim
 
 ENV IS_DOCKER=true
 ENV NODE_ENV=production

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@sendgrid/mail": "^7.4.4",
     "app-root-path": "^3.0.0",
-    "axios": "^0.21.2",
+    "axios": "^0.21.3",
     "cookie-parser": "^1.4.5",
     "express": "^4.17.1",
     "express-rate-limit": "^5.2.6",
@@ -27,7 +27,7 @@
     "helmet": "^4.6.0",
     "http-errors": "^1.8.0",
     "morgan": "^1.10.0",
-    "nodemailer": "^6.6.0",
+    "nodemailer": "^6.6.1",
     "pug": "^3.0.2",
     "tailwind-hamburgers": "^1.1.1",
     "winston": "^3.3.3",

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}

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