From 2b9ff9ef52d97d8d10ffeeb53aecde72beb0927f Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Mon, 14 Aug 2023 16:10:28 -0400
Subject: [PATCH 01/18] remove inline css from pages/index

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/pages/index.tsx |  86 +++++++++++++--------------
 src/style/index.css | 140 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 183 insertions(+), 43 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b742044..d073349 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -40,47 +40,47 @@ export default ({ data, location }: PageProps<IndexPageQuery>) => {
 const Wall = ({ data }) => {
     return (
         <div
-            className="wall flex relative justify-center items-center overflow-hidden pt-24 px-16"
+            className="wall"
         >
-            <div className="flex-1 lg:block relative w-full h-full top-0 left-0 hidden">
-                <div className="w-full h-full">
+            <div className="wall-div">
+                <div className="wall-img-div">
                     <img
                         src="/images/screenshot.svg"
                         alt=""
-                        className="h-full w-auto max-w-none lg:h-auto lg:w-full pr-12"
+                        className="wall-img"
                     />
                 </div>
             </div>
-            <div className="flex-1 text-center p-3 relative z-10 lg:text-left lg:pl-8 text-white lg:text-color-default">
+            <div className="wall-text">
                 <div className="title">
-                    <h1 className="text-5xl relative mt-20 lg:text-6xl">
+                    <h1 className="wall-text-slogan">
                         Data lineage for <span className="nowrap">every pipeline</span>
                     </h1>
                 </div>
-                <p className="text-lg lg:text-xl text-color-3 pb-6 pt-3 pb-6">
+                <p className="wall-text-cta">
                     Use Marquez to collect, aggregate, and visualize metadata about your data pipelines and applications.
                 </p>
-                <div className="py-5 pb-20">
+                <div className="wall-text-btns-div">
                     <Button
                         title="Quickstart"
                         to='/quickstart'
                         type="link"
                         iconRight={<ArrowRight />}
-                        className="mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105"
+                        className="wall-text-btn"
                     />
                     <Button
                         title="GitHub"
                         to='https://github.com/MarquezProject/marquez'
                         type="extbutton"
                         iconRight={<GitHub />}
-                        className="mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105"
+                        className="wall-text-btn"
                     />
                     <Button
                         title="Slack"
                         to='https://bit.ly/MqzSlackInvite'
                         type="extbutton"
                         iconRight={<Slack />}
-                        className="mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105"
+                        className="wall-text-btn"
                     />
                 </div>
             </div>
@@ -90,15 +90,15 @@ const Wall = ({ data }) => {
 
 const About = ({ }) => {
     return (
-        <div className="border-t-2 border-dashed border-color-2" >
-            <div className="px-4 py-12 boxed text-center lg:pt-14 lg:px-0">
-                <h2 className="relative text-3xl">
+        <div className="about-div" >
+            <div className="about-div-inner">
+                <h2 className="about-div-q">
                     What is Marquez?
                 </h2>
-                <p className="mt-5  pt-3 px-6">
+                <p className="about-div-a1">
                     Marquez is an open source metadata service. It maintains <a href="https://en.wikipedia.org/wiki/Provenance#Data_provenance">data provenance</a>, shows how datasets are consumed and produced, provides global visibility into job runtimes, centralizes dataset lifecycle management, and much more.
                 </p>
-                <p className="my-5 text-lg px-6">
+                <p className="about-div-a2">
                     Marquez was released and open sourced by <strong><a href="https://www.wework.com">WeWork</a></strong>.
                 </p>
             </div>
@@ -108,65 +108,65 @@ const About = ({ }) => {
 
 const FeatureBoxes = ({ }) => {
     return (
-        <div className="border-t-2 border-dashed border-color-2" >
-            <div className="flex flex-wrap py-12 container mx-auto items-center">
-                <div className="px-4 text-center lg:px-0 w-full order-0 lg:order-0">
-                    <h2 className="relative text-3xl">
+        <div className="feature-boxes-div" >
+            <div className="feature-boxes-div-inner">
+                <div className="feature-boxes-div-title">
+                    <h2 className="feature-boxes-div-title-h2">
                         What does Marquez do?
                     </h2>
                 </div>
-                <div className="lg:py-14 px-4 lg:pr-12 lg:w-1/2 w-full order-0 lg:order-0">
-                    <h3 className="text-color-1 text-xl text-center lg:text-left lg:text-2xl">
+                <div className="feature-boxes-div-rtm">
+                    <h3 className="feature-boxes-div-title">
                         Real-time metadata collection
                     </h3>
-                    <p className="mt-5 text-center lg:text-left">
+                    <p className="feature-boxes-div-para">
                         Marquez is a metadata server, offering an OpenLineage-compatible endpoint for real-time collection of information from running jobs and applications.
                     </p>
-                    <p className="mt-5 text-center lg:text-left">
+                    <p className="feature-boxes-div-para">
                         As the reference implementation of OpenLineage, the Marquez API server already works with all of its integrations developed by the community. This includes Apache Airflow, Apache Spark, dbt, Dagster, and Great Expectations. 
                     </p>
                 </div>
-                <div className="py-12 lg:py-14 px-4 lg:w-1/2 w-full order-1 lg:order-1 ">
+                <div className="feature-boxes-div-rtm-img">
                     <img
                         src="/images/stack.svg"
                         alt=""
-                        className="w-full max-w-none"
+                        className="fb-img"
                     />
                 </div>
-                <div className="py-12 lg:py-14 px-4 lg:pl-12 lg:w-1/2 w-full order-2 lg:order-3">
-                    <h3 className="text-color-1 text-xl lg:text-2xl text-center lg:text-left">
+                <div className="feature-boxes-div-uvg">
+                    <h3 className="feature-boxes-div-title">
                         Unified visual graph
                     </h3>
-                    <p className="mt-5 text-center lg:text-left">
+                    <p className="feature-boxes-div-para">
                         Through a web user interface, Marquez can provide a visual map that shows <strong>complex interdependencies</strong> within your data ecosystem.
                     </p>
-                    <p className="mt-5 text-center lg:text-left">
+                    <p className="feature-boxes-div-para">
                         The user interface allows you to browse the metadata within Marquez, making it easy to see the inputs and outputs of each job, trace the lineage of individual datasets, and study performance metrics and execution details.
                     </p>
                 </div> 
-                <div className="py-12 lg:py-14 px-4 lg:w-1/2 w-full order-3 lg:order-2">
+                <div className="feature-boxes-div-uvg-img">
                     <img
                         src="/images/screenshot.png"
                         alt=""
-                        className="w-full max-w-none lg:pr-12"
+                        className="uvg-img"
                     />
                 </div>
-                <div className="py-12 lg:py-14 px-4 lg:pr-12 lg:w-1/2 w-full order-4 lg:order-4">
-                    <h3 className="text-color-1 text-xl lg:text-2xl text-center lg:text-left">
+                <div className="feature-boxes-div-api">
+                    <h3 className="feature-boxes-div-title">
                         Flexible Lineage API
                     </h3>
-                    <p className="mt-5 text-center lg:text-left">
+                    <p className="feature-boxes-div-para">
                         Lineage metadata can be queried using the lineage API, allowing for automation of key tasks like backfills and root cause analysis.
                     </p>
-                    <p className="mt-5 text-center lg:text-left">
+                    <p className="feature-boxes-div-para">
                         With the Lineage API, you can easily traverse the dependency tree and establish context for datasets across multiple pipelines and orchestration platforms. This can be used to enrich data catalogs and data quality systems.
                     </p>
                 </div>
-                <div className="py-12 lg:py-14 px-4 lg:w-1/2 w-full order-5 lg:order-5">
+                <div className="feature-boxes-div-api-img">
                     <img
                         src="/images/api-terminal.png"
                         alt=""
-                        className="w-full max-w-none"
+                        className="fb-img"
                     />
                 </div>
             </div>
@@ -176,14 +176,14 @@ const FeatureBoxes = ({ }) => {
 
 const Blog = ({ children }) => {
     return (
-        <div className="border-t-2 border-dashed border-color-2">
-            <div className="container mx-auto px-0 pb-24">
-                <div className="px-4 py-12 text-center lg:py-14 lg:px-0">
-                    <h2 className="text-color-1 text-3xl lg:text-4xl">
+        <div className="blog-div">
+            <div className="blog-div-inner">
+                <div className="blog-div-title-div">
+                    <h2 className="blog-div-title">
                         Latest News
                     </h2>
                 </div>
-                <div className="flex flex-wrap">{children}</div>
+                <div className="blog-div-children">{children}</div>
             </div>
         </div>
     )
diff --git a/src/style/index.css b/src/style/index.css
index 3efe77a..52f3362 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -328,3 +328,143 @@ h1, h2, h3, h4, h5, h6 {
 .nowrap {
     white-space: nowrap;
 }
+
+/* Wall */
+
+.wall {
+    @apply flex relative justify-center items-center overflow-hidden pt-24 px-16;
+}
+
+.wall-div {
+    @apply flex-1 lg:block relative w-full h-full top-0 left-0 hidden;
+}
+
+.wall-img-div {
+    @apply w-full h-full;
+}
+
+.wall-img {
+    @apply h-full w-auto max-w-none lg:h-auto lg:w-full pr-12;
+}
+
+.wall-text {
+    @apply flex-1 text-center p-3 relative z-10 lg:text-left lg:pl-8 text-white lg:text-color-default;
+}
+
+.wall-text-slogan {
+    @apply text-5xl relative mt-20 lg:text-6xl;
+}
+
+.wall-text-cta {
+    @apply text-lg lg:text-xl text-color-3 pb-6 pt-3 pb-6;
+}
+
+.wall-text-btns-div {
+    @apply py-5 pb-20;
+}
+
+.wall-text-btn {
+    @apply mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105;
+}
+
+/* About */
+
+.about-div {
+    @apply border-t-2 border-dashed border-color-2;
+}
+
+.about-div-inner {
+    @apply px-4 py-12 boxed text-center lg:pt-14 lg:px-0;
+}
+
+.about-div-q {
+    @apply relative text-3xl;
+}
+
+.about-div-a1 {
+    @apply mt-5 pt-3 px-6;
+}
+
+.about-div-a2 {
+    @apply my-5 text-lg px-6;
+}
+
+/* Feature Boxes */
+
+.feature-boxes-div {
+    @apply border-t-2 border-dashed border-color-2
+}
+
+.feature-boxes-div-inner {
+    @apply flex flex-wrap py-12 container mx-auto items-center;
+}
+
+.feature-boxes-div-title {
+    @apply px-4 text-center lg:px-0 w-full lg:order-1 order-1;
+}
+
+.feature-boxes-div-title-h2 {
+    @apply text-center relative text-3xl;
+}
+
+.feature-boxes-div-rtm {
+    @apply lg:py-14 px-4 lg:pr-12 lg:w-1/2 w-full order-2 lg:order-2;
+}
+
+.feature-boxes-div-title {
+    @apply text-color-1 text-xl text-center lg:text-left lg:text-2xl;
+}
+
+.feature-boxes-div-para {
+    @apply mt-5 text-center lg:text-left;
+}
+
+.feature-boxes-div-rtm-img {
+    @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-2 lg:order-2;
+}
+
+.fb-img {
+    @apply w-full max-w-none;
+}
+
+.feature-boxes-div-uvg {
+    @apply py-12 lg:py-14 px-4 lg:pl-12 lg:w-1/2 w-full order-3 lg:order-4;
+}
+
+.feature-boxes-div-uvg-img {
+    @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-4 lg:order-3;
+}
+
+.uvg-img {
+    @apply w-full max-w-none lg:pr-12;
+}
+
+.feature-boxes-div-api {
+    @apply py-12 lg:py-14 px-4 lg:pr-12 lg:w-1/2 w-full order-5 lg:order-5;
+}
+
+.feature-boxes-div-api-img {
+    @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-6 lg:order-6;
+}
+
+/* Blog */
+
+.blog-div {
+    @apply border-t-2 border-dashed border-color-2;
+}
+
+.blog-div-inner {
+    @apply container mx-auto px-0 pb-24;
+}
+
+.blog-div-title-div {
+    @apply px-4 py-12 text-center lg:py-14 lg:px-0;
+}
+
+.blog-div-title {
+    @apply text-color-1 text-3xl lg:text-4xl;
+}
+
+.blog-div-children {
+    @apply flex flex-wrap;
+}
\ No newline at end of file

From c9b5b3652194e613ad052a779a20612bc4fd7476 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Mon, 14 Aug 2023 16:10:50 -0400
Subject: [PATCH 02/18] update schema

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 schema.json | 202 ++++++++++++++++++++++++++--------------------------
 1 file changed, 101 insertions(+), 101 deletions(-)

diff --git a/schema.json b/schema.json
index 0153f77..0f183a8 100644
--- a/schema.json
+++ b/schema.json
@@ -3489,22 +3489,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "postCssPlugins",
-              "description": null,
-              "args": [],
-              "type": {
-                "kind": "LIST",
-                "name": null,
-                "ofType": {
-                  "kind": "OBJECT",
-                  "name": "SitePluginPluginOptionsPostCssPlugins",
-                  "ofType": null
-                }
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "trackingIds",
               "description": null,
@@ -3604,26 +3588,19 @@
               },
               "isDeprecated": false,
               "deprecationReason": null
-            }
-          ],
-          "inputFields": null,
-          "interfaces": [],
-          "enumValues": null,
-          "possibleTypes": null
-        },
-        {
-          "kind": "OBJECT",
-          "name": "SitePluginPluginOptionsPostCssPlugins",
-          "description": null,
-          "fields": [
+            },
             {
-              "name": "postcssPlugin",
+              "name": "postCssPlugins",
               "description": null,
               "args": [],
               "type": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "OBJECT",
+                  "name": "SitePluginPluginOptionsPostCssPlugins",
+                  "ofType": null
+                }
               },
               "isDeprecated": false,
               "deprecationReason": null
@@ -3717,6 +3694,29 @@
           "enumValues": null,
           "possibleTypes": null
         },
+        {
+          "kind": "OBJECT",
+          "name": "SitePluginPluginOptionsPostCssPlugins",
+          "description": null,
+          "fields": [
+            {
+              "name": "postcssPlugin",
+              "description": null,
+              "args": [],
+              "type": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              },
+              "isDeprecated": false,
+              "deprecationReason": null
+            }
+          ],
+          "inputFields": null,
+          "interfaces": [],
+          "enumValues": null,
+          "possibleTypes": null
+        },
         {
           "kind": "OBJECT",
           "name": "SitePluginPackageJson",
@@ -20184,16 +20184,6 @@
               },
               "defaultValue": null
             },
-            {
-              "name": "postCssPlugins",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
-                "ofType": null
-              },
-              "defaultValue": null
-            },
             {
               "name": "trackingIds",
               "description": null,
@@ -20273,45 +20263,13 @@
                 "ofType": null
               },
               "defaultValue": null
-            }
-          ],
-          "interfaces": null,
-          "enumValues": null,
-          "possibleTypes": null
-        },
-        {
-          "kind": "INPUT_OBJECT",
-          "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
-          "description": null,
-          "fields": null,
-          "inputFields": [
-            {
-              "name": "elemMatch",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
-                "ofType": null
-              },
-              "defaultValue": null
-            }
-          ],
-          "interfaces": null,
-          "enumValues": null,
-          "possibleTypes": null
-        },
-        {
-          "kind": "INPUT_OBJECT",
-          "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
-          "description": null,
-          "fields": null,
-          "inputFields": [
+            },
             {
-              "name": "postcssPlugin",
+              "name": "postCssPlugins",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
-                "name": "StringQueryOperatorInput",
+                "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
                 "ofType": null
               },
               "defaultValue": null
@@ -20392,6 +20350,48 @@
           "enumValues": null,
           "possibleTypes": null
         },
+        {
+          "kind": "INPUT_OBJECT",
+          "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
+          "description": null,
+          "fields": null,
+          "inputFields": [
+            {
+              "name": "elemMatch",
+              "description": null,
+              "type": {
+                "kind": "INPUT_OBJECT",
+                "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
+                "ofType": null
+              },
+              "defaultValue": null
+            }
+          ],
+          "interfaces": null,
+          "enumValues": null,
+          "possibleTypes": null
+        },
+        {
+          "kind": "INPUT_OBJECT",
+          "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
+          "description": null,
+          "fields": null,
+          "inputFields": [
+            {
+              "name": "postcssPlugin",
+              "description": null,
+              "type": {
+                "kind": "INPUT_OBJECT",
+                "name": "StringQueryOperatorInput",
+                "ofType": null
+              },
+              "defaultValue": null
+            }
+          ],
+          "interfaces": null,
+          "enumValues": null,
+          "possibleTypes": null
+        },
         {
           "kind": "INPUT_OBJECT",
           "name": "SitePluginPackageJsonFilterInput",
@@ -21696,18 +21696,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginCreator___pluginOptions___postCssPlugins",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
-            {
-              "name": "pluginCreator___pluginOptions___postCssPlugins___postcssPlugin",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginCreator___pluginOptions___trackingIds",
               "description": null,
@@ -21786,6 +21774,18 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "pluginCreator___pluginOptions___postCssPlugins",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
+            {
+              "name": "pluginCreator___pluginOptions___postCssPlugins___postcssPlugin",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "pluginCreator___packageJson___name",
               "description": null,
@@ -23052,18 +23052,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginOptions___postCssPlugins",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
-            {
-              "name": "pluginOptions___postCssPlugins___postcssPlugin",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginOptions___trackingIds",
               "description": null,
@@ -23142,6 +23130,18 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "pluginOptions___postCssPlugins",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
+            {
+              "name": "pluginOptions___postCssPlugins___postcssPlugin",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "packageJson___name",
               "description": null,

From 3023736c6b2e68b9ac7954f98ded55dc6520b75e Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Mon, 14 Aug 2023 16:26:27 -0400
Subject: [PATCH 03/18] remove inline css from 404

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 schema.json         | 76 +++++++++++++++++++++++++++++++++++++++++++++
 src/pages/404.tsx   | 12 +++----
 src/style/index.css | 26 ++++++++++++++++
 3 files changed, 108 insertions(+), 6 deletions(-)

diff --git a/schema.json b/schema.json
index 0f183a8..026070f 100644
--- a/schema.json
+++ b/schema.json
@@ -2221,6 +2221,30 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "port",
+              "description": null,
+              "args": [],
+              "type": {
+                "kind": "SCALAR",
+                "name": "Int",
+                "ofType": null
+              },
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
+            {
+              "name": "host",
+              "description": null,
+              "args": [],
+              "type": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              },
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "polyfill",
               "description": null,
@@ -7743,6 +7767,26 @@
                   },
                   "defaultValue": null
                 },
+                {
+                  "name": "port",
+                  "description": null,
+                  "type": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "IntQueryOperatorInput",
+                    "ofType": null
+                  },
+                  "defaultValue": null
+                },
+                {
+                  "name": "host",
+                  "description": null,
+                  "type": {
+                    "kind": "INPUT_OBJECT",
+                    "name": "StringQueryOperatorInput",
+                    "ofType": null
+                  },
+                  "defaultValue": null
+                },
                 {
                   "name": "polyfill",
                   "description": null,
@@ -17529,6 +17573,18 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "port",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
+            {
+              "name": "host",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "polyfill",
               "description": null,
@@ -18384,6 +18440,26 @@
               },
               "defaultValue": null
             },
+            {
+              "name": "port",
+              "description": null,
+              "type": {
+                "kind": "INPUT_OBJECT",
+                "name": "IntQueryOperatorInput",
+                "ofType": null
+              },
+              "defaultValue": null
+            },
+            {
+              "name": "host",
+              "description": null,
+              "type": {
+                "kind": "INPUT_OBJECT",
+                "name": "StringQueryOperatorInput",
+                "ofType": null
+              },
+              "defaultValue": null
+            },
             {
               "name": "polyfill",
               "description": null,
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 42c3f61..82898d1 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -10,18 +10,18 @@ export default ({ location }: PageProps<{}, {}>) => {
             }}
             location={location}
         >
-            <div className="container mx-auto py-12">
-                <div className="title py-12 text-center">
-                    <h2 className="text-7xl text-color-1">
-                        4<span className="text-primary">0</span>4
+            <div className="not-found-div">
+                <div className="not-found-title-div">
+                    <h2 className="not-found-title">
+                        4<span className="not-found-title-text">0</span>4
                     </h2>
                 </div>
-                <div className="pb-20 text-center">
+                <div className="not-found-msg">
                     <p>Oops! That page does not exist. <span role="img" aria-label="Sad face">😞</span></p>
                     <p>
                         <button onClick={() => {
                             if(window.history) window.history.back();
-                        }} className="text-link">Go Back?</button>
+                        }} className="not-found-btn">Go Back?</button>
                     </p>
                 </div>
             </div>
diff --git a/src/style/index.css b/src/style/index.css
index 52f3362..4b4c58c 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -467,4 +467,30 @@ h1, h2, h3, h4, h5, h6 {
 
 .blog-div-children {
     @apply flex flex-wrap;
+}
+
+/* 404 */
+
+.not-found-div {
+    @apply container mx-auto py-12;
+}
+
+.not-found-title-div {
+    @apply title py-12 text-center;
+}
+
+.not-found-title {
+    @apply text-7xl text-color-1;
+}
+
+.not-found-title-text {
+    @apply text-primary;
+}
+
+.not-found-msg {
+    @apply pb-20 text-center;
+}
+
+.not-found-btn {
+    @apply text-link;
 }
\ No newline at end of file

From 1d7aba10fb30694ab6826ec7c7113496ed8ba411 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Tue, 15 Aug 2023 11:26:24 -0400
Subject: [PATCH 04/18] remove inline css from cookie

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/cookie.tsx | 10 +++++-----
 src/style/index.css       | 30 ++++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/cookie.tsx b/src/components/cookie.tsx
index e234f78..ea9e202 100644
--- a/src/components/cookie.tsx
+++ b/src/components/cookie.tsx
@@ -7,12 +7,12 @@ interface Props {
 
 const CookieBox = ({ onChange}: Props) => {
     return (
-        <div className="fixed bottom-0 left-0 w-full bg-bgalt border-t-2 border-primary p-4 flex flex-wrap items-center justify-between z-50">
-            <div className="flex">
-                <p className="text-color-default mr-2">This website uses cookies to ensure you get the best experience on our website.</p>
-                <Link to="/privacy-policy" className="text-color-1">Privacy policy</Link>
+        <div className="cookie-div">
+            <div className="cookie-inner-div">
+                <p className="cookie-p">This website uses cookies to ensure you get the best experience on our website.</p>
+                <Link to="/privacy-policy" className="cookie-link">Privacy policy</Link>
             </div>
-            <button className="px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all" onClick={onChange}>Accept</button>
+            <button className="cookie-btn" onClick={onChange}>Accept</button>
         </div>
     )
 }
diff --git a/src/style/index.css b/src/style/index.css
index 4b4c58c..9fb4f28 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -329,7 +329,7 @@ h1, h2, h3, h4, h5, h6 {
     white-space: nowrap;
 }
 
-/* Wall */
+/* Index Wall */
 
 .wall {
     @apply flex relative justify-center items-center overflow-hidden pt-24 px-16;
@@ -367,7 +367,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105;
 }
 
-/* About */
+/* Index About */
 
 .about-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -389,7 +389,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply my-5 text-lg px-6;
 }
 
-/* Feature Boxes */
+/* Index Feature Boxes */
 
 .feature-boxes-div {
     @apply border-t-2 border-dashed border-color-2
@@ -447,7 +447,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-6 lg:order-6;
 }
 
-/* Blog */
+/* Blog on Index */
 
 .blog-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -493,4 +493,26 @@ h1, h2, h3, h4, h5, h6 {
 
 .not-found-btn {
     @apply text-link;
+}
+
+/* Cookie */
+
+.cookie-div {
+    @apply fixed bottom-0 left-0 w-full bg-bgalt border-t-2 border-primary p-4 flex flex-wrap items-center justify-between z-50;
+}
+
+.cookie-inner-div {
+    @apply flex;
+}
+
+.cookie-p {
+    @apply text-color-default mr-2;
+}
+
+.cookie-link {
+    @apply text-color-1;
+}
+
+.cookie-btn {
+    @apply px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all;
 }
\ No newline at end of file

From 5adf61266e526afb259b51b6edacbd43a48bc81f Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Wed, 23 Aug 2023 13:58:32 -0400
Subject: [PATCH 05/18] remove inline css from shortcodes

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/shortcodes/index.tsx | 2 +-
 src/style/index.css                 | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/shortcodes/index.tsx b/src/components/shortcodes/index.tsx
index f9a102a..1c92d44 100644
--- a/src/components/shortcodes/index.tsx
+++ b/src/components/shortcodes/index.tsx
@@ -10,7 +10,7 @@ const Row = ({ children }) => {
 
 const Col = ({ children }) => {
     return (
-        <div className="flex-1 p-2">
+        <div className="shortcodes">
             {children}
         </div>
     )
diff --git a/src/style/index.css b/src/style/index.css
index 9fb4f28..4e4aca0 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -515,4 +515,10 @@ h1, h2, h3, h4, h5, h6 {
 
 .cookie-btn {
     @apply px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all;
+}
+
+/* Shortcodes */
+
+.shortcodes {
+    @apply flex-1 p-2;
 }
\ No newline at end of file

From 251e0e6cfe7756644ad3aa8b9bda8d6acb960832 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Wed, 23 Aug 2023 14:09:51 -0400
Subject: [PATCH 06/18] remove inline css from footer

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/footer.tsx | 10 +++++-----
 src/style/index.css       | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index b4a0ecf..28867e1 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -26,16 +26,16 @@ export default function() {
     ))
 
     return (
-        <footer className="border-t-2 border-dashed border-color-2 footer py-12">
-            <div className="container mx-auto text-center">
+        <footer className="footer-outer-div">
+            <div className="footer-inner-div">
                 <div
-                    className="text-color-1 my-3"
+                    className="footerlinks"
                 >
                     <ul>
                     {footerLinks} 
                     </ul>
                 </div>
-                <p className="text-color-default text-lg">
+                <p className="footer-copyright">
                     Copyright &copy; {new Date().getFullYear()} The Linux Foundation<sup>®</sup>. All rights reserved.      
                 </p>
             </div>
@@ -45,7 +45,7 @@ export default function() {
 
 const ListItem: React.FC<{ data: FooterLinksQuery_site_siteMetadata_footerLinks }> = ({ data }) => {
     return (
-        <li className="inline-block mx-3 animated-link-parent">
+        <li className="footerlink-list">
             <Link to={data.url} title={data.name} rel={data.rel}>
                 <span>{data.name}</span>
             </Link>
diff --git a/src/style/index.css b/src/style/index.css
index 4e4aca0..32982a8 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -521,4 +521,26 @@ h1, h2, h3, h4, h5, h6 {
 
 .shortcodes {
     @apply flex-1 p-2;
+}
+
+/* Footer */
+
+.footer-outer-div {
+    @apply border-t-2 border-dashed border-color-2 py-12;
+}
+
+.footer-inner-div {
+    @apply container mx-auto text-center;
+}
+
+.footerlinks {
+    @apply text-color-1 my-3;
+}
+
+.footer-copyright {
+    @apply text-color-default text-lg;
+}
+
+.footerlink-list {
+    @apply inline-block mx-3 animated-link-parent;
 }
\ No newline at end of file

From edbc18436eb78d3668cdae21283f3cf8c29567a8 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Wed, 23 Aug 2023 14:21:27 -0400
Subject: [PATCH 07/18] remove inline css from item-blog

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/item-blog.tsx | 14 ++++++-------
 src/style/index.css          | 38 ++++++++++++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/item-blog.tsx b/src/components/item-blog.tsx
index 751621d..6f99958 100644
--- a/src/components/item-blog.tsx
+++ b/src/components/item-blog.tsx
@@ -12,22 +12,22 @@ export const ItemBlog: React.FC<{ data: ItemBlogProps}> = ({ data }) => {
     const [focused, changeFocused] = useState(false);
 
     return (
-        <div className="blog-item w-full md:w-1/2 lg:w-1/3 p-4">
+        <div className="item-blog-div">
             <Link to={data.fields.slug} title={data.frontmatter.title}>
                 <div className="image">
                     {data.frontmatter.image.publicURL.endsWith('.svg') ?
                     <img src={data.frontmatter.image.publicURL} alt={data.frontmatter.title} className="w-full" /> :
                     <Img fluid={data.frontmatter.image.childImageSharp?.fluid} alt={data.frontmatter.title} className="w-full" />}
                 </div>
-                <div className="p-4 py-3">
-                    <h4 className="text-color-1 text-3xl pt-1">
+                <div className="item-blog-frontmatter-outer-div">
+                    <h4 className="item-blog-frontmatter-title">
                         {data.frontmatter.title}
                     </h4>
-                    <div className="flex items-center text-secondary">
-                        <Calendar className="stroke-current"/>
-                        <p className="pl-2 text-color-default font-sans">{data.frontmatter.date} by {data.frontmatter.author}</p>
+                    <div className="item-blog-frontmatter-inner-div">
+                        <Calendar className="item-blog-frontmatter-calendar"/>
+                        <p className="item-blog-frontmatter-author-title">{data.frontmatter.date} by {data.frontmatter.author}</p>
                     </div>
-                    <p className="pt-3 text-color-default">
+                    <p className="item-blog-frontmatter-description">
                         {data.frontmatter.description}
                     </p>
                 </div>
diff --git a/src/style/index.css b/src/style/index.css
index 32982a8..5517b6a 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -321,10 +321,6 @@ h1, h2, h3, h4, h5, h6 {
     margin-bottom: 1.5rem;
 }
 
-.blog-item {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
 .nowrap {
     white-space: nowrap;
 }
@@ -543,4 +539,38 @@ h1, h2, h3, h4, h5, h6 {
 
 .footerlink-list {
     @apply inline-block mx-3 animated-link-parent;
+}
+
+/* Item-blog */
+
+.blog-item {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.item-blog-div {
+    @apply blog-item w-full md:w-1/2 lg:w-1/3 p-4;
+}
+
+.item-blog-frontmatter-outer-div {
+    @apply p-4 py-3;
+}
+
+.item-blog-frontmatter-title {
+    @apply text-color-1 text-3xl pt-1;
+}
+
+.item-blog-frontmatter-inner-div {
+    @apply flex items-center text-secondary;
+}
+
+.item-blog-frontmatter-calendar {
+    @apply stroke-current;
+}
+
+.item-blog-frontmatter-author-title {
+    @apply pl-2 text-color-default font-sans;
+}
+
+.item-blog-frontmatter-description {
+    @apply pt-3 text-color-default;
 }
\ No newline at end of file

From 4aa349b502b0db6566acf2d32cd974c0233fbc6c Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Wed, 23 Aug 2023 14:23:55 -0400
Subject: [PATCH 08/18] remove inline css from layout

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/layout.tsx | 2 +-
 src/style/index.css       | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 528e120..ec1cd7d 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -82,7 +82,7 @@ export default ({ children, front, seo, navPlaceholder=true, location }: LayoutP
             <Head data={query}/>
             <SEO {...seo} />
             <div className={`wrapper ${themes[theme].name}`}>
-                <div className="text-color-default bg-bg">
+                <div className="layout-navbar-inner-div">
                     <Navbar front={front} navPlaceholder={navPlaceholder} location={location} currentTheme={theme} switchTheme={switchTheme} themes={themes} allowThemeSwitch={query.site.siteMetadata.switchTheme}/>
                     {children}
                     <Footer />
diff --git a/src/style/index.css b/src/style/index.css
index 5517b6a..ecf3a6a 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -573,4 +573,10 @@ h1, h2, h3, h4, h5, h6 {
 
 .item-blog-frontmatter-description {
     @apply pt-3 text-color-default;
+}
+
+/* Layout */
+
+.layout-navbar-inner-div {
+    @apply text-color-default bg-bg;
 }
\ No newline at end of file

From d9b8a6349ec16872ce19944c35aeae2bb4cea813 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Wed, 23 Aug 2023 14:55:08 -0400
Subject: [PATCH 09/18] remove inline css from navigation-list

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/navigation-list.tsx |  6 +++---
 src/style/index.css                | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation-list.tsx b/src/components/navigation-list.tsx
index c368745..350c70f 100644
--- a/src/components/navigation-list.tsx
+++ b/src/components/navigation-list.tsx
@@ -43,8 +43,8 @@ const List: React.FC<NavigationListProps> = ({
             const next = i !== themes.length - 1 ? i + 1 : 0
             return (
                 <button
-                    className={`text-color-1 transition-transform duration-200 transform top-0 left-0 ${
-                        i === currentTheme ? "scale-100" : "scale-0 absolute"
+                    className={`navigation-list-btn ${
+                        i === currentTheme ? "navigation-list-btn-theme" : "navigation-list-btn-no-theme"
                     }`}
                     title={`Switch to ${themes[next].label}`}
                     key={`${name}-theme-switch-btn-${item.name}`}
@@ -70,7 +70,7 @@ const List: React.FC<NavigationListProps> = ({
 const ListItem = ({ data, active, liClassName }) => {
     return (
         <li className={`${liClassName} ${active ? "active" : ""}`}>
-            <Link to={data.url} title={data.name} className="text-color-1 focus:text-primary">
+            <Link to={data.url} title={data.name} className="navigation-list-link">
                 <span>{data.name}</span>
             </Link>
         </li>
diff --git a/src/style/index.css b/src/style/index.css
index ecf3a6a..50ef7ad 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -579,4 +579,22 @@ h1, h2, h3, h4, h5, h6 {
 
 .layout-navbar-inner-div {
     @apply text-color-default bg-bg;
+}
+
+/* Navigation-list */
+
+.navigation-list-btn {
+    @apply text-color-1 transition-transform duration-200 transform top-0 left-0;
+}
+
+.navigation-list-btn-theme {
+    @apply scale-100;
+}
+
+.navigation-list-btn-no-theme {
+    @apply scale-0 absolute;
+}
+
+.navigation-list-link {
+    @apply text-color-1 focus:text-primary;
 }
\ No newline at end of file

From a487c35c25a7bb7b9e83ad0cb966c435562cd258 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Wed, 23 Aug 2023 15:40:41 -0400
Subject: [PATCH 10/18] remove inline css from navigation

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/navigation.tsx | 30 +++++++-------
 src/style/index.css           | 74 +++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 15 deletions(-)

diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 7f2413a..a52f746 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -50,13 +50,13 @@ const Navbar: React.FC<NavbarProps> = ({ navPlaceholder, location, currentTheme,
     return (
         <React.Fragment>
             <div
-                className={`duration-300 transition-all flex justify-center lg:justify-between items-center z-20 fixed w-full nav ${
-                    scrolled ? "scrolled bg-bg p-4" : "p-5"
+                className={`navigation-outer-div ${
+                    scrolled ? "navigation-outer-div-scrolled" : "navigation-outer-div-unscrolled"
                 }`}
                 ref={navbar}
             >
                 <button
-                    className="absolute text-primary outline-0 lg:hidden"
+                    className="navigation-btn"
                     style={{
                         transform: "translateY(-50%)",
                         top: "50%",
@@ -69,32 +69,32 @@ const Navbar: React.FC<NavbarProps> = ({ navPlaceholder, location, currentTheme,
                     <Menu />
                 </button>
                 <SideBar open={sidebarOpen} onChange={setSidebarOpen}>
-                    <div className="bg-bg h-full flex flex-col justify-center relative">
-                        <div className="absolute top-0 my-4 text-center w-full">
-                            <Link to="/" title={data.site.siteMetadata.title} className="inline-block">
+                    <div className="navigation-sidebar-outer-div">
+                        <div className="navigation-sidebar-inner-div-1">
+                            <Link to="/" title={data.site.siteMetadata.title} className="navigation-sidebar-link">
                                 <Logo
-                                    className={`duration-300 transition-all ${
-                                        scrolled ? "h-8" : "h-12"
+                                    className={`navigation-sidebar-link-logo ${
+                                        scrolled ? "navigation-sidebar-link-logo-scrolled" : "navigation-sidebar-link-logo-unscrolled"
                                     }`}
                                 />
                             </Link>
                         </div>
-                        <div className="text-center">
-                            <List name="sidebar-nav" current={currentLocation}  currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch} liClassName="block my-2"/>
+                        <div className=".navigation-sidebar-inner-div-2">
+                            <List name="sidebar-nav" current={currentLocation}  currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch} liClassName="navigation-sidebar-inner-div-2-list"/>
                         </div>
                     </div>
                 </SideBar>
                 <Link to="/" title={data.site.siteMetadata.title}>
                     <Logo
-                        className={`duration-300 transition-all ${
-                            scrolled ? "h-8" : "h-12"
+                        className={`navigation-link-logo ${
+                            scrolled ? "navigation-link-logo-scrolled" : "navigation-link-logo-unscrolled"
                         }`}
                     />
                 </Link>
-                <div className="hidden lg:block">
-                    <List name="navbar" className="nav-links flex" current={currentLocation} currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch}/>
+                <div className="navigation-inner-div-1">
+                    <List name="navbar" className="navigation-navbar" current={currentLocation} currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch}/>
                 </div>
-                <div className="absolute line h-px left-0 bottom-0 bg-gradient-primary"></div>
+                <div className="navigation-inner-div-2"></div>
             </div>
             {navPlaceholder && (
                 <div style={{ height: `${navbarHeight}px` }}></div>
diff --git a/src/style/index.css b/src/style/index.css
index 50ef7ad..1f52b21 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -597,4 +597,78 @@ h1, h2, h3, h4, h5, h6 {
 
 .navigation-list-link {
     @apply text-color-1 focus:text-primary;
+}
+
+/* Navigation */
+
+.navigation-outer-div {
+    @apply duration-300 transition-all flex justify-center lg:justify-between items-center z-20 fixed w-full nav;
+}
+
+.navigation-outer-div-scrolled {
+    @apply scrolled bg-bg p-4;
+}
+
+.navigation-outer-div-unscrolled {
+    @apply p-5;
+}
+
+.navigation-btn {
+    @apply absolute text-primary lg:hidden;
+}
+
+.navigation-sidebar-outer-div {
+    @apply bg-bg h-full flex flex-col justify-center relative;
+}
+
+.navigation-sidebar-inner-div-1 {
+    @apply absolute top-0 my-4 text-center w-full;
+}
+
+.navigation-sidebar-link {
+    @apply inline-block;
+}
+
+.navigation-sidebar-link-logo {
+    @apply duration-300 transition-all;
+}
+
+.navigation-sidebar-link-logo-scrolled {
+    @apply h-8;
+}
+
+.navigation-sidebar-link-logo-unscrolled {
+    @apply h-12;
+}
+
+.navigation-sidebar-inner-div-2 {
+    @apply text-center;
+}
+
+.navigation-sidebar-inner-div-2-list {
+    @apply block my-2;
+}
+
+.navigation-link-logo {
+    @apply duration-300 transition-all;
+}
+
+.navigation-link-logo-scrolled {
+    @apply h-8;
+}
+
+.navigation-link-logo-unscrolled {
+    @apply h-12;
+}
+
+.navigation-inner-div-1 {
+    @apply hidden lg:block;
+}
+
+.navigation-navbar {
+    @apply nav-links flex;
+}
+
+.navigation-inner-div-2 {
+    @apply absolute line h-px left-0 bottom-0 bg-gradient-primary;
 }
\ No newline at end of file

From 2be4a328041e737e58469ad00d2b537caad30158 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Thu, 24 Aug 2023 11:00:21 -0400
Subject: [PATCH 11/18] remove inline css from pagination and fix navigation
 styling

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/navigation.tsx |  4 ++--
 src/components/pagination.tsx |  8 ++++----
 src/style/index.css           | 27 +++++++++++++++++++++++++--
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index a52f746..ee8becb 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -50,7 +50,7 @@ const Navbar: React.FC<NavbarProps> = ({ navPlaceholder, location, currentTheme,
     return (
         <React.Fragment>
             <div
-                className={`navigation-outer-div ${
+                className={`navigation-outer-div nav ${
                     scrolled ? "navigation-outer-div-scrolled" : "navigation-outer-div-unscrolled"
                 }`}
                 ref={navbar}
@@ -79,7 +79,7 @@ const Navbar: React.FC<NavbarProps> = ({ navPlaceholder, location, currentTheme,
                                 />
                             </Link>
                         </div>
-                        <div className=".navigation-sidebar-inner-div-2">
+                        <div className="navigation-sidebar-inner-div-2">
                             <List name="sidebar-nav" current={currentLocation}  currentTheme={currentTheme} switchTheme={switchTheme} themes={themes} withThemeSwitch={allowThemeSwitch} liClassName="navigation-sidebar-inner-div-2-list"/>
                         </div>
                     </div>
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 5e687a9..9859221 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -8,8 +8,8 @@ export default function({ pageContext, type }) {
         
 
         return (
-            <div className="pagination mt-8">
-                <ul className="text-center">
+            <div className="pagination-outer-div">
+                <ul className="pagination-ul">
                     {pageContext.currentPage !== 1 && (
                         <Item type={type} currentPage={pageContext.currentPage} page={pageContext.currentPage-1} icon={<ChevronLeft />} title="Previous Page"/>
                     )}
@@ -35,12 +35,12 @@ const Item: React.FC<ItemProps> = ({ type, currentPage, title, page, icon }) =>
 
     return (
         <li
-            className={`inline-block align-middle`}
+            className={`pagination-li`}
         >
             <Link
                 to={to}
                 title={_title}
-                className={`rounded-full bg-bgalt flex items-center justify-center w-12 text-center h-12 m-3 transition-all duration-300 hover:shadow-2xl focus:shadow-2xl ${active ? "bg-gradient-primary text-white shadow-2xl" : ""}`}
+                className={`pagination-link ${active ? "pagination-link-active" : ""}`}
             >
                 <span>{icon || page}</span>
             </Link>
diff --git a/src/style/index.css b/src/style/index.css
index 1f52b21..f88f393 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -602,7 +602,7 @@ h1, h2, h3, h4, h5, h6 {
 /* Navigation */
 
 .navigation-outer-div {
-    @apply duration-300 transition-all flex justify-center lg:justify-between items-center z-20 fixed w-full nav;
+    @apply duration-300 transition-all flex justify-center lg:justify-between items-center z-20 fixed w-full;
 }
 
 .navigation-outer-div-scrolled {
@@ -671,4 +671,27 @@ h1, h2, h3, h4, h5, h6 {
 
 .navigation-inner-div-2 {
     @apply absolute line h-px left-0 bottom-0 bg-gradient-primary;
-}
\ No newline at end of file
+}
+
+/* Pagination */
+
+.pagination-outer-div {
+    @apply mt-8;
+}
+
+.pagination-ul {
+    @apply text-center;
+}
+
+.pagination-li {
+    @apply inline-block align-middle;
+}
+
+.pagination-link {
+    @apply rounded-full bg-bgalt flex items-center justify-center w-12 text-center h-12 m-3 transition-all duration-300 hover:shadow-2xl focus:shadow-2xl;
+}
+
+.pagination-link-active {
+    @apply bg-gradient-primary text-white shadow-2xl;
+}
+

From 31d5ac0ac99ffa9ce597c201571baa898ea9532a Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Thu, 24 Aug 2023 12:18:04 -0400
Subject: [PATCH 12/18] remove inline css from sidebar

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/sidebar.tsx | 31 ++-----------------------------
 src/style/index.css        | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 7629e8e..f8d3668 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -195,21 +195,8 @@ export default class SideBar extends React.Component<SideBarProps, SideBarState>
 
     render(){
         return(
-            <div className="r-swipe-sidebar-container" style={{
-                position: "absolute"
-            }}>
-                <div className="r-swipe-sidebar" ref={this.sidebarParent} style={{
-                    position: "fixed",
-                    left: `${this.state.progress-100}%`,
-                    width: this.settings.sidebarWidth,
-                    height: "100%",
-                    top: 0,
-                    zIndex: 9999,
-                    transitionProperty: "left",
-                    transitionDuration: this.state.transitionTime+"s",
-                    transitionTimingFunction: "linear",
-                    transform: "translate3d(0,0,0)"
-                }}>
+            <div className="r-swipe-sidebar-container">
+                <div className="r-swipe-sidebar" ref={this.sidebarParent}>
                     {this.props.children}
                 </div>
                 <div 
@@ -217,25 +204,11 @@ export default class SideBar extends React.Component<SideBarProps, SideBarState>
                     ref={this.sidebarOverlay}
                     role="button"
                     tabIndex={-1}
-                    style={{
-                        position: "fixed",
-                        top: 0,
-                        bottom: 0,
-                        left: this.state.progress === 0 ? "-100%" : "0%",
-                        width: "100%",
-                        height: "100%",
-                        background: "#000",
-                        zIndex: 9998,
-                        transitionProperty: "opacity",
-                        transitionDuration: "0s",
-                        opacity: `${this.state.progress/200}`
-                    }}
                     onClick={this.closeSidebar}
                     onKeyPress={(e) => {
                         if(e.which === 27) this.closeSidebar();
                     }}
                 >
-
                 </div>
             </div>
         )
diff --git a/src/style/index.css b/src/style/index.css
index f88f393..e996ce3 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -695,3 +695,35 @@ h1, h2, h3, h4, h5, h6 {
     @apply bg-gradient-primary text-white shadow-2xl;
 }
 
+/* Sidebar */
+
+.r-swipe-sidebar-container {
+    position: "absolute"
+}
+
+.r-swipe-sidebar {
+    position: "fixed";
+    left: "`${this.state.progress-100}%`";
+    width: "this.settings.sidebarWidth";
+    height: "100%";
+    top: "0";
+    zIndex: "9999";
+    transitionProperty: "left";
+    transitionDuration: "this.state.transitionTime+"s"";
+    transitionTimingFunction: "linear";
+    transform: "translate3d(0,0,0)"
+}
+
+.r-swipe-sidebar-overlay {
+    position: "fixed";
+    top: 0;
+    bottom: 0;
+    left: "this.state.progress === 0 ? "-100%" : "0%"";
+    width: "100%";
+    height: "100%";
+    background: "#000";
+    zIndex: 9998;
+    transitionProperty: "opacity";
+    transitionDuration: "0s";
+    opacity: "`${this.state.progress/200}`"
+}
\ No newline at end of file

From 7b122a67b784ed232439204d97843bcbed3639cb Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Thu, 24 Aug 2023 12:52:33 -0400
Subject: [PATCH 13/18] remove inline css from ui and revert sidebar

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 src/components/sidebar.tsx | 26 ++++++++++++++++-
 src/components/ui.tsx      | 13 ++++-----
 src/style/index.css        | 57 ++++++++++++++++++++++----------------
 3 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index f8d3668..5e6804b 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -196,12 +196,36 @@ export default class SideBar extends React.Component<SideBarProps, SideBarState>
     render(){
         return(
             <div className="r-swipe-sidebar-container">
-                <div className="r-swipe-sidebar" ref={this.sidebarParent}>
+                <div className="r-swipe-sidebar" ref={this.sidebarParent} style={{
+                    position: "fixed",
+                    height: "100%",
+                    top: "0",
+                    left: `${this.state.progress-100}%`,
+                    width: this.settings.sidebarWidth,
+                    zIndex: "9999",
+                    transitionProperty: "left",
+                    transitionDuration: this.state.transitionTime+"s",
+                    transitionTimingFunction: "linear",
+                    transform: "translate3d(0,0,0)"
+                }}>
                     {this.props.children}
                 </div>
                 <div 
                     className="r-swipe-sidebar-overlay"
                     ref={this.sidebarOverlay}
+                    style={{
+                        position: "fixed",
+                        top: 0,
+                        bottom: 0,
+                        left: this.state.progress === 0 ? "-100%" : "0%",
+                        width: "100%",
+                        height: "100%",
+                        background: "#000",
+                        zIndex: 9998,
+                        transitionProperty: "opacity",
+                        transitionDuration: "0s",
+                        opacity: "`${this.state.progress/200}`"
+                    }}
                     role="button"
                     tabIndex={-1}
                     onClick={this.closeSidebar}
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index d469df2..f33757d 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -47,7 +47,7 @@ const TextInput = ({ label, type = "text", name, onChange, footer }) => {
         <input
             type={type}
             name={name}
-            className="block w-full outline-none px-4 py-2 focus:outline-none bg-bg text-color-default"
+            className="ui-input"
             onFocus={() => changeFocused(true)}
             onBlur={() => changeFocused(false)}
             onChange={onChange}
@@ -58,12 +58,11 @@ const TextInput = ({ label, type = "text", name, onChange, footer }) => {
     if (type === "textarea") {
         elem = (
             <textarea
-                className="block w-full outline-none resize-none px-4 py-2 focus:outline-none bg-bg text-color-default"
+                className="ui-textarea"
                 name={name}
                 onChange={event => {
                     event.target.style.height = "auto"
                     event.target.style.height = event.target.scrollHeight + "px";
-
                     onChange(event);
                 }}
                 onFocus={() => changeFocused(true)}
@@ -76,11 +75,11 @@ const TextInput = ({ label, type = "text", name, onChange, footer }) => {
     return (
         <div
             className={`${
-                focused ? "input focused shadow-2xl" : ""
-            } transition-all duration-300 py-3 lg:p-4 pb-6`}
+                focused ? "input focused" : ""
+            } ui-input-div`}
         >
-            <p className="text-color-3">{label}</p>
-            <div className="bg-gradient-primary p-2px">
+            <p className="ui-input-div-p">{label}</p>
+            <div className="ui-input-div-elem">
                 {elem}
             </div>
             {footer && 
diff --git a/src/style/index.css b/src/style/index.css
index e996ce3..f05406d 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -443,7 +443,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-6 lg:order-6;
 }
 
-/* Blog on Index */
+/* Index Blog Posts */
 
 .blog-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -698,32 +698,41 @@ h1, h2, h3, h4, h5, h6 {
 /* Sidebar */
 
 .r-swipe-sidebar-container {
-    position: "absolute"
+    @apply absolute;
 }
 
 .r-swipe-sidebar {
-    position: "fixed";
-    left: "`${this.state.progress-100}%`";
-    width: "this.settings.sidebarWidth";
-    height: "100%";
-    top: "0";
-    zIndex: "9999";
-    transitionProperty: "left";
-    transitionDuration: "this.state.transitionTime+"s"";
-    transitionTimingFunction: "linear";
-    transform: "translate3d(0,0,0)"
+ 
 }
 
 .r-swipe-sidebar-overlay {
-    position: "fixed";
-    top: 0;
-    bottom: 0;
-    left: "this.state.progress === 0 ? "-100%" : "0%"";
-    width: "100%";
-    height: "100%";
-    background: "#000";
-    zIndex: 9998;
-    transitionProperty: "opacity";
-    transitionDuration: "0s";
-    opacity: "`${this.state.progress/200}`"
-}
\ No newline at end of file
+   
+}
+
+/* UI */
+
+.ui-input {
+    @apply block w-full outline-none px-4 py-2 focus:outline-none bg-bg text-color-default;
+}
+
+.ui-textarea {
+    @apply block w-full outline-none resize-none px-4 py-2 focus:outline-none bg-bg text-color-default;
+}
+
+.ui-input-focused {
+    @apply shadow-2xl;
+}
+
+.ui-input-div {
+    @apply transition-all duration-300 py-3 lg:p-4 pb-6;
+}
+
+.ui-input-div-p {
+    @apply text-color-3;
+}
+
+.ui-input-div-elem {
+    @apply bg-gradient-primary p-2px;
+}
+
+

From daf7c50b884776d658d33bbad9bdb1655e01f212 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Thu, 24 Aug 2023 16:53:05 -0400
Subject: [PATCH 14/18] remove inline css from navigation and add hashes to
 gatsby-config and re-enable csp plugin

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 gatsby-config.ts              |  11 ++--
 schema.json                   | 110 ----------------------------------
 src/components/navigation.tsx |   5 --
 src/style/index.css           |   3 +
 4 files changed, 8 insertions(+), 121 deletions(-)

diff --git a/gatsby-config.ts b/gatsby-config.ts
index 29f0ba3..99d9f99 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -90,15 +90,14 @@ const plugins = [
           disableOnDev: false,
           reportOnly: false,
           mergeScriptHashes: true,
-          mergeStyleHashes: false,
+          mergeStyleHashes: true,
           mergeDefaultDirectives: true,
           directives: {
-            "script-src": "https: 'unsafe-eval'",
-            "script-src-elem": "'self' 'unsafe-inline' https://plausible.io/js/script.outbound-links.js",
-            "style-src": "'self' 'unsafe-inline'",
-            "style-src-elem": "'self' 'unsafe-inline' https://fonts.googleapis.com",
+            "script-src": "'self' 'unsafe-eval' https://plausible.io/js/script.outbound-links.js",
+            "script-src-elem": "'self' https://plausible.io/js/script.outbound-links.js",
+            "style-src": "'self' 'unsafe-hashes' 'sha256-iahNazrr5t3BQXcVfXbYSR8Bd2AOXPifwVTBbIKb/bE=' 'sha256-7buiYDizqbiAS404WOu2AY5NZDzyVesjpBU80D6Nno4=' 'sha256-f7qc12gYVX0xoX9jAoOIxHvtXcfppKYwcBr7sE0GLR4=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI=' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' https://fonts.googleapis.com",
+            "style-src-elem": "'self' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
             "font-src": "'self' data: https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaHUlKZbLXGhmRytc.woff2 https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lKZbLXGhmR.woff2",
-            "img-src": "*"
           }
         }
     },
diff --git a/schema.json b/schema.json
index 026070f..6ab0c75 100644
--- a/schema.json
+++ b/schema.json
@@ -2221,30 +2221,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "port",
-              "description": null,
-              "args": [],
-              "type": {
-                "kind": "SCALAR",
-                "name": "Int",
-                "ofType": null
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
-            {
-              "name": "host",
-              "description": null,
-              "args": [],
-              "type": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "polyfill",
               "description": null,
@@ -3699,18 +3675,6 @@
               },
               "isDeprecated": false,
               "deprecationReason": null
-            },
-            {
-              "name": "img_src",
-              "description": null,
-              "args": [],
-              "type": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
             }
           ],
           "inputFields": null,
@@ -7767,26 +7731,6 @@
                   },
                   "defaultValue": null
                 },
-                {
-                  "name": "port",
-                  "description": null,
-                  "type": {
-                    "kind": "INPUT_OBJECT",
-                    "name": "IntQueryOperatorInput",
-                    "ofType": null
-                  },
-                  "defaultValue": null
-                },
-                {
-                  "name": "host",
-                  "description": null,
-                  "type": {
-                    "kind": "INPUT_OBJECT",
-                    "name": "StringQueryOperatorInput",
-                    "ofType": null
-                  },
-                  "defaultValue": null
-                },
                 {
                   "name": "polyfill",
                   "description": null,
@@ -17573,18 +17517,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "port",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
-            {
-              "name": "host",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "polyfill",
               "description": null,
@@ -18440,26 +18372,6 @@
               },
               "defaultValue": null
             },
-            {
-              "name": "port",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "IntQueryOperatorInput",
-                "ofType": null
-              },
-              "defaultValue": null
-            },
-            {
-              "name": "host",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "StringQueryOperatorInput",
-                "ofType": null
-              },
-              "defaultValue": null
-            },
             {
               "name": "polyfill",
               "description": null,
@@ -20410,16 +20322,6 @@
                 "ofType": null
               },
               "defaultValue": null
-            },
-            {
-              "name": "img_src",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "StringQueryOperatorInput",
-                "ofType": null
-              },
-              "defaultValue": null
             }
           ],
           "interfaces": null,
@@ -21838,12 +21740,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginCreator___pluginOptions___directives___img_src",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginCreator___pluginOptions___pathCheck",
               "description": null,
@@ -23194,12 +23090,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginOptions___directives___img_src",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginOptions___pathCheck",
               "description": null,
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index ee8becb..f06c718 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -57,11 +57,6 @@ const Navbar: React.FC<NavbarProps> = ({ navPlaceholder, location, currentTheme,
             >
                 <button
                     className="navigation-btn"
-                    style={{
-                        transform: "translateY(-50%)",
-                        top: "50%",
-                        left: "10px",
-                    }}
                     onClick={() => {
                         setSidebarOpen(true)
                     }}
diff --git a/src/style/index.css b/src/style/index.css
index f05406d..6466868 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -615,6 +615,9 @@ h1, h2, h3, h4, h5, h6 {
 
 .navigation-btn {
     @apply absolute text-primary lg:hidden;
+    transform: "translateY(-50%)";
+    top: "50%";
+    left: "10px";
 }
 
 .navigation-sidebar-outer-div {

From 4048cbee14ac9d762768fbb8efe5a4f44ade4914 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Thu, 24 Aug 2023 18:48:27 -0400
Subject: [PATCH 15/18] add additional hashes to script-src-elem and
 style-src-elem directives in gatsby-config

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 gatsby-config.ts |   4 +-
 schema.json      | 200 +++++++++++++++++++++++------------------------
 2 files changed, 102 insertions(+), 102 deletions(-)

diff --git a/gatsby-config.ts b/gatsby-config.ts
index 99d9f99..a9d384e 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -94,9 +94,9 @@ const plugins = [
           mergeDefaultDirectives: true,
           directives: {
             "script-src": "'self' 'unsafe-eval' https://plausible.io/js/script.outbound-links.js",
-            "script-src-elem": "'self' https://plausible.io/js/script.outbound-links.js",
+            "script-src-elem": "'self' 'unsafe-hashes' 'sha256-OzUnmjMIVuS+lOnNyveodXW96iw8WIDsfo02bVyJTKE=' 'sha256-r1R1bJHQ2LX3ekmreqx7Y+aSiGGrpPYACbCKNP9s82Q=' 'sha256-egpbluqkD8NT0bY3bWy7raM9tRIMkfUWboq0Y8KqsFk=' https://plausible.io/js/script.outbound-links.js",
             "style-src": "'self' 'unsafe-hashes' 'sha256-iahNazrr5t3BQXcVfXbYSR8Bd2AOXPifwVTBbIKb/bE=' 'sha256-7buiYDizqbiAS404WOu2AY5NZDzyVesjpBU80D6Nno4=' 'sha256-f7qc12gYVX0xoX9jAoOIxHvtXcfppKYwcBr7sE0GLR4=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI=' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' https://fonts.googleapis.com",
-            "style-src-elem": "'self' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
+            "style-src-elem": "'self' 'unsafe-hashes' 'sha256-UrOiXfLZp9TdAD7NY9X+JKYQ8F+C7AsCo9loq6bNNX8=' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
             "font-src": "'self' data: https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaHUlKZbLXGhmRytc.woff2 https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lKZbLXGhmR.woff2",
           }
         }
diff --git a/schema.json b/schema.json
index 6ab0c75..0fc3ae1 100644
--- a/schema.json
+++ b/schema.json
@@ -3489,6 +3489,22 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "postCssPlugins",
+              "description": null,
+              "args": [],
+              "type": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "OBJECT",
+                  "name": "SitePluginPluginOptionsPostCssPlugins",
+                  "ofType": null
+                }
+              },
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "trackingIds",
               "description": null,
@@ -3588,19 +3604,26 @@
               },
               "isDeprecated": false,
               "deprecationReason": null
-            },
+            }
+          ],
+          "inputFields": null,
+          "interfaces": [],
+          "enumValues": null,
+          "possibleTypes": null
+        },
+        {
+          "kind": "OBJECT",
+          "name": "SitePluginPluginOptionsPostCssPlugins",
+          "description": null,
+          "fields": [
             {
-              "name": "postCssPlugins",
+              "name": "postcssPlugin",
               "description": null,
               "args": [],
               "type": {
-                "kind": "LIST",
-                "name": null,
-                "ofType": {
-                  "kind": "OBJECT",
-                  "name": "SitePluginPluginOptionsPostCssPlugins",
-                  "ofType": null
-                }
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
               },
               "isDeprecated": false,
               "deprecationReason": null
@@ -3682,29 +3705,6 @@
           "enumValues": null,
           "possibleTypes": null
         },
-        {
-          "kind": "OBJECT",
-          "name": "SitePluginPluginOptionsPostCssPlugins",
-          "description": null,
-          "fields": [
-            {
-              "name": "postcssPlugin",
-              "description": null,
-              "args": [],
-              "type": {
-                "kind": "SCALAR",
-                "name": "String",
-                "ofType": null
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
-            }
-          ],
-          "inputFields": null,
-          "interfaces": [],
-          "enumValues": null,
-          "possibleTypes": null
-        },
         {
           "kind": "OBJECT",
           "name": "SitePluginPackageJson",
@@ -20172,6 +20172,16 @@
               },
               "defaultValue": null
             },
+            {
+              "name": "postCssPlugins",
+              "description": null,
+              "type": {
+                "kind": "INPUT_OBJECT",
+                "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
+                "ofType": null
+              },
+              "defaultValue": null
+            },
             {
               "name": "trackingIds",
               "description": null,
@@ -20251,13 +20261,24 @@
                 "ofType": null
               },
               "defaultValue": null
-            },
+            }
+          ],
+          "interfaces": null,
+          "enumValues": null,
+          "possibleTypes": null
+        },
+        {
+          "kind": "INPUT_OBJECT",
+          "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
+          "description": null,
+          "fields": null,
+          "inputFields": [
             {
-              "name": "postCssPlugins",
+              "name": "elemMatch",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
-                "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
+                "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
                 "ofType": null
               },
               "defaultValue": null
@@ -20269,12 +20290,12 @@
         },
         {
           "kind": "INPUT_OBJECT",
-          "name": "SitePluginPluginOptionsDirectivesFilterInput",
+          "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
           "description": null,
           "fields": null,
           "inputFields": [
             {
-              "name": "script_src",
+              "name": "postcssPlugin",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
@@ -20282,9 +20303,20 @@
                 "ofType": null
               },
               "defaultValue": null
-            },
+            }
+          ],
+          "interfaces": null,
+          "enumValues": null,
+          "possibleTypes": null
+        },
+        {
+          "kind": "INPUT_OBJECT",
+          "name": "SitePluginPluginOptionsDirectivesFilterInput",
+          "description": null,
+          "fields": null,
+          "inputFields": [
             {
-              "name": "script_src_elem",
+              "name": "script_src",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
@@ -20294,7 +20326,7 @@
               "defaultValue": null
             },
             {
-              "name": "style_src",
+              "name": "script_src_elem",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
@@ -20304,7 +20336,7 @@
               "defaultValue": null
             },
             {
-              "name": "style_src_elem",
+              "name": "style_src",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
@@ -20314,7 +20346,7 @@
               "defaultValue": null
             },
             {
-              "name": "font_src",
+              "name": "style_src_elem",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
@@ -20322,41 +20354,9 @@
                 "ofType": null
               },
               "defaultValue": null
-            }
-          ],
-          "interfaces": null,
-          "enumValues": null,
-          "possibleTypes": null
-        },
-        {
-          "kind": "INPUT_OBJECT",
-          "name": "SitePluginPluginOptionsPostCssPluginsFilterListInput",
-          "description": null,
-          "fields": null,
-          "inputFields": [
-            {
-              "name": "elemMatch",
-              "description": null,
-              "type": {
-                "kind": "INPUT_OBJECT",
-                "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
-                "ofType": null
-              },
-              "defaultValue": null
-            }
-          ],
-          "interfaces": null,
-          "enumValues": null,
-          "possibleTypes": null
-        },
-        {
-          "kind": "INPUT_OBJECT",
-          "name": "SitePluginPluginOptionsPostCssPluginsFilterInput",
-          "description": null,
-          "fields": null,
-          "inputFields": [
+            },
             {
-              "name": "postcssPlugin",
+              "name": "font_src",
               "description": null,
               "type": {
                 "kind": "INPUT_OBJECT",
@@ -21674,6 +21674,18 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "pluginCreator___pluginOptions___postCssPlugins",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
+            {
+              "name": "pluginCreator___pluginOptions___postCssPlugins___postcssPlugin",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "pluginCreator___pluginOptions___trackingIds",
               "description": null,
@@ -21746,18 +21758,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginCreator___pluginOptions___postCssPlugins",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
-            {
-              "name": "pluginCreator___pluginOptions___postCssPlugins___postcssPlugin",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "pluginCreator___packageJson___name",
               "description": null,
@@ -23024,6 +23024,18 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
+            {
+              "name": "pluginOptions___postCssPlugins",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
+            {
+              "name": "pluginOptions___postCssPlugins___postcssPlugin",
+              "description": null,
+              "isDeprecated": false,
+              "deprecationReason": null
+            },
             {
               "name": "pluginOptions___trackingIds",
               "description": null,
@@ -23096,18 +23108,6 @@
               "isDeprecated": false,
               "deprecationReason": null
             },
-            {
-              "name": "pluginOptions___postCssPlugins",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
-            {
-              "name": "pluginOptions___postCssPlugins___postcssPlugin",
-              "description": null,
-              "isDeprecated": false,
-              "deprecationReason": null
-            },
             {
               "name": "packageJson___name",
               "description": null,

From ad8dc0e6b0523b1445c5f6b91720f58b89dbcd15 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Thu, 24 Aug 2023 18:54:37 -0400
Subject: [PATCH 16/18] add googletagmanager url to script-src-elem directive
 in csp config

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 gatsby-config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-config.ts b/gatsby-config.ts
index a9d384e..2f5df78 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -94,7 +94,7 @@ const plugins = [
           mergeDefaultDirectives: true,
           directives: {
             "script-src": "'self' 'unsafe-eval' https://plausible.io/js/script.outbound-links.js",
-            "script-src-elem": "'self' 'unsafe-hashes' 'sha256-OzUnmjMIVuS+lOnNyveodXW96iw8WIDsfo02bVyJTKE=' 'sha256-r1R1bJHQ2LX3ekmreqx7Y+aSiGGrpPYACbCKNP9s82Q=' 'sha256-egpbluqkD8NT0bY3bWy7raM9tRIMkfUWboq0Y8KqsFk=' https://plausible.io/js/script.outbound-links.js",
+            "script-src-elem": "'self' 'unsafe-hashes' 'sha256-OzUnmjMIVuS+lOnNyveodXW96iw8WIDsfo02bVyJTKE=' 'sha256-r1R1bJHQ2LX3ekmreqx7Y+aSiGGrpPYACbCKNP9s82Q=' 'sha256-egpbluqkD8NT0bY3bWy7raM9tRIMkfUWboq0Y8KqsFk=' https://plausible.io/js/script.outbound-links.js https://www.googletagmanager.com",
             "style-src": "'self' 'unsafe-hashes' 'sha256-iahNazrr5t3BQXcVfXbYSR8Bd2AOXPifwVTBbIKb/bE=' 'sha256-7buiYDizqbiAS404WOu2AY5NZDzyVesjpBU80D6Nno4=' 'sha256-f7qc12gYVX0xoX9jAoOIxHvtXcfppKYwcBr7sE0GLR4=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI=' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' https://fonts.googleapis.com",
             "style-src-elem": "'self' 'unsafe-hashes' 'sha256-UrOiXfLZp9TdAD7NY9X+JKYQ8F+C7AsCo9loq6bNNX8=' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
             "font-src": "'self' data: https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaHUlKZbLXGhmRytc.woff2 https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lKZbLXGhmR.woff2",

From c94381841390af7e4ef719fd34544e78fa8b26c7 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Fri, 25 Aug 2023 08:01:01 -0400
Subject: [PATCH 17/18] remove inline css from templates and add hashes to csp
 plugin directives

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 gatsby-config.ts            |   6 +-
 src/style/index.css         | 106 ++++++++++++++++++++++++++++++------
 src/templates/basepages.tsx |   6 +-
 src/templates/blog-list.tsx |  10 ++--
 src/templates/blog.tsx      |  20 +++----
 5 files changed, 107 insertions(+), 41 deletions(-)

diff --git a/gatsby-config.ts b/gatsby-config.ts
index 2f5df78..cf89fe2 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -94,9 +94,9 @@ const plugins = [
           mergeDefaultDirectives: true,
           directives: {
             "script-src": "'self' 'unsafe-eval' https://plausible.io/js/script.outbound-links.js",
-            "script-src-elem": "'self' 'unsafe-hashes' 'sha256-OzUnmjMIVuS+lOnNyveodXW96iw8WIDsfo02bVyJTKE=' 'sha256-r1R1bJHQ2LX3ekmreqx7Y+aSiGGrpPYACbCKNP9s82Q=' 'sha256-egpbluqkD8NT0bY3bWy7raM9tRIMkfUWboq0Y8KqsFk=' https://plausible.io/js/script.outbound-links.js https://www.googletagmanager.com",
-            "style-src": "'self' 'unsafe-hashes' 'sha256-iahNazrr5t3BQXcVfXbYSR8Bd2AOXPifwVTBbIKb/bE=' 'sha256-7buiYDizqbiAS404WOu2AY5NZDzyVesjpBU80D6Nno4=' 'sha256-f7qc12gYVX0xoX9jAoOIxHvtXcfppKYwcBr7sE0GLR4=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI=' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' https://fonts.googleapis.com",
-            "style-src-elem": "'self' 'unsafe-hashes' 'sha256-UrOiXfLZp9TdAD7NY9X+JKYQ8F+C7AsCo9loq6bNNX8=' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
+            "script-src-elem": "'self' 'unsafe-hashes' 'sha256-jd1C8gAt3KiQo8RJ8fB5lxwhuFWo8UXLGvHAehvxeVk=' 'sha256-iKkBKEi9og8215U4DjZbF+TYC1aw/Q4XtA+Yz8JiSh4=' 'sha256-OzUnmjMIVuS+lOnNyveodXW96iw8WIDsfo02bVyJTKE=' 'sha256-r1R1bJHQ2LX3ekmreqx7Y+aSiGGrpPYACbCKNP9s82Q=' 'sha256-egpbluqkD8NT0bY3bWy7raM9tRIMkfUWboq0Y8KqsFk=' https://plausible.io/js/script.outbound-links.js https://www.googletagmanager.com",
+            "style-src": "'self' 'unsafe-hashes' 'sha256-+94JOX1HQRANuLOsn1gpzNE3I3JLzO0wrP9KspQf0cM=' 'sha256-iahNazrr5t3BQXcVfXbYSR8Bd2AOXPifwVTBbIKb/bE=' 'sha256-7buiYDizqbiAS404WOu2AY5NZDzyVesjpBU80D6Nno4=' 'sha256-f7qc12gYVX0xoX9jAoOIxHvtXcfppKYwcBr7sE0GLR4=' 'sha256-o4LYhp5wtluJ8/NWUV2vi+r5AxmP8X2zEvYHCpji+kI=' 'sha256-MtxTLcyxVEJFNLEIqbVTaqR4WWr0+lYSZ78AzGmNsuA=' https://fonts.googleapis.com",
+            "style-src-elem": "'self' 'unsafe-hashes' 'sha256-LuLD83XjKEDeQE2JbDqHgDbq4FVgc43d4S4wUyGCjEs=' 'sha256-mLiecSDCbxU+GwpOjEW11Ddlsg09pqoF9VA2VJ8XAK4=' 'sha256-UrOiXfLZp9TdAD7NY9X+JKYQ8F+C7AsCo9loq6bNNX8=' 'sha256-27nLLCfJPKzC4cpzFwNqY3YTXYmR0/qs1ExOGhQCw/c=' 'sha256-cLHlYu9WwZQgD1K6YlWPqFYXJEuD9YpxdlDktBDedco=' https://fonts.googleapis.com",
             "font-src": "'self' data: https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaHUlKZbLXGhmRytc.woff2 https://fonts.gstatic.com/s/karla/v30/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lKZbLXGhmR.woff2",
           }
         }
diff --git a/src/style/index.css b/src/style/index.css
index 6466868..2cddf93 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -19,9 +19,7 @@ p {
     line-height: 165%;
 }
 
-.boxed {
-    @apply max-w-screen-lg w-full mx-auto px-4;
-}
+
 
 .large-container {
     max-width: 2100px;
@@ -325,7 +323,7 @@ h1, h2, h3, h4, h5, h6 {
     white-space: nowrap;
 }
 
-/* Index Wall */
+/* Index Page Wall */
 
 .wall {
     @apply flex relative justify-center items-center overflow-hidden pt-24 px-16;
@@ -363,7 +361,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply mx-5 rounded-full opacity-80 hover:opacity-100 transition duration-500 ease-in-out transform hover:scale-105;
 }
 
-/* Index About */
+/* Index Page About */
 
 .about-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -385,7 +383,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply my-5 text-lg px-6;
 }
 
-/* Index Feature Boxes */
+/* Index Page Feature Boxes */
 
 .feature-boxes-div {
     @apply border-t-2 border-dashed border-color-2
@@ -443,7 +441,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply py-12 lg:py-14 px-4 lg:w-1/2 w-full order-6 lg:order-6;
 }
 
-/* Index Blog Posts */
+/* Index Page Blog Posts */
 
 .blog-div {
     @apply border-t-2 border-dashed border-color-2;
@@ -465,7 +463,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply flex flex-wrap;
 }
 
-/* 404 */
+/* 404 Page */
 
 .not-found-div {
     @apply container mx-auto py-12;
@@ -491,7 +489,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply text-link;
 }
 
-/* Cookie */
+/* Cookie Component */
 
 .cookie-div {
     @apply fixed bottom-0 left-0 w-full bg-bgalt border-t-2 border-primary p-4 flex flex-wrap items-center justify-between z-50;
@@ -513,13 +511,13 @@ h1, h2, h3, h4, h5, h6 {
     @apply px-3 py-1 rounded bg-bgalt border-2 border-secondary text-color-default hover:border-primary duration-200 transition-all;
 }
 
-/* Shortcodes */
+/* Shortcodes Component */
 
 .shortcodes {
     @apply flex-1 p-2;
 }
 
-/* Footer */
+/* Footer Component */
 
 .footer-outer-div {
     @apply border-t-2 border-dashed border-color-2 py-12;
@@ -541,7 +539,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply inline-block mx-3 animated-link-parent;
 }
 
-/* Item-blog */
+/* Item-blog Component */
 
 .blog-item {
     background-color: rgba(255, 255, 255, 0.1);
@@ -575,13 +573,13 @@ h1, h2, h3, h4, h5, h6 {
     @apply pt-3 text-color-default;
 }
 
-/* Layout */
+/* Layout Component */
 
 .layout-navbar-inner-div {
     @apply text-color-default bg-bg;
 }
 
-/* Navigation-list */
+/* Navigation-list Component */
 
 .navigation-list-btn {
     @apply text-color-1 transition-transform duration-200 transform top-0 left-0;
@@ -599,7 +597,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply text-color-1 focus:text-primary;
 }
 
-/* Navigation */
+/* Navigation Component */
 
 .navigation-outer-div {
     @apply duration-300 transition-all flex justify-center lg:justify-between items-center z-20 fixed w-full;
@@ -676,7 +674,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply absolute line h-px left-0 bottom-0 bg-gradient-primary;
 }
 
-/* Pagination */
+/* Pagination Component */
 
 .pagination-outer-div {
     @apply mt-8;
@@ -698,7 +696,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply bg-gradient-primary text-white shadow-2xl;
 }
 
-/* Sidebar */
+/* Sidebar Component */
 
 .r-swipe-sidebar-container {
     @apply absolute;
@@ -712,7 +710,7 @@ h1, h2, h3, h4, h5, h6 {
    
 }
 
-/* UI */
+/* UI Component */
 
 .ui-input {
     @apply block w-full outline-none px-4 py-2 focus:outline-none bg-bg text-color-default;
@@ -738,4 +736,76 @@ h1, h2, h3, h4, h5, h6 {
     @apply bg-gradient-primary p-2px;
 }
 
+/* Basepages Template */
+
+.boxed {
+    @apply max-w-screen-lg w-full mx-auto px-4;
+}
+
+.basepages-inner-div-1 {
+    @apply title px-4 py-12 text-center lg:py-14 lg:px-0;
+}
+
+.basepages-inner-div-1 h2 {
+    @apply text-5xl text-color-1;
+}
+
+.basepages-inner-div-2 {
+    @apply post-content px-4 py-12 lg:py-14 lg:px-0;
+}
+
+/* Blog-list Template */
+
+.blog-list-container {
+    @apply container mx-auto py-12;
+}
+
+.blog-list-title-div {
+    @apply title py-12 text-center;
+}
+
+.blog-list-title-div h2 {
+    @apply text-5xl text-color-1;
+}
+
+.blog-list-items-div {
+    @apply flex flex-wrap;
+}
+
+/* Blog Template */
+
+.blog-template-outer-div {
+    @apply md:px-4 mt-12 py-6 md:w-11/12 mx-auto;
+}
+
+.blog-template-inner-div {
+    @apply mx-auto relative;
+}
+
+.blog-template-title-outer-div {
+    @apply relative w-full lg:w-3/4 md:w-11/12 sm:w-full p-6 box-border lg:box-content mx-auto bg-bg text-color-default shadow-xl md:-mt-16;
+}
+
+.blog-template-title-inner-div {
+    @apply p-3;
+}
+
+.blog-template-title-inner-div h1 {
+    @apply text-5xl font-bold text-primary;
+}
+
+.blog-template-calendar {
+    @apply mt-1 flex;
+}
+
+.blog-template-calendar span {
+    @apply ml-2;
+}
+
+.blog-template-frontmatter {
+    @apply mt-3;
+}
 
+.blog-template-body {
+    @apply lg:w-3/4 md:w-11/12 sm:w-full p-3 mx-auto mt-12 post-content;
+}
\ No newline at end of file
diff --git a/src/templates/basepages.tsx b/src/templates/basepages.tsx
index f881fd3..6fda3b3 100644
--- a/src/templates/basepages.tsx
+++ b/src/templates/basepages.tsx
@@ -14,10 +14,10 @@ export default function basePages({ data, location }: PageProps<BasePagesQuery,
         }}
         location={location}>
             <div className="boxed">
-                <div className="title px-4 py-12 text-center lg:py-14 lg:px-0">
-                    <h2 className="text-5xl text-color-1">{data.mdx.frontmatter.title}</h2>
+                <div className="basepages-inner-div-1">
+                    <h2>{data.mdx.frontmatter.title}</h2>
                 </div>
-                <div className="post-content px-4 py-12 lg:py-14 lg:px-0">
+                <div className="basepages-inner-div-2">
                     <MDXProvider>
                         <MDXRenderer>{data.mdx.body}</MDXRenderer>
                     </MDXProvider>
diff --git a/src/templates/blog-list.tsx b/src/templates/blog-list.tsx
index e57d53b..4c7604e 100644
--- a/src/templates/blog-list.tsx
+++ b/src/templates/blog-list.tsx
@@ -17,13 +17,11 @@ export default function blogList({ data, pageContext, location }: PageProps<Blog
             }}
             location={location}
         >
-            <div className="container mx-auto py-12">
-                <div className="title py-12 text-center">
-                    <h2 className="text-5xl text-color-1">
-                        Blog
-                    </h2>
+            <div className="blog-list-container">
+                <div className="blog-list-title-div">
+                    <h2>Blog</h2>
                 </div>
-                <div className="flex flex-wrap">{blogItems}</div>
+                <div className="blog-list-items-div">{blogItems}</div>
                 <Pagination pageContext={pageContext} type="blog" />
             </div>
         </Layout>
diff --git a/src/templates/blog.tsx b/src/templates/blog.tsx
index 2214bf7..4cadebb 100644
--- a/src/templates/blog.tsx
+++ b/src/templates/blog.tsx
@@ -20,29 +20,27 @@ export default function blog({ location, data }: PageProps<BlogQuery, {}>) {
             }}
             location={location}
         >
-            <div className="md:px-4 mt-12 py-6 md:w-11/12 mx-auto">
-                <div className="mx-auto relative">
+            <div className="blog-template-outer-div">
+                <div className="blog-template-inner-div">
                     {data.mdx.frontmatter.banner.publicURL.endsWith('.svg') ?
                     <img src={data.mdx.frontmatter.banner.publicURL} alt="''"/> :
                     <Img fluid={data.mdx.frontmatter.banner.childImageSharp.fluid}/>}
-                    <div className="relative w-full lg:w-3/4 md:w-11/12 sm:w-full p-6 box-border lg:box-content mx-auto bg-bg text-color-default blog-wall-content shadow-xl md:-mt-16 ">
-                        <div className="p-3">
-                            <h1 className="text-5xl font-bold text-primary">
-                                {data.mdx.frontmatter.title}
-                            </h1>
-                            <p className="mt-1 flex">
+                    <div className="blog-template-title-outer-div">
+                        <div className="blog-template-title-inner-div">
+                            <h1>{data.mdx.frontmatter.title}</h1>
+                            <p className="blog-template-calendar">
                                 <Calendar />{" "}
-                                <span className="ml-2">
+                                <span>
                                     {data.mdx.frontmatter.date} by {data.mdx.frontmatter.author}
                                 </span>
                             </p>
-                            <p className="mt-3">
+                            <p className="blog-template-frontmatter">
                                 {data.mdx.frontmatter.description}
                             </p>
                         </div>
                     </div>
                 </div>
-                <div className="lg:w-3/4 md:w-11/12 sm:w-full p-3 mx-auto mt-12 post-content">
+                <div className="blog-template-body">
                     <MDXProvider components={{ Row, Col }}>
                         <MDXRenderer>{data.mdx.body}</MDXRenderer>
                     </MDXProvider>

From 1e836b31e81098997be7f66c544f260c16d0e710 Mon Sep 17 00:00:00 2001
From: Michael Robinson <merobi@gmail.com>
Date: Fri, 25 Aug 2023 11:05:03 -0400
Subject: [PATCH 18/18] update development instructions in readme

Signed-off-by: Michael Robinson <merobi@gmail.com>
---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b3419b8..fc1f00a 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,12 @@ nvm install 16
 npm install -g yarn
 yarn
 yarn global add gatsby-cli
-gatsby develop
+yarn build
+yarn start
 ```
 
+For a production build, use `yarn serve` instead of `yarn start`.
+
 ### Marquez green
 RGB: 113-221-191\
 CMYK: 49-0-14-13\