From af8a6c542b2ec038e4c98570b007f977ae055a24 Mon Sep 17 00:00:00 2001
From: hossainemruz <emruz@appscode.com>
Date: Sat, 18 Apr 2020 17:55:51 +0600
Subject: [PATCH] Fix 404 responsiveness

---
 layouts/404.html                   |  2 +-
 layouts/partials/about.html        |  4 +--
 layouts/partials/home.html         |  2 --
 layouts/partials/skills.html       |  2 --
 static/assets/css/404.css          | 45 ++++++++++++++++++++++++++++++
 static/assets/css/achievements.css |  4 +++
 static/assets/css/experiences.css  |  2 +-
 static/assets/css/recent-posts.css |  4 +++
 static/assets/css/style.css        |  2 +-
 9 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/layouts/404.html b/layouts/404.html
index 9b8eb4d..0f8f0ce 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -11,7 +11,7 @@
     <img src="/assets/images/404.png" alt="">
     <div class="message">
         <h1>404</h1>
-        <h4>The page you are looking for is not done yet.</h4>
+        <h4>The page you are looking for is not there yet.</h4>
     </div>
 </div>
 {{ end }}
diff --git a/layouts/partials/about.html b/layouts/partials/about.html
index 73b14f9..caafc90 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@@ -1,6 +1,6 @@
 <div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
   <div class="container">
-    <div class="row pt-sm-2 pt-md-5 align-self-center">
+    <div class="row pt-sm-2 pt-md-4 align-self-center">
       <!-- summery -->
       <div class="col-md-6">
         <h3 class="p-1">{{ .Site.Data.about.name }}</h3>
@@ -27,7 +27,7 @@
         >
       </div>
       <!-- soft skills circular-progressbar -->
-      <div class="col-md-6 pt-5 pl-4 pt-md-0">
+      <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
         <div class="row">
           {{ range .Site.Data.about.softSkills }}
             {{ partial "progress/soft-skills" . }}
diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index fb58a5e..9a18ac7 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -1,4 +1,3 @@
-<!-- HOME START -->
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
@@ -23,4 +22,3 @@
     <a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
   </div>
 </div>
-<!-- HOME END -->
diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html
index dd7f456..45b0c4f 100644
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@@ -1,4 +1,3 @@
-<!-- SKILLS START -->
 <div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
   <h1 class="text-center">Skills</h1>
 
@@ -10,4 +9,3 @@
     </div>
   </div>
 </div>
-<!-- SKILLS END -->
diff --git a/static/assets/css/404.css b/static/assets/css/404.css
index 77156e7..591341b 100644
--- a/static/assets/css/404.css
+++ b/static/assets/css/404.css
@@ -22,3 +22,48 @@
   top: 40%;
   left: 30%;
 }
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+  .notFound .message {
+    top: 46%;
+    left: 25%;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .notFound .message {
+    top: 50%;
+    left: 10%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .notFound img {
+    height: 500px;
+  }
+
+  .notFound .message {
+    top: 50%;
+    left: 5%;
+  }
+}
diff --git a/static/assets/css/achievements.css b/static/assets/css/achievements.css
index 3679f16..3d57a41 100644
--- a/static/assets/css/achievements.css
+++ b/static/assets/css/achievements.css
@@ -1,3 +1,7 @@
+.achievements .container{
+  padding-top: 0.5rem;
+}
+
 #gallery .achievement-entry {
   cursor: pointer;
   margin-top: 5px;
diff --git a/static/assets/css/experiences.css b/static/assets/css/experiences.css
index af42c71..7c55947 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/experiences.css
@@ -3,7 +3,7 @@
 }
 
 .experiences .timeline{
-  margin-top: 2rem!important;
+  margin-top: 1.5rem!important;
 }
 
 .text-muted {
diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css
index 50aeedc..7e54f9c 100644
--- a/static/assets/css/recent-posts.css
+++ b/static/assets/css/recent-posts.css
@@ -1,3 +1,7 @@
+.recent-posts .container{
+  padding-top: 1rem;
+}
+
 .recent-posts .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 037ac34..477f757 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -83,7 +83,7 @@ a:hover {
 }
 
 .anchor {
-  padding-top: 3rem;
+  padding-top: 2rem;
 }
 
 .card {