all repos — website @ c34e4e45f8e4470973e2137bbf09ef83f95cb9cf

personal website hosted at prithu.xyz, built using hugo 

refactor 404 page
Prithu Goswami prithugoswami524@gmail.com
Fri, 15 May 2020 17:28:44 +0530
commit

c34e4e45f8e4470973e2137bbf09ef83f95cb9cf

parent

b95cd703555d2e64c88a78d9fb0b3e6188803a98

2 files changed, 29 insertions(+), 40 deletions(-)

jump to
M layouts/404.html → layouts/404.html 
@@ -1,11 +1,13 @@ 
 {{ partial "head.html" . }}
 
-<body class="flex-body">
+<body>
   {{ partial "nav.html" }}
-  <section id="page404">
-    <div class="shadow-box-error">
-      <h1 class="error">404</h1>
-      <h2 class="sub-head">Not Found<span class="joke">just like my purpose in life...</span></h2>
+  <section id="sec-404" class=page-section>
+    <div class="container">
+      <div class="shadow-box">
+        <h1>Not Found<span class="joke">just like my purpose in life...</span></h1>
+        <h2>404</h2>
+      </div>
     </div>
   </section>
   {{ partial "footer.html" . }}
M static/css/main.css → static/css/main.css 
@@ -103,25 +103,6 @@ margin-left: 0;
     }
 }
 
-.sub-head{
-    font-weight:700;
-    font-size: 48px;
-    position: absolute;
-    top: -35px;
-    left: -50px;
-    color: #242424;
-    text-shadow: 0 4px 7px rgba(0,0,0,0.2);
-}
-
-
-/* #intro{ */
-/*     margin: 0 auto; */
-/*     display:flex; */
-/*     flex-flow: column; */
-/*     margin-top: 6rem; */
-/* } */
-
-
 #intro{
     margin-top: 4rem;
 }

@@ -142,24 +123,30 @@ position: relative;
     max-width: 640px
 }
 
-.shadow-box-error{
-    background-color: white;
-    border-radius: 24px;
-    width: 516px;
-    height: 239px;
-    box-shadow: 0 10px 30px 3px rgba(0,0,0,0.15);
-    margin: 0 auto;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top:150px;
+#sec-404 {
+    margin-top: 5rem;
+    margin-bottom: 0rem;
+    min-height: calc(100vh - 10rem - 7rem);
+}
+
+#sec-404 h2{
+    padding: 6rem;
+    text-align: center;
+    color: rgba(0,0,0,0.4);
+    font-size: 6rem;
 }
 
-.error{
-    font-weight: 700px;
-    font-size: 120px;
-    color: #BCBCBC;
+
+#sec-404 h1{
+    top: -2rem;
+    left: -4rem;
+    font-size: 3rem;
+}
+
+@media only screen and (max-width: 768px){
+    #sec-404 h1 {
+        display: none;
+    }
 }