refactor(ui): 404 page

_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!

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>

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);
+}