Fix notes page css

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

assets/styles/layouts/notes.scss

@@ -4,172 +4,120 @@ body.type-notes {
     padding: 0;
     margin: 0;
     width: 100%;
-  }
 
-  .content-section {
-    flex: 80%;
-    max-width: 80%;
-    order: 2;
-    /* background-color: lightseagreen; */
-    padding: 0;
-    position: relative;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .content {
-    padding: 0;
-    position: relative;
-    padding-top: 2rem;
-    min-height: 130vh;
-  }
-
-  .note-card-holder {
-    padding-top: 2rem;
-    display: grid;
-    grid-gap: 0.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
-    grid-auto-rows: 20px;
-  }
-
-  /* .note-collection {
-    display: flex;
-    flex-wrap: wrap;
-  } */
-
-  .note-card {
-    align-self: flex-start;
-  }
-
-  .note-card .card {
-    margin: 0.5rem;
-  }
-
-  .note-title {
-    padding-left: 1rem;
-    color: #248aaa;
-  }
-
-  .note-title span {
-    background: #e5e9f2;
-    padding-right: 5px;
-  }
-
-  .note-title:before {
-    content: '';
-    display: inline-block;
-    width: 98%;
-    height: 100%;
-    margin-bottom: -26px;
-    border-bottom: 1px solid #248aaa;
-  }
-
-  .note-card .card-body {
-    padding: 1rem;
-  }
-
-  .note-card pre {
-    margin: 0;
-    border-radius: 3px;
-  }
-
-  /* .small-note{
-    max-width: 15rem;
-  }
-  
-  .medium-note{
-    max-width: 25rem;
-  }
-  
-  .large-note{
-    max-width: 40rem;
-  }
-  
-  .huge-note{} */
-
-  .note-badge {
-    font-size: 10pt;
-  }
-
-  /* ============= Device specific fixes ======= */
-
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
     .content-section {
-      padding-left: 1rem;
+      flex: 80%;
-      padding-right: 1rem;
+      max-width: 80%;
-      flex: 85%;
+      order: 2;
-      max-width: 85%;
+      /* background-color: lightseagreen; */
+      padding: 0;
+      position: relative;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+
+      .content {
+        padding: 0;
+        position: relative;
+        padding-top: 2rem;
+        min-height: 130vh;
+
+        .note-card-holder {
+          margin-top: 2rem;
+          display: flex;
+          flex-flow: wrap;
+          margin-left: auto;
+          padding: 0;
+
+          .note-card {
+            align-self: flex-start;
+            flex: auto;
+
+            .card {
+              margin: 0.5rem;
+
+              .card-body {
+                padding: 1rem;
+
+                pre {
+                  margin: 0;
+                  border-radius: 3px;
+                }
+              }
+            }
+          }
+
+          .note-title {
+            padding-left: 1rem;
+            color: #248aaa;
+
+            &:before {
+              content: '';
+              display: inline-block;
+              width: 98%;
+              height: 100%;
+              margin-bottom: -26px;
+              border-bottom: 1px solid #248aaa;
+            }
+
+            span {
+              background: #e5e9f2;
+              padding-right: 5px;
+            }
+          }
+        }
+      }
     }
   }
 
-  /* Extra large devices (large desktops, 1200px and up) */
+  @include media('<=extra-large') {
-
-  @media (max-width: 1400px) {
     .note-card-holder {
-      margin-left: 0px;
+      .note-card {
+        flex: 30%;
+      }
     }
   }
 
-  @media (max-width: 1200px) {
+  @include media('<=large') {
-  }
-
-  /* IPad Pro */
-  @media (max-width: 1024px) {
     .wrapper {
       padding-left: 0px;
       padding-right: 0px;
-    }
+      .content-section {
-    .content-section {
+        padding: 0;
-      padding: 0;
+        max-width: 100%;
-      max-width: 100%;
+        order: 2;
-      order: 2;
+        padding-bottom: 0.5rem;
-      padding-bottom: 0.5rem;
+        transition: all ease-out 0.3s;
-      transition: all ease-out 0.3s;
-    }
 
-    .content-section.hide {
+        .content {
-      max-width: 60%;
+          overflow: hidden;
-      transition: all ease-out 0.3s;
-    }
 
-    .content {
+          .note-card-holder {
-      overflow: hidden;
+            margin: 0;
-    }
+            margin-top: 1.5rem;
-    .container {
+            padding-left: 0.5rem;
-      max-width: 100%;
+            padding-right: 0.5rem;
-    }
+            position: relative;
-    .navbar-toggler {
+            transition: all ease-out 0.3s;
-      display: block;
+            .note-card {
-    }
+              flex: 50%;
+            }
+          }
+        }
+        .container {
+          max-width: 100%;
+        }
 
-    .navbar-collapse.lang-selector {
+        &.hide {
-      display: block !important;
+          max-width: 60%;
-      position: absolute;
+          transition: all ease-out 0.3s;
-      right: 0;
+        }
-      top: 0.5rem;
+      }
-    }
-
-    .note-card-holder {
-      margin: 0;
-      margin-top: 1.5rem;
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-      position: relative;
-      transition: all ease-out 0.3s;
-    }
-
-    .content-section.hide .note-card-holder {
-      grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
-      transition: all ease-out 0.3s;
     }
   }
 
-  /*  Large devices (desktops, 992px and up) */
+  @include media('<=medium') {
-
-  @media (max-width: 992px) {
     .note-card-holder .note-card {
-      max-width: 100%;
+      max-width: 50%;
       min-width: 50%;
       transition: all ease-out 0.3s;
     }
@@ -181,66 +129,47 @@ body.type-notes {
     }
   }
 
-  /* Medium devices (tablets, 768px and up) */
+  @include media('<=small') {
-
-  @media only screen and (max-width: 768px) {
-  }
-
-  /* Small devices (landscape phones, 576px and up) */
-
-  @media only screen and (max-width: 576px) {
     .wrapper {
       padding-left: 0px;
       padding-right: 0px;
       flex-flow: column;
       overflow: hidden;
+
+      .content-section {
+        .content {
+          width: 100%;
+          padding-left: 0;
+          padding-right: 0;
+          transition: all ease-out 0.3s;
+
+          .note-card-holder {
+            margin-top: 0.5rem;
+            transition: all ease-out 0.3s;
+
+            .note-card {
+              flex: 100%;
+              max-width: 100%;
+              transition: all ease-out 0.3s;
+            }
+          }
+        }
+        &.hide {
+          flex: 100%;
+          max-width: 100%;
+          padding-left: 0;
+          width: 100%;
+          transition: all ease-out 0.3s;
+
+          .content {
+            .note-card-holder {
+              margin-top: 0;
+              padding-top: 0;
+              transition: all ease-out 0.3s;
+            }
+          }
+        }
+      }
     }
-    .content-section,
-    .content-section.hide {
-      flex: 100%;
-      max-width: 100%;
-      padding-left: 0;
-      width: 100%;
-      transition: all ease-out 0.3s;
-    }
-
-    .content {
-      width: 100%;
-      padding-left: 0;
-      padding-right: 0;
-      transition: all ease-out 0.3s;
-    }
-
-    .content-section.hide .content {
-      margin-top: 0;
-      padding-top: 0;
-      transition: all ease-out 0.3s;
-    }
-
-    .content-section.hide .note-card-holder {
-      margin-top: 0.5rem;
-      transition: all ease-out 0.3s;
-    }
-
-    .note-card-holder .note-card,
-    .content-section.hide .note-card-holder .note-card {
-      margin-left: 1%;
-      margin-right: 1%;
-      max-width: 98%;
-      min-width: 98%;
-      transition: all ease-out 0.3s;
-    }
-  }
-
-  /* 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/navigators/sidebar.scss

@@ -160,6 +160,7 @@
       position: sticky;
       top: 2.5rem;
       width: 100%;
+      padding-bottom: 1rem;
       max-height: calc(100vh - 2.5rem);
     }