From bd8c8f8af35b1220d0186712d35017f30c6394ad Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Tue, 26 Sep 2023 23:41:21 +0600
Subject: [PATCH] Refactor 404 page CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/layouts/404.scss | 111 ++++++++++++---------------------
 1 file changed, 40 insertions(+), 71 deletions(-)

diff --git a/assets/styles/layouts/404.scss b/assets/styles/layouts/404.scss
index e4b1265..d496fdb 100644
--- a/assets/styles/layouts/404.scss
+++ b/assets/styles/layouts/404.scss
@@ -2,94 +2,63 @@ body.kind-404 {
   #sidebar-toggler {
     display: none;
   }
-  
+
   .notFound {
     padding-top: 5rem;
     text-align: center;
     padding-bottom: 8rem;
+
+    img {
+      height: 500px;
+    }
+
+    h1 {
+      font-style: italic;
+    }
+
+    .message {
+      position: absolute;
+      max-width: 20rem;
+      top: 40%;
+      left: 30%;
+    }
   }
-  
-  .notFound img {
-    height: 500px;
-  }
-  
-  .notFound h1 {
-    font-style: italic;
-  }
-  
-  .notFound .message {
-    position: absolute;
-    max-width: 20rem;
-    top: 40%;
-    left: 30%;
-  }
-  
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
-  }
-  
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
-  }
-  
-  @media (max-width: 1200px) {
+
+  @include media('<=very-large') {
     .notFound .message {
       top: 50%;
       left: 25%;
     }
   }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
+
+  @include media('<=large') {
     .notFound .message {
       top: 46%;
       left: 25%;
     }
   }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    .notFound img {
-      height: 400px;
-    }
-  
-    .notFound .message {
-      top: 20rem;
-      left: 4rem;
+
+  @include media('<=medium') {
+    .notFound {
+      img {
+        height: 400px;
+      }
+      .message {
+        top: 20rem;
+        left: 4rem;
+      }
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-    .notFound img {
-      height: 250px;
-    }
-  
-    .notFound .message {
-      top: 20rem;
-      left: 2rem;
+
+  @include media('<=small') {
+    .notFound {
+      img {
+        height: 250px;
+      }
+      .message {
+        top: 20rem;
+        left: 2rem;
+      }
     }
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
-  }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
-  }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-  }  
 }