Update projects section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/styles/components/cards.scss

@@ -3,17 +3,16 @@
   transition: all 0.3s ease-out;
   overflow: hidden;
 
-  &:hover,&:focus {
+  &:hover,
+  &:focus {
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     border: 1px solid #fff;
     transition: all 0.3s ease-out;
   }
 
-  .card-head{
+  .card-head {
     height: 172px;
     display: flex;
-    justify-content: center;
-    align-items: center;
     overflow: hidden;
   }
 
@@ -34,6 +33,10 @@
     width: 24px;
     height: 24px;
   }
+
+  .card-footer {
+    background: #fff;
+  }
 }
 
 .post-card {
@@ -72,7 +75,6 @@
       }
     }
     .card-footer {
-      background: #fff;
       margin-top: auto;
 
       span {

assets/styles/sections/projects.scss

@@ -1,71 +1,59 @@
 .projects-section {
-  .card .card-header {
+  .card {
-    background-color: #f9fafc;
+    .card-header {
-    padding: 0.7rem;
+      background-color: #f9fafc;
-    padding-bottom: 0rem;
+      padding: 0.7rem;
-    text-decoration: none;
+      padding-bottom: 0rem;
+      text-decoration: none;
+
+      .card-img-xs {
+        margin-right: 0.5rem;
+      }
+      .sub-title {
+        color: #8392a5;
+        margin-top: 0.4rem;
+
+        span {
+          &:nth-child(1) {
+            float: left;
+          }
+          &:nth-child(2) {
+            float: right;
+          }
+        }
+      }
+    }
+
+    .card-body {
+      padding: 0.7rem;
+    }
   }
-  
+
-  .card .card-img-xs {
-    margin-right: 0.5rem;
-  }
-  
-  .card .card-header .sub-title span:nth-child(1) {
-    float: left;
-  }
-  .card .card-header .sub-title span:nth-child(2) {
-    float: right;
-  }
-  
-  .card .card-body {
-    padding: 0.7rem;
-  }
-  
-  .card .card-header .sub-title {
-    color: #8392a5;
-    margin-top: 0.4rem;
-  }
-  
   .filtr-projects {
     padding: 1rem !important;
   }
-  
+
   .project-card-footer {
     display: flex;
   }
-  
+
   .project-tags-holder {
     width: 70%;
   }
-  
+
   .project-btn-holder {
     width: 30%;
     display: flex;
     justify-content: flex-end;
     flex-direction: column;
+
+    span {
+      display: flex;
+      justify-content: flex-end;
+    }
   }
-  
+
-  .project-btn-holder span {
+  @include media('<=large') {
-    justify-content: flex-end;
-    display: flex;
-  }
-  
-  /* ============= 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) {
-  }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {
     padding-left: 0;
     padding-right: 0;
     width: 100%;
@@ -77,58 +65,19 @@
       padding: 0;
     }
     .filtr-item {
-      padding-left: 0.2rem;
-      padding-right: 0.2rem;
-    }
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-
-    .container {
-      max-width: 100%;
-    }
-    .filtr-projects {
-      padding: 0;
-    }
-    .filtr-item {
-      padding-left: 0.2rem;
-      padding-right: 0.2rem;
       flex: 50%;
+      padding-left: 0.2rem;
+      padding-right: 0.2rem;
       max-width: calc(100% / 2 - 0.2rem);
     }
   }
-  
+
-  /* Small devices (landscape phones, 576px and up) */
+  @include media('<=small') {
-  
-  @media only screen and (max-width: 576px) {
     .btn {
       margin-top: 0.3125rem;
     }
     .filtr-item {
-      flex: 100%;
       max-width: 100%;
     }
   }
-  
+}
-  /* 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) {
-  }  
-}

assets/styles/sections/skills.scss

@@ -11,22 +11,17 @@
       padding: 0.7rem;
       padding-bottom: 0rem;
       border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
+
+      .card-img-xs {
+        margin-right: 0.5rem;
+        margin-bottom: 0.75rem;
+      }
     }
 
     .card-body {
       padding-top: 0.2rem;
       padding-left: 0.7rem;
     }
-    .card-img-xs {
-      margin-right: 0.5rem;
-      margin-bottom: 0.75rem;
-    }
-  }
-
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
   }
 
   @include media('<=medium') {