Simplify 404 page

g1eny0ung · Jun 5, 2020 · b07d6e2 · b07d6e2
1 parent 4f405e5
commit b07d6e2
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 11 deletions.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -35,4 +35,4 @@ theme = "hugo-theme-dream"
   # dark mode
   darkLinkColor = "darkseagreen"
   darkNav = true 
-  dark404Button = true
+  dark404 = true
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,16 +1,25 @@
-{{ define "title" }}404 Page Not Found{{ end }}
+{{ define "title" }}404 Not Found{{ end }}
 
 {{ define "main" }}
 <div class="ui container dream-404-container">
   <div class="ui basic center aligned segment">
-    <img class="ui centered image dream-404-image" src="/img/404.png" alt="404">
-    <p>
-      {{ if .Site.Params.dark404Button }}
+    {{ if .Site.Params.dark404 }}
+      <h1 class="ui inverted header">
+        Oops ... You are lost in dream.
+        <div class="sub header">Don't worry though, click the button below to wake up.</div>
+      </h1>
+      <p>
         <button class="ui inverted button" onclick="window.location.href = '/'">{{ i18n "backToHome" }}</button>
-      {{ else }}
+      </p>
+    {{ else }}
+      <h2 class="ui header">
+        Oops...You are lost in dream.
+        <div class="sub header">Don't worry though, click the button below to wake up.</div>
+      </h2>
+      <p>
         <button class="ui button" onclick="window.location.href = '/'">{{ i18n "backToHome" }}</button>
-      {{ end }}
-    </p>
+      </p>
+    {{ end }}
   </div>
 </div>
 {{ end }}
diff --git a/src/sass/site.scss b/src/sass/site.scss
@@ -70,8 +70,12 @@ body {
   display: flex !important;
   height: $ContainerHeight;
 
-  .dream-404-image {
-    padding-bottom: 10rem;
+  .ui.header {
+    margin-bottom: 2rem;
+
+    .sub.header {
+      margin-top: 0.5rem;
+    }
   }
 }
 

diff --git a/static/css/site.css b/static/css/site.css
diff --git a/static/img/404.png b/static/img/404.png