From 0d4eb1cb3634a34a474b64aa4fc91e5bfa5accb6 Mon Sep 17 00:00:00 2001
From: Aroy-Art <Aroy-Art@pm.me>
Date: Fri, 26 Jul 2024 19:55:31 +0200
Subject: [PATCH 1/4] Fix: width on small screens

---
 .../blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
index 8b57156..f5a8a56 100644
--- a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
+++ b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
@@ -27,6 +27,7 @@ slug: cyberpunk-style-glitch-text-walkthrough
 
 .post-single-content .demo {
     height: 100px;
+    margin: 0 20px 0 20px;
     background: #fff;
 }
 

From e6ca2307227eab3df0960a190f77b1a3df9cea59 Mon Sep 17 00:00:00 2001
From: Aroy-Art <Aroy-Art@pm.me>
Date: Fri, 26 Jul 2024 20:04:35 +0200
Subject: [PATCH 2/4] Fix: typo

---
 .../blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
index f5a8a56..1a79622 100644
--- a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
+++ b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
@@ -517,7 +517,7 @@ slug: cyberpunk-style-glitch-text-walkthrough
 
 ## Walkthrough
 
-This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible.
+This came out of a 24-hour work sprint to replicate some sophisticated video VFX and to make it more flexible.
 
 There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
 

From cdb8af38f8dffbc4d0d8ac9cba25c900eb5159f5 Mon Sep 17 00:00:00 2001
From: Aroy-Art <Aroy-Art@pm.me>
Date: Fri, 26 Jul 2024 20:05:36 +0200
Subject: [PATCH 3/4] Fix: reorder "The Effet" section

---
 ...cyberpunk-style-glitch-text-walkthrough.md | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
index 1a79622..827071f 100644
--- a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
+++ b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
@@ -506,16 +506,7 @@ slug: cyberpunk-style-glitch-text-walkthrough
 }
 </style>
 
-# The Effect
-
-{{< details "The Effect (What we are going to make)">}}
-<div class="hero-container">
-    <div class="environment"></div>
-    <h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
-</div>
-{{< /details >}}
-
-## Walkthrough
+# Walkthrough
 
 This came out of a 24-hour work sprint to replicate some sophisticated video VFX and to make it more flexible.
 
@@ -534,6 +525,17 @@ There's a lot of pieces that go into an effect like this. What follows is an out
 
 ---
 
+## The Effect
+
+This is how the complete effect looks like
+
+{{< details "The Effect (What we are going to make)">}}
+<div class="hero-container">
+    <div class="environment"></div>
+    <h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
+</div>
+{{< /details >}}
+
 ## Layers
 
 Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever.

From 3bce8b549afc6979e860f54bc5043b142c8d58e9 Mon Sep 17 00:00:00 2001
From: Aroy-Art <Aroy-Art@pm.me>
Date: Fri, 26 Jul 2024 20:07:45 +0200
Subject: [PATCH 4/4] Fix: change html link to markdown link

---
 .../2024-07-23-cyberpunk-style-glitch-text-walkthrough.md     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
index 827071f..ffc56a9 100644
--- a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
+++ b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
@@ -1,7 +1,7 @@
 ---
 title: Cyberpunk-Style Glitch Text Walkthrough
 date: 2024-07-23T18:35:26.560Z
-lastmod: 2024-07-24T20:43:47.560Z
+lastmod: 2024-07-26T17:49:19.234Z
 image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif
 description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching!
 tags:
@@ -574,7 +574,7 @@ Create multiple layers to play with. For this example I'll use `::before` & `::a
 
 ## Paths
 
-Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-clip-path/">generator util</a> for this project)
+Build out a set of clip-paths (I wrote up a [generator util](/tools/randomly-generated-clip-path/) for this project)
 
 **Example Path:**