From 39a8fd295a8a239114acd9b22b593315bc6148d9 Mon Sep 17 00:00:00 2001
From: Steve Hoang <82992510+lotusk08@users.noreply.github.com>
Date: Sat, 18 May 2024 20:48:22 +0700
Subject: [PATCH] refactor(ui): 404 page

---
 .DS_Store                           | Bin 8196 -> 6148 bytes
 _config.yml                         |   2 +-
 assets/404.html                     |  16 ++++++++++++++--
 assets/css/jekyll-theme-chirpy.scss |  28 ++++++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index c1e8f9fed78e65fe1d3850488c2504f29ceaef71..8a7ba024825083750dcdca7f80557042697b6010 100644
GIT binary patch
delta 108
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50$jH4hU^g=(_hue})r^}L3*BOz
uSX8!{or6P=8K?>f1h|2OD@en}!tczJ`DHvo+8LN2MuALc*c{I@hZz7HQ4(kX

delta 148
zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMA$h$FMH}hr%jz7$c**Q2SHn1@A
zZsuWG&B)El5YJG|kjYTOkUIGYYtv*Cc6Uy=$mSKSFBvztiPSMqY~T@O1{w$i65K$-
f6=e2iL5}atlletFC;Rhoa4<rwW!N0gGlv-f`Vbza

diff --git a/_config.yml b/_config.yml
index 86648230762..beae17919b1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -16,7 +16,7 @@ timezone: Asia/Saigon
 
 title: Steve Hoang # the main title
 
-tagline: A blog from my life, my story, my journey. # it will display as the sub-title
+tagline: A blog from my life, my story, and my journey. # it will display as the sub-title
 
 description: >- # used by seo meta and the atom feed
   Life's too short to sweat the small stuff. Enjoy yourself, fall in love, and embrace every moment without regrets. Don't let anyone dim your shine. Live the life you've always dreamed of!
diff --git a/assets/404.html b/assets/404.html
index 5b46cc8c832..782abaa97a7 100644
--- a/assets/404.html
+++ b/assets/404.html
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: "404: Page not found"
+title: "404 - Page not found"
 permalink: /404.html
 
 redirect_from:
@@ -11,4 +11,16 @@
 
 {% include lang.html %}
 
-<p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>
+  <div class="wrapper">
+    <main aria-label="Content">
+      <div class="not-found">
+        <div class="container">
+          <div class="title">404</div>
+          <p>😕 Hmm... Seems you lost from my journey.</p>
+          <a href="{{ site.url }}">back home ➔</a>
+        </div>
+      </div>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss
index d20545ba80b..00cbe11b398 100644
--- a/assets/css/jekyll-theme-chirpy.scss
+++ b/assets/css/jekyll-theme-chirpy.scss
@@ -8,3 +8,31 @@
 ';
 
 /* append your custom style below */
+
+/* 404 CSS */
+/* Wrapper */
+.wrapper {
+  max-width: -webkit-calc(100% - (20px * 2));
+  max-width: calc(100% - (20px * 2));
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+/* Not Found */
+.not-found {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 65vh;
+}
+
+.not-found .title {
+  font-size: 5em;
+  font-weight: bold;
+  line-height: 1.1;
+  text-shadow: 1px 0px 0px var(--sidebar-active-color);
+}