From 06c20e43a14c3c73dd11a2bcbb02d8ff96ffc0f5 Mon Sep 17 00:00:00 2001
From: Arcath <adam@alaycock.co.uk>
Date: Mon, 20 May 2024 20:04:29 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20Arcath/a?=
 =?UTF-8?q?laycock.co.uk-jekyll@c03b0bfa59bbe915ce587fb0da56a60c051d1802?=
 =?UTF-8?q?=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08/active-record-like-search-results.html | 13 +--
 2013/08/expects.html                          | 13 +--
 2013/08/issue-37.html                         | 13 +--
 2013/11/cancan-route-contraints.html          | 13 +--
 2014/02/deploying-adobe-air-and-air-apps.html | 13 +--
 ...ershell-script-to-update-sims-and-fms.html | 13 +--
 2014/04/a-jekyll-extension-for-atom.html      | 13 +--
 ...g-the-less-compiler-for-compile-watch.html | 13 +--
 2015/06/jekyll-atom-1-0-0.html                | 13 +--
 ...g-apple-downloads-on-a-windows-server.html | 13 +--
 2015/07/caching-apple-downloads.html          | 13 +--
 2015/07/sodb.html                             | 13 +--
 2015/11/motorway.html                         | 13 +--
 2016/01/improving-speed-in-jekyll-atom.html   | 13 +--
 2016/01/jekyll-atom-1-1-0.html                | 13 +--
 2016/01/less-in-a-wordpress-theme.html        | 13 +--
 2016/01/state-of-the-universe.html            | 13 +--
 2016/02/ajax-page-loading-in-jekyll.html      | 13 +--
 2016/02/building-windows-10-images.html       | 13 +--
 2016/02/setting-up-lunr-js-in-jekyll.html     | 19 +++--
 ...sing-jekyll-atom-from-start-to-finish.html | 13 +--
 2016/03/jekyll-atom-1-2-0.html                | 13 +--
 2016/03/react.html                            | 13 +--
 .../07/radius-with-windows-server-2012r2.html | 13 +--
 2016/08/everything-option-theme.html          | 13 +--
 2016/09/plugin-highlight-crop-thumbnails.html | 13 +--
 2016/09/surface-pro-3-review.html             | 13 +--
 2016/09/wp-controls.html                      | 13 +--
 2016/10/post-formats-theme.html               | 13 +--
 2016/11/electron-app-customer-support.html    | 13 +--
 2016/11/osticket-api-proxy.html               | 13 +--
 2016/11/screeps-part-1-rc1-rc2.html           | 13 +--
 2016/11/screeps-part-2-rc3.html               | 13 +--
 2016/11/screeps-part-3-rc4-surprise.html      | 13 +--
 2016/11/screeps-part-4.html                   | 13 +--
 ...5-finishing-rc4-rewriting-creeps-gcl2.html | 13 +--
 2016/11/screeps-part-6-poking-enemy.html      | 13 +--
 2016/11/squirrel-release-server.html          | 13 +--
 2016/12/pac-file-system.html                  | 13 +--
 2016/12/remove-guided-access-mode-ipad.html   | 13 +--
 .../screeps-part-7-a-complete-re-write.html   | 13 +--
 .../screeps-part-8-constructors-defcon.html   | 13 +--
 2017/01/gcl3-another-respawn.html             | 13 +--
 .../screeps-part-10-rc6-twice-third-room.html | 13 +--
 .../screeps-part-11-the-great-depression.html | 13 +--
 2017/03/theme-options.html                    | 13 +--
 2017/05/etch-router.html                      | 13 +--
 2017/06/b4rn.html                             | 13 +--
 2017/06/screeps-part-12-start-again.html      | 13 +--
 2017/07/screeps-part-13-building-up.html      | 13 +--
 ...rt-14-more-improvements-and-a-respawn.html | 13 +--
 2017/07/screeps-part-15-new-empire.html       | 13 +--
 2017/07/screeps-part-16-party-time.html       | 13 +--
 2017/07/screeps-part-17-room-planning.html    | 13 +--
 ...ting-an-msi-transform-with-super-orca.html | 13 +--
 2017/09/office-update-remover.html            | 13 +--
 2017/09/screeps-part-18-typescript.html       | 13 +--
 .../09/screeps-part-19-operating-systems.html | 13 +--
 2017/10/screeps-part-20-bunkers.html          | 13 +--
 .../11/screeps-part-21-optimizing-the-os.html | 13 +--
 ...art-22-war-and-claiming-another-shard.html | 13 +--
 ...-10-colour-filter-shortcut-with-a-gpo.html | 13 +--
 ...nqueue_less-a-replacement-for-wp-less.html | 13 +--
 2018/12/moving-to-gatsby.html                 | 13 +--
 2018/12/robocopy.html                         | 13 +--
 2019/01/generated-social-images.html          | 13 +--
 ...ify-cma-on-the-filesystem-with-gatsby.html | 13 +--
 2019/02/wp-camo.html                          | 13 +--
 2019/02/wp-update-provider.html               | 13 +--
 2019/03/using-wix-to-create-an-msi.html       | 13 +--
 2019/04/dark-mode.html                        | 13 +--
 ...htmr-to-bring-life-to-links-in-gatsby.html | 13 +--
 ...he-default-search-provider-for-chrome.html | 13 +--
 2019/11/destructuring-in-javascript.html      | 13 +--
 2020/02/css-grid-layout.html                  | 13 +--
 2020/02/deploying-swiggle-screen-cover.html   | 13 +--
 2020/03/moving-to-mdx.html                    | 13 +--
 2020/07/wallpaper-generation-on-a-domain.html | 13 +--
 2020/08/utils-library.html                    | 13 +--
 2021/01/creating-a-wds-discover-image.html    | 13 +--
 2021/02/next.js.html                          | 13 +--
 2021/03/mdx-bundler.html                      | 13 +--
 2021/04/images-with-mdx-bundler.html          | 13 +--
 2021/06/adsync-missing.html                   | 13 +--
 .../06/improving-nextjs-file-performance.html | 13 +--
 2022/03/windows-update-for-business.html      | 13 +--
 ...apercut-client-deployment-with-intune.html | 13 +--
 about.html => about/index.html                | 13 +--
 blog/index.html                               | 13 +--
 contact.html => contact/index.html            | 13 +--
 css/style.css                                 | 85 ++++++++++++++-----
 index.html                                    | 19 +++--
 tag/adauth/index.html                         | 15 ++--
 tag/adsync/index.html                         | 15 ++--
 tag/apple/index.html                          | 15 ++--
 tag/atom/index.html                           | 15 ++--
 tag/azure/index.html                          | 15 ++--
 tag/b4rn/index.html                           | 15 ++--
 tag/blog/index.html                           | 15 ++--
 tag/cancan/index.html                         | 15 ++--
 tag/chrome/index.html                         | 15 ++--
 tag/compilewatch/index.html                   | 15 ++--
 tag/css/index.html                            | 15 ++--
 tag/deployments/index.html                    | 15 ++--
 tag/deploymets/index.html                     | 15 ++--
 tag/ed-itsolutions/index.html                 | 15 ++--
 tag/electron/index.html                       | 15 ++--
 tag/featured/index.html                       | 15 ++--
 tag/gatsby/index.html                         | 15 ++--
 tag/gpo/index.html                            | 15 ++--
 tag/group-policy/index.html                   | 15 ++--
 tag/ios/index.html                            | 15 ++--
 tag/javascript/index.html                     | 15 ++--
 tag/jekyll-atom/index.html                    | 15 ++--
 tag/jekyll/index.html                         | 15 ++--
 tag/mdx/index.html                            | 15 ++--
 tag/motorway/index.html                       | 15 ++--
 tag/netlify/index.html                        | 15 ++--
 tag/next-js/index.html                        | 15 ++--
 tag/node/index.html                           | 15 ++--
 tag/office-2016/index.html                    | 15 ++--
 tag/papercut/index.html                       | 15 ++--
 tag/php/index.html                            | 15 ++--
 tag/plugin-highlight/index.html               | 15 ++--
 tag/post-formats/index.html                   | 15 ++--
 tag/powershell/index.html                     | 15 ++--
 tag/react/index.html                          | 15 ++--
 tag/review/index.html                         | 15 ++--
 tag/ruby/index.html                           | 15 ++--
 tag/screeps/index.html                        | 15 ++--
 tag/security/index.html                       | 15 ++--
 tag/sims/index.html                           | 15 ++--
 tag/sodb/index.html                           | 15 ++--
 tag/squid/index.html                          | 15 ++--
 tag/tailwindcss/index.html                    | 15 ++--
 tag/tools/index.html                          | 15 ++--
 tag/typescript/index.html                     | 15 ++--
 tag/updates/index.html                        | 15 ++--
 tag/wds/index.html                            | 15 ++--
 tag/windows-10/index.html                     | 15 ++--
 tag/windows-update/index.html                 | 15 ++--
 tag/windows/index.html                        | 15 ++--
 tag/windows10/index.html                      | 15 ++--
 tag/wix/index.html                            | 15 ++--
 tag/wordpress/index.html                      | 15 ++--
 tag/work/index.html                           | 15 ++--
 uses.html => uses/index.html                  | 13 +--
 147 files changed, 1146 insertions(+), 957 deletions(-)
 rename about.html => about/index.html (86%)
 rename contact.html => contact/index.html (78%)
 rename uses.html => uses/index.html (86%)

diff --git a/2013/08/active-record-like-search-results.html b/2013/08/active-record-like-search-results.html
index c2fa1d1..fff64e9 100644
--- a/2013/08/active-record-like-search-results.html
+++ b/2013/08/active-record-like-search-results.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Active Record like Search Results</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Active Record like Search Results</h1>
   <ul class="flex gap-2">
@@ -110,7 +111,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Active Record like
 <p>Hardly a huge class is it? This is a little rough around the edges but it serves its purpose and when combined with AR like search methods will be incredibly easy to read and use.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2013/08/expects.html b/2013/08/expects.html
index cb887a8..e84bdc8 100644
--- a/2013/08/expects.html
+++ b/2013/08/expects.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Expects</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Expects</h1>
   <ul class="flex gap-2">
@@ -81,7 +82,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Expects</h1>
 <p>As I have said Expects main audience is Gem Developers who want to stop their code doing something damaging when the end user gives it an input that its not expecting.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2013/08/issue-37.html b/2013/08/issue-37.html
index e8ca8e1..0e26e6b 100644
--- a/2013/08/issue-37.html
+++ b/2013/08/issue-37.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Issue 37</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Issue 37</h1>
   <ul class="flex gap-2">
@@ -93,7 +94,7 @@ <h2 id="the-fix">The fix</h2>
 <p>Anonymous bind is going to be disabled by default but can be turned back on using <code class="language-plaintext highlighter-rouge">c.anonymous_bind = true</code> during your <code class="language-plaintext highlighter-rouge">Adauth.configure</code> block.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2013/11/cancan-route-contraints.html b/2013/11/cancan-route-contraints.html
index a701561..ff6e2ad 100644
--- a/2013/11/cancan-route-contraints.html
+++ b/2013/11/cancan-route-contraints.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>CanCan Route Constraints</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">CanCan Route Constraints</h1>
   <ul class="flex gap-2">
@@ -71,7 +72,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">CanCan Route Const
 <p>This means that for anyone not given manage permissions on sidekiq the route simply wont exist, you will get a 404 instead of a 403.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2014/02/deploying-adobe-air-and-air-apps.html b/2014/02/deploying-adobe-air-and-air-apps.html
index 3cffdf2..94d6c27 100644
--- a/2014/02/deploying-adobe-air-and-air-apps.html
+++ b/2014/02/deploying-adobe-air-and-air-apps.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Deploying Adobe Air and Air Apps</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Deploying Adobe Air and Air Apps</h1>
   <ul class="flex gap-2">
@@ -105,7 +106,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Deploying Adobe Ai
 <p>Thats about it, our script makes deploying stuff via silent exes quite easy and safe. You can use GPP to delete the key files and have the script automatically re-install the software (unless the exe see the target product and ignores the request).</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2014/02/powershell-script-to-update-sims-and-fms.html b/2014/02/powershell-script-to-update-sims-and-fms.html
index 75b4cfc..940be29 100644
--- a/2014/02/powershell-script-to-update-sims-and-fms.html
+++ b/2014/02/powershell-script-to-update-sims-and-fms.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Powershell script to update SIMS & FMS</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Powershell script to update SIMS & FMS</h1>
   <ul class="flex gap-2">
@@ -88,7 +89,7 @@ <h2 id="a-disclaimer">A Disclaimer</h2>
 <p>I will happily respond to queries about this script and any suggestions for improvements will be taken seriously.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2014/04/a-jekyll-extension-for-atom.html b/2014/04/a-jekyll-extension-for-atom.html
index f792a9a..77152b8 100644
--- a/2014/04/a-jekyll-extension-for-atom.html
+++ b/2014/04/a-jekyll-extension-for-atom.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>A Jekyll extension for Atom</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">A Jekyll extension for Atom</h1>
   <ul class="flex gap-2">
@@ -52,7 +53,7 @@ <h3 id="what-can-it-do">What can it do?</h3>
 <p>I have a couple of ideas for expanding it but I need to look more at how <a href="http://atom.io/">Atom</a> works behind the scenes and whether I can link into things like autocomplete.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2015/04/creating-the-less-compiler-for-compile-watch.html b/2015/04/creating-the-less-compiler-for-compile-watch.html
index cc1e188..04665cd 100644
--- a/2015/04/creating-the-less-compiler-for-compile-watch.html
+++ b/2015/04/creating-the-less-compiler-for-compile-watch.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Creating the Less compiler for compile-watch</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Creating the Less compiler for compile-watch</h1>
   <ul class="flex gap-2">
@@ -118,7 +119,7 @@ <h2 id="open-a-pull-request">Open a pull request</h2>
 
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2015/06/jekyll-atom-1-0-0.html b/2015/06/jekyll-atom-1-0-0.html
index 335e9e6..6ef7334 100644
--- a/2015/06/jekyll-atom-1-0-0.html
+++ b/2015/06/jekyll-atom-1-0-0.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Jekyll Atom 1.0.0</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Jekyll Atom 1.0.0</h1>
   <ul class="flex gap-2">
@@ -52,7 +53,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Jekyll Atom 1.0.0<
 <p>I have some ideas for improvements &amp; new features that I will be looking at in the near future.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2015/07/caching-apple-downloads-on-a-windows-server.html b/2015/07/caching-apple-downloads-on-a-windows-server.html
index 204ada5..f0e4d2a 100644
--- a/2015/07/caching-apple-downloads-on-a-windows-server.html
+++ b/2015/07/caching-apple-downloads-on-a-windows-server.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Caching Apple downloads on a Windows server</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Caching Apple downloads on a Windows server</h1>
   <ul class="flex gap-2">
@@ -128,7 +129,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Caching Apple down
 <p>My <a href="/2015/07/caching-apple-downloads/">original article</a> has more about what we are actually doing with this config.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2015/07/caching-apple-downloads.html b/2015/07/caching-apple-downloads.html
index e8133b1..c4586cf 100644
--- a/2015/07/caching-apple-downloads.html
+++ b/2015/07/caching-apple-downloads.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Caching Apple Downloads</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Caching Apple Downloads</h1>
   <ul class="flex gap-2">
@@ -120,7 +121,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Caching Apple Down
 <p>I will keep this article up to date with any improvements I make over time but for now it seems pretty good.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2015/07/sodb.html b/2015/07/sodb.html
index 5a054bb..755c2c8 100644
--- a/2015/07/sodb.html
+++ b/2015/07/sodb.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>SODB</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">SODB</h1>
   <ul class="flex gap-2">
@@ -78,7 +79,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">SODB</h1>
 </code></pre></div></div>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2015/11/motorway.html b/2015/11/motorway.html
index 00b1571..9247c5b 100644
--- a/2015/11/motorway.html
+++ b/2015/11/motorway.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Motorway</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Motorway</h1>
   <ul class="flex gap-2">
@@ -144,7 +145,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Motorway</h1>
 <p>Hopefully Motorway will help you as much as it helped me.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/01/improving-speed-in-jekyll-atom.html b/2016/01/improving-speed-in-jekyll-atom.html
index 4b48730..9f79085 100644
--- a/2016/01/improving-speed-in-jekyll-atom.html
+++ b/2016/01/improving-speed-in-jekyll-atom.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Improving speed in Jekyll-Atom</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Improving speed in Jekyll-Atom</h1>
   <ul class="flex gap-2">
@@ -42,7 +43,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Improving speed in
 <p>I wont be making this a default option in Jekyll-Atom for now at least, if you want to use it just add to your <code class="language-plaintext highlighter-rouge">_config.yml</code>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/01/jekyll-atom-1-1-0.html b/2016/01/jekyll-atom-1-1-0.html
index 214023c..9f83d79 100644
--- a/2016/01/jekyll-atom-1-1-0.html
+++ b/2016/01/jekyll-atom-1-1-0.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Jekyll Atom 1.1.0</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Jekyll Atom 1.1.0</h1>
   <ul class="flex gap-2">
@@ -74,7 +75,7 @@ <h2 id="in-conclusion">In Conclusion</h2>
 <p>Any issues let me know in the github repository!</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/01/less-in-a-wordpress-theme.html b/2016/01/less-in-a-wordpress-theme.html
index 8c5d6a8..afa5fe6 100644
--- a/2016/01/less-in-a-wordpress-theme.html
+++ b/2016/01/less-in-a-wordpress-theme.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>LESS in a WordPress theme</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">LESS in a WordPress theme</h1>
   <ul class="flex gap-2">
@@ -85,7 +86,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">LESS in a WordPres
 
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/01/state-of-the-universe.html b/2016/01/state-of-the-universe.html
index c72d05b..6a498db 100644
--- a/2016/01/state-of-the-universe.html
+++ b/2016/01/state-of-the-universe.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>State of the Universe</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">State of the Universe</h1>
   <ul class="flex gap-2">
@@ -84,7 +85,7 @@ <h2 id="interesting-things--work">Interesting things @ Work</h2>
 <p>I have a long list of Domain Rebuilds to do at the moment which again is giving me plenty of time for experimentation so there should be some posts coming from that.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/02/ajax-page-loading-in-jekyll.html b/2016/02/ajax-page-loading-in-jekyll.html
index 02d09de..1da4388 100644
--- a/2016/02/ajax-page-loading-in-jekyll.html
+++ b/2016/02/ajax-page-loading-in-jekyll.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>AJAX Page loading in Jekyll (Or any static site)</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">AJAX Page loading in Jekyll (Or any static site)</h1>
   <ul class="flex gap-2">
@@ -171,7 +172,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">AJAX Page loading
 </blockquote>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/02/building-windows-10-images.html b/2016/02/building-windows-10-images.html
index 0424a4f..3794093 100644
--- a/2016/02/building-windows-10-images.html
+++ b/2016/02/building-windows-10-images.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Building Windows 10 Images</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Building Windows 10 Images</h1>
   <ul class="flex gap-2">
@@ -60,7 +61,7 @@ <h2 id="future-issues">Future Issues</h2>
 <p>I hope that Microsoft do something about this issues before the Redstone update otherwise they are drastically increasing our workload if we want to stay up to date.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/02/setting-up-lunr-js-in-jekyll.html b/2016/02/setting-up-lunr-js-in-jekyll.html
index d5ed112..bcdb4a8 100644
--- a/2016/02/setting-up-lunr-js-in-jekyll.html
+++ b/2016/02/setting-up-lunr-js-in-jekyll.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Setting up lunr.js in Jekyll</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Setting up lunr.js in Jekyll</h1>
   <ul class="flex gap-2">
@@ -562,7 +563,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Setting up lunr.js
     
         </span><span class="nl">"about"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
             </span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"About"</span><span class="p">,</span><span class="w">
-            </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/about.html"</span><span class="p">,</span><span class="w">
+            </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/about/.html"</span><span class="p">,</span><span class="w">
             </span><span class="nl">"summary"</span><span class="p">:</span><span class="w"> </span><span class="s2">"I am a School Network Manager from the North West of England.![Adam Laycock](/assets/profile.jpg)I&amp;apos;ve spent the last 15 years working as an IT Engineer in Schools. I&amp;apos;ve worked with all kinds of technologies, everything from Interactive Displays &amp;amp; Hall Audio systems through to USB Microscopes.As an Engineer at Ed-IT Solutions, I&amp;apos;ve..."</span><span class="w">
         </span><span class="p">}</span><span class="w">
         </span><span class="p">,</span><span class="w">
@@ -576,7 +577,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Setting up lunr.js
     
         </span><span class="nl">"contact"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
             </span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Contact"</span><span class="p">,</span><span class="w">
-            </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/contact.html"</span><span class="p">,</span><span class="w">
+            </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/contact/.html"</span><span class="p">,</span><span class="w">
             </span><span class="nl">"summary"</span><span class="p">:</span><span class="w"> </span><span class="s2">"If you need to get in touch I can be reached on a few social platforms and by email.## Social Media&amp;gt; [GitHub @Arcath](https://www.github.com/Arcath)&amp;gt; [Twitter @AdamMLaycock](https://www.twitter.com/AdamMLaycock)&amp;gt; [Polywork](https://cv.alaycock.co.uk)## By Email&amp;gt; adam@alaycock.co.uk"</span><span class="w">
         </span><span class="p">}</span><span class="w">
         </span><span class="p">,</span><span class="w">
@@ -597,7 +598,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Setting up lunr.js
     
         </span><span class="nl">"uses"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
             </span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uses"</span><span class="p">,</span><span class="w">
-            </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/uses.html"</span><span class="p">,</span><span class="w">
+            </span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/uses/.html"</span><span class="p">,</span><span class="w">
             </span><span class="nl">"summary"</span><span class="p">:</span><span class="w"> </span><span class="s2">"This is a mostly complete list of the software I use on a day to day basis.# Developer## Editor- [Visual Studio Code](https://code.visualstudio.com/). I&amp;apos;ve been using VSCode for a while now and its become my go to editor for everything.- [Railscasts Plus](https://marketplace.visualstudio.com/items?itemName=marlosirapuan.vscode-theme-railscasts-plus) editor theme.- [JetBrains Mono](https://www.jetbrains.com/lp/mono/). A great font with support..."</span><span class="w">
         </span><span class="p">}</span><span class="w">
         </span><span class="p">,</span><span class="w">
@@ -1044,7 +1045,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Setting up lunr.js
 <p>This is a great feature which should help users find content easier.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/02/using-jekyll-atom-from-start-to-finish.html b/2016/02/using-jekyll-atom-from-start-to-finish.html
index d6a2438..9dbcbf7 100644
--- a/2016/02/using-jekyll-atom-from-start-to-finish.html
+++ b/2016/02/using-jekyll-atom-from-start-to-finish.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Using Jekyll Atom from start to finish</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Using Jekyll Atom from start to finish</h1>
   <ul class="flex gap-2">
@@ -70,7 +71,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Using Jekyll Atom
 <p>That covers most of the features I use on a day to day basis but there are quite a few more detailed in the <a href="https://github.com/Arcath/jekyll-atom/blob/master/README.md#functions">Readme</a> which I encourage you to read.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/03/jekyll-atom-1-2-0.html b/2016/03/jekyll-atom-1-2-0.html
index a508aca..1d37ecc 100644
--- a/2016/03/jekyll-atom-1-2-0.html
+++ b/2016/03/jekyll-atom-1-2-0.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Jekyll Atom 1.2.0</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Jekyll Atom 1.2.0</h1>
   <ul class="flex gap-2">
@@ -55,7 +56,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Jekyll Atom 1.2.0<
 <p>Jekyll-Atom now hits everything a package can do bar providing a service, making it the one stop shop for Jekyll! It has grown so much from my original package and has become an integral part of my workflow, this blog would not be what it is today without Jekyll-Atom.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/03/react.html b/2016/03/react.html
index 9bb7015..b2cc9c9 100644
--- a/2016/03/react.html
+++ b/2016/03/react.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">React</h1>
   <ul class="flex gap-2">
@@ -247,7 +248,7 @@ <h2 id="in-conclusion">In Conclusion</h2>
 <p>I recommend trying this out on your sites, and I hope it makes you think of a static site as much more than static HTML.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/07/radius-with-windows-server-2012r2.html b/2016/07/radius-with-windows-server-2012r2.html
index 7970037..6305ae9 100644
--- a/2016/07/radius-with-windows-server-2012r2.html
+++ b/2016/07/radius-with-windows-server-2012r2.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>RADIUS With Windows Server 2012R2</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">RADIUS With Windows Server 2012R2</h1>
   <ul class="flex gap-2">
@@ -136,7 +137,7 @@ <h2 id="done">Done</h2>
 <p>You now have a RADIUS a network! Domain joined computers can now connect with seemingly no password as their computer account allows them to authenticate. None domain devices can authenticate with any user account.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/08/everything-option-theme.html b/2016/08/everything-option-theme.html
index e253a5c..377d5f9 100644
--- a/2016/08/everything-option-theme.html
+++ b/2016/08/everything-option-theme.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Everything an Option in the Theme</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Everything an Option in the Theme</h1>
   <ul class="flex gap-2">
@@ -74,7 +75,7 @@ <h2 id="everything-an-option">Everything an Option</h2>
 <p>There are a couple of sites out there running plugins that specifically alter the theme like Ridge who wanted to apply thier letter head colours to headings. It would have looked odd to add Ridge colour headers to every school when only they needed it. In this case I added a filter so the plugin could colour headings in theme and the functionality was there if we ever need it in the future.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/09/plugin-highlight-crop-thumbnails.html b/2016/09/plugin-highlight-crop-thumbnails.html
index 759f98c..a258d61 100644
--- a/2016/09/plugin-highlight-crop-thumbnails.html
+++ b/2016/09/plugin-highlight-crop-thumbnails.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Plugin Highlight: Crop Thumbnails</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Plugin Highlight: Crop Thumbnails</h1>
   <ul class="flex gap-2">
@@ -62,7 +63,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Plugin Highlight:
 <p>You can get Crop Thumbnails from wordpress.org <a href="https://en-gb.wordpress.org/plugins/crop-thumbnails/">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/09/surface-pro-3-review.html b/2016/09/surface-pro-3-review.html
index c915e15..b813e22 100644
--- a/2016/09/surface-pro-3-review.html
+++ b/2016/09/surface-pro-3-review.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Surface Pro 3 a Review</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Surface Pro 3 a Review</h1>
   <ul class="flex gap-2">
@@ -72,7 +73,7 @@ <h2 id="the-surface-pro-3-overall">The Surface Pro 3 Overall</h2>
 <p>Overall I thoroughly recommend the Surface Pro 3 or any Surface Pro. The price is pretty high but it is worth the money.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/09/wp-controls.html b/2016/09/wp-controls.html
index 4ba23b1..b0b5616 100644
--- a/2016/09/wp-controls.html
+++ b/2016/09/wp-controls.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>WP Controls, Multiple Icons & Images for WordPress</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">WP Controls, Multiple Icons & Images for WordPress</h1>
   <ul class="flex gap-2">
@@ -97,7 +98,7 @@ <h2 id="the-future">The Future</h2>
 <p>If anyone out there wants to add their controls or improve the ones I created feel free to open a PR on GitHub.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/10/post-formats-theme.html b/2016/10/post-formats-theme.html
index a007058..e575cc3 100644
--- a/2016/10/post-formats-theme.html
+++ b/2016/10/post-formats-theme.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Post Formats in your WordPress Theme</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Post Formats in your WordPress Theme</h1>
   <ul class="flex gap-2">
@@ -166,7 +167,7 @@ <h2 id="the-future">The Future</h2>
 <p>Long term I would love to see WordPress give us the ability to add our own post formats. I would love to be able to add a document format that takes a PDF and displays it nicely (looking at <a href="https://mozilla.github.io/pdf.js/">pdf.js</a>).</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/electron-app-customer-support.html b/2016/11/electron-app-customer-support.html
index b325e6d..abf8ac7 100644
--- a/2016/11/electron-app-customer-support.html
+++ b/2016/11/electron-app-customer-support.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Electron App to help with customer support</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Electron App to help with customer support</h1>
   <ul class="flex gap-2">
@@ -72,7 +73,7 @@ <h2 id="reporting">Reporting</h2>
 <p>The current release (at the time of writing) sends all the gathered data to an API using the computers SID to identify it within the database. This is in its early stages and has a huge scope for use in the long term. I see it allowing us to remotely trigger commands and other tasks. Keeping us up to date on the goings on in our schools.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/osticket-api-proxy.html b/2016/11/osticket-api-proxy.html
index 3b5b8b9..dce9b4a 100644
--- a/2016/11/osticket-api-proxy.html
+++ b/2016/11/osticket-api-proxy.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>OSTicket API Proxy</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">OSTicket API Proxy</h1>
   <ul class="flex gap-2">
@@ -87,7 +88,7 @@ <h2 id="using-osticket-api-proxy">Using OSTicket API Proxy</h2>
 <p>We have been using this quite successfully for a couple of weeks now and I am pretty happy with it. It would be possible to move the topic ID into your post data if you want that selection to be made by the user in your app.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/screeps-part-1-rc1-rc2.html b/2016/11/screeps-part-1-rc1-rc2.html
index 5e9da46..4512fff 100644
--- a/2016/11/screeps-part-1-rc1-rc2.html
+++ b/2016/11/screeps-part-1-rc1-rc2.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 1 – RC1 & RC2</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 1 – RC1 & RC2</h1>
   <ul class="flex gap-2">
@@ -95,7 +96,7 @@ <h2 id="what-is-next">What is Next?</h2>
 <p>For RC3 I am going to focus on speed. I can’t claim more rooms until I raise my GCL (Global Control Level) which takes a ton of energy. More Energy, Faster.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/screeps-part-2-rc3.html b/2016/11/screeps-part-2-rc3.html
index 657ead2..b21b825 100644
--- a/2016/11/screeps-part-2-rc3.html
+++ b/2016/11/screeps-part-2-rc3.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 2 – RC3 & Beginnings of Multi-room</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 2 – RC3 & Beginnings of Multi-room</h1>
   <ul class="flex gap-2">
@@ -84,7 +85,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/607a841ce24ab274e11f46bbcceae9114d4741ad">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/screeps-part-3-rc4-surprise.html b/2016/11/screeps-part-3-rc4-surprise.html
index 8a946e8..d02abe8 100644
--- a/2016/11/screeps-part-3-rc4-surprise.html
+++ b/2016/11/screeps-part-3-rc4-surprise.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 3 – RC4 & a Surprise</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 3 – RC4 & a Surprise</h1>
   <ul class="flex gap-2">
@@ -122,7 +123,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/commit/f0841553f1a391a00fd42331d791c2af303978ec">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/screeps-part-4.html b/2016/11/screeps-part-4.html
index 2e03dbf..5ae6e25 100644
--- a/2016/11/screeps-part-4.html
+++ b/2016/11/screeps-part-4.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 4 – We can rebuild, we have the AI</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 4 – We can rebuild, we have the AI</h1>
   <ul class="flex gap-2">
@@ -110,7 +111,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/commit/9e9732b57a94d5c7338072656850eac2d5f8e442">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/screeps-part-5-finishing-rc4-rewriting-creeps-gcl2.html b/2016/11/screeps-part-5-finishing-rc4-rewriting-creeps-gcl2.html
index dad9bf8..cf3ee23 100644
--- a/2016/11/screeps-part-5-finishing-rc4-rewriting-creeps-gcl2.html
+++ b/2016/11/screeps-part-5-finishing-rc4-rewriting-creeps-gcl2.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 5 – Finishing RC4 and Rewriting the Creeps for GCL2</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 5 – Finishing RC4 and Rewriting the Creeps for GCL2</h1>
   <ul class="flex gap-2">
@@ -154,7 +155,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/daf0c012a7820b7293c229afea01d8456d4d3b6a">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/screeps-part-6-poking-enemy.html b/2016/11/screeps-part-6-poking-enemy.html
index 37dacd5..58a2e9b 100644
--- a/2016/11/screeps-part-6-poking-enemy.html
+++ b/2016/11/screeps-part-6-poking-enemy.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 6 – Poking the Enemy</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 6 – Poking the Enemy</h1>
   <ul class="flex gap-2">
@@ -184,7 +185,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/09fb0457a6575056f70e282aff8cc70ecfebce4a">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/11/squirrel-release-server.html b/2016/11/squirrel-release-server.html
index 1b4bdab..f4d0572 100644
--- a/2016/11/squirrel-release-server.html
+++ b/2016/11/squirrel-release-server.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Squirrel Release Server</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Squirrel Release Server</h1>
   <ul class="flex gap-2">
@@ -72,7 +73,7 @@ <h2 id="the-future">The Future</h2>
 <p>Squirrel Release Server is very low featured, very are some obvious improvements that can be made mainly Mac support but I don’t have a Mac or a squirrel app that works on Mac to test with (PRs welcome).</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/12/pac-file-system.html b/2016/12/pac-file-system.html
index d3985d1..96f9aae 100644
--- a/2016/12/pac-file-system.html
+++ b/2016/12/pac-file-system.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>A PAC File System using Jekyll</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">A PAC File System using Jekyll</h1>
   <ul class="flex gap-2">
@@ -72,7 +73,7 @@ <h2 id="the-future">The Future</h2>
 <p>Once we are happy we are going to roll it out to every school, even if they need no proxy settings. We have a template called direct which as you might have guessed returns DIRECT for every request. This allows a school to use a PAC file that does nothing so that if and when they change filtering solution we can change the template in the config and sit back as they suddenly start using a proxy server with no on site config changes.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/12/remove-guided-access-mode-ipad.html b/2016/12/remove-guided-access-mode-ipad.html
index a924939..30a979c 100644
--- a/2016/12/remove-guided-access-mode-ipad.html
+++ b/2016/12/remove-guided-access-mode-ipad.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Remove Guided Access Mode on an iPad</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Remove Guided Access Mode on an iPad</h1>
   <ul class="flex gap-2">
@@ -54,7 +55,7 @@ <h2 id="remove-guided-access">Remove Guided Access</h2>
 <p>Your iPad is now back to normal.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/12/screeps-part-7-a-complete-re-write.html b/2016/12/screeps-part-7-a-complete-re-write.html
index a6be590..69586ef 100644
--- a/2016/12/screeps-part-7-a-complete-re-write.html
+++ b/2016/12/screeps-part-7-a-complete-re-write.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 7 – A complete Re Write</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 7 – A complete Re Write</h1>
   <ul class="flex gap-2">
@@ -177,7 +178,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/089517067942a892ed96a70c195b300335b79b60">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2016/12/screeps-part-8-constructors-defcon.html b/2016/12/screeps-part-8-constructors-defcon.html
index 03904c6..3a10232 100644
--- a/2016/12/screeps-part-8-constructors-defcon.html
+++ b/2016/12/screeps-part-8-constructors-defcon.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 8 – Constructors & DEFCON</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 8 – Constructors & DEFCON</h1>
   <ul class="flex gap-2">
@@ -129,7 +130,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/ca873557daf0cf6cfc3da58dc55d653d55f04d97">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/01/gcl3-another-respawn.html b/2017/01/gcl3-another-respawn.html
index 5cba4ef..a18cc6d 100644
--- a/2017/01/gcl3-another-respawn.html
+++ b/2017/01/gcl3-another-respawn.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 9 – GCL3 and Another Respawn</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 9 – GCL3 and Another Respawn</h1>
   <ul class="flex gap-2">
@@ -70,7 +71,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can read more about Screeps on their <a href="https://screeps.com/">site</a>. I purchased it through steam giving me the permanent 10 CPU and the desktop client.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/01/screeps-part-10-rc6-twice-third-room.html b/2017/01/screeps-part-10-rc6-twice-third-room.html
index eb7f70a..228b5a2 100644
--- a/2017/01/screeps-part-10-rc6-twice-third-room.html
+++ b/2017/01/screeps-part-10-rc6-twice-third-room.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 10 – RC6 Twice and a Third Room</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 10 – RC6 Twice and a Third Room</h1>
   <ul class="flex gap-2">
@@ -124,7 +125,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/569b694ebaf313439c244ffa6bf09e6a3217e081">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/01/screeps-part-11-the-great-depression.html b/2017/01/screeps-part-11-the-great-depression.html
index 1435df4..0143d06 100644
--- a/2017/01/screeps-part-11-the-great-depression.html
+++ b/2017/01/screeps-part-11-the-great-depression.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 11 – The Great Depression</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 11 – The Great Depression</h1>
   <ul class="flex gap-2">
@@ -78,7 +79,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/f8435962e8dc42d23f83e6d01ed7bf2afc38b222">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/03/theme-options.html b/2017/03/theme-options.html
index cd2af02..79a965e 100644
--- a/2017/03/theme-options.html
+++ b/2017/03/theme-options.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Theme Options</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Theme Options</h1>
   <ul class="flex gap-2">
@@ -120,7 +121,7 @@ <h2 id="using-it">Using It.</h2>
 <p>Theme options is a pretty simple library, I will update it more in the future as I need to. Feel free to open issues on GitHub if you have any suggestions or issues.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/05/etch-router.html b/2017/05/etch-router.html
index 66e8041..0876c83 100644
--- a/2017/05/etch-router.html
+++ b/2017/05/etch-router.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Etch Router</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Etch Router</h1>
   <ul class="flex gap-2">
@@ -89,7 +90,7 @@ <h2 id="the-future">The Future</h2>
 <p>As always the source is available on <a href="https://github.com/Arcath/etch-router">GitHub</a> and I welcome PRs with fixes &amp; new features. The docs are hosted on GitHub pages <a href="http://etch-router.arcath.net/">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/06/b4rn.html b/2017/06/b4rn.html
index 2990f9e..17fba69 100644
--- a/2017/06/b4rn.html
+++ b/2017/06/b4rn.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>B4RN 1Gb/s FTTP Broadband</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">B4RN 1Gb/s FTTP Broadband</h1>
   <ul class="flex gap-2">
@@ -116,7 +117,7 @@ <h2 id="in-summary">In Summary</h2>
 <p>For more info head over to the <a href="https://b4rn.org.uk">B4RN Website</a>. We have been working with B4RN in some of the schools we support more on that <a href="https://www.ed-itsolutions.com/connecting-b4rn-schools-b4rn-box">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/06/screeps-part-12-start-again.html b/2017/06/screeps-part-12-start-again.html
index 8dc6542..c334a63 100644
--- a/2017/06/screeps-part-12-start-again.html
+++ b/2017/06/screeps-part-12-start-again.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 12 – Start Again</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 12 – Start Again</h1>
   <ul class="flex gap-2">
@@ -207,7 +208,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/a7ff7fff79207df88ae8d34a0cdc7291c52bfbb7">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/07/screeps-part-13-building-up.html b/2017/07/screeps-part-13-building-up.html
index 8765792..58405c5 100644
--- a/2017/07/screeps-part-13-building-up.html
+++ b/2017/07/screeps-part-13-building-up.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 13 – Building Up</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 13 – Building Up</h1>
   <ul class="flex gap-2">
@@ -104,7 +105,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/c24b0a0d42b733f4e66a6e4678b51aa0a2b85e1d">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/07/screeps-part-14-more-improvements-and-a-respawn.html b/2017/07/screeps-part-14-more-improvements-and-a-respawn.html
index cb3f05c..d375b9b 100644
--- a/2017/07/screeps-part-14-more-improvements-and-a-respawn.html
+++ b/2017/07/screeps-part-14-more-improvements-and-a-respawn.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 14 – More Improvements and a Respawn</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 14 – More Improvements and a Respawn</h1>
   <ul class="flex gap-2">
@@ -123,7 +124,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/5b10ddff314d1f3c751bf3766a71c5464567ad2f">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/07/screeps-part-15-new-empire.html b/2017/07/screeps-part-15-new-empire.html
index 84ac49c..7c65f9e 100644
--- a/2017/07/screeps-part-15-new-empire.html
+++ b/2017/07/screeps-part-15-new-empire.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 15 – New Empire</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 15 – New Empire</h1>
   <ul class="flex gap-2">
@@ -82,7 +83,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/ef92fd6a94111e9e8322ceb117c779c013d47e48">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/07/screeps-part-16-party-time.html b/2017/07/screeps-part-16-party-time.html
index 1ac4d2c..9741a67 100644
--- a/2017/07/screeps-part-16-party-time.html
+++ b/2017/07/screeps-part-16-party-time.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 16 – Faster in an Alliance</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 16 – Faster in an Alliance</h1>
   <ul class="flex gap-2">
@@ -146,7 +147,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/c885b670685bf99280649c78ba67668253b8bb02">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/07/screeps-part-17-room-planning.html b/2017/07/screeps-part-17-room-planning.html
index f952919..890e68a 100644
--- a/2017/07/screeps-part-17-room-planning.html
+++ b/2017/07/screeps-part-17-room-planning.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 17 – Room Planning</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 17 – Room Planning</h1>
   <ul class="flex gap-2">
@@ -98,7 +99,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/6c3edfa86f94fbb2ffa94b335c5564b777e00332">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/09/creating-an-msi-transform-with-super-orca.html b/2017/09/creating-an-msi-transform-with-super-orca.html
index d74f653..36a046a 100644
--- a/2017/09/creating-an-msi-transform-with-super-orca.html
+++ b/2017/09/creating-an-msi-transform-with-super-orca.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Creating an MSI Transform with Super Orca</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Creating an MSI Transform with Super Orca</h1>
   <ul class="flex gap-2">
@@ -107,7 +108,7 @@ <h2 id="using-your-transform">Using your Transform</h2>
 <p>Restart the target computers and they will install your software with all the options you selected.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/09/office-update-remover.html b/2017/09/office-update-remover.html
index 2a5fc9a..19f84a1 100644
--- a/2017/09/office-update-remover.html
+++ b/2017/09/office-update-remover.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Office Update Remover</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Office Update Remover</h1>
   <ul class="flex gap-2">
@@ -113,7 +114,7 @@ <h2 id="deployment">Deployment</h2>
 <p>I hope this helps anyone having similar problems. Any questions let me know in the comments.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/09/screeps-part-18-typescript.html b/2017/09/screeps-part-18-typescript.html
index e287e39..737fc3f 100644
--- a/2017/09/screeps-part-18-typescript.html
+++ b/2017/09/screeps-part-18-typescript.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 18 – Typescript</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 18 – Typescript</h1>
   <ul class="flex gap-2">
@@ -80,7 +81,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/1c2a4109076c632dbd88d36187f86d1fbf458e00">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/09/screeps-part-19-operating-systems.html b/2017/09/screeps-part-19-operating-systems.html
index 18ad564..8b9216c 100644
--- a/2017/09/screeps-part-19-operating-systems.html
+++ b/2017/09/screeps-part-19-operating-systems.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 19 – Operating Systems</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 19 – Operating Systems</h1>
   <ul class="flex gap-2">
@@ -225,7 +226,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/2933898a36f3ed06486965f9afe234dabc05d160">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/10/screeps-part-20-bunkers.html b/2017/10/screeps-part-20-bunkers.html
index bb41507..8eba25e 100644
--- a/2017/10/screeps-part-20-bunkers.html
+++ b/2017/10/screeps-part-20-bunkers.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 20 – Bunkers</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 20 – Bunkers</h1>
   <ul class="flex gap-2">
@@ -140,7 +141,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/a604bd5ba7dfafd32cbc7bd3071d0a7ed196f88e">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/11/screeps-part-21-optimizing-the-os.html b/2017/11/screeps-part-21-optimizing-the-os.html
index 11b578e..ace5b2a 100644
--- a/2017/11/screeps-part-21-optimizing-the-os.html
+++ b/2017/11/screeps-part-21-optimizing-the-os.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 21 – Optimizing the OS</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 21 – Optimizing the OS</h1>
   <ul class="flex gap-2">
@@ -173,7 +174,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/6b19b0bfe3ac3a7a043fe8c93eada5de62f4d1e7">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2017/12/screeps-part-22-war-and-claiming-another-shard.html b/2017/12/screeps-part-22-war-and-claiming-another-shard.html
index a026c9f..fcc9c9e 100644
--- a/2017/12/screeps-part-22-war-and-claiming-another-shard.html
+++ b/2017/12/screeps-part-22-war-and-claiming-another-shard.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Screeps Part 22 – War and Claiming Another Shard</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Screeps Part 22 – War and Claiming Another Shard</h1>
   <ul class="flex gap-2">
@@ -110,7 +111,7 @@ <h2 id="get-screeps">Get Screeps</h2>
 <p>You can see my code as it was at the end of this post <a href="https://github.com/Arcath/screeps-code/tree/5371ff5f003f33aeb8c692a1529102ae2265fb5c">here</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2018/02/disable-windows-10-colour-filter-shortcut-with-a-gpo.html b/2018/02/disable-windows-10-colour-filter-shortcut-with-a-gpo.html
index f4a3727..8823265 100644
--- a/2018/02/disable-windows-10-colour-filter-shortcut-with-a-gpo.html
+++ b/2018/02/disable-windows-10-colour-filter-shortcut-with-a-gpo.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Disable Windows 10 Colour Filter Shortcut with a GPO</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Disable Windows 10 Colour Filter Shortcut with a GPO</h1>
   <ul class="flex gap-2">
@@ -62,7 +63,7 @@ <h2 id="disable-the-shortcut-with-a-gpo">Disable the Shortcut with a GPO</h2>
 <p>Hopefully, this helps you fix this problem on your network. Obviously, if you do want colour filters you can use item-level targeting to exclude colour blind users from this registry fix.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2018/07/wp_enqueue_less-a-replacement-for-wp-less.html b/2018/07/wp_enqueue_less-a-replacement-for-wp-less.html
index f721f8e..2e06dc1 100644
--- a/2018/07/wp_enqueue_less-a-replacement-for-wp-less.html
+++ b/2018/07/wp_enqueue_less-a-replacement-for-wp-less.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>wp_enqueue_less a replacement for WP-Less</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">wp_enqueue_less a replacement for WP-Less</h1>
   <ul class="flex gap-2">
@@ -114,7 +115,7 @@ <h2 id="use-it">Use it</h2>
 <p>I’ve swapped most of our themes over to <code class="language-plaintext highlighter-rouge">wp_enqueue_less</code> without much hassle and will be using and updating it for all our themes.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2018/12/moving-to-gatsby.html b/2018/12/moving-to-gatsby.html
index 707a91e..2703fc9 100644
--- a/2018/12/moving-to-gatsby.html
+++ b/2018/12/moving-to-gatsby.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Moving to Gatsby</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Moving to Gatsby</h1>
   <ul class="flex gap-2">
@@ -110,7 +111,7 @@ <h2 id="gatsby">Gatsby</h2>
 <p>I’ve got more ideas to implement that I will look at in the not to distant future and a few drafts ready to go that I will be publishing soon.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2018/12/robocopy.html b/2018/12/robocopy.html
index eb8aabe..2b4afa3 100644
--- a/2018/12/robocopy.html
+++ b/2018/12/robocopy.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Robocopy, the best copying tool you already have.</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Robocopy, the best copying tool you already have.</h1>
   <ul class="flex gap-2">
@@ -78,7 +79,7 @@ <h2 id="more-features">More features</h2>
 <p>The robocopy help file an be read online over on <a href="https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/robocopy">Microsoft Docs</a> which goes into great detail of the other options robocopy has.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/01/generated-social-images.html b/2019/01/generated-social-images.html
index 216efc7..eb68a52 100644
--- a/2019/01/generated-social-images.html
+++ b/2019/01/generated-social-images.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Generated Social Images</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Generated Social Images</h1>
   <ul class="flex gap-2">
@@ -54,7 +55,7 @@ <h1 id="jimp">JIMP</h1>
 <p>This is a small feature that most users of the site wont even see but its a nice one to have. I’ve been more and more impressed with Gatsby as I’ve been using it to the point that I now think along with Netlify CMS it can be a complete replacement for WordPress for the School websites I build.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/01/netlify-cma-on-the-filesystem-with-gatsby.html b/2019/01/netlify-cma-on-the-filesystem-with-gatsby.html
index 9723acb..a43d2ef 100644
--- a/2019/01/netlify-cma-on-the-filesystem-with-gatsby.html
+++ b/2019/01/netlify-cma-on-the-filesystem-with-gatsby.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Netlify CMS on the filesystem with Gatsby</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Netlify CMS on the filesystem with Gatsby</h1>
   <ul class="flex gap-2">
@@ -101,7 +102,7 @@ <h1 id="fs-backend">FS Backend</h1>
 <p>This has worked really well for me letting me test and use Netlify CMS on my local machine.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/02/wp-camo.html b/2019/02/wp-camo.html
index 93b6b91..f59ca36 100644
--- a/2019/02/wp-camo.html
+++ b/2019/02/wp-camo.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>WP-Camo</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">WP-Camo</h1>
   <ul class="flex gap-2">
@@ -62,7 +63,7 @@ <h2 id="wp-camo">WP-Camo</h2>
 <p>WP-Camo’s source is available on <a href="https://github.com/Ed-ITSolutions/wp-camo">GitHub</a> and you can grab a copy of the plugin from the <a href="https://wordpress.org/plugins/wp-camo/#description">plugin directory</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/02/wp-update-provider.html b/2019/02/wp-update-provider.html
index cbec5e8..0937a3d 100644
--- a/2019/02/wp-update-provider.html
+++ b/2019/02/wp-update-provider.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>WP Update Provider</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">WP Update Provider</h1>
   <ul class="flex gap-2">
@@ -83,7 +84,7 @@ <h2 id="moving-forward">Moving Forward</h2>
 <p>Let us know over on the repo if you have any ideas that would improve WUP and the way you use it.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/03/using-wix-to-create-an-msi.html b/2019/03/using-wix-to-create-an-msi.html
index 2680cbc..654cb1e 100644
--- a/2019/03/using-wix-to-create-an-msi.html
+++ b/2019/03/using-wix-to-create-an-msi.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Using WIX to create an MSI</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Using WIX to create an MSI</h1>
   <ul class="flex gap-2">
@@ -95,7 +96,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Using WIX to creat
 <p>I have quite a few ideas for the future that I will implement as I need them, for example providing a <code class="language-plaintext highlighter-rouge">.reg</code> file to be imported and on complete commands. PRs and suggestions are welcome on the repo and I hope others find it as usefull as we have.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/04/dark-mode.html b/2019/04/dark-mode.html
index 1c94676..be190b0 100644
--- a/2019/04/dark-mode.html
+++ b/2019/04/dark-mode.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Dark Mode</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Dark Mode</h1>
   <ul class="flex gap-2">
@@ -50,7 +51,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Dark Mode</h1>
 <p>I have ideas on how to exampnd this site which I hope to get going soon and I welcome any feedback you have on the new layout.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/05/using-htmr-to-bring-life-to-links-in-gatsby.html b/2019/05/using-htmr-to-bring-life-to-links-in-gatsby.html
index 223c21b..8d0c441 100644
--- a/2019/05/using-htmr-to-bring-life-to-links-in-gatsby.html
+++ b/2019/05/using-htmr-to-bring-life-to-links-in-gatsby.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Using HTMR to bring life to links in Gatsby</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Using HTMR to bring life to links in Gatsby</h1>
   <ul class="flex gap-2">
@@ -81,7 +82,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Using HTMR to brin
 <p>There is the plugin <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/">gatsby-plugin-catch-links</a> that provides a similar outcome but does it in a very heavy handed way. It binds itself to all links in the browser and on a per-link basis decides if its an internal link and how to navigate to its target. My method with HTMR <em>fixes</em> the links during site build and requires no extra even bindings on the client side. Plus it only applies to the markdown and not other links on the site that are already React components.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/10/setting-swiggle-as-the-default-search-provider-for-chrome.html b/2019/10/setting-swiggle-as-the-default-search-provider-for-chrome.html
index c2ccc92..09b896a 100644
--- a/2019/10/setting-swiggle-as-the-default-search-provider-for-chrome.html
+++ b/2019/10/setting-swiggle-as-the-default-search-provider-for-chrome.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Setting Swiggle as the default search provider for Chrome</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Setting Swiggle as the default search provider for Chrome</h1>
   <ul class="flex gap-2">
@@ -85,7 +86,7 @@ <h1 id="gpo-configuration">GPO Configuration</h1>
 <p>That is it, default searches within the omnibox will now use Swiggle instead of Google. I edited the intranet page so it would use Swiggle for search instead as well so pupils now have no way of using Google unless they explicitly go to Google and search it there.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2019/11/destructuring-in-javascript.html b/2019/11/destructuring-in-javascript.html
index 8e61200..dd56df3 100644
--- a/2019/11/destructuring-in-javascript.html
+++ b/2019/11/destructuring-in-javascript.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Destructuring in JavaScript</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Destructuring in JavaScript</h1>
   <ul class="flex gap-2">
@@ -112,7 +113,7 @@ <h2 id="usequery-and-uselazyquery">useQuery and useLazyQuery</h2>
 <p>I use destructring every day across all the code I write and it’s become my default way of working as I’m sure it has for a lot of my fellow developers. Hopefully this article gives everyone new and old to destructuing an idea of what is going on when you use it.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2020/02/css-grid-layout.html b/2020/02/css-grid-layout.html
index 59d7064..c63647d 100644
--- a/2020/02/css-grid-layout.html
+++ b/2020/02/css-grid-layout.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>CSS Grid Layout</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">CSS Grid Layout</h1>
   <ul class="flex gap-2">
@@ -165,7 +166,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">CSS Grid Layout</h
 <p>Dave Geddes’ blog has a few more posts <a href="https://gedd.ski/post/tile-layouts/">on CSS grid</a> that are well worth a read and really helped get this site looking as good as it does now.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2020/02/deploying-swiggle-screen-cover.html b/2020/02/deploying-swiggle-screen-cover.html
index 09c24b8..124fc84 100644
--- a/2020/02/deploying-swiggle-screen-cover.html
+++ b/2020/02/deploying-swiggle-screen-cover.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Deploying Swiggle Screen Cover</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Deploying Swiggle Screen Cover</h1>
   <ul class="flex gap-2">
@@ -71,7 +72,7 @@ <h2 id="deploying-the-extension">Deploying the Extension</h2>
 <p>I hope this has been helpful and if you have any questions feel free to get in touch.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2020/03/moving-to-mdx.html b/2020/03/moving-to-mdx.html
index 5824d34..6d06534 100644
--- a/2020/03/moving-to-mdx.html
+++ b/2020/03/moving-to-mdx.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Moving to MDX</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Moving to MDX</h1>
   <ul class="flex gap-2">
@@ -116,7 +117,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Moving to MDX</h1>
 <p>I have some ideas for the new features that MDX will let me use and you will be seeing some posts shortly that use them.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2020/07/wallpaper-generation-on-a-domain.html b/2020/07/wallpaper-generation-on-a-domain.html
index f3f4a6e..ed22bf8 100644
--- a/2020/07/wallpaper-generation-on-a-domain.html
+++ b/2020/07/wallpaper-generation-on-a-domain.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Wallpaper Generation on a Domain</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Wallpaper Generation on a Domain</h1>
   <ul class="flex gap-2">
@@ -118,7 +119,7 @@ <h2 id="examples">Examples</h2>
 <p><img src="/assets/2020/07/wallpaper-generation-on-a-domain/user.jpg" alt="Logged onto a server" /></p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2020/08/utils-library.html b/2020/08/utils-library.html
index fba0c07..3afa789 100644
--- a/2020/08/utils-library.html
+++ b/2020/08/utils-library.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Write a Utils Library</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Write a Utils Library</h1>
   <ul class="flex gap-2">
@@ -54,7 +55,7 @@ <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Write a Utils Libr
 <p>I would reccomend that everyone build a utils library you don’t have to release it publically but it is something I’ve found very helpful. I’ve enjoyed doing all the testing, documenting and design without any pressure.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2021/01/creating-a-wds-discover-image.html b/2021/01/creating-a-wds-discover-image.html
index 74eb27b..49b9380 100644
--- a/2021/01/creating-a-wds-discover-image.html
+++ b/2021/01/creating-a-wds-discover-image.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Creating a WDS Discover Image</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Creating a WDS Discover Image</h1>
   <ul class="flex gap-2">
@@ -122,7 +123,7 @@ <h2 id="how-does-it-work">How does it work?</h2>
 <p>The Discover Image only needs to contain the drivers for the USB Network card for it to be able to connect.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2021/02/next.js.html b/2021/02/next.js.html
index 898c800..18e6dd6 100644
--- a/2021/02/next.js.html
+++ b/2021/02/next.js.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Next.JS</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Next.JS</h1>
   <ul class="flex gap-2">
@@ -84,7 +85,7 @@ <h2 id="source">Source</h2>
 <p>As with my Gatsby site I’ve made the <a href="https://github.com/Arcath/arcath.net-next">source code of this site available on GitHub</a>. You’ll see my process of developing the site as I kept it private until launch.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2021/03/mdx-bundler.html b/2021/03/mdx-bundler.html
index d56795d..5684139 100644
--- a/2021/03/mdx-bundler.html
+++ b/2021/03/mdx-bundler.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>MDX Bundler with Next.JS</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">MDX Bundler with Next.JS</h1>
   <ul class="flex gap-2">
@@ -147,7 +148,7 @@ <h2 id="more">More</h2>
 <p>Overall I’ve been very happy with MDX Bundler and 2.0.0 has fixed my inital issue and brought in quite a few improvements. I encourage you to check it out, it works very well with Next.JS and will work with any framework.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2021/04/images-with-mdx-bundler.html b/2021/04/images-with-mdx-bundler.html
index 5d15c7a..20b8046 100644
--- a/2021/04/images-with-mdx-bundler.html
+++ b/2021/04/images-with-mdx-bundler.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Images with MDX-Bundler</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Images with MDX-Bundler</h1>
   <ul class="flex gap-2">
@@ -170,7 +171,7 @@ <h2 id="images">Images</h2>
 features and it’s only getting better!</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2021/06/adsync-missing.html b/2021/06/adsync-missing.html
index 66ac4b8..96c59a7 100644
--- a/2021/06/adsync-missing.html
+++ b/2021/06/adsync-missing.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>ADSync Service Missing on Server</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">ADSync Service Missing on Server</h1>
   <ul class="flex gap-2">
@@ -87,7 +88,7 @@ <h2 id="logon-as-a-service">Logon as a Service</h2>
 <p>I hope this helps anyone stuck in the same position.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2021/06/improving-nextjs-file-performance.html b/2021/06/improving-nextjs-file-performance.html
index 77f3bea..f188255 100644
--- a/2021/06/improving-nextjs-file-performance.html
+++ b/2021/06/improving-nextjs-file-performance.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Improving Next.JS File Performance</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Improving Next.JS File Performance</h1>
   <ul class="flex gap-2">
@@ -232,7 +233,7 @@ <h2 id="any-better">Any Better?</h2>
 <a href="https://github.com/Arcath/arcath.net-next">GitHub</a> if you interested.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2022/03/windows-update-for-business.html b/2022/03/windows-update-for-business.html
index b8af856..faf1093 100644
--- a/2022/03/windows-update-for-business.html
+++ b/2022/03/windows-update-for-business.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Windows Update for Business</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Windows Update for Business</h1>
   <ul class="flex gap-2">
@@ -238,7 +239,7 @@ <h2 id="pros-and-cons">Pros and Cons</h2>
 <p>I will concede that we don’t have SCCM or Intune so we might not have been giving WSUS a fair go of it. However for us right now this solution is doing a great job and I can rest easy knowing our computers are all getting updates.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/2022/07/papercut-client-deployment-with-intune.html b/2022/07/papercut-client-deployment-with-intune.html
index 169ca16..eaa6d77 100644
--- a/2022/07/papercut-client-deployment-with-intune.html
+++ b/2022/07/papercut-client-deployment-with-intune.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Papercut Client deployment with Intune</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Papercut Client deployment with Intune</h1>
   <ul class="flex gap-2">
@@ -127,7 +128,7 @@ <h2 id="thats-it">That’s It!</h2>
 <p>The only weird thing is that despite the script explicitly stating <code class="language-plaintext highlighter-rouge">HKLM:\Software\Microsoft\Windows\CurrentVersion\Run</code> for the value it gets created in <code class="language-plaintext highlighter-rouge">HKLM:\Software\WOW6432Node\Microsoft\Windows\CurrentVersion\Run</code>. This isn’t any issue for us as both keys work but for other software you might <a href="https://call4cloud.nl/2021/05/the-sysnative-witch-project/">find this article interesting</a>.</p>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/about.html b/about/index.html
similarity index 86%
rename from about.html
rename to about/index.html
index 7e2f181..ffa47c3 100644
--- a/about.html
+++ b/about/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>About</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">About</h1>
 </div>
@@ -77,7 +78,7 @@ <h3 id="networking">Networking</h3>
 </ul>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/blog/index.html b/blog/index.html
index b0749d4..71751b0 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Blog</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="grid grid-cols-2 gap-2 mb-2">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
@@ -1151,7 +1152,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/08/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/contact.html b/contact/index.html
similarity index 78%
rename from contact.html
rename to contact/index.html
index 318cbee..5023f0b 100644
--- a/contact.html
+++ b/contact/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Contact</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Contact</h1>
 </div>
@@ -46,7 +47,7 @@ <h2 id="by-email">By Email</h2>
 </blockquote>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/css/style.css b/css/style.css
index a15831e..cc3b9ca 100644
--- a/css/style.css
+++ b/css/style.css
@@ -958,14 +958,11 @@ video {
 .fixed {
   position: fixed;
 }
-.col-start-2 {
-  grid-column-start: 2;
+.m-4 {
+  margin: 1rem;
 }
-.row-span-2 {
-  grid-row: span 2 / span 2;
-}
-.row-start-2 {
-  grid-row-start: 2;
+.m-auto {
+  margin: auto;
 }
 .mb-2 {
   margin-bottom: 0.5rem;
@@ -973,9 +970,6 @@ video {
 .mb-4 {
   margin-bottom: 1rem;
 }
-.ml-4 {
-  margin-left: 1rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1003,15 +997,12 @@ video {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-.grid-cols-layout {
-  grid-template-columns: 1fr 250px 100ch 1fr;
-}
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -1045,14 +1036,15 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
-.pb-2 {
-  padding-bottom: 0.5rem;
+.p-4 {
+  padding: 1rem;
 }
-.pr-4 {
+.px-4 {
+  padding-left: 1rem;
   padding-right: 1rem;
 }
-.pt-4 {
-  padding-top: 1rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 .text-center {
   text-align: center;
@@ -1204,4 +1196,55 @@ a:hover {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+@media (min-width: 1024px) {
+
+  .lg\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .lg\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .lg\:row-start-2 {
+    grid-row-start: 2;
+  }
+
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .lg\:mr-0 {
+    margin-right: 0px;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-layout {
+    grid-template-columns: 1fr 250px 100ch 1fr;
+  }
+
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .lg\:pb-0 {
+    padding-bottom: 0px;
+  }
+
+  .lg\:pl-0 {
+    padding-left: 0px;
+  }
+
+  .lg\:text-left {
+    text-align: left;
+  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 364cf22..961d453 100644
--- a/index.html
+++ b/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Adam Laycock</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,9 +19,9 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
-          <div class="grid grid-cols-4 gap-4 mb-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
+          <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
   
     <a 
       href="https://github.com/Arcath"
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
   
 </div>
 
-<div class="grid grid-cols-2 gap-4 mb-2">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-2">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2022/07/papercut-client-deployment-with-intune">Papercut Client deployment with Intune</a></h2>
@@ -98,7 +99,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/
   </ul>
 </div>
   
-  <div class="bg-white border border-gray-300 shadow p-2 row-span-2 row-start-2 col-start-2">
+  <div class="bg-white border border-gray-300 shadow p-2 lg:row-span-2 lg:row-start-2 lg:col-start-2">
     <h2 class="font-light text-2xl border-b border-gray-200 mb-2">More Posts</h2>
     <a href="/blog/">All Posts</a><br /><br />
     
@@ -219,7 +220,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2">More Posts</h2>
 </div>
 
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/adauth/index.html b/tag/adauth/index.html
index 09fb5ef..f11663c 100644
--- a/tag/adauth/index.html
+++ b/tag/adauth/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged adauth</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged adauth</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/08/active-record-like-search-results">Active Record like Search Results</a></h2>
@@ -56,7 +57,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/08/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/adsync/index.html b/tag/adsync/index.html
index dd08123..75913f9 100644
--- a/tag/adsync/index.html
+++ b/tag/adsync/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged adsync</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged adsync</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/adsync-missing">ADSync Service Missing on Server</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/apple/index.html b/tag/apple/index.html
index 5f02e37..ded086e 100644
--- a/tag/apple/index.html
+++ b/tag/apple/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged apple</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged apple</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/07/caching-apple-downloads-on-a-windows-server">Caching Apple downloads on a Windows server</a></h2>
@@ -56,7 +57,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/07/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/atom/index.html b/tag/atom/index.html
index 53e8153..5fbe601 100644
--- a/tag/atom/index.html
+++ b/tag/atom/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged atom</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged atom</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/04/creating-the-less-compiler-for-compile-watch">Creating the Less compiler for compile-watch</a></h2>
@@ -56,7 +57,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2014/04/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/azure/index.html b/tag/azure/index.html
index a3d0709..778da6a 100644
--- a/tag/azure/index.html
+++ b/tag/azure/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged azure</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged azure</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/adsync-missing">ADSync Service Missing on Server</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/b4rn/index.html b/tag/b4rn/index.html
index 8559a59..dd1c62b 100644
--- a/tag/b4rn/index.html
+++ b/tag/b4rn/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged b4rn</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged b4rn</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/06/b4rn">B4RN 1Gb/s FTTP Broadband</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/06/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/blog/index.html b/tag/blog/index.html
index adf82ab..c5bed58 100644
--- a/tag/blog/index.html
+++ b/tag/blog/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged blog</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged blog</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/04/dark-mode">Dark Mode</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/04/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/cancan/index.html b/tag/cancan/index.html
index 0cb8bdb..3d25042 100644
--- a/tag/cancan/index.html
+++ b/tag/cancan/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged cancan</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged cancan</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/11/cancan-route-contraints">CanCan Route Constraints</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/11/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/chrome/index.html b/tag/chrome/index.html
index 18702fd..f5c431b 100644
--- a/tag/chrome/index.html
+++ b/tag/chrome/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged chrome</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged chrome</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/02/deploying-swiggle-screen-cover">Deploying Swiggle Screen Cover</a></h2>
@@ -58,7 +59,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/10/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/compilewatch/index.html b/tag/compilewatch/index.html
index 592fcfb..802d58a 100644
--- a/tag/compilewatch/index.html
+++ b/tag/compilewatch/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged compilewatch</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged compilewatch</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/04/creating-the-less-compiler-for-compile-watch">Creating the Less compiler for compile-watch</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/04/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/css/index.html b/tag/css/index.html
index b0c3bb6..6af1b26 100644
--- a/tag/css/index.html
+++ b/tag/css/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged css</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged css</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/02/css-grid-layout">CSS Grid Layout</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/deployments/index.html b/tag/deployments/index.html
index a793fe1..1af87bb 100644
--- a/tag/deployments/index.html
+++ b/tag/deployments/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged deployments</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged deployments</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/creating-an-msi-transform-with-super-orca">Creating an MSI Transform with Super Orca</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/deploymets/index.html b/tag/deploymets/index.html
index 9bc9db4..24b8b2f 100644
--- a/tag/deploymets/index.html
+++ b/tag/deploymets/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged deploymets</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged deploymets</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/03/using-wix-to-create-an-msi">Using WIX to create an MSI</a></h2>
@@ -44,7 +45,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/03/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/ed-itsolutions/index.html b/tag/ed-itsolutions/index.html
index 9cdb213..84ba4d1 100644
--- a/tag/ed-itsolutions/index.html
+++ b/tag/ed-itsolutions/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged ed-itsolutions</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged ed-itsolutions</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/07/radius-with-windows-server-2012r2">RADIUS With Windows Server 2012R2</a></h2>
@@ -70,7 +71,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2014/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/electron/index.html b/tag/electron/index.html
index 9d2990e..2783af0 100644
--- a/tag/electron/index.html
+++ b/tag/electron/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged electron</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged electron</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/11/electron-app-customer-support">Electron App to help with customer support</a></h2>
@@ -54,7 +55,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/11/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/featured/index.html b/tag/featured/index.html
index 6cbcc40..7c088a0 100644
--- a/tag/featured/index.html
+++ b/tag/featured/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged featured</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged featured</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/12/moving-to-gatsby">Moving to Gatsby</a></h2>
@@ -58,7 +59,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/08/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/gatsby/index.html b/tag/gatsby/index.html
index 8ff2045..61b1dce 100644
--- a/tag/gatsby/index.html
+++ b/tag/gatsby/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged gatsby</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged gatsby</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/03/moving-to-mdx">Moving to MDX</a></h2>
@@ -108,7 +109,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/12/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/gpo/index.html b/tag/gpo/index.html
index ec5c247..b6a37dc 100644
--- a/tag/gpo/index.html
+++ b/tag/gpo/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged gpo</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged gpo</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/07/wallpaper-generation-on-a-domain">Wallpaper Generation on a Domain</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/07/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/group-policy/index.html b/tag/group-policy/index.html
index 5708be2..0b1c635 100644
--- a/tag/group-policy/index.html
+++ b/tag/group-policy/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged group-policy</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged group-policy</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/creating-an-msi-transform-with-super-orca">Creating an MSI Transform with Super Orca</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/ios/index.html b/tag/ios/index.html
index c3f9da4..41b3225 100644
--- a/tag/ios/index.html
+++ b/tag/ios/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged ios</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged ios</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/12/remove-guided-access-mode-ipad">Remove Guided Access Mode on an iPad</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/12/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/javascript/index.html b/tag/javascript/index.html
index 0470d8d..e09eead 100644
--- a/tag/javascript/index.html
+++ b/tag/javascript/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged javascript</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged javascript</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/11/destructuring-in-javascript">Destructuring in JavaScript</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/11/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/jekyll-atom/index.html b/tag/jekyll-atom/index.html
index d9a8750..93330f8 100644
--- a/tag/jekyll-atom/index.html
+++ b/tag/jekyll-atom/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged jekyll-atom</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged jekyll-atom</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/03/jekyll-atom-1-2-0">Jekyll Atom 1.2.0</a></h2>
@@ -102,7 +103,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2014/04/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/jekyll/index.html b/tag/jekyll/index.html
index 157e1fc..d62f39a 100644
--- a/tag/jekyll/index.html
+++ b/tag/jekyll/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged jekyll</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged jekyll</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/12/pac-file-system">A PAC File System using Jekyll</a></h2>
@@ -78,7 +79,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/mdx/index.html b/tag/mdx/index.html
index 17638a9..33986ea 100644
--- a/tag/mdx/index.html
+++ b/tag/mdx/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged mdx</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged mdx</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/improving-nextjs-file-performance">Improving Next.JS File Performance</a></h2>
@@ -77,7 +78,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/03/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/motorway/index.html b/tag/motorway/index.html
index 5c74190..1a21f58 100644
--- a/tag/motorway/index.html
+++ b/tag/motorway/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged motorway</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged motorway</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/11/motorway">Motorway</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/11/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/netlify/index.html b/tag/netlify/index.html
index 1e3a8ee..7e39cde 100644
--- a/tag/netlify/index.html
+++ b/tag/netlify/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged netlify</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged netlify</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/01/netlify-cma-on-the-filesystem-with-gatsby">Netlify CMS on the filesystem with Gatsby</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/01/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/next-js/index.html b/tag/next-js/index.html
index 0dde20b..1442620 100644
--- a/tag/next-js/index.html
+++ b/tag/next-js/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged next-js</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged next-js</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/improving-nextjs-file-performance">Improving Next.JS File Performance</a></h2>
@@ -93,7 +94,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/node/index.html b/tag/node/index.html
index 9fdb950..9bf7108 100644
--- a/tag/node/index.html
+++ b/tag/node/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged node</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged node</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/08/utils-library">Write a Utils Library</a></h2>
@@ -54,7 +55,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/05/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/office-2016/index.html b/tag/office-2016/index.html
index 4723a51..980233b 100644
--- a/tag/office-2016/index.html
+++ b/tag/office-2016/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged office-2016</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged office-2016</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/office-update-remover">Office Update Remover</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/papercut/index.html b/tag/papercut/index.html
index 738248c..0452341 100644
--- a/tag/papercut/index.html
+++ b/tag/papercut/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged papercut</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged papercut</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2022/07/papercut-client-deployment-with-intune">Papercut Client deployment with Intune</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2022/07/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/php/index.html b/tag/php/index.html
index 91921ae..5a002d2 100644
--- a/tag/php/index.html
+++ b/tag/php/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged php</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged php</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/11/osticket-api-proxy">OSTicket API Proxy</a></h2>
@@ -54,7 +55,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/11/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/plugin-highlight/index.html b/tag/plugin-highlight/index.html
index 40e1497..e2c5cbd 100644
--- a/tag/plugin-highlight/index.html
+++ b/tag/plugin-highlight/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged plugin-highlight</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged plugin-highlight</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/09/plugin-highlight-crop-thumbnails">Plugin Highlight: Crop Thumbnails</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/09/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/post-formats/index.html b/tag/post-formats/index.html
index 196b846..8a76b59 100644
--- a/tag/post-formats/index.html
+++ b/tag/post-formats/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged post-formats</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged post-formats</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/10/post-formats-theme">Post Formats in your WordPress Theme</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/10/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/powershell/index.html b/tag/powershell/index.html
index 0275eed..26847f8 100644
--- a/tag/powershell/index.html
+++ b/tag/powershell/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged powershell</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged powershell</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/07/wallpaper-generation-on-a-domain">Wallpaper Generation on a Domain</a></h2>
@@ -58,7 +59,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2014/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/react/index.html b/tag/react/index.html
index 9fb2a81..6f49780 100644
--- a/tag/react/index.html
+++ b/tag/react/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged react</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged react</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/06/improving-nextjs-file-performance">Improving Next.JS File Performance</a></h2>
@@ -60,7 +61,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/03/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/review/index.html b/tag/review/index.html
index 41a893b..bfeab77 100644
--- a/tag/review/index.html
+++ b/tag/review/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged review</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged review</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/09/surface-pro-3-review">Surface Pro 3 a Review</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/09/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/ruby/index.html b/tag/ruby/index.html
index 39da91c..872cc0f 100644
--- a/tag/ruby/index.html
+++ b/tag/ruby/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged ruby</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged ruby</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/11/cancan-route-contraints">CanCan Route Constraints</a></h2>
@@ -82,7 +83,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2013/08/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/screeps/index.html b/tag/screeps/index.html
index 6a8517d..c390023 100644
--- a/tag/screeps/index.html
+++ b/tag/screeps/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged screeps</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged screeps</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/12/screeps-part-22-war-and-claiming-another-shard">Screeps Part 22 – War and Claiming Another Shard</a></h2>
@@ -294,7 +295,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/11/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/security/index.html b/tag/security/index.html
index 5fa37c0..2cc9719 100644
--- a/tag/security/index.html
+++ b/tag/security/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged security</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged security</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/07/radius-with-windows-server-2012r2">RADIUS With Windows Server 2012R2</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/07/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/sims/index.html b/tag/sims/index.html
index ff3211c..134fb5c 100644
--- a/tag/sims/index.html
+++ b/tag/sims/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged sims</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged sims</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2014/02/powershell-script-to-update-sims-and-fms">Powershell script to update SIMS & FMS</a></h2>
@@ -44,7 +45,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2014/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/sodb/index.html b/tag/sodb/index.html
index 49cc0c6..578fce2 100644
--- a/tag/sodb/index.html
+++ b/tag/sodb/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged sodb</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged sodb</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/07/sodb">SODB</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/07/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/squid/index.html b/tag/squid/index.html
index 8f1395e..0fec557 100644
--- a/tag/squid/index.html
+++ b/tag/squid/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged squid</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged squid</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/07/caching-apple-downloads-on-a-windows-server">Caching Apple downloads on a Windows server</a></h2>
@@ -56,7 +57,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2015/07/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/tailwindcss/index.html b/tag/tailwindcss/index.html
index 521a8e0..24a0548 100644
--- a/tag/tailwindcss/index.html
+++ b/tag/tailwindcss/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged tailwindcss</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged tailwindcss</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/02/next.js">Next.JS</a></h2>
@@ -44,7 +45,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/tools/index.html b/tag/tools/index.html
index d9e40e9..2a0c3bb 100644
--- a/tag/tools/index.html
+++ b/tag/tools/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged tools</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged tools</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/12/robocopy">Robocopy, the best copying tool you already have.</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/12/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/typescript/index.html b/tag/typescript/index.html
index 4d809c5..c49e76d 100644
--- a/tag/typescript/index.html
+++ b/tag/typescript/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged typescript</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged typescript</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/02/next.js">Next.JS</a></h2>
@@ -102,7 +103,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2017/09/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/updates/index.html b/tag/updates/index.html
index ef84428..eec3b04 100644
--- a/tag/updates/index.html
+++ b/tag/updates/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged updates</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged updates</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/01/state-of-the-universe">State of the Universe</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/01/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/wds/index.html b/tag/wds/index.html
index a8ebbe8..1f780e6 100644
--- a/tag/wds/index.html
+++ b/tag/wds/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged wds</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged wds</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/01/creating-a-wds-discover-image">Creating a WDS Discover Image</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2021/01/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/windows-10/index.html b/tag/windows-10/index.html
index 25382a0..5e86725 100644
--- a/tag/windows-10/index.html
+++ b/tag/windows-10/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged windows-10</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged windows-10</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/02/disable-windows-10-colour-filter-shortcut-with-a-gpo">Disable Windows 10 Colour Filter Shortcut with a GPO</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/windows-update/index.html b/tag/windows-update/index.html
index 0870704..3ac8868 100644
--- a/tag/windows-update/index.html
+++ b/tag/windows-update/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged windows-update</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged windows-update</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2022/03/windows-update-for-business">Windows Update for Business</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2022/03/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/windows/index.html b/tag/windows/index.html
index f4a297c..6d6c07b 100644
--- a/tag/windows/index.html
+++ b/tag/windows/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged windows</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged windows</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/12/robocopy">Robocopy, the best copying tool you already have.</a></h2>
@@ -42,7 +43,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2018/12/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/windows10/index.html b/tag/windows10/index.html
index 09d4b9c..6deab85 100644
--- a/tag/windows10/index.html
+++ b/tag/windows10/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged windows10</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged windows10</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/02/building-windows-10-images">Building Windows 10 Images</a></h2>
@@ -40,7 +41,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/wix/index.html b/tag/wix/index.html
index f4e117d..4876b1f 100644
--- a/tag/wix/index.html
+++ b/tag/wix/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged wix</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged wix</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/03/using-wix-to-create-an-msi">Using WIX to create an MSI</a></h2>
@@ -44,7 +45,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/03/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/wordpress/index.html b/tag/wordpress/index.html
index 253c3a2..fe9d5e5 100644
--- a/tag/wordpress/index.html
+++ b/tag/wordpress/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged wordpress</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged wordpress</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/02/wp-camo">WP-Camo</a></h2>
@@ -146,7 +147,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2016/01/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/tag/work/index.html b/tag/work/index.html
index 5b38c4b..0e55a29 100644
--- a/tag/work/index.html
+++ b/tag/work/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Posts Tagged work</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,13 +19,13 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-2">Posts Tagged work</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-4">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
   
     <div class="bg-white border-gray-300 border shadow-xl p-2" >
   <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2020/02/deploying-swiggle-screen-cover">Deploying Swiggle Screen Cover</a></h2>
@@ -88,7 +89,7 @@ <h2 class="font-light text-2xl border-b border-gray-200 mb-2"><a href="/2019/02/
   
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>
diff --git a/uses.html b/uses/index.html
similarity index 86%
rename from uses.html
rename to uses/index.html
index e57fddf..dba6405 100644
--- a/uses.html
+++ b/uses/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Uses</title>
     <link rel="stylesheet" href="/css/style.css" />
     <link rel="stylesheet" href="/css/font-awesome/css/all.min.css" />
   </head>
   <body>
-    <div class="grid grid-cols-layout gap-4">
-      <div class="bg-white border-gray-200 border shadow-xl p-2 mt-4 ml-4 col-start-2">
-        <img src="/assets/profile.jpg" />
+    <div class="grid grid-cols-1 lg:grid-cols-layout gap-4">
+      <div class="bg-white border-gray-200 border shadow-xl p-2 m-4 lg:mb-0 lg:mr-0 lg:col-start-2 text-center lg:text-left">
+        <img src="/assets/profile.jpg" alt="Adam Laycock" class="m-auto" />
         <h2 class="font-light text-2xl">Adam Laycock</h2>
         
         <a href="/">Home</a>
@@ -18,8 +19,8 @@ <h2 class="font-light text-2xl">Adam Laycock</h2>
         <a href="/uses/">Uses</a>
         <a href="/contact/">Contact</a>
       </div>
-      <div class="row-span-2">
-        <section class="pt-4 pr-4">
+      <div class="lg:row-span-2">
+        <section class="p-4 lg:pb-0 lg:pl-0">
           <div class="bg-white border-gray-300 border shadow-xl p-2 mb-4">
   <h1 class="font-light text-3xl border-b border-gray-200 mb-4">Uses</h1>
 </div>
@@ -74,7 +75,7 @@ <h2 id="laptop">Laptop</h2>
 </ul>
 </div>
         </section>
-        <footer class="mt-4">
+        <footer class="mt-4 px-4 lg:px-0">
           &copy; Adam Laycock 2024
         </footer>
       </div>