From 6179b05fd53c2aaea754d5cca0e729c81874239d Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Tue, 1 Aug 2023 11:31:45 +0600
Subject: [PATCH 01/17] Refactor CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/application.template.scss     |  11 +-
 assets/styles/components/buttons.scss       |  15 +
 assets/styles/components/cards.scss         |  66 ++
 assets/styles/layouts/list.scss             | 165 +---
 assets/styles/layouts/main.scss             | 959 ++++++++++----------
 assets/styles/layouts/single.scss           |  16 +-
 assets/styles/sections/recent-posts.scss    | 110 +--
 assets/styles/variables.scss                |   8 +
 layouts/_default/single.html                |   9 +-
 layouts/partials/cards/post.html            |  13 +-
 layouts/partials/cards/recent-post.html     |  29 -
 layouts/partials/misc/tags.html             |   8 +
 layouts/partials/sections/recent-posts.html |   2 +-
 package.hugo.json                           |   3 +-
 14 files changed, 661 insertions(+), 753 deletions(-)
 create mode 100644 assets/styles/components/buttons.scss
 create mode 100644 assets/styles/components/cards.scss
 create mode 100644 assets/styles/variables.scss
 delete mode 100644 layouts/partials/cards/recent-post.html
 create mode 100644 layouts/partials/misc/tags.html

diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index 084470646..42b2a9e05 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -2,6 +2,8 @@
 // TODO: Refactor to use bootstrap sass variable for theming.
 @import 'bootstrap/scss/bootstrap';
 
+@import 'include-media/dist/_include-media';
+
 // The Mulish font, we use font-weight 300 - 700
 @import '@fontsource/mulish/300';
 @import '@fontsource/mulish/index'; // 400
@@ -9,6 +11,8 @@
 @import '@fontsource/mulish/600';
 @import '@fontsource/mulish/700';
 
+@import './variables';
+
 // layouts
 @import './layouts/main';
 @import './layouts/list';
@@ -34,6 +38,11 @@
 @import './sections/publications';
 
 
+// components
+@import './components/cards';
+@import './components/buttons';
+
+
 // override
 @import './override';
 
@@ -61,4 +70,4 @@
       {{ end }}
     {{ end }}
   {{ end }}
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
new file mode 100644
index 000000000..ff723ca2d
--- /dev/null
+++ b/assets/styles/components/buttons.scss
@@ -0,0 +1,15 @@
+.tags {
+  text-align: left;
+
+  li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: #248aaa;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+  a {
+    color: #f9fafc;
+  }
+}
diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
new file mode 100644
index 000000000..b493a1fa1
--- /dev/null
+++ b/assets/styles/components/cards.scss
@@ -0,0 +1,66 @@
+.post-card {
+  width: calc(100% / 3);
+  display: inline-flex;
+
+  .post-card-link {
+    text-decoration: none;
+  }
+
+  .card {
+    margin: 5px;
+    position: relative;
+    box-shadow: none;
+    transition: all 0.3s ease-out;
+    overflow: hidden;
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+      border: 1px solid #fff;
+      transition: all 0.3s ease-out;
+
+      .card-img-top {
+        transform: scale(1.2);
+        transition: all 0.3s ease-out;
+      }
+    }
+
+    .card-head {
+      height: 172px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+
+      .card-img-top {
+        transition: all 0.3s ease-out !important;
+      }
+    }
+    .card-body {
+      text-align: justify;
+      padding: 1.25rem !important;
+      padding-bottom: 0 !important;
+
+      .post-summary {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        max-height: 144px;
+        /* fallback */
+        -webkit-line-clamp: 5;
+        /* number of lines to show */
+        -webkit-box-orient: vertical;
+      }
+    }
+    .card-footer {
+      background: #fff;
+      margin-top: auto;
+
+      span {
+        font-size: 10pt;
+        color: #6c757d !important;
+        padding-top: 5px;
+      }
+    }
+  }
+}
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index d79b7eb7e..da1758e2d 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -1,14 +1,16 @@
 // in Hugo, Page kind can be either "section" or "page".
 // if it is section, then it's a page with a list of items, for example /posts
 // if it is page, then it is a single page.
-body.kind-section, body.kind-term, body.kind-page{
+body.kind-section,
+body.kind-term,
+body.kind-page {
   .wrapper {
     display: flex;
     padding: 0;
     margin: 0;
     width: 100%;
   }
-  
+
   .content-section {
     flex: 80%;
     order: 2;
@@ -18,14 +20,14 @@ body.kind-section, body.kind-term, body.kind-page{
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
-  
+
   .content {
     padding: 0;
     position: relative;
     padding-top: 2rem;
     min-height: 130vh;
   }
-  
+
   .post-card-holder {
     margin-top: 32px;
     margin-left: auto;
@@ -33,62 +35,26 @@ body.kind-section, body.kind-term, body.kind-page{
     display: flex;
     flex-flow: wrap;
   }
-  
-  .post-card-holder .post-card {
-    width: calc(100% / 3);
-    display: inline-flex;
-  }
-  
-  .post-card-holder .card {
-    margin: 5px;
-    position: relative;
-  }
-  
-  .post-card-holder .card .card-footer span {
-    font-size: 10pt;
-    color: #6c757d !important;
-    padding-top: 5px;
-  }
-  
-  .post-card-holder .card .card-footer {
-    background: #fff;
-    margin-top: auto;
-  }
-  
-  .post-summary {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    max-height: 144px;
-    /* fallback */
-    -webkit-line-clamp: 5;
-    /* number of lines to show */
-    -webkit-box-orient: vertical;
-  }
-  
-  .post-card-holder .post-card-link {
-    text-decoration: none;
-  }
-  
+
   .paginator {
     width: -moz-fit-content;
     width: fit-content;
     margin: auto;
   }
-  
+
   .paginator .page-item > a {
     color: #248aaa;
   }
-  
+
   .paginator .page-item.active > a {
     background-color: #248aaa;
     color: #f9fafc;
   }
-  
+
   .navbar-toggler {
     display: none;
   }
-  
+
   .pagination {
     margin-left: auto;
     margin-right: auto;
@@ -97,25 +63,9 @@ body.kind-section, body.kind-term, body.kind-page{
     width: -moz-fit-content;
     width: fit-content;
   }
-  
-  .taxonomy-terms-card {
-    text-align: left;
-  }
-  .taxonomy-terms-card li {
-    font-size: 0.5em;
-    list-style-type: none;
-    display: inline-block;
-    background: #248aaa;
-    margin-left: 0.1em;
-    margin-right: 0.1em;
-  }
-  
-  .taxonomy-terms-card a {
-    color: #f9fafc;
-  }
 
   /* ============= Device specific fixes ======= */
-  
+
   /* Large screens such as TV */
   @media only screen and (min-width: 1824px) {
     .content-section {
@@ -124,25 +74,19 @@ body.kind-section, body.kind-term, body.kind-page{
       flex: 85%;
       max-width: 85%;
     }
-    .post-card-holder .post-card {
-      width: calc(100% / 5);
-    }
   }
-  
+
   /* Extra large devices (large desktops, 1200px and up) */
-  
+
   @media (max-width: 1400px) {
     .post-card-holder {
       margin-left: 0px;
     }
-    .post-card-holder .post-card {
-      width: calc(100% / 3);
-    }
   }
-  
+
   @media (max-width: 1200px) {
   }
-  
+
   /* IPad Pro */
   @media (max-width: 1024px) {
     .wrapper {
@@ -155,7 +99,7 @@ body.kind-section, body.kind-term, body.kind-page{
       order: 2;
       padding-bottom: 0.5rem;
     }
-  
+
     .content {
       overflow: hidden;
     }
@@ -165,18 +109,18 @@ body.kind-section, body.kind-term, body.kind-page{
     .navbar-toggler {
       display: block;
     }
-  
+
     #toc-toggler {
       visibility: hidden;
     }
-  
+
     .navbar-collapse.lang-selector {
       display: block !important;
       position: absolute;
       right: 0;
       top: 0.5rem;
     }
-  
+
     .post-card-holder {
       margin: 0;
       margin-top: 1.5rem;
@@ -185,35 +129,10 @@ body.kind-section, body.kind-term, body.kind-page{
       position: relative;
       transition: all ease-out 0.3s;
     }
-  
-    .post-card-holder .post-card {
-      width: calc(100% / 3);
-    }
-  
-    .content-section.hide .post-card-holder .post-card {
-      width: 50%;
-    }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-    .post-card-holder .post-card {
-      width: 50%;
-    }
-  
-    .content-section.hide .post-card-holder .post-card {
-      width: 100%;
-    }
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @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;
@@ -227,41 +146,51 @@ body.kind-section, body.kind-term, body.kind-page{
       padding-left: 0;
       width: 100%;
     }
-  
+
     .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 .post-card-holder {
       margin-top: 0.5rem;
       transition: all ease-out 0.3s;
     }
-  
-    .post-card-holder .post-card {
+
+  }
+  @include media('<=small') {
+    .post-card {
       margin-left: 1%;
       margin-right: 1%;
       width: 98%;
     }
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
+  @include media('>=medium') {
+    .post-card {
+      width: calc(100% / 2);
+    }
   }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
+  @include media('>=large') {
+    .post-card {
+      width: calc(100% / 3);
+    }
+  }
+  @include media('>=very-large') {
+    .post-card {
+      width: calc(100% / 4);
+    }
+  }
+  @include media('>=extra-large') {
+    .post-card {
+      width: calc(100% / 5);
+    }
   }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-  }  
 }
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 9cb69cab2..6dcec4371 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -18,500 +18,503 @@ Yellow:  #FFC212
   simpler css approach.
   See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
 */
-*, html {
-    scroll-behavior: smooth !important;
-  }
-  
-  /*
+*,
+html {
+  scroll-behavior: smooth !important;
+}
+
+/*
   Fixes anchor overlapping with header.
   See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors 
   */
-  :target::before {
-    content: "";
-    display: block;
-    height: 2em; /* fixed header height*/
-    margin: -2em 0 0; /* negative fixed header height */
-  }
-  
-  body {
+:target::before {
+  content: '';
+  display: block;
+  height: 2em; /* fixed header height*/
+  margin: -2em 0 0; /* negative fixed header height */
+}
+
+body {
+  background-color: #f9fafc;
+  font-family: 'Mulish';
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #1c2d41;
+}
+
+strong {
+  color: #1c2d41 !important;
+}
+
+p {
+  color: #3c4858;
+}
+
+a {
+  color: #248aaa;
+}
+
+a:hover {
+  color: #207089;
+}
+
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #8392a5;
+}
+
+.btn-dark {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.btn-dark:hover,
+.btn-dark:focus {
+  background-color: #248aaa !important;
+  border-color: #248aaa !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+}
+
+.btn-outline-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-link {
+  color: #248aaa;
+}
+
+.btn-link:hover {
+  color: #207089;
+}
+
+.bg-white {
+  background-color: #f9fafc !important;
+}
+
+.bg-dimmed {
+  background-color: #e5e9f2;
+}
+
+.anchor {
+  padding-top: 3.5rem;
+}
+
+img.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.left {
+  display: block;
+  margin-right: auto;
+}
+
+img.right {
+  display: block;
+  margin-left: auto;
+}
+
+// .card {
+//   box-shadow: none;
+//   transition: all 0.3s ease-out;
+//   overflow: hidden;
+// }
+
+.card-img-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.card-img-xs {
+  width: 24px;
+  height: 24px;
+}
+
+// .card:hover,
+// .card:focus {
+//   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+//   border: 1px solid #fff;
+//   transition: all 0.3s ease-out;
+// }
+
+// .card .card-head {
+//   height: 172px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   overflow: hidden;
+// }
+
+// .card-img-top {
+//   transition: all 0.3s ease-out !important;
+// }
+
+// .card:hover .card-head .card-img-top,
+// .card:focus .card-head .card-img-top {
+//   transition: all 0.3s ease-out;
+//   transform: scale(1.2);
+// }
+
+// .card-body {
+//   text-align: justify;
+// }
+
+.sub-title {
+  color: #c0ccda;
+  font-size: 10pt;
+}
+
+.flag-icon {
+  width: 16px !important;
+  margin-top: 3px;
+  margin-right: 3px;
+}
+
+/* ====== table ====== */
+table {
+  border-radius: 0.1rem;
+  background: #e5e9f2;
+  border: 1px solid #c0ccda;
+  padding: 0.1rem;
+}
+
+table tr {
+  height: 40px !important;
+}
+
+table th,
+td {
+  padding: 0.5rem;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+
+table thead tr {
+  background: #248aaa;
+  color: #e5e9f2;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #e5e9f2;
+}
+
+tbody tr:hover {
+  background: #c0ccda;
+}
+
+/* ====== don't apply css to tables inside gist ====== */
+.gist table {
+  border-radius: unset;
+  background: unset;
+  border: unset;
+  padding: unset;
+}
+
+.gist table tr {
+  height: unset !important;
+}
+
+.gist table th,
+td {
+  padding: unset;
+  border-left: unset;
+  border-bottom: unset;
+}
+
+.gist table thead tr {
+  background: unset;
+  color: unset;
+}
+
+.gist tbody tr:nth-child(odd) {
+  background-color: unset;
+}
+
+.gist tbody tr:hover {
+  background: unset;
+}
+
+.gist table td,
+.gist table tc {
+  border-right: 1px solid #eee;
+}
+
+figure {
+  border: 1px solid #c0ccda;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  align-self: center;
+  margin: auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: #8392a5;
+}
+
+pre {
+  margin: 5px;
+}
+
+pre > code {
+  padding: 10px !important;
+}
+
+a.header-anchor {
+  text-decoration: none;
+  color: #1c2d41;
+}
+
+a.header-anchor i,
+a.header-anchor svg {
+  font-size: 10pt;
+  color: #3c4858;
+  display: none;
+  margin-left: 0.5rem;
+}
+a.header-anchor:hover i,
+a.header-anchor:hover svg {
+  display: inline-block;
+}
+a.header-anchor code {
+  color: #e83e8c;
+}
+
+.content ul > ol,
+.content ol > ul,
+.content ul > ul,
+.content ol > ol,
+.content li > ol,
+.content li > ul {
+  -webkit-padding-start: 1rem;
+  padding-inline-start: 1rem;
+}
+
+kbd {
+  background-color: #248aaa !important;
+  color: #f9fafc;
+}
+
+mark {
+  background-color: #ffc21280;
+}
+
+/* ======= Paginator ========= */
+.paginator {
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: auto;
+  vertical-align: bottom;
+}
+
+.paginator .page-item > a {
+  color: #248aaa;
+}
+
+.paginator .page-item.active > a {
+  background-color: #248aaa;
+  color: #f9fafc;
+}
+
+/* --- FOOTER START --- */
+
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+}
+
+.footer h5 {
+  color: #c0ccda;
+}
+.footer a {
+  color: #8392a5;
+  transition: all 0.3s ease-out;
+}
+
+.footer a:hover {
+  margin-left: 5px;
+  transition: all 0.3s ease-out;
+}
+
+.footer ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer li {
+  margin-top: 5px;
+}
+
+.footer hr {
+  background-color: #8392a5;
+}
+
+.footer p:first-child {
+  color: #c0ccda;
+}
+
+.footer input {
+  background-color: #c0ccda;
+}
+
+.footer input:focus {
+  background-color: #e5e9f2;
+}
+
+.footer #disclaimer {
+  color: #8392a5 !important;
+  text-align: justify;
+}
+.footer #disclaimer > strong {
+  color: #c0ccda !important;
+}
+
+.footer #theme {
+  color: #c0ccda;
+}
+
+.footer #theme img {
+  width: 32px;
+}
+
+.footer #hugo:hover {
+  margin-right: 5px;
+  transition: all 0.3s ease-out;
+}
+
+/* --- FOOTER END ---- */
+
+/* ============= 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) {
+  .content-section .languageSelector {
+    position: fixed;
+    right: 0.5rem;
+    bottom: 1rem;
+    z-index: 10000000;
     background-color: #f9fafc;
-    font-family: "Mulish";
-  }
-  
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    color: #1c2d41;
-  }
-  
-  strong {
-    color: #1c2d41 !important;
-  }
-  
-  p {
-    color: #3c4858;
-  }
-  
-  a {
-    color: #248aaa;
-  }
-  
-  a:hover {
-    color: #207089;
-  }
-  
-  .nav-button {
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    color: #8392a5;
-  }
-  
-  .btn-dark {
-    background-color: #3c4858!important;
-    border-color: #3c4858!important;
-    color: #e5e9f2!important;
-    transition: all 0.3s ease-out!important;
-  }
-  
-  .btn-dark:hover,
-  .btn-dark:focus {
-    background-color: #248aaa!important;
-    border-color: #248aaa!important;
-    transition: all 0.3s ease-out!important;
-  }
-  
-  .btn-outline-info {
-    color: #2098d1 !important;
-    border-color: #2098d1 !important;
-  }
-  
-  .btn-outline-info:hover {
-    background-color: #2098d1 !important;
-    color: #e5e9f2 !important;
-  }
-  
-  .btn-info {
-    background-color: #248aaa !important;
-    color: #e5e9f2 !important;
-  }
-  
-  .btn-info:hover {
-    background-color: #2098d1 !important;
-    color: #e5e9f2 !important;
-  }
-  
-  .btn-link {
-    color: #248aaa;
-  }
-  
-  .btn-link:hover {
-    color: #207089;
-  }
-  
-  .bg-white {
-    background-color: #f9fafc !important;
-  }
-  
-  .bg-dimmed {
-    background-color: #e5e9f2;
-  }
-  
-  .anchor {
-    padding-top: 3.5rem;
-  }
-  
-  img.center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  
-  img.left {
-    display: block;
-    margin-right: auto;
-  }
-  
-  img.right {
-    display: block;
-    margin-left: auto;
-  }
-  
-  .card {
-    box-shadow: none;
-    transition: all 0.3s ease-out;
-    overflow: hidden;
-  }
-  
-  .card-img-sm {
-    width: 32px;
-    height: 32px;
-  }
-  
-  .card-img-xs {
-    width: 24px;
-    height: 24px;
-  }
-  
-  .card:hover,
-  .card:focus {
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    border: 1px solid #fff;
-    transition: all 0.3s ease-out;
-  }
-  
-  .card .card-head {
-    height: 172px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-  }
-  
-  .card-img-top {
-    transition: all 0.3s ease-out !important;
-  }
-  
-  .card:hover .card-head .card-img-top,
-  .card:focus .card-head .card-img-top {
-    transition: all 0.3s ease-out;
-    transform: scale(1.2);
-  }
-  
-  .card-body {
-    text-align: justify;
-  }
-  
-  .sub-title {
-    color: #c0ccda;
-    font-size: 10pt;
-  }
-  
-  .flag-icon {
-    width: 16px !important;
-    margin-top: 3px;
-    margin-right: 3px;
-  }
-  
-  /* ====== table ====== */
-  table {
-    border-radius: 0.1rem;
-    background: #e5e9f2;
-    border: 1px solid #c0ccda;
-    padding: 0.1rem;
-  }
-  
-  table tr {
-    height: 40px !important;
-  }
-  
-  table th,
-  td {
-    padding: 0.5rem;
-    border-left: 1px solid #8392a5;
-    border-bottom: 1px solid #8392a5;
-  }
-  
-  table thead tr {
-    background: #248aaa;
-    color: #e5e9f2;
-  }
-  
-  tbody tr:nth-child(odd) {
-    background-color: #e5e9f2;
-  }
-  
-  tbody tr:hover {
-    background: #c0ccda;
-  }
-  
-  /* ====== don't apply css to tables inside gist ====== */
-  .gist table {
-    border-radius: unset;
-    background: unset;
-    border: unset;
-    padding: unset;
-  }
-  
-  .gist table tr {
-    height: unset !important;
-  }
-  
-  .gist table th,
-  td {
-    padding: unset;
-    border-left: unset;
-    border-bottom: unset;
-  }
-  
-  .gist table thead tr {
-    background: unset;
-    color: unset;
-  }
-  
-  .gist tbody tr:nth-child(odd) {
-    background-color: unset;
-  }
-  
-  .gist tbody tr:hover {
-    background: unset;
-  }
-  
-  .gist table td, .gist table tc{
-    border-right: 1px solid #eee;
-  }
-  
-  figure {
-    border: 1px solid #c0ccda;
-    height: -moz-fit-content;
-    height: fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-self: center;
-    margin: auto;
-  }
-  
-  img {
-    max-width: 100%;
   }
-  
-  caption,
-  figcaption {
-    caption-side: bottom;
-    text-align: center;
-    color: #8392a5;
-  }
-  
   pre {
-    margin: 5px;
-  }
-  
-  pre > code {
-    padding: 10px !important;
-  }
-  
-  a.header-anchor {
-    text-decoration: none;
-    color: #1c2d41;
-  }
-  
-  a.header-anchor i, a.header-anchor svg {
-    font-size: 10pt;
-    color: #3c4858;
-    display: none;
-    margin-left: 0.5rem;
-  }
-  a.header-anchor:hover i, a.header-anchor:hover svg {
-    display: inline-block;
-  }
-  a.header-anchor code {
-    color: #e83e8c;
-  }
-  
-  .content ul > ol,
-  .content ol > ul,
-  .content ul > ul,
-  .content ol > ol,
-  .content li > ol,
-  .content li > ul {
-    -webkit-padding-start: 1rem;
-    padding-inline-start: 1rem;
-  }
-  
-  kbd {
-    background-color: #248aaa !important;
-    color: #f9fafc;
-  }
-  
-  mark {
-    background-color: #ffc21280;
-  }
-  
-  /* ======= Paginator ========= */
-  .paginator {
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: auto;
-    vertical-align: bottom;
-  }
-  
-  .paginator .page-item > a {
-    color: #248aaa;
+    margin: 0px;
   }
-  
-  .paginator .page-item.active > a {
-    background-color: #248aaa;
-    color: #f9fafc;
+  code {
+    padding: 0px;
   }
-  
-  /* --- FOOTER START --- */
-  
-  .footer {
-    color: #8392a5 !important;
-    background-color: #1c2d41;
-    position: relative;
-    z-index: 9999;
-  }
-  
-  .footer h5 {
-    color: #c0ccda;
-  }
-  .footer a {
-    color: #8392a5;
-    transition: all 0.3s ease-out;
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .skills-section .container,
+  .projects-section .container,
+  .publications-section .container {
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
   }
-  
-  .footer a:hover {
-    margin-left: 5px;
-    transition: all 0.3s ease-out;
+
+  .section-holder {
+    padding-left: 5px;
+    padding-right: 5px;
   }
-  
-  .footer ul {
-    list-style: none;
+
+  .skills-section,
+  .projects-section,
+  .recent-posts-section,
+  .achievements-section,
+  .publications-section {
     padding-left: 0;
+    padding-right: 0;
   }
-  
-  .footer li {
-    margin-top: 5px;
-  }
-  
-  .footer hr {
-    background-color: #8392a5;
-  }
-  
-  .footer p:first-child {
-    color: #c0ccda;
-  }
-  
-  .footer input {
-    background-color: #c0ccda;
-  }
-  
-  .footer input:focus {
-    background-color: #e5e9f2;
-  }
-  
-  .footer #disclaimer{
-    color: #8392a5 !important;
-    text-align: justify;
-  }
-  .footer #disclaimer>strong{
-    color: #c0ccda!important;
-  }
-  
-  .footer #theme {
-    color: #c0ccda;
-  }
-  
-  .footer #theme img {
-    width: 32px;
-  }
-  
-  .footer #hugo:hover {
-    margin-right: 5px;
-    transition: all 0.3s ease-out;
-  }
-  
-  /* --- FOOTER END ---- */
-  
-  /* ============= 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) {
-    .content-section .languageSelector {
-      position: fixed;
-      right: 0.5rem;
-      bottom: 1rem;
-      z-index: 10000000;
-      background-color: #f9fafc;
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    }
-    pre {
-      margin: 0px;
-    }
-    code {
-      padding: 0px;
-    }
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
+
+  pre {
+    margin: 0px;
   }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+  code {
+    padding: 0px;
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-    .skills-section .container,
-    .projects-section .container,
-    .publications-section .container {
-      padding-left: 0.3rem;
-      padding-right: 0.3rem;
-    }
-  
-    .section-holder {
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-  
-    .skills-section,
-    .projects-section,
-    .recent-posts-section,
-    .achievements-section,
-    .publications-section {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  
-    pre {
-      margin: 0px;
-    }
-    code {
-      padding: 0px;
-    }
-  
-    h1 {
-      font-size: 2.2rem;
-    }
+
+  h1 {
+    font-size: 2.2rem;
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
-    h1 {
-      font-size: 2rem;
-    }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+  h1 {
+    font-size: 2rem;
   }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
-    h1 {
-      font-size: 1.8rem;
-    }
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+  h1 {
+    font-size: 1.8rem;
   }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-    h1 {
-      font-size: 1.5rem;
-    }
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+  h1 {
+    font-size: 1.5rem;
   }
-  
+}
diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss
index 5ffda3baa..2ece70b3d 100644
--- a/assets/styles/layouts/single.scss
+++ b/assets/styles/layouts/single.scss
@@ -299,22 +299,10 @@ body.kind-page {
   #scroll-to-top.show {
     visibility: visible;
   }
-  .taxonomy-terms {
+  .tags {
     text-align: center;
   }
-  .taxonomy-terms li {
-    font-size: 0.8em;
-    list-style-type: none;
-    display: inline-block;
-    background: #248aaa;
-    margin-left: 0.2em;
-    margin-right: 0.2em;
-  }
-  
-  .taxonomy-terms a {
-    color: #f9fafc;
-  }
-  
+
   /* ============= Device specific fixes ======= */
   
   /* Large screens such as TV */
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
index 1b30c8bf0..e8bb92b59 100644
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@@ -2,110 +2,34 @@
   .container {
     padding-top: 1rem;
   }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
-  }
-  
-  .card {
-    height: 100%;
-    min-height: 100%;
-  }
-  
-  .card .card-footer span {
-    font-size: 10pt;
-    color: #6c757d !important;
-    padding-top: 5px;
-  }
-  
-  .card .card-footer {
-    background: #fff;
-    margin-top: auto;
-  }
-  
-  .post-card-link {
-    text-decoration: none;
-  }
-  
-  .post-summary {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    /* line-height: 24px;     fallback */
-    max-height: 144px; /* fallback */
-    -webkit-line-clamp: 5; /* number of lines to show */
-    -webkit-box-orient: vertical;
-  }
 
-  .taxonomy-terms {
-    text-align: left;
-  }
-  .taxonomy-terms li {
-    font-size: 0.5em;
-    list-style-type: none;
-    display: inline-block;
-    background: #248aaa;
-    margin-left: 0.2em;
-    margin-right: 0.2em;
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
   }
-  
-  .taxonomy-terms a {
-    color: #f9fafc;
-  }
-  
-  /* ============= 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) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
+  @include media('<=small') {
+    .post-card {
+      margin-left: 1%;
+      margin-right: 1%;
+      width: 98%;
+    }
   }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+  @include media('<=medium') {
     .container {
       max-width: 100%;
     }
     .post-card {
-      width: 50%;
+      width: calc(100% / 2);
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+  @include media('<=large') {
     .post-card {
-      width: 100%;
+      width: calc(100% / 3);
     }
   }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
+  @include media('<=very-large') {
   }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
+  @include media('<=extra-large') {
   }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
new file mode 100644
index 000000000..cd9e12fc6
--- /dev/null
+++ b/assets/styles/variables.scss
@@ -0,0 +1,8 @@
+$breakpoints: (
+  small: 640px,
+  medium: 768px,
+  large: 1024px,
+  very-large: 1280px,
+  extra-large: 1536px,
+  ultra-large: 2560px,
+);
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index a5ce0ca92..17ebd643f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -46,14 +46,7 @@ <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <h1>{{ .Page.Title }}</h1>
         </div>
         {{ if site.Params.features.tags.enable }}
-        <div class="taxonomy-terms">
-          <ul style="padding-left: 0;">
-            {{ range .Params.tags }}
-            {{ $url:= printf "tags/%s/" . }}
-            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
-            {{ end }}
-          </ul>
-        </div>
+          {{partial "misc/tags.html" .Params.tags }}
         {{ end }}
         <div class="post-content" id="post-content">
           {{ .Page.Content }}
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index e313d027d..4d2e9f86a 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -7,18 +7,11 @@
       <div class="card-body">
         <h5 class="card-title">{{ .Title }}</h5>
         <p class="card-text post-summary">{{ .Summary }}</p>
-      </div>
-      <div class="card-footer">
         {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
-        <div class="taxonomy-terms-card">
-          <ul style="padding-left: 0;">
-            {{ range .Params.tags }}
-            {{ $url:= printf "tags/%s/" . }}
-            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
-            {{ end }}
-          </ul>
-        </div>
+          {{ partial "misc/tags.html" .Params.tags }}
         {{ end }}
+      </div>
+      <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
         <a
         href="{{ .RelPermalink | relLangURL }}"
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html
deleted file mode 100644
index 753fedf5b..000000000
--- a/layouts/partials/cards/recent-post.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div class="col-lg-4 col-md-6 pt-2 post-card">
-  <a href="{{ .RelPermalink }}" title="{{ .Title }}" class="post-card-link">
-    <div class="card">
-      <div class="card-head">
-        <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
-          alt="Card image cap"
-        />
-      </div>
-      <div class="card-body">
-        <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summary"> {{ .Summary }}</p>
-      </div>
-      <div class="card-footer">
-        {{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
-        <div class="taxonomy-terms">
-          <ul style="padding-left: 0;">
-            {{ range .Params.tags }}
-            {{ $url:= printf "tags/%s/" . }}
-            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
-            {{ end }}
-          </ul>
-        </div>
-        {{ end }}
-        <span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
-        <a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
-      </div>
-    </div>
-  </a>
-</div>
diff --git a/layouts/partials/misc/tags.html b/layouts/partials/misc/tags.html
new file mode 100644
index 000000000..166fde563
--- /dev/null
+++ b/layouts/partials/misc/tags.html
@@ -0,0 +1,8 @@
+<div class="tags">
+    <ul style="padding-left: 0;">
+      {{ range . }}
+      {{ $url:= printf "tags/%s/" . }}
+      <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
+      {{ end }}
+    </ul>
+</div>
diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html
index bb1bc40a0..87792b48f 100644
--- a/layouts/partials/sections/recent-posts.html
+++ b/layouts/partials/sections/recent-posts.html
@@ -20,7 +20,7 @@ <h1 class="text-center" style="display: none">
   <div class="container">
     <div class="row" id="recent-post-cards">
       {{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }}
-        {{ partial "cards/recent-post.html" . }}
+        {{ partial "cards/post.html" . }}
       {{ end }}
     </div>
   </div>
diff --git a/package.hugo.json b/package.hugo.json
index c000e5245..3ae562b4e 100644
--- a/package.hugo.json
+++ b/package.hugo.json
@@ -43,6 +43,7 @@
     "mark.js": "^8.11.1",
     "mermaid": "^9.2.1",
     "plyr": "^3.7.2",
-    "popper.js": "^1.16.1"
+    "popper.js": "^1.16.1",
+    "include-media": "^1.4.10"
   }
 }

From 6eb8bf43ddaa17eba0176aab72aa83c51e1a9e2b Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Thu, 3 Aug 2023 13:34:12 +0600
Subject: [PATCH 02/17] Refactor about section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/components/buttons.scss    |  53 ++
 assets/styles/components/cards.scss      |  59 +-
 assets/styles/layouts/list.scss          |   8 +-
 assets/styles/layouts/main.scss          | 103 +---
 assets/styles/sections/about.scss        | 663 +++++++++++------------
 assets/styles/sections/recent-posts.scss |  11 +-
 assets/styles/variables.scss             |   1 +
 exampleSite/package-lock.json            |  13 +
 exampleSite/package.hugo.json            |   4 +
 exampleSite/package.json                 |  10 +
 layouts/partials/misc/badge.html         |   2 +-
 11 files changed, 454 insertions(+), 473 deletions(-)
 create mode 100644 exampleSite/package-lock.json
 create mode 100644 exampleSite/package.hugo.json
 create mode 100644 exampleSite/package.json

diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
index ff723ca2d..689e122e3 100644
--- a/assets/styles/components/buttons.scss
+++ b/assets/styles/components/buttons.scss
@@ -1,3 +1,56 @@
+.btn-dark {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+
+  &:hover,
+  &:focus {
+    background-color: #248aaa !important;
+    border-color: #248aaa !important;
+    transition: all 0.3s ease-out !important;
+  }
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+
+  &:hover,
+  &:focus {
+    background-color: #2098d1 !important;
+    color: #e5e9f2 !important;
+  }
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+
+  &:hover,
+  &:focus {
+    background-color: #2098d1 !important;
+    color: #e5e9f2 !important;
+  }
+}
+
+.btn-link {
+  color: #248aaa;
+
+  &:hover,
+  &:focus {
+    color: #207089;
+  }
+}
+
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #8392a5;
+}
+
+
 .tags {
   text-align: left;
 
diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
index b493a1fa1..d1363e229 100644
--- a/assets/styles/components/cards.scss
+++ b/assets/styles/components/cards.scss
@@ -1,5 +1,43 @@
+.card {
+  box-shadow: none;
+  transition: all 0.3s ease-out;
+  overflow: hidden;
+
+  &: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{
+    height: 172px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .card-body {
+    text-align: justify;
+  }
+
+  .card-img-top {
+    transition: all 0.3s ease-out !important;
+  }
+
+  .card-img-sm {
+    width: 32px;
+    height: 32px;
+  }
+
+  .card-img-xs {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 .post-card {
-  width: calc(100% / 3);
+  width: 24rem;
   display: inline-flex;
 
   .post-card-link {
@@ -9,35 +47,16 @@
   .card {
     margin: 5px;
     position: relative;
-    box-shadow: none;
-    transition: all 0.3s ease-out;
-    overflow: hidden;
 
     &:hover,
     &:focus {
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-      border: 1px solid #fff;
-      transition: all 0.3s ease-out;
-
       .card-img-top {
         transform: scale(1.2);
         transition: all 0.3s ease-out;
       }
     }
 
-    .card-head {
-      height: 172px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-
-      .card-img-top {
-        transition: all 0.3s ease-out !important;
-      }
-    }
     .card-body {
-      text-align: justify;
       padding: 1.25rem !important;
       padding-bottom: 0 !important;
 
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index da1758e2d..4e3b18e1b 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -166,24 +166,24 @@ body.kind-page {
     }
 
   }
-  @include media('<=small') {
+  @include media('<medium') {
     .post-card {
       margin-left: 1%;
       margin-right: 1%;
       width: 98%;
     }
   }
-  @include media('>=medium') {
+  @include media('>=medium','<large') {
     .post-card {
       width: calc(100% / 2);
     }
   }
-  @include media('>=large') {
+  @include media('>=large','<very-large') {
     .post-card {
       width: calc(100% / 3);
     }
   }
-  @include media('>=very-large') {
+  @include media('>=very-large','<extra-large') {
     .post-card {
       width: calc(100% / 4);
     }
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 6dcec4371..a3ea86b0c 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -63,54 +63,7 @@ a:hover {
   color: #207089;
 }
 
-.nav-button {
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-  color: #8392a5;
-}
-
-.btn-dark {
-  background-color: #3c4858 !important;
-  border-color: #3c4858 !important;
-  color: #e5e9f2 !important;
-  transition: all 0.3s ease-out !important;
-}
-
-.btn-dark:hover,
-.btn-dark:focus {
-  background-color: #248aaa !important;
-  border-color: #248aaa !important;
-  transition: all 0.3s ease-out !important;
-}
-
-.btn-outline-info {
-  color: #2098d1 !important;
-  border-color: #2098d1 !important;
-}
-
-.btn-outline-info:hover {
-  background-color: #2098d1 !important;
-  color: #e5e9f2 !important;
-}
-
-.btn-info {
-  background-color: #248aaa !important;
-  color: #e5e9f2 !important;
-}
-
-.btn-info:hover {
-  background-color: #2098d1 !important;
-  color: #e5e9f2 !important;
-}
-
-.btn-link {
-  color: #248aaa;
-}
 
-.btn-link:hover {
-  color: #207089;
-}
 
 .bg-white {
   background-color: #f9fafc !important;
@@ -140,50 +93,6 @@ img.right {
   margin-left: auto;
 }
 
-// .card {
-//   box-shadow: none;
-//   transition: all 0.3s ease-out;
-//   overflow: hidden;
-// }
-
-.card-img-sm {
-  width: 32px;
-  height: 32px;
-}
-
-.card-img-xs {
-  width: 24px;
-  height: 24px;
-}
-
-// .card:hover,
-// .card:focus {
-//   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-//   border: 1px solid #fff;
-//   transition: all 0.3s ease-out;
-// }
-
-// .card .card-head {
-//   height: 172px;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   overflow: hidden;
-// }
-
-// .card-img-top {
-//   transition: all 0.3s ease-out !important;
-// }
-
-// .card:hover .card-head .card-img-top,
-// .card:focus .card-head .card-img-top {
-//   transition: all 0.3s ease-out;
-//   transform: scale(1.2);
-// }
-
-// .card-body {
-//   text-align: justify;
-// }
 
 .sub-title {
   color: #c0ccda;
@@ -420,7 +329,17 @@ mark {
 
 /* --- FOOTER END ---- */
 
-/* ============= Device specific fixes ======= */
+/* ============= Media Query Template ======= */
+@include media('<medium') {
+}
+@include media('>=medium','<large') {
+}
+@include media('>=large','<very-large') {
+}
+@include media('>=very-large','<extra-large') {
+}
+@include media('>=extra-large') {
+}
 
 /* Large screens such as TV */
 @media only screen and (min-width: 1824px) {
diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss
index ee292459e..201e50021 100644
--- a/assets/styles/sections/about.scss
+++ b/assets/styles/sections/about.scss
@@ -1,20 +1,20 @@
-#about {
+.about-section {
   .social-link {
     list-style: none;
     padding: 0.2rem;
-  }
-  
-  .social-link a {
-    font-size: 1.5rem;
-    color: #3c4858;
-    padding: 0.5rem;
-  }
-  
-  .social-link a:hover {
-    color: #248aaa;
-    transition: all 0.3s ease-in;
-  }
-  
+
+    a {
+      font-size: 1.5rem;
+      color: #3c4858;
+      padding: 0.5rem;
+
+      &:hover {
+        color: #248aaa;
+        transition: all 0.3s ease-in;
+      }
+    }
+  }
+
   .circular-progress {
     width: 150px;
     height: 150px;
@@ -23,365 +23,330 @@
     margin: 0 auto;
     box-shadow: none;
     position: relative;
-  }
-  
-  .circular-progress:after {
-    content: "";
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 12px solid #f9fafc;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  
-  .circular-progress > span {
-    width: 50%;
-    height: 100%;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-  }
-  
-  .circular-progress .circular-progress-left {
-    left: 0;
-  }
-  
-  .circular-progress .circular-progress-bar {
-    width: 100%;
-    height: 100%;
-    background: none;
-    border-width: 12px;
-    border-style: solid;
-    position: absolute;
-    top: 0;
-  }
-  
-  .circular-progress .circular-progress-left .circular-progress-bar {
-    left: 100%;
-    border-top-right-radius: 80px;
-    border-bottom-right-radius: 80px;
-    border-left: 0;
-    transform-origin: center left;
-  }
-  
-  .circular-progress .circular-progress-right {
-    right: 0;
-  }
-  
-  .circular-progress .circular-progress-right .circular-progress-bar {
-    left: -100%;
-    border-top-left-radius: 80px;
-    border-bottom-left-radius: 80px;
-    border-right: 0;
-    transform-origin: center right;
-    animation: circular-loading-1 1.8s linear forwards;
-  }
-  
-  .circular-progress .circular-progress-value {
-    width: 90%;
-    height: 90%;
-    padding: 1rem;
-    border-radius: 50%;
-    background: #3c4858;
-    font-size: 1rem;
-    color: #f9fafc;
-    line-height: initial;
-    text-align: center;
-    position: absolute;
-    top: 5%;
-    left: 5%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .circular-progress.blue .circular-progress-bar {
-    border-color: #048dff;
-  }
-  
-  .circular-progress.yellow .circular-progress-bar {
-    border-color: #eebb4d;
-  }
-  
-  .circular-progress.pink .circular-progress-bar {
-    border-color: #ed63d2;
-  }
-  
-  .circular-progress.green .circular-progress-bar {
-    border-color: #2dca73;
-  }
-  
-  .circular-progress.sky .circular-progress-bar {
-    border-color: #00c9e3;
-  }
-  
-  .circular-progress.orange .circular-progress-bar {
-    border-color: #ff7c7c;
-  }
-  
-  .circular-progress-percentage-50 {
-    animation: circular-loading-50 0s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-55 {
-    animation: circular-loading-55 0.18s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-60 {
-    animation: circular-loading-60 0.36s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-65 {
-    animation: circular-loading-65 0.54s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-70 {
-    animation: circular-loading-70 0.72s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-75 {
-    animation: circular-loading-75 0.9s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-80 {
-    animation: circular-loading-80 1.08s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-85 {
-    animation: circular-loading-85 1.26s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-90 {
-    animation: circular-loading-90 1.44s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-95 {
-    animation: circular-loading-95 1.62s linear forwards 1.8s;
-  }
-  
-  .circular-progress-percentage-100 {
-    animation: circular-loading-100 1.8s linear forwards 1.8s;
-  }
-  
-  @keyframes circular-loading-50 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(0deg);
-    }
-  }
-  
-  @keyframes circular-loading-55 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(18deg);
-    }
-  }
-  
-  @keyframes circular-loading-60 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(36deg);
-    }
-  }
-  
-  @keyframes circular-loading-65 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(54deg);
-    }
-  }
-  
-  @keyframes circular-loading-70 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(72deg);
-    }
-  }
-  
-  @keyframes circular-loading-75 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(90deg);
-    }
-  }
-  
-  @keyframes circular-loading-80 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(108deg);
-    }
-  }
-  
-  @keyframes circular-loading-85 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(126deg);
-    }
-  }
-  
-  @keyframes circular-loading-90 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(144deg);
-    }
-  }
-  
-  @keyframes circular-loading-95 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(162deg);
-    }
-  }
-  
-  @keyframes circular-loading-100 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(180deg);
-    }
-  }
-  
-  @keyframes circular-loading-1 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(180deg);
-    }
-  }
-  
-  @keyframes circular-loading-2 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(144deg);
-    }
-  }
-  
-  @keyframes circular-loading-3 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(90deg);
-    }
-  }
-  
-  @keyframes circular-loading-4 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(36deg);
-    }
-  }
-  
-  @keyframes circular-loading-5 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(126deg);
-    }
-  }
-  
-  @media only screen and (max-width: 990px) {
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 12px solid #f9fafc;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    span {
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      z-index: 1;
+    }
+    .circular-progress-left {
+      left: 0;
+    }
+    .circular-progress-bar {
+      width: 100%;
+      height: 100%;
+      background: none;
+      border-width: 12px;
+      border-style: solid;
+      position: absolute;
+      top: 0;
+    }
+    .circular-progress-left .circular-progress-bar {
+      left: 100%;
+      border-top-right-radius: 80px;
+      border-bottom-right-radius: 80px;
+      border-left: 0;
+      transform-origin: center left;
+    }
+    .circular-progress-right {
+      right: 0;
+    }
+    .circular-progress-right .circular-progress-bar {
+      left: -100%;
+      border-top-left-radius: 80px;
+      border-bottom-left-radius: 80px;
+      border-right: 0;
+      transform-origin: center right;
+      animation: circular-loading-1 1.8s linear forwards;
+    }
+    .circular-progress-value {
+      width: 90%;
+      height: 90%;
+      padding: 1rem;
+      border-radius: 50%;
+      background: #3c4858;
+      font-size: 1rem;
+      color: #f9fafc;
+      line-height: initial;
+      text-align: center;
+      position: absolute;
+      top: 5%;
+      left: 5%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &.blue .circular-progress-bar {
+      border-color: #048dff;
+    }
+    &.yellow .circular-progress-bar {
+      border-color: #eebb4d;
+    }
+    &.pink .circular-progress-bar {
+      border-color: #ed63d2;
+    }
+    &.green .circular-progress-bar {
+      border-color: #2dca73;
+    }
+    &.sky .circular-progress-bar {
+      border-color: #00c9e3;
+    }
+    &.orange .circular-progress-bar {
+      border-color: #ff7c7c;
+    }
+    .circular-progress-percentage-50 {
+      animation: circular-loading-50 0s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-55 {
+      animation: circular-loading-55 0.18s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-60 {
+      animation: circular-loading-60 0.36s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-65 {
+      animation: circular-loading-65 0.54s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-70 {
+      animation: circular-loading-70 0.72s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-75 {
+      animation: circular-loading-75 0.9s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-80 {
+      animation: circular-loading-80 1.08s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-85 {
+      animation: circular-loading-85 1.26s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-90 {
+      animation: circular-loading-90 1.44s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-95 {
+      animation: circular-loading-95 1.62s linear forwards 1.8s;
+    }
+
+    .circular-progress-percentage-100 {
+      animation: circular-loading-100 1.8s linear forwards 1.8s;
+    }
+
+    @keyframes circular-loading-50 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+
+    @keyframes circular-loading-55 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(18deg);
+      }
+    }
+
+    @keyframes circular-loading-60 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(36deg);
+      }
+    }
+
+    @keyframes circular-loading-65 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(54deg);
+      }
+    }
+
+    @keyframes circular-loading-70 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(72deg);
+      }
+    }
+
+    @keyframes circular-loading-75 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(90deg);
+      }
+    }
+
+    @keyframes circular-loading-80 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(108deg);
+      }
+    }
+
+    @keyframes circular-loading-85 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(126deg);
+      }
+    }
+
+    @keyframes circular-loading-90 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(144deg);
+      }
+    }
+
+    @keyframes circular-loading-95 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(162deg);
+      }
+    }
+
+    @keyframes circular-loading-100 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(180deg);
+      }
+    }
+
+    @keyframes circular-loading-1 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(180deg);
+      }
+    }
+
+    @keyframes circular-loading-2 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(144deg);
+      }
+    }
+
+    @keyframes circular-loading-3 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(90deg);
+      }
+    }
+
+    @keyframes circular-loading-4 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(36deg);
+      }
+    }
+
+    @keyframes circular-loading-5 {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(126deg);
+      }
+    }
+  }
+
+  @include media('<=large') {
     .circular-progress {
       margin-bottom: 20px;
     }
   }
-  
-  /* ============= 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) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+
+  @include media('<=medium') {
     .about-section.container {
       max-width: 100%;
     }
-    
+
     .circular-progress {
       width: 135px;
       height: 135px;
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+  @include media('<=small') {
     .circular-progress {
       width: 150px;
       height: 150px;
     }
-  
+
     .circular-progress .circular-progress-value {
       font-size: 1rem;
     }
   }
-  
-  /* 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) {
+  @include media('<=tiny') {
     .col-6 {
       flex: auto;
       max-width: 100%;
     }
-  
+
     .social-link {
       flex-wrap: wrap;
     }
-  }  
-}
\ No newline at end of file
+    .certificate-badge {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+    .circular-progress {
+      width: 200px;
+      height: 200px;
+
+      .circular-progress-left .circular-progress-bar {
+        border-top-right-radius: 100px;
+        border-bottom-right-radius: 100px;
+      }
+      .circular-progress-right .circular-progress-bar {
+        border-top-left-radius: 100px;
+        border-bottom-left-radius: 100px;
+      }
+    }
+  }
+}
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
index e8bb92b59..dde264a00 100644
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@@ -8,14 +8,15 @@
     padding-bottom: 55px;
     display: block;
   }
-  @include media('<=small') {
+
+  @include media('<medium') {
     .post-card {
       margin-left: 1%;
       margin-right: 1%;
       width: 98%;
     }
   }
-  @include media('<=medium') {
+  @include media('>=medium','<large') {
     .container {
       max-width: 100%;
     }
@@ -23,13 +24,9 @@
       width: calc(100% / 2);
     }
   }
-  @include media('<=large') {
+  @include media('>=large') {
     .post-card {
       width: calc(100% / 3);
     }
   }
-  @include media('<=very-large') {
-  }
-  @include media('<=extra-large') {
-  }
 }
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index cd9e12fc6..6a6dda587 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -1,4 +1,5 @@
 $breakpoints: (
+  tiny: 320px,
   small: 640px,
   medium: 768px,
   large: 1024px,
diff --git a/exampleSite/package-lock.json b/exampleSite/package-lock.json
new file mode 100644
index 000000000..e03e0b1ba
--- /dev/null
+++ b/exampleSite/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "exampleSite",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "exampleSite",
+      "version": "0.1.0",
+      "devDependencies": {}
+    }
+  }
+}
diff --git a/exampleSite/package.hugo.json b/exampleSite/package.hugo.json
new file mode 100644
index 000000000..a0ab5218f
--- /dev/null
+++ b/exampleSite/package.hugo.json
@@ -0,0 +1,4 @@
+{
+  "name": "exampleSite",
+  "version": "0.1.0"
+}
\ No newline at end of file
diff --git a/exampleSite/package.json b/exampleSite/package.json
new file mode 100644
index 000000000..37bcf1690
--- /dev/null
+++ b/exampleSite/package.json
@@ -0,0 +1,10 @@
+{
+  "comments": {
+    "dependencies": {},
+    "devDependencies": {}
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "name": "exampleSite",
+  "version": "0.1.0"
+}
diff --git a/layouts/partials/misc/badge.html b/layouts/partials/misc/badge.html
index e78b42c7e..cfd8eeb78 100644
--- a/layouts/partials/misc/badge.html
+++ b/layouts/partials/misc/badge.html
@@ -1,7 +1,7 @@
 <div class="col-6 col-lg-4 p-2">
 {{ if eq .type "certification" }}
     {{/* Verifiable certificate badge from https://www.credly.com */}}
-    <div class="">
+    <div class="certificate-badge">
       <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
        <img src="{{ .badge }}" alt="{{ .name }}" />
       </a>

From 81cdb970fcbf446e81115599b4c8f14530838f90 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Fri, 4 Aug 2023 08:02:29 +0600
Subject: [PATCH 03/17] Refactor CSS for experiences section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/sections/experiences.scss | 234 +++++++++---------------
 assets/styles/sections/skills.scss      |  99 +++-------
 layouts/partials/cards/skill.html       |   2 +-
 3 files changed, 118 insertions(+), 217 deletions(-)

diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss
index 1d1afef96..1df94fa63 100644
--- a/assets/styles/sections/experiences.scss
+++ b/assets/styles/sections/experiences.scss
@@ -1,29 +1,24 @@
 .experiences-section {
   padding-bottom: 1rem;
 
-  .timeline {
-    margin-top: 1.5rem !important;
-  }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
   }
-  
+
   ul {
     padding-left: 1rem;
+    & > li {
+      margin-left: 0;
+      color: #3c4858;
+    }
   }
-  
-  ul > li {
-    margin-left: 0;
-    color: #3c4858;
-  }
-  
+
   .designation {
     font-weight: 600;
   }
-  
+
   .circle {
     padding: 13px 20px;
     border-radius: 50%;
@@ -32,140 +27,93 @@
     max-height: 50px;
     z-index: 2;
   }
-  
-  .timeline .vertical-line {
-    align-self: stretch;
-  }
-  
-  .timeline .vertical-line::after {
-    content: "";
-    position: absolute;
-    border-left: 3px solid #248aaa;
-    z-index: 1;
-    height: 100%;
-    left: 50%;
-  }
-  
-  .timeline .vertical-line:nth-child(even)::after {
-    left: calc(50% - 3px) !important;
-  }
-  
-  .timeline .horizontal-line div {
-    padding: 0;
-    height: 40px;
-  }
-  
-  .timeline .horizontal-line hr {
-    border-top: 3px solid #248aaa;
-    margin: 0;
-    top: 17px;
-    position: relative;
-  }
-  
-  .timeline .horizontal-line .timeline-side-div {
-    display: flex;
-    overflow: hidden;
-  }
-  
-  .timeline .horizontal-line .corner {
-    border: 3px solid #248aaa;
-    width: 100%;
-    position: relative;
-    border-radius: 15px;
-  }
-  
-  .timeline .row:nth-child(2n) div:nth-child(1) .corner {
-    left: 50%;
-    top: -50%;
-  }
-  
-  .timeline .row:nth-child(2n) div:nth-child(3) .corner {
-    left: -50%;
-    top: calc(50% - 3px);
-  }
-  
-  .timeline .row:nth-child(4n) div:nth-child(1) .corner {
-    left: 50%;
-    top: calc(50% - 3px);
-  }
-  
-  .timeline .row:nth-child(4n) div:nth-child(3) .corner {
-    left: -50%;
-    top: -50%;
-  }
-  
-  /* ============= 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) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    .container {
-      max-width: 100%;
+
+  .timeline {
+    margin-top: 1.5rem !important;
+
+    .vertical-line {
+      align-self: stretch;
+
+      &::after {
+        content: '';
+        position: absolute;
+        border-left: 3px solid #248aaa;
+        z-index: 1;
+        height: 100%;
+        left: 50%;
+      }
+      &:nth-child(even)::after {
+        left: calc(50% - 3px) !important;
+      }
     }
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-  }
-  
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
-    .timeline .row:nth-child(4n) div:nth-child(3) .corner {
-      left: -55%;
-      top: -50%;
+    .horizontal-line {
+      div {
+        padding: 0;
+        height: 40px;
+      }
+      hr {
+        border-top: 3px solid #248aaa;
+        margin: 0;
+        top: 17px;
+        position: relative;
+      }
+      .timeline-side-div {
+        display: flex;
+        overflow: hidden;
+      }
+      .corner {
+        border: 3px solid #248aaa;
+        width: 100%;
+        position: relative;
+        border-radius: 15px;
+      }
     }
-
-    .timeline .row:nth-child(2n) div:nth-child(1) .corner {
-      left: 55%;
-      top: -50%;
+    .row {
+      &:nth-child(2n) {
+        div {
+          &:nth-child(1) .corner {
+            left: 50%;
+            top: -50%;
+          }
+          &:nth-child(3) .corner {
+            left: -50%;
+            top: calc(50% - 3px);
+          }
+        }
+      }
+      &:nth-child(4n) {
+        div {
+          &:nth-child(1) .corner {
+            left: 50%;
+            top: calc(50% - 3px);
+          }
+          &:nth-child(3) .corner {
+            left: -50%;
+            top: -50%;
+          }
+        }
+      }
     }
   }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
-    .timeline .row:nth-child(4n) div:nth-child(3) .corner {
-      left: -60%;
-      top: -50%;
-    }
 
-    .timeline .row:nth-child(2n) div:nth-child(1) .corner {
-      left: 60%;
-      top: -50%;
+  @include media('<=medium') {
+    .container {
+      max-width: 100%;
     }
   }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-    .timeline .row:nth-child(4n) div:nth-child(3) .corner {
-      left: -64%;
-      top: -50%;
-    }
 
-    .timeline .row:nth-child(2n) div:nth-child(1) .corner {
-      left: 64%;
-      top: -50%;
+  @include media('<=small') {
+    .container {
+      padding-left: 0px;
+      padding-right: 0px;
     }
-  }  
+    .timeline {
+      .vertical-line {
+        visibility: hidden;
+      }
+      .horizontal-line {
+        visibility: hidden;
+      }
+    }
+  }
 }
diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss
index a2176dc99..1310668a8 100644
--- a/assets/styles/sections/skills.scss
+++ b/assets/styles/sections/skills.scss
@@ -1,87 +1,40 @@
 .skills-section {
-  .card .card-head {
-    background-color: #f9fafc;
-    height: -moz-fit-content;
-    height: fit-content;
-    padding: 0.7rem;
-    padding-bottom: 0rem;
-    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
-  }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
-  }
-  
-  .skill-card-link {
-    text-decoration: none;
-  }
-  
-  .card .card-img-xs {
-    margin-right: 0.5rem;
-    margin-bottom: 0.75rem;
-  }
-  
   .card {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     height: 100%;
+
+    .card-head {
+      background-color: #f9fafc;
+      height: -moz-fit-content;
+      height: fit-content;
+      padding: 0.7rem;
+      padding-bottom: 0rem;
+      border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
+    }
+
+    .card-body {
+      padding-top: 0.2rem;
+      padding-left: 0.7rem;
+    }
+    .card-img-xs {
+      margin-right: 0.5rem;
+      margin-bottom: 0.75rem;
+    }
   }
-  
-  .card .card-body {
-    padding-top: 0.2rem;
-    padding-left: 0.7rem;
-  }
-  
-  /* ============= 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) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
+
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
   }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+
+  @include media('<=medium') {
     padding-left: 0;
     padding-right: 0;
-    
+
     .container {
       max-width: 95%;
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-  }
-  
-  /* 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) {
-  }  
 }
diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html
index c8e6e1c1e..86f47c973 100644
--- a/layouts/partials/cards/skill.html
+++ b/layouts/partials/cards/skill.html
@@ -1,5 +1,5 @@
 <div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
-  <a class="skill-card-link" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
+  <a class="text-decoration-none" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
     <div class="card">
       <div class="card-head d-flex">
         {{ if .logo }}

From a0a50736de5c68e45b7ebe90c3746103d83cdb0f Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Sun, 6 Aug 2023 23:36:18 +0600
Subject: [PATCH 04/17] Update education section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/sections/education.scss | 315 ++++++++++++--------------
 1 file changed, 144 insertions(+), 171 deletions(-)

diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss
index 2c841324c..a7683c0e8 100644
--- a/assets/styles/sections/education.scss
+++ b/assets/styles/sections/education.scss
@@ -1,203 +1,176 @@
 .education-section {
-  .education-info-table {
-    width: 100%;
-    border: none;
-    background: none;
-  }
-  
-  .education-info-table tr:hover {
-    background: none;
-  }
-  
-  .education-info-table tr,
-  .education-info-table th,
-  .education-info-table td {
-    border: none;
-    padding: 0;
-    background: none;
-  }
-  
-  .timeframe {
-    color: #8392a5;
-    text-align: right;
-  }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px;
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
     display: block;
   }
-  
-  .icon {
-    width: 2rem;
-    padding-left: 0;
-    padding-right: 0;
-    position: relative;
-  }
-  
-  .icon .hline {
-    position: absolute;
-    left: 1rem;
-    top: 0;
-    background-color: #248aaa;
-    height: 100%;
-    width: 2px;
-  }
-  
-  .education-info-table tr:first-child .hline {
-    height: 65%;
-    top: auto;
-  }
-  
-  .education-info-table tr:last-child .hline {
-    height: 50%;
-  }
-  
-  .icon-holder {
-    background-color: #248aaa;
-    border-radius: 50%;
-    height: 2rem;
-    width: 2rem;
-    padding: 0.2rem;
-    text-align: center;
-    color: #e5e9f2;
-    position: relative;
-  }
-  
-  .line {
-    width: 5%;
-    padding-left: 0;
-    padding-right: 0;
-  }
-  
-  .line div {
-    height: 2px;
-    /* width: 100%; */
-    margin-right: -1px;
-    background-color: #248aaa;
-  }
-  
-  .degree-info {
-    padding: 1rem;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    border-left: 2px solid #248aaa;
-    border-top: 1px solid #c0ccda;
-    border-bottom: 1px solid #c0ccda;
-    border-right: 1px solid #c0ccda;
-    border-radius: 5px;
-  }
-  
-  .degree-info h5 {
-    margin-bottom: 0.3rem;
+
+  .card {
+    &:hover,
+    &:focus {
+      border-left: 2px solid #248aaa;
+    }
   }
-  
-  .taken-courses table {
-    margin-left: 1rem;
+
+  .education-info-table {
     width: 100%;
-    transition: all 0.3s ease-out;
-    background: none;
     border: none;
-  }
-  
-  .taken-courses tr {
-    height: auto !important;
-  }
-  
-  .taken-courses tr,
-  .taken-courses td,
-  .taken-courses th {
     background: none;
-    border: none;
-    color: #212529;
-  }
-  .taken-courses th.course-name-header{
-    width: 50%;
-  }
-  .taken-courses .hidden-course {
-    display: none;
-    transition: all 1s ease-out;
-  }
-  
-  .taken-courses ul {
-    margin-bottom: 0;
+
+    .icon {
+      width: 2rem;
+      padding-left: 0;
+      padding-right: 0;
+      position: relative;
+
+      .hline {
+        position: absolute;
+        left: 1rem;
+        top: 0;
+        background-color: #248aaa;
+        height: 100%;
+        width: 2px;
+      }
+
+      .icon-holder {
+        background-color: #248aaa;
+        border-radius: 50%;
+        height: 2rem;
+        width: 2rem;
+        padding: 0.2rem;
+        text-align: center;
+        color: #e5e9f2;
+        position: relative;
+      }
+    }
+
+    tr,
+    th,
+    td {
+      border: none;
+      padding: 0;
+      background: none;
+    }
+
+    tr {
+      &:hover {
+        background: none;
+      }
+      &:first-child {
+        .hline {
+          height: 65%;
+          top: auto;
+        }
+      }
+      &:last-child {
+        .hline {
+          height: 50%;
+        }
+      }
+
+      .line {
+        width: 5%;
+        padding-left: 0;
+        padding-right: 0;
+
+        div {
+          height: 2px;
+          /* width: 100%; */
+          margin-right: -1px;
+          background-color: #248aaa;
+        }
+      }
+
+      .details {
+        .degree-info {
+          padding: 1rem;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+          border-left: 2px solid #248aaa;
+          border-top: 1px solid #c0ccda;
+          border-bottom: 1px solid #c0ccda;
+          border-right: 1px solid #c0ccda;
+          border-radius: 5px;
+
+          h5 {
+            margin-bottom: 0.3rem;
+          }
+
+          .timeframe {
+            color: #8392a5;
+            text-align: right;
+          }
+
+          .taken-courses {
+            table {
+              margin-left: 1rem;
+              width: 100%;
+              transition: all 0.3s ease-out;
+              background: none;
+              border: none;
+
+              tr,
+              td,
+              th {
+                background: none;
+                border: none;
+                color: #212529;
+              }
+
+              tr {
+                height: auto !important;
+              }
+              th {
+                .course-name-header {
+                  width: 50%;
+                }
+              }
+              .hidden-course {
+                display: none;
+                transition: all 1s ease-out;
+              }
+              ul {
+                margin-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   .hidden {
     display: none;
   }
-  
-  /*============ Education Alter Template =============*/
-  .education-alt .degree-info {
-    border-right: 2px solid #248aaa;
-  }
-  
-  /* ============= 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) {
+
+  @include media('<=large') {
     .container {
       padding-left: 0;
     }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
 
     .container {
       padding-right: 0;
     }
-  
+
     .icon {
       display: none;
     }
+
     .line {
       display: none;
     }
+
     .timeframe {
       text-align: left;
     }
   }
-  
-  /* 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) {
-  }  
-}
\ No newline at end of file
+}
+
+.education-alt .degree-info {
+  border-right: 2px solid #248aaa;
+}

From 9bfbcfca44219d35f4a0e78fbd2e0c419c2fdc10 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Mon, 7 Aug 2023 00:09:39 +0600
Subject: [PATCH 05/17] Update projects section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/components/cards.scss  |  12 ++-
 assets/styles/sections/projects.scss | 133 +++++++++------------------
 assets/styles/sections/skills.scss   |  15 +--
 3 files changed, 53 insertions(+), 107 deletions(-)

diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
index d1363e229..e14b4b0e0 100644
--- a/assets/styles/components/cards.scss
+++ b/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 {
diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss
index de5a614a6..2724bac29 100644
--- a/assets/styles/sections/projects.scss
+++ b/assets/styles/sections/projects.scss
@@ -1,95 +1,59 @@
 .projects-section {
-  .card .card-header {
-    background-color: #f9fafc;
-    padding: 0.7rem;
-    padding-bottom: 0rem;
-    text-decoration: none;
-  }
-  
-  .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;
+  .card {
+    .card-header {
+      background-color: #f9fafc;
+      padding: 0.7rem;
+      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;
+    }
   }
-  
+
   .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;
-  }
-  
-  .project-btn-holder span {
-    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%;
 
-    .container {
-      max-width: 100%;
-    }
-    .filtr-projects {
-      padding: 0;
-    }
-    .filtr-item {
-      padding-left: 0.2rem;
-      padding-right: 0.2rem;
+    span {
+      display: flex;
+      justify-content: flex-end;
     }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+
+  @include media('<=large') {
     padding-left: 0;
     padding-right: 0;
     width: 100%;
@@ -101,34 +65,19 @@
       padding: 0;
     }
     .filtr-item {
+      flex: 50%;
       padding-left: 0.2rem;
       padding-right: 0.2rem;
-      flex: 50%;
       max-width: calc(100% / 2 - 0.2rem);
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     .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) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss
index 1310668a8..42d4fce8d 100644
--- a/assets/styles/sections/skills.scss
+++ b/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') {

From b36d258104bf2ecc6655dd1ab7187b218144cc7e Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Mon, 7 Aug 2023 01:22:21 +0600
Subject: [PATCH 06/17] Update publication + accomplishment section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/sections/accomplishments.scss | 118 +++++-------
 assets/styles/sections/publications.scss    | 187 ++++++++------------
 2 files changed, 115 insertions(+), 190 deletions(-)

diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss
index 77449f74e..b922cae37 100644
--- a/assets/styles/sections/accomplishments.scss
+++ b/assets/styles/sections/accomplishments.scss
@@ -1,97 +1,59 @@
 .accomplishments-section {
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
   }
-  
+
   .card {
     background: #fff;
     border-top: 2px solid #248aaa;
     height: 100%;
+
+    &:hover,
+    &:focus {
+      border-top: 2px solid #248aaa;
+    }
+
+    .card-header {
+      background: none;
+      border: none;
+
+      .sub-title {
+        color: #8392a5;
+        margin-top: 0.4rem;
+      }
+    }
+
+    .card-body {
+      padding: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    .card-footer {
+      background: #fff;
+      border: none;
+      padding: 0;
+      padding-left: 0.7rem;
+      padding-bottom: 0.3rem;
+    }
   }
-  .card .card-header {
-    background: none;
-    border: none;
-  }
-  
-  .card .card-header .sub-title {
-    color: #8392a5;
-    margin-top: 0.4rem;
-  }
-  
-  .card .sub-title :nth-child(2) {
-    float: none !important;
-  }
-  
-  .card .card-body {
-    padding: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  
-  .card .card-footer {
-    background: #fff;
-    border: none;
-    padding: 0;
-    padding-left: 0.7rem;
-    padding-bottom: 0.3rem;
-  }
-  
-  /* ============= 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) {
+
+  @include media('<=large') {
     width: 100%;
     padding: 0;
     padding-left: 0.2rem;
     padding-right: 0.2rem;
+    margin-top: 2rem;
 
     .container {
       max-width: 100%;
     }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-  
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     flex: 100%;
     max-width: 100%;
-    margin-top: 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) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss
index 85baedcf8..675ceb292 100644
--- a/assets/styles/sections/publications.scss
+++ b/assets/styles/sections/publications.scss
@@ -1,82 +1,63 @@
 .publications-section {
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
   }
-  
+
   .card {
     background: #fff;
     border-top: 2px solid #248aaa;
+
+    &:hover,
+    &:focus {
+      border-top: 2px solid #248aaa;
+    }
+
+    .card-header {
+      background: none;
+      border: none;
+      display: flex;
+      flex-direction: column;
+
+      .sub-title {
+        color: #8392a5;
+        margin-top: 0.4rem;
+
+        span:nth-child(2) {
+          float: right !important;
+        }
+      }
+    }
+
+    .card-body {
+      padding: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    .card-footer {
+      background: #fff;
+      border: none;
+      padding: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-bottom: 0.3rem;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
   }
-  .card .card-header {
-    background: none;
-    border: none;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .card .card-header .sub-title {
-    color: #8392a5;
-    margin-top: 0.4rem;
-  }
-  
-  .card .sub-title :nth-child(2) {
-    float: right !important;
-  }
-  
-  .card .card-body {
-    padding: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  
-  .card .card-footer {
-    background: #fff;
-    border: none;
-    padding: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 0.3rem;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-  
-  .card .card-footer .tags {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-  .card .card-footer .tags .badge {
-    cursor: auto;
-  }
-  
+
   .filtr-publications {
     padding: 1rem !important;
   }
-  
-  .btn-group{
+
+  .btn-group {
     justify-content: center;
   }
-  
-  /* ============= 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) {
+
+  @include media('<=large') {
     padding-left: 0;
     padding-right: 0;
     width: 100%;
@@ -84,66 +65,48 @@
     .container {
       max-width: 100%;
     }
-    
+
     .filtr-publications {
       padding: 0;
     }
-    
+
     .pub-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-publications {
-      padding: 0;
-    }
+  @include media('<=medium') {
     .pub-filtr-item {
-      padding-left: 0.2rem;
-      padding-right: 0.2rem;
       flex: 100%;
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-    .btn {
-      margin-top: 0.3125rem;
-    }
+
+  @include media('<=small') {
     .pub-filtr-item {
       flex: 100%;
       max-width: 100%;
     }
-    .card .card-footer .tags {
-      flex: 100%;
+    .details-btn {
+      .btn {
+        margin-top: 0.5rem;
+        margin-left: auto;
+      }
+    }
+
+    .card {
+      .card-footer {
+        padding-left: 0.5rem;
+
+        .tags {
+          flex: 100%;
+          max-width: 100%;
+
+          .btn {
+            margin-top: 0.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) {
-  }  
-}
\ No newline at end of file
+}

From 3e20e2ffb2d1b9384542fc9a84b568098bff817b Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Thu, 21 Sep 2023 23:13:25 +0600
Subject: [PATCH 07/17] Update achievements section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/layouts/main.scss          |   4 +
 assets/styles/sections/achievements.scss | 297 ++++++++++-------------
 2 files changed, 129 insertions(+), 172 deletions(-)

diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index a3ea86b0c..8d3b253ac 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -105,6 +105,10 @@ img.right {
   margin-right: 3px;
 }
 
+.hidden {
+  display: none !important;
+}
+
 /* ====== table ====== */
 table {
   border-radius: 0.1rem;
diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss
index c82ca10f0..142162e55 100644
--- a/assets/styles/sections/achievements.scss
+++ b/assets/styles/sections/achievements.scss
@@ -2,179 +2,132 @@
   .container {
     padding-top: 0.5rem;
   }
-  
-  h1 > span{
-    margin-top: -55px;  /* Size of fixed header */
-    padding-bottom:55px; 
-    display: block; 
-  }
-  
-  #gallery .achievement-entry {
-    cursor: pointer;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    margin-left: 7px;
-    margin-right: 7px;
-    z-index: 1;
-    background-color: #e5e9f2;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease-out;
-  }
-  
-  #gallery .achievement-entry:hover {
-    cursor: pointer;
-    z-index: 1;
-    transform: scale(1.1);
-    transition: all 0.3s ease-out;
-    z-index: 20000;
-  }
-  
-  #gallery .achievement-details {
-    cursor: pointer;
-    z-index: 1;
-    opacity: 1 !important;
-    transition: none !important;
-    transform: none !important;
-  }
-  
-  #gallery .img-type-1 {
-    height: 300px;
-  }
-  #gallery .img-type-2 {
-    height: 146px;
-    margin-bottom: 8px;
-  }
-  
-  #gallery .svg-inline--fa {
-    color: #8392a5;
-    background-color: rgba(0, 0, 0, 0.7);
-    padding: 10px;
-    font-size: 0rem;
-    opacity: 0;
-  }
-  
-  #gallery .achievement-entry:hover .svg-inline--fa {
-    opacity: 1;
-    font-size: 1rem;
-    transition: all 0.3s ease-out;
-  }
-  
-  #gallery .img-type-1 .svg-inline--fa {
-    margin-top: 135px;
-  }
-  #gallery .img-type-2 .svg-inline--fa {
-    margin-top: 50px;
-  }
-  
-  #gallery .achievement-details.img-type-1 .svg-inline--fa,
-  .achievement-details.img-type-2 .svg-inline--fa {
-    margin-top: 0px !important;
-    transition: none !important;
-    float: right;
-  }
-  
-  #gallery .achievement-entry .title {
-    color: #e5e9f2;
-    background-color: rgba(0, 0, 0, 0.7);
-    opacity: 0;
-    padding: 5px;
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-    margin-bottom: 0px;
-    bottom: -5px;
-  }
-  
-  #gallery .achievement-entry:hover .title {
-    opacity: 1;
-    bottom: 0px;
-    transition: bottom 0.3s ease-out;
-  }
-  
-  #gallery .caption {
-    background-color: rgba(0, 0, 0, 0.7);
-    bottom: 1rem;
-    left: 1rem;
-    color: #e5e9f2;
-    padding: 15px;
-    position: absolute;
-    transition: all 0.3s ease-out;
-  }
-  
-  #gallery .caption h4 {
-    color: #e5e9f2;
-  }
-  
-  #gallery .caption p {
-    font-size: 16px;
-    font-weight: 300;
-    color: #e5e9f2;
-  }
-  
-  .hidden {
-    display: none !important;
-  }
-  
-  #gallery .achievement-details {
-    height: 75vh !important;
-  }
-  
-  /* ============= 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) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    .container {
-      max-width: 100%;
+
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
+  }
+
+  #gallery {
+    .achievement-entry {
+      margin-top: 5px;
+      margin-bottom: 5px;
+      margin-left: 7px;
+      margin-right: 7px;
+      z-index: 1;
+      background-color: #e5e9f2;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      position: relative;
+      overflow: hidden;
+      transition: all 0.3s ease-out;
+
+      .title {
+        color: #e5e9f2;
+        background-color: rgba(0, 0, 0, 0.7);
+        opacity: 0;
+        padding: 5px;
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        margin-bottom: 0px;
+        bottom: -5px;
+      }
+
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.1);
+        transition: all 0.3s ease-out;
+        z-index: 20000;
+
+        .svg-inline--fa {
+          opacity: 1;
+          font-size: 1rem;
+          transition: all 0.3s ease-out;
+        }
+
+        .title {
+          opacity: 1;
+          bottom: 0px;
+          transition: bottom 0.3s ease-out;
+        }
+      }
     }
-    .col-md-6 {
-      flex: 50%;
-      width: 50%;
+
+    .achievement-details {
+      cursor: pointer;
+      z-index: 1;
+      height: 75vh !important;
+      opacity: 1 !important;
+      transition: none !important;
+      transform: none !important;
+
+      .img-type-1 .svg-inline--fa,
+      .img-type-2 .svg-inline--fa {
+        margin-top: 0px !important;
+        transition: none !important;
+        float: right;
+      }
     }
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
-    #gallery .achievement-entry:hover {
-      transform: scale(1.05);
+
+    .img-type-1 {
+      height: 300px;
+
+      .svg-inline--fa {
+        margin-top: 135px;
+      }
+    }
+    .img-type-2 {
+      height: 146px;
+      margin-bottom: 8px;
+
+      .svg-inline--fa {
+        margin-top: 50px;
+      }
+    }
+
+    .svg-inline--fa {
+      color: #8392a5;
+      background-color: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      font-size: 0rem;
+      opacity: 0;
+    }
+    .caption {
+      background-color: rgba(0, 0, 0, 0.7);
+      bottom: 1rem;
+      left: 1rem;
+      color: #e5e9f2;
+      padding: 15px;
+      position: absolute;
+      transition: all 0.3s ease-out;
+
+      h4 {
+        color: #e5e9f2;
+      }
+      p {
+        font-size: 16px;
+        font-weight: 300;
+        color: #e5e9f2;
+      }
+    }
+
+    @include media('<=medium') {
+      .container {
+        max-width: 100%;
+      }
+      .col-md-6 {
+        flex: 50%;
+        width: 50%;
+      }
+    }
+
+    @include media('<=small') {
+      #gallery .achievement-entry:hover {
+        transform: scale(1.05);
+      }
     }
   }
-  
-  /* 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) {
-  }  
-}
\ No newline at end of file
+}

From a4224d74ea2b8c2c78b72342ecdd2456d2fd0f89 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Thu, 21 Sep 2023 23:26:01 +0600
Subject: [PATCH 08/17] Refactor footer CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/application.template.scss |  1 +
 assets/styles/layouts/main.scss         | 70 -------------------------
 assets/styles/sections/footer.scss      | 63 ++++++++++++++++++++++
 3 files changed, 64 insertions(+), 70 deletions(-)
 create mode 100644 assets/styles/sections/footer.scss

diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index 42b2a9e05..fd4edb541 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -36,6 +36,7 @@
 @import './sections/achievements';
 @import './sections/accomplishments';
 @import './sections/publications';
+@import './sections/footer';
 
 
 // components
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 8d3b253ac..e9d39f6c4 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -263,76 +263,6 @@ mark {
   color: #f9fafc;
 }
 
-/* --- FOOTER START --- */
-
-.footer {
-  color: #8392a5 !important;
-  background-color: #1c2d41;
-  position: relative;
-  z-index: 9999;
-}
-
-.footer h5 {
-  color: #c0ccda;
-}
-.footer a {
-  color: #8392a5;
-  transition: all 0.3s ease-out;
-}
-
-.footer a:hover {
-  margin-left: 5px;
-  transition: all 0.3s ease-out;
-}
-
-.footer ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-.footer li {
-  margin-top: 5px;
-}
-
-.footer hr {
-  background-color: #8392a5;
-}
-
-.footer p:first-child {
-  color: #c0ccda;
-}
-
-.footer input {
-  background-color: #c0ccda;
-}
-
-.footer input:focus {
-  background-color: #e5e9f2;
-}
-
-.footer #disclaimer {
-  color: #8392a5 !important;
-  text-align: justify;
-}
-.footer #disclaimer > strong {
-  color: #c0ccda !important;
-}
-
-.footer #theme {
-  color: #c0ccda;
-}
-
-.footer #theme img {
-  width: 32px;
-}
-
-.footer #hugo:hover {
-  margin-right: 5px;
-  transition: all 0.3s ease-out;
-}
-
-/* --- FOOTER END ---- */
-
 /* ============= Media Query Template ======= */
 @include media('<medium') {
 }
diff --git a/assets/styles/sections/footer.scss b/assets/styles/sections/footer.scss
new file mode 100644
index 000000000..52c643dd9
--- /dev/null
+++ b/assets/styles/sections/footer.scss
@@ -0,0 +1,63 @@
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+
+  h5 {
+    color: #c0ccda;
+  }
+
+  a {
+    color: #8392a5;
+    transition: all 0.3s ease-out;
+    &:hover {
+      margin-left: 5px;
+      transition: all 0.3s ease-out;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      margin-top: 5px;
+    }
+  }
+
+  hr {
+    background-color: #8392a5;
+  }
+
+  p:first-child {
+    color: #c0ccda;
+  }
+
+  input {
+    background-color: #c0ccda;
+    &:focus {
+      background-color: #e5e9f2;
+    }
+  }
+
+  #disclaimer {
+    color: #8392a5 !important;
+    text-align: justify;
+    & > strong {
+      color: #c0ccda !important;
+    }
+  }
+
+  #theme {
+    color: #c0ccda;
+    img {
+      width: 32px;
+    }
+  }
+
+  #hugo:hover {
+    margin-right: 5px;
+    transition: all 0.3s ease-out;
+  }
+}

From efaeed42f6044eee88518bca918dbf1b945bf5b6 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Thu, 21 Sep 2023 23:55:37 +0600
Subject: [PATCH 09/17] Re-use section title adjustment css for top header

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/sections/accomplishments.scss | 6 +-----
 assets/styles/sections/achievements.scss    | 8 ++------
 assets/styles/sections/education.scss       | 6 +-----
 assets/styles/sections/experiences.scss     | 8 ++------
 assets/styles/sections/publications.scss    | 6 +-----
 assets/styles/variables.scss                | 8 ++++++++
 6 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss
index b922cae37..c4e1ebb25 100644
--- a/assets/styles/sections/accomplishments.scss
+++ b/assets/styles/sections/accomplishments.scss
@@ -1,9 +1,5 @@
 .accomplishments-section {
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
+  @include section-title-adjustment();
 
   .card {
     background: #fff;
diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss
index 142162e55..e389c3c7e 100644
--- a/assets/styles/sections/achievements.scss
+++ b/assets/styles/sections/achievements.scss
@@ -1,14 +1,10 @@
 .achievements-section {
+  @include section-title-adjustment();
+
   .container {
     padding-top: 0.5rem;
   }
 
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
-
   #gallery {
     .achievement-entry {
       margin-top: 5px;
diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss
index a7683c0e8..1cb363a18 100644
--- a/assets/styles/sections/education.scss
+++ b/assets/styles/sections/education.scss
@@ -1,9 +1,5 @@
 .education-section {
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
+  @include section-title-adjustment();
 
   .card {
     &:hover,
diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss
index 1df94fa63..df639b47c 100644
--- a/assets/styles/sections/experiences.scss
+++ b/assets/styles/sections/experiences.scss
@@ -1,11 +1,7 @@
 .experiences-section {
-  padding-bottom: 1rem;
+  @include section-title-adjustment();
 
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
+  padding-bottom: 1rem;
 
   ul {
     padding-left: 1rem;
diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss
index 675ceb292..ba2ee1de5 100644
--- a/assets/styles/sections/publications.scss
+++ b/assets/styles/sections/publications.scss
@@ -1,9 +1,5 @@
 .publications-section {
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
+  @include section-title-adjustment();
 
   .card {
     background: #fff;
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index 6a6dda587..8316c48ea 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -7,3 +7,11 @@ $breakpoints: (
   extra-large: 1536px,
   ultra-large: 2560px,
 );
+
+@mixin section-title-adjustment(){
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
+  }
+}

From e632926b5a30ad1345b1c63c1f903f03125da03a Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Sat, 23 Sep 2023 00:32:56 +0600
Subject: [PATCH 10/17] Refactor navbar CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/navigators/navbar.scss | 372 ++++++++++-----------------
 1 file changed, 135 insertions(+), 237 deletions(-)

diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss
index 50b42a65f..cb78095c5 100644
--- a/assets/styles/navigators/navbar.scss
+++ b/assets/styles/navigators/navbar.scss
@@ -1,3 +1,43 @@
+@mixin initial-nav-item-hover-effect() {
+  color: #f9fafc;
+  transition: all 0.3s ease-out;
+  transform: translateY(-2px);
+}
+
+@mixin final-nav-item-hover-effect() {
+  color: #2098d1 !important;
+  transition: all 0.3s ease-out;
+  border-bottom: 2px solid #2098d1 !important;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%);
+}
+
+@mixin navbar-dropdown() {
+  .dropdown-menu {
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    border: 1px solid #fff;
+    max-height: 0vh;
+    overflow: hidden;
+    display: block;
+    visibility: hidden;
+    transition: all 0.3s ease-out;
+
+    &.show {
+      max-height: 100vh;
+      visibility: visible;
+      transition: all 0.3s ease-in;
+
+      a {
+        color: #1c2d41 !important;
+
+        &:hover {
+          @include final-nav-item-hover-effect();
+        }
+      }
+    }
+  }
+}
+
 .top-navbar {
   position: fixed;
   left: 0;
@@ -10,191 +50,129 @@
   padding-top: 0.4rem;
   text-align: center;
 
-    /* --- initial state start ------ */
   &.initial-navbar {
     background-color: transparent;
+    .navbar-brand {
+      color: #c0ccda;
+      font-weight: 600;
+    }
+    li {
+      a {
+        color: #c0ccda;
+        &:hover {
+          @include initial-nav-item-hover-effect();
+        }
+      }
+    }
+    .navbar-nav .active {
+      @include initial-nav-item-hover-effect();
+    }
+    @include navbar-dropdown();
   }
-  
-  &.initial-navbar .navbar-brand {
-    color: #c0ccda;
-    font-weight: 600;
-  }
-  
-  &.initial-navbar li a {
-    color: #c0ccda;
-  }
-  
-  &.initial-navbar .navbar-nav .active,
-  &.initial-navbar li a:hover {
-    color: #f9fafc;
-    transition: all 0.3s ease-out;
-    transform: translateY(-2px);
-  }
-  
-  .navbar-collapse {
-    margin-top: -5px;
-  }
-  
-  .navbar-collapse.show,
-  .navbar-collapse.collapsing {
-    background-color: #f9fafc;
-    padding-left: 1rem;
-  }
-  
-  /* --- initial state end ------ */
-  
-  /* --- state after scroll start --- */
-  
+
   &.final-navbar {
     background-color: #f9fafc;
     color: #1c2d41;
     transition: all 0.3s ease-out;
+
+    .navbar-brand {
+      color: #1c2d41;
+      font-weight: 600;
+    }
+    li {
+      a {
+        color: #1c2d41;
+        font-weight: 500;
+        transition: all 0.3s ease-out;
+        border-bottom: 2px solid#F9FAFC;
+        &:hover {
+          @include final-nav-item-hover-effect();
+        }
+      }
+    }
+    .navbar-nav .active {
+      @include final-nav-item-hover-effect();
+    }
+
+    #top-navbar-divider {
+      background: rgba(0, 0, 0, 0.6);
+    }
+    @include navbar-dropdown();
   }
-  
-  &.final-navbar .navbar-brand {
-    color: #1c2d41;
-    font-weight: 600;
-  }
-  
-  &.final-navbar li a {
-    color: #1c2d41;
-    font-weight: 500;
-    transition: all 0.3s ease-out;
-    border-bottom: 2px solid#F9FAFC;
-  }
-  
-  &.final-navbar .navbar-nav .active,
-  &.final-navbar li a:hover {
-    color: #2098d1;
-    transition: all 0.3s ease-out;
-    border-bottom: 2px solid #2098d1;
-    background: rgb(2, 0, 36);
-    background: linear-gradient(
-      90deg,
-      rgba(2, 0, 36, 1) 0%,
-      rgba(34, 136, 168, 0.1) 0%
-    );
-  }
-  
-  .navbar-collapse.show li a,
-  .navbar-collapse.collapsing li a {
-    color: #1c2d41;
-    font-weight: 500;
-    transition: all 0.3s ease-out;
-  }
-  
-  .navbar-collapse.show .navbar-nav .active,
-  .navbar-collapse.show .navbar-nav a:hover {
-    color: #2098d1;
+
+  .navbar-collapse {
+    margin-top: -5px;
+    &.show,
+    &.collapsing {
+      background-color: #f9fafc;
+      padding-left: 1rem;
+
+      li {
+        a {
+          color: #1c2d41;
+          font-weight: 500;
+          transition: all 0.3s ease-out;
+        }
+      }
+      .navbar-nav {
+        .active {
+          color: #2098d1;
+        }
+        a:hover {
+          color: #2098d1;
+        }
+      }
+    }
   }
-  
+
   #top-navbar-divider {
     margin-top: 10px;
-  }
-  
-  /* --- state after scroll end --- */
-  
-  #top-navbar-divider {
     background: rgba(192, 204, 218, 0.8);
     height: 20px;
     width: 2px;
   }
-  
-  &.final-navbar #top-navbar-divider {
-    background: rgba(0, 0, 0, 0.6);
-  }
-  
-  #top-navbar-divider {
-    height: 20px;
-    width: 2px;
-  }
-  
+
   .navbar-brand img {
     width: 42px;
     padding: 5px;
     margin-left: -10px;
   }
-  
-  .dropdown-menu {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    border: 1px solid #fff;
-    max-height: 0vh;
-    overflow: hidden;
-    display: block;
-    visibility: hidden;
-    transition: all 0.3s ease-out;
-  }
-  
-  .dropdown-menu.show {
-    max-height: 100vh;
-    visibility: visible;
-    transition: all 0.3s ease-in;
-  }
-  
-  .dropdown-menu a {
-    color: #1c2d41;
-    border-bottom: none;
-  }
-  
-  .dropdown-menu a:hover {
-    color: #2098d1;
-    transition: all 0.3s ease-out;
-    border-bottom: none;
-    background: rgb(2, 0, 36);
-    background: linear-gradient(
-      90deg,
-      rgba(2, 0, 36, 1) 0%,
-      rgba(34, 136, 168, 0.2) 0%
-    );
-  }
-  
-  /* ============= 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) {
+
+  @include media('<=large') {
     height: -moz-fit-content;
     height: fit-content;
     padding-bottom: 0px;
     padding-top: 0px;
-  
+
     .container {
       max-width: 100%;
     }
-  
-    &.initial-navbar .navbar-nav .active,
-    &.initial-navbar li a:hover {
-      color: #2098d1;
-      transition: all 0.3s ease-out;
-    }
-  
-    &.final-navbar .navbar-nav .active,
-    &.final-navbar li a:hover {
-      color: #2098d1;
-      transition: none;
-  
-      border-bottom: none;
-      background: transparent;
-    }
-  
-    &.final-navbar li a {
-      border-bottom: none;
+
+    &.initial-navbar {
+      .navbar-nav .active,
+      li a:hover {
+        color: #2098d1;
+        transition: all 0.3s ease-out;
+      }
+    }
+    &.final-navbar {
+      .navbar-nav .active,
+      li a:hover {
+        color: #2098d1;
+        transition: none;
+
+        border-bottom: none !important;
+        background: transparent;
+      }
+      li a {
+        border-bottom: none;
+      }
     }
-  
+
     .dropdown-divider {
       border-top: 1px solid #c0ccda;
     }
+
     #top-navbar-divider {
       background: rgba(0, 0, 0, 0.6);
       height: auto;
@@ -208,91 +186,11 @@
       transition: all 0.3s ease-out;
     }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-    &.initial-navbar .navbar-nav .active,
-    &.initial-navbar li a:hover {
-      color: #2098d1;
-      transition: all 0.3s ease-out;
-    }
-  
-    &.final-navbar .navbar-nav .active,
-    &.final-navbar li a:hover {
-      color: #2098d1;
-      transition: none;
-  
-      border-bottom: none;
-      background: transparent;
-    }
-  
-    &.final-navbar li a {
-      border-bottom: none;
-    }
-  
-    .dropdown-divider {
-      border-top: 1px solid #c0ccda;
-    }
-    #top-navbar-divider {
-      background: rgba(0, 0, 0, 0.6);
-      height: auto;
-      width: auto;
-      margin-right: 15px;
-    }
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    &.initial-navbar .navbar-nav .active,
-    &.initial-navbar li a:hover {
-      color: #2098d1;
-      transition: all 0.3s ease-out;
-    }
-  
-    &.final-navbar .navbar-nav .active,
-    &.final-navbar li a:hover {
-      color: #2098d1;
-      transition: none;
-  
-      border-bottom: none;
-      background: transparent;
-    }
-  
-    &.final-navbar li a {
-      border-bottom: none;
-    }
-  
-    .dropdown-divider {
-      border-top: 1px solid #c0ccda;
-    }
-    #top-navbar-divider {
-      background: rgba(0, 0, 0, 0.6);
-      height: auto;
-      width: auto;
-      margin-right: 15px;
-    }
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     .dropdown-menu {
       margin-left: -1rem;
       margin-right: 0rem;
     }
   }
-  
-  /* 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) {
-  }  
-}
\ No newline at end of file
+}

From 5a9af3cc461492cbcc863ea679e7a2f3ebe04e88 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Tue, 26 Sep 2023 00:50:08 +0600
Subject: [PATCH 11/17] Refactor sidebar CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/scripts/sections/sidebar.js       |  10 +-
 assets/styles/application.template.scss  |   1 +
 assets/styles/components/links.scss      |  15 +
 assets/styles/layouts/main.scss          |   3 +
 assets/styles/navigators/sidebar.scss    | 382 ++++++++++-------------
 layouts/partials/navigators/sidebar.html |   4 +-
 6 files changed, 192 insertions(+), 223 deletions(-)
 create mode 100644 assets/styles/components/links.scss

diff --git a/assets/scripts/sections/sidebar.js b/assets/scripts/sections/sidebar.js
index ef90ce259..a10d33d87 100644
--- a/assets/scripts/sections/sidebar.js
+++ b/assets/scripts/sections/sidebar.js
@@ -6,19 +6,19 @@ function toggleSidebar () {
   if (sidebar == null) {
     return
   }
-  if (sidebar.classList.contains('hide')) {
-    sidebar.classList.remove('hide')
+  if (sidebar.classList.contains('expanded')) {
+    sidebar.classList.remove('expanded')
   } else {
     // if toc-section is open, then close it first
     const toc = document.getElementById('toc-section')
     if (toc != null && toc.classList.contains('hide')) {
       toc.classList.remove('hide')
     }
-    // add "hide" class
-    sidebar.classList.add('hide')
+    // add "expanded" class
+    sidebar.classList.add('expanded')
     // if it is mobile device. then scroll to top.
     const { isMobile } = getDeviceState()
-    if (isMobile && sidebar.classList.contains('hide')) {
+    if (isMobile && sidebar.classList.contains('expanded')) {
       document.body.scrollTop = 0
       document.documentElement.scrollTop = 0
       if (document.getElementById('hero-area') != null) {
diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index fd4edb541..ca89c3126 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -42,6 +42,7 @@
 // components
 @import './components/cards';
 @import './components/buttons';
+@import './components/links';
 
 
 // override
diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss
new file mode 100644
index 000000000..a30263224
--- /dev/null
+++ b/assets/styles/components/links.scss
@@ -0,0 +1,15 @@
+.list-link {
+    text-decoration: none;
+    color: #131313;
+    transition: all 0.3s ease-out;
+    &.active {
+      display: inline;
+      color: #2098d1;
+    }
+  
+    &:hover {
+      margin-left: 3px;
+      color: #2098d1;
+      transition: all 0.3s ease-out;
+    }
+  }
\ No newline at end of file
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index e9d39f6c4..3ee539bd5 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -62,6 +62,9 @@ a {
 a:hover {
   color: #207089;
 }
+a.focused {
+  color: #2098d1 !important;
+}
 
 
 
diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss
index d392b583f..a1bc52a79 100644
--- a/assets/styles/navigators/sidebar.scss
+++ b/assets/styles/navigators/sidebar.scss
@@ -4,7 +4,7 @@
   max-width: 20%;
   /* background-color: lightsalmon; */
   transition: all ease-out 0.5s;
-  
+
   .sidebar-holder {
     top: 2.5rem;
     position: sticky;
@@ -13,151 +13,123 @@
     overflow: auto;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: all ease-out 0.3s;
+
+    .sidebar {
+      background: #f9fafc;
+      height: 100vh;
+      transition: all ease-out 0.3s;
+
+      #search-box {
+        margin-left: 5%;
+        margin-right: 5%;
+        width: -webkit-fill-available;
+        height: 35px;
+        padding-left: 15px;
+        margin-top: 30px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        background-color: #e5e9f2;
+        transition: all 0.3s ease-out;
+        border: 1px solid #c0ccda;
+
+        &:focus {
+          border: 1pt solid #248aaa;
+          outline: none;
+        }
+      }
+
+      #list-heading {
+        padding-left: 0px !important;
+      }
+
+      .sidebar-tree {
+        padding-left: 1rem;
+        position: relative;
+        width: -moz-max-content;
+        width: max-content;
+
+        .tree {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+
+          li {
+            margin: 0;
+            padding: 0 1em;
+            line-height: 2em;
+            color: #3c4858;
+            position: relative;
+
+            i {
+              color: #3c4858;
+              font-size: 12px;
+              margin-right: 5px;
+            }
+          }
+          .shift-right {
+            margin-left: 5px;
+          }
+
+          .subtree {
+            padding-left: 0.7rem;
+
+            &:before {
+              content: '';
+              display: block;
+              width: 0;
+              position: absolute;
+              top: 2.5rem;
+              left: 1.5rem;
+              bottom: 0.9rem;
+              border-left: 1px solid;
+            }
+            li {
+              &:before {
+                content: '';
+                display: block;
+                width: 20px;
+                height: 0;
+                border-top: 1px solid;
+                margin-top: -1px;
+                position: absolute;
+                top: 18px;
+                left: -3px;
+              }
+              &:last-child:before {
+                background: #f9fafc;
+                height: auto;
+                top: 1.1rem;
+                bottom: 0;
+              }
+              ul {
+                position: relative;
+                padding-left: 0.5rem;
+                display: none;
+                list-style: none;
+
+                &.active {
+                  display: block;
+                }
+
+                &:before {
+                  content: '';
+                  display: block;
+                  width: 0;
+                  position: absolute;
+                  top: -10px;
+                  left: 0.3rem;
+                  bottom: 0.9rem;
+                  border-left: 1px solid;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
-  
-  .sidebar {
-    background: #f9fafc;
-    height: 100vh;
-    transition: all ease-out 0.3s;
-  }
-  
-  .sidebar-tree {
-    padding-left: 1rem;
-    position: relative;
-    width: -moz-max-content;
-    width: max-content;
-  }
-  
-  #search-box {
-    margin-left: 5%;
-    margin-right: 5%;
-    width: -webkit-fill-available;
-    height: 35px;
-    padding-left: 15px;
-    margin-top: 30px;
-    margin-bottom: 10px;
-    border-radius: 5px;
-    background-color: #e5e9f2;
-    transition: all 0.3s ease-out;
-    border: 1px solid #c0ccda;
-  }
-  
-  #search-box:focus {
-    border: 1pt solid #248aaa;
-    outline: none;
-  }
-  
-  #list-heading {
-    padding-left: 0px !important;
-  }
-  
-  .tree,
-  .tree ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  
-  .tree li {
-    margin: 0;
-    padding: 0 1em;
-    line-height: 2em;
-    color: #3c4858;
-    position: relative;
-  }
-  
-  .tree li a {
-    text-decoration: none;
-    color: #131313;
-    transition: all 0.3s ease-out;
-  }
-  
-  .tree li a.active {
-    display: inline;
-    color: #2098d1;
-  }
-  
-  .tree li a:hover {
-    margin-left: 3px;
-    color: #2098d1;
-    transition: all 0.3s ease-out;
-  }
-  
-  .tree i {
-    color: #3c4858;
-    font-size: 12px;
-    margin-right: 5px;
-  }
-  
-  .tree .shift-right {
-    margin-left: 5px;
-  }
-  
-  .tree .active,
-  .tree .active > ul {
-    display: block;
-  }
-  
-  .subtree {
-    padding-left: 0.7rem;
-  }
-  
-  .subtree:before {
-    content: "";
-    display: block;
-    width: 0;
-    position: absolute;
-    top: 2.5rem;
-    left: 1.5rem;
-    bottom: 0.9rem;
-    border-left: 1px solid;
-  }
-  
-  .subtree ul,
-  ul > ul {
-    position: relative;
-    padding-left: 0.5rem;
-    display: none;
-  }
-  
-  .subtree ul:before {
-    content: "";
-    display: block;
-    width: 0;
-    position: absolute;
-    top: -10px;
-    left: 0.3rem;
-    bottom: 0.9rem;
-    border-left: 1px solid;
-  }
-  
-  .subtree li:before {
-    content: "";
-    display: block;
-    width: 20px;
-    height: 0;
-    border-top: 1px solid;
-    margin-top: -1px;
-    position: absolute;
-    top: 18px;
-    left: -3px;
-  }
-  
-  .subtree li:last-child:before {
-    background: #f9fafc;
-    height: auto;
-    top: 1.1rem;
-    bottom: 0;
-  }
-  
-  a.focused {
-    color: #2098d1 !important;
-  }
-  
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
+
+  @include media('<=ultra-large') {
     flex: 15%;
     max-width: 15%;
 
@@ -165,22 +137,20 @@
       max-width: 100%;
     }
   }
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
+
+  @include media('<=extra-large') {
     .sidebar-holder {
       max-width: 20rem;
     }
   }
-  
-  @media (max-width: 1200px) {
+
+  @include media('<=very-large') {
     .sidebar-tree {
       margin-left: 1rem;
     }
   }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {   
+
+  @include media('<=large') {
     flex: 0%;
     max-width: 0%;
     min-height: 100vh;
@@ -192,23 +162,16 @@
       width: 100%;
       max-height: calc(100vh - 2.5rem);
     }
-  
-    &.hide {
+
+    &.expanded {
       flex: 30%;
       max-width: 30%;
       margin-right: 0.5rem;
       transition: all ease-out 0.3s;
     }
   }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
+
+  @include media('<=medium') {
     flex: 0%;
     max-width: 0%;
     min-height: 100vh;
@@ -219,35 +182,22 @@
       top: 2.5rem;
       width: 100%;
     }
-  
-    &.hide {
+
+    &.expanded {
       flex: 40%;
       max-width: 40%;
       margin-right: 0.5rem;
       transition: all ease-out 0.3s;
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     width: 100%;
     min-height: 0;
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
 
-    &.hide {
-      margin-top: 2rem;
-      position: relative;
-      height: -moz-fit-content;
-      height: fit-content;
-      flex: none;
-      max-height: 300vh;
-      max-width: 100%;
-      transition: all ease-out 0.5s;
-    }
-  
     .sidebar-holder {
       max-height: 0;
       height: -moz-fit-content;
@@ -255,45 +205,45 @@
       overflow: hidden;
       max-width: 100%;
       transition: all ease-out 0.5s;
+
+      .sidebar {
+        position: relative;
+        height: -moz-fit-content;
+        height: fit-content;
+        max-height: -moz-fit-content;
+        max-height: fit-content;
+        width: 100vw;
+        min-height: 0;
+        overflow: hidden;
+        transition: all ease-out 0.5s;
+
+        .sidebar-tree {
+          margin-left: 0rem;
+          max-height: 0;
+          transition: all 0.5s ease-out;
+        }
+      }
     }
-  
-    &.hide .sidebar-holder {
-      max-height: 200vh;
-      transition: all ease-out 0.5s;
-    }
-  
-    .sidebar {
+
+    &.expanded {
+      margin-top: 2rem;
       position: relative;
       height: -moz-fit-content;
       height: fit-content;
-      max-height: -moz-fit-content;
-      max-height: fit-content;
-      width: 100vw;
-      min-height: 0;
-      overflow: hidden;
+      flex: none;
+      max-height: 300vh;
+      max-width: 100%;
       transition: all ease-out 0.5s;
+
+      .sidebar-holder {
+        max-height: 200vh;
+        transition: all ease-out 0.5s;
+
+        .sidebar-tree {
+          max-height: 200vh;
+          transition: all 0.5s ease-out;
+        }
+      }
     }
-  
-    .sidebar-tree {
-      margin-left: 0rem;
-      max-height: 0;
-      transition: all 0.5s ease-out;
-    }
-    &.hide .sidebar-tree {
-      max-height: 200vh;
-      transition: all 0.5s ease-out;
-    }
-  }
-  
-  /* 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) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html
index 1319e66c6..bb2032eab 100644
--- a/layouts/partials/navigators/sidebar.html
+++ b/layouts/partials/navigators/sidebar.html
@@ -9,7 +9,7 @@
   {{ if .HasChildren }}
     <!-- Add current entry -->
     <li>
-      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}"> {{.Name}}</a>
+      <i class="fas {{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
         {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}
@@ -17,6 +17,6 @@
     </li>
   {{ else }}
     <!-- No sub-tree. So, only add current entry -->
-    <li><a class="{{$class}}" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li>
+    <li><a class="{{$class}} list-link" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li>
   {{ end }}
 {{ end }}

From cb0ae299849a1d40d42b47014bab37682abc1dc4 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Tue, 26 Sep 2023 03:58:32 +0600
Subject: [PATCH 12/17] Use unified navbar for all pages

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/scripts/application.js                 |   3 +
 assets/scripts/sections/navbar.js             |  20 +--
 assets/styles/layouts/404.scss                |   2 +-
 assets/styles/layouts/list.scss               |  11 +-
 assets/styles/layouts/notes.scss              | 120 +++++++--------
 assets/styles/navigators/navbar.scss          | 142 +++++++++---------
 assets/styles/navigators/sidebar.scss         |  16 +-
 layouts/404.html                              |   2 +-
 layouts/_default/list.html                    |   2 +-
 layouts/_default/search.html                  |   2 +-
 layouts/_default/single.html                  |   5 +-
 layouts/categories/list.html                  |   2 +-
 layouts/notes/list.html                       |   2 +-
 layouts/notes/single.html                     |   2 +-
 .../navigators/floating-lang-selector.html    |  25 ---
 .../partials/navigators/lang-selector-2.html  |  25 ---
 layouts/partials/navigators/navbar-2.html     |  63 --------
 layouts/partials/navigators/navbar.html       |  30 ++--
 layouts/partials/navigators/sidebar.html      |   6 +-
 layouts/partials/scripts.html                 |   2 +-
 layouts/tags/list.html                        |   2 +-
 package-lock.json                             |  46 ++++++
 package.hugo.json                             |   3 +-
 package.json                                  |   4 +
 24 files changed, 241 insertions(+), 296 deletions(-)
 delete mode 100644 layouts/partials/navigators/floating-lang-selector.html
 delete mode 100644 layouts/partials/navigators/lang-selector-2.html
 delete mode 100644 layouts/partials/navigators/navbar-2.html

diff --git a/assets/scripts/application.js b/assets/scripts/application.js
index b6ade04dd..2a1bbab94 100644
--- a/assets/scripts/application.js
+++ b/assets/scripts/application.js
@@ -1,8 +1,11 @@
 import 'popper.js'
 import 'bootstrap'
 import '@fortawesome/fontawesome-free/js/all'
+import feather from 'feather-icons'
 
 import './core'
 import './features'
 import './sections'
 import './pages'
+
+feather.replace();
diff --git a/assets/scripts/sections/navbar.js b/assets/scripts/sections/navbar.js
index 0bf75bffe..9db8578df 100644
--- a/assets/scripts/sections/navbar.js
+++ b/assets/scripts/sections/navbar.js
@@ -4,8 +4,8 @@ const updateNavBar = () => {
   const themeIcon = document.getElementById('navbar-theme-icon-svg')
 
   if (window.scrollY > 40) {
-    topNavbar?.classList.remove('initial-navbar')
-    topNavbar?.classList.add('final-navbar', 'shadow')
+    topNavbar?.classList.remove('transparent-navbar')
+    topNavbar?.classList.add('shadow')
 
     navbarToggler?.classList.remove('navbar-dark')
     navbarToggler?.classList.add('navbar-light')
@@ -20,8 +20,8 @@ const updateNavBar = () => {
       document.getElementById('logo')?.setAttribute('src', logoURL)
     }
   } else {
-    topNavbar?.classList.remove('final-navbar', 'shadow')
-    topNavbar?.classList.add('initial-navbar')
+    topNavbar?.classList.remove('shadow')
+    topNavbar?.classList.add('transparent-navbar')
 
     navbarToggler?.classList.remove('navbar-light')
     navbarToggler?.classList.add('navbar-dark')
@@ -43,18 +43,20 @@ document.addEventListener('DOMContentLoaded', function () {
   // ==================================================
   // When the user scrolls down 80px from the top of the document,
   // resize the navbar's padding and the logo's font size
-  document.addEventListener('scroll', updateNavBar)
+  const topNavbar = document.getElementById('top-navbar')
+  if (topNavbar?.classList.contains('homepage')) {
+    document.addEventListener('scroll', updateNavBar)
+    updateNavBar()
+  }
 
   // Creates a click handler to collapse the navigation when
   // anchors in the mobile nav pop up are clicked
-  const navMain =document.getElementsByClassName('navbar-collapse')
-  Array.from(navMain).forEach(function(el) {
+  const navMain = document.getElementsByClassName('navbar-collapse')
+  Array.from(navMain).forEach(function (el) {
     el.addEventListener('click', function (e) {
       if (e.target.tagName === 'A') {
         el.classList.add('collapse')
       }
     })
   })
-
-  updateNavBar()
 })
diff --git a/assets/styles/layouts/404.scss b/assets/styles/layouts/404.scss
index 458b2dc09..e4b12650c 100644
--- a/assets/styles/layouts/404.scss
+++ b/assets/styles/layouts/404.scss
@@ -1,5 +1,5 @@
 body.kind-404 {
-  .navbar-toggler {
+  #sidebar-toggler {
     display: none;
   }
   
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index 4e3b18e1b..cd368d921 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -110,10 +110,6 @@ body.kind-page {
       display: block;
     }
 
-    #toc-toggler {
-      visibility: hidden;
-    }
-
     .navbar-collapse.lang-selector {
       display: block !important;
       position: absolute;
@@ -164,7 +160,6 @@ body.kind-page {
       margin-top: 0.5rem;
       transition: all ease-out 0.3s;
     }
-
   }
   @include media('<medium') {
     .post-card {
@@ -173,17 +168,17 @@ body.kind-page {
       width: 98%;
     }
   }
-  @include media('>=medium','<large') {
+  @include media('>=medium', '<large') {
     .post-card {
       width: calc(100% / 2);
     }
   }
-  @include media('>=large','<very-large') {
+  @include media('>=large', '<very-large') {
     .post-card {
       width: calc(100% / 3);
     }
   }
-  @include media('>=very-large','<extra-large') {
+  @include media('>=very-large', '<extra-large') {
     .post-card {
       width: calc(100% / 4);
     }
diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss
index ced608056..c0ee6b320 100644
--- a/assets/styles/layouts/notes.scss
+++ b/assets/styles/layouts/notes.scss
@@ -16,63 +16,63 @@ body.type-notes {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
-  
+
   .content {
     padding: 0;
     position: relative;
     padding-top: 2rem;
     min-height: 130vh;
   }
-  
-  .note-card-holder{
+
+  .note-card-holder {
     padding-top: 2rem;
     display: grid;
     grid-gap: 0.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
+    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{
+
+  .note-card .card {
     margin: 0.5rem;
   }
-  
-  .note-title{
+
+  .note-title {
     padding-left: 1rem;
     color: #248aaa;
   }
-  
-  .note-title span{
+
+  .note-title span {
     background: #e5e9f2;
     padding-right: 5px;
   }
-  
-  .note-title:before{
-    content:'';
-    display:inline-block;
-    width:98%;
-    height:100%;
-    margin-bottom:-26px;
+
+  .note-title:before {
+    content: '';
+    display: inline-block;
+    width: 98%;
+    height: 100%;
+    margin-bottom: -26px;
     border-bottom: 1px solid #248aaa;
   }
-  
-  .note-card .card-body{
+
+  .note-card .card-body {
     padding: 1rem;
   }
-  
+
   .note-card pre {
     margin: 0;
     border-radius: 3px;
   }
-  
+
   /* .small-note{
     max-width: 15rem;
   }
@@ -86,14 +86,13 @@ body.type-notes {
   }
   
   .huge-note{} */
-  
-  .note-badge{
+
+  .note-badge {
     font-size: 10pt;
   }
-  
-  
+
   /* ============= Device specific fixes ======= */
-  
+
   /* Large screens such as TV */
   @media only screen and (min-width: 1824px) {
     .content-section {
@@ -103,20 +102,18 @@ body.type-notes {
       max-width: 85%;
     }
   }
-  
-  
+
   /* Extra large devices (large desktops, 1200px and up) */
-  
+
   @media (max-width: 1400px) {
     .note-card-holder {
       margin-left: 0px;
     }
   }
-  
+
   @media (max-width: 1200px) {
-  
   }
-  
+
   /* IPad Pro */
   @media (max-width: 1024px) {
     .wrapper {
@@ -130,12 +127,12 @@ body.type-notes {
       padding-bottom: 0.5rem;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide {
       max-width: 60%;
       transition: all ease-out 0.3s;
     }
-  
+
     .content {
       overflow: hidden;
     }
@@ -145,18 +142,14 @@ body.type-notes {
     .navbar-toggler {
       display: block;
     }
-  
-    #toc-toggler {
-      visibility: hidden;
-    }
-  
+
     .navbar-collapse.lang-selector {
       display: block !important;
       position: absolute;
       right: 0;
       top: 0.5rem;
     }
-  
+
     .note-card-holder {
       margin: 0;
       margin-top: 1.5rem;
@@ -165,37 +158,36 @@ body.type-notes {
       position: relative;
       transition: all ease-out 0.3s;
     }
-  
-    .content-section.hide .note-card-holder{
-      grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
+
+    .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) */
-  
+
   @media (max-width: 992px) {
     .note-card-holder .note-card {
       max-width: 100%;
       min-width: 50%;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide .note-card-holder .note-card {
       max-width: 100%;
       min-width: 100%;
       transition: all ease-out 0.3s;
     }
   }
-  
+
   /* Medium devices (tablets, 768px and up) */
-  
+
   @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;
@@ -203,33 +195,35 @@ body.type-notes {
       flex-flow: column;
       overflow: hidden;
     }
-    .content-section, .content-section.hide {
+    .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 {
+
+    .note-card-holder .note-card,
+    .content-section.hide .note-card-holder .note-card {
       margin-left: 1%;
       margin-right: 1%;
       max-width: 98%;
@@ -237,16 +231,16 @@ body.type-notes {
       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) {
-  }  
+  }
 }
diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss
index cb78095c5..8a7efb8dc 100644
--- a/assets/styles/navigators/navbar.scss
+++ b/assets/styles/navigators/navbar.scss
@@ -1,10 +1,4 @@
-@mixin initial-nav-item-hover-effect() {
-  color: #f9fafc;
-  transition: all 0.3s ease-out;
-  transform: translateY(-2px);
-}
-
-@mixin final-nav-item-hover-effect() {
+@mixin nav-item-hover-effect() {
   color: #2098d1 !important;
   transition: all 0.3s ease-out;
   border-bottom: 2px solid #2098d1 !important;
@@ -12,32 +6,6 @@
   background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%);
 }
 
-@mixin navbar-dropdown() {
-  .dropdown-menu {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    border: 1px solid #fff;
-    max-height: 0vh;
-    overflow: hidden;
-    display: block;
-    visibility: hidden;
-    transition: all 0.3s ease-out;
-
-    &.show {
-      max-height: 100vh;
-      visibility: visible;
-      transition: all 0.3s ease-in;
-
-      a {
-        color: #1c2d41 !important;
-
-        &:hover {
-          @include final-nav-item-hover-effect();
-        }
-      }
-    }
-  }
-}
-
 .top-navbar {
   position: fixed;
   left: 0;
@@ -50,54 +18,63 @@
   padding-top: 0.4rem;
   text-align: center;
 
-  &.initial-navbar {
-    background-color: transparent;
-    .navbar-brand {
-      color: #c0ccda;
-      font-weight: 600;
-    }
-    li {
-      a {
-        color: #c0ccda;
-        &:hover {
-          @include initial-nav-item-hover-effect();
-        }
+  background-color: #f9fafc;
+  color: #1c2d41;
+  transition: all 0.3s ease-out;
+
+  .navbar-brand {
+    color: #1c2d41;
+    font-weight: 600;
+  }
+
+  .sidebar-icon {
+    width: 32px;
+    height: 32px;
+    filter: invert(0.5);
+  }
+
+  li {
+    a {
+      color: #1c2d41;
+      font-weight: 500;
+      transition: all 0.3s ease-out;
+      border-bottom: 2px solid transparent;
+      &:hover {
+        @include nav-item-hover-effect();
       }
     }
-    .navbar-nav .active {
-      @include initial-nav-item-hover-effect();
-    }
-    @include navbar-dropdown();
   }
 
-  &.final-navbar {
-    background-color: #f9fafc;
-    color: #1c2d41;
+  .navbar-nav .active {
+    @include nav-item-hover-effect();
+  }
+
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .dropdown-menu {
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    border: 1px solid #fff;
+    max-height: 0vh;
+    overflow: hidden;
+    display: block;
+    visibility: hidden;
     transition: all 0.3s ease-out;
 
-    .navbar-brand {
-      color: #1c2d41;
-      font-weight: 600;
-    }
-    li {
+    &.show {
+      max-height: 100vh;
+      visibility: visible;
+      transition: all 0.3s ease-in;
+
       a {
-        color: #1c2d41;
-        font-weight: 500;
-        transition: all 0.3s ease-out;
-        border-bottom: 2px solid#F9FAFC;
+        color: #1c2d41 !important;
+
         &:hover {
-          @include final-nav-item-hover-effect();
+          @include nav-item-hover-effect();
         }
       }
     }
-    .navbar-nav .active {
-      @include final-nav-item-hover-effect();
-    }
-
-    #top-navbar-divider {
-      background: rgba(0, 0, 0, 0.6);
-    }
-    @include navbar-dropdown();
   }
 
   .navbar-collapse {
@@ -125,6 +102,22 @@
     }
   }
 
+  &.transparent-navbar {
+    background-color: transparent;
+    .navbar-brand {
+      color: #c0ccda;
+      font-weight: 600;
+    }
+    li {
+      a {
+        color: #c0ccda;
+      }
+    }
+    .feather-menu {
+      stroke: #8392a5;
+    }
+  }
+
   #top-navbar-divider {
     margin-top: 10px;
     background: rgba(192, 204, 218, 0.8);
@@ -148,7 +141,7 @@
       max-width: 100%;
     }
 
-    &.initial-navbar {
+    &.transparent-navbar {
       .navbar-nav .active,
       li a:hover {
         color: #2098d1;
@@ -194,3 +187,10 @@
     }
   }
 }
+
+.feather-sidebar,
+.feather-menu {
+  width: 1.5rem;
+  height: 1.5rem;
+  stroke: #3c4858;
+}
diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss
index a1bc52a79..d175dcf76 100644
--- a/assets/styles/navigators/sidebar.scss
+++ b/assets/styles/navigators/sidebar.scss
@@ -87,13 +87,13 @@
               &:before {
                 content: '';
                 display: block;
-                width: 20px;
+                width: 18px;
                 height: 0;
                 border-top: 1px solid;
                 margin-top: -1px;
                 position: absolute;
                 top: 18px;
-                left: -3px;
+                left: -2px;
               }
               &:last-child:before {
                 background: #f9fafc;
@@ -116,9 +116,9 @@
                   display: block;
                   width: 0;
                   position: absolute;
-                  top: -10px;
-                  left: 0.3rem;
-                  bottom: 0.9rem;
+                  top: -8px;
+                  left: 6px;
+                  bottom: 0.8rem;
                   border-left: 1px solid;
                 }
               }
@@ -247,3 +247,9 @@
     }
   }
 }
+
+.feather-plus-circle,
+.feather-minus-circle {
+  width: 1rem;
+  height: 1rem;
+}
diff --git a/layouts/404.html b/layouts/404.html
index c24131130..bf57e5259 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" (dict "baseURL" site.BaseURL "title" site.Title "hasToggleButton" false) }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "content" }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index fd126ef1f..6bc2de4d6 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index fe02dd296..75aad9829 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 17ebd643f..c25decc8c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
@@ -155,9 +155,6 @@ <h1>{{ .Page.Title }}</h1>
   </div>
   <!--scroll back to top-->
   <a id="scroll-to-top" class="btn"><i class="fas fa-chevron-circle-up"></i></a>
-  {{ if .IsTranslated }}
-    {{ partial "navigators/floating-lang-selector.html" . }}
-  {{ end }}
 </section>
 {{ end }}
 
diff --git a/layouts/categories/list.html b/layouts/categories/list.html
index 2e7c84adf..48a48a4c9 100644
--- a/layouts/categories/list.html
+++ b/layouts/categories/list.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/layouts/notes/list.html b/layouts/notes/list.html
index f5fba56e0..4dea0f0f9 100644
--- a/layouts/notes/list.html
+++ b/layouts/notes/list.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/layouts/notes/single.html b/layouts/notes/single.html
index b1ccb5136..c4a0bc525 100644
--- a/layouts/notes/single.html
+++ b/layouts/notes/single.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/layouts/partials/navigators/floating-lang-selector.html b/layouts/partials/navigators/floating-lang-selector.html
deleted file mode 100644
index 8ad016e7e..000000000
--- a/layouts/partials/navigators/floating-lang-selector.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{{ $pageURL:= .RelPermalink }}
-{{ if site.IsMultiLingual }}
-    {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
-{{ end }}
-
-<div class="dropdown languageSelector">
-    <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {{ if ne site.Params.features.flags.enable false }}
-            {{ $countryCode := partial "helpers/country-code.html" . }}
-            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-        {{ end }}
-        {{ site.Language.LanguageName }}
-    </a>
-    <div class="dropdown-menu" aria-labelledby="languageSelector">
-        {{ range .Translations }}
-        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
-            {{ if ne site.Params.features.flags.enable false }}
-                {{ $countryCode := partial "helpers/country-code.html" . }}
-                <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-            {{ end }}
-            {{ .Language.LanguageName }}
-        </a>
-        {{ end }}
-    </div>
-</div>
diff --git a/layouts/partials/navigators/lang-selector-2.html b/layouts/partials/navigators/lang-selector-2.html
deleted file mode 100644
index f388d69aa..000000000
--- a/layouts/partials/navigators/lang-selector-2.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{{ $pageURL:= .RelPermalink }}
-{{ if site.IsMultiLingual }}
-  {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
-{{ end }}
-
-<li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      {{ if ne site.Params.features.flags.enable false }}
-        {{ $countryCode := partial "helpers/country-code.html" . }}
-        <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-      {{ end }}
-      {{ site.Language.LanguageName }}
-    </a>
-    <div class="dropdown-menu" aria-labelledby="languageSelector">
-      {{ range .Translations }}
-        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
-          {{ if ne site.Params.features.flags.enable false }}
-            {{ $countryCode := partial "helpers/country-code.html" . }}
-            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-          {{ end }}
-          {{ .Language.LanguageName }}
-        </a>
-      {{ end }}
-    </div>
-</li>
diff --git a/layouts/partials/navigators/navbar-2.html b/layouts/partials/navigators/navbar-2.html
deleted file mode 100644
index 8780ec643..000000000
--- a/layouts/partials/navigators/navbar-2.html
+++ /dev/null
@@ -1,63 +0,0 @@
-{{/* by default, don't use any logo */}}
-{{ $mainLogo := "" }}
-{{ $invertedLogo := "" }}
-
-{{/*  if custom logo has been provided, use them  */}}
-{{ if site.Params.logo.main }}
-  {{ $mainLogo = site.Params.logo.main }}
-{{ end }}
-{{ if site.Params.logo.inverted }}
-  {{ $invertedLogo = site.Params.logo.inverted }}
-{{ end }}
-
-{{/* resize the logos. don't resize svg because it is not supported */}}
-{{ if $mainLogo }}
-  {{ $mainLogo = resources.Get $mainLogo}}
-  {{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
-    {{ $mainLogo = $mainLogo.Resize "42x" }}
-  {{ end }}
-  {{ $mainLogo = $mainLogo.RelPermalink}}
-{{ end }}
-
-{{ if $invertedLogo }}
-  {{ $invertedLogo = resources.Get $invertedLogo}}
-  {{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
-    {{ $invertedLogo = $invertedLogo.Resize "42x" }}
-  {{ end }}
-  {{ $invertedLogo = $invertedLogo.RelPermalink}}
-{{ end }}
-
-<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
-  <div class="container">
-      <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      {{ if $mainLogo }}
-        <img src="{{ $mainLogo  }}" alt="Logo">
-      {{ end }}
-      {{- site.Title -}}
-    </a>
-    <button class="navbar-toggler navbar-light" id="toc-toggler" type="button">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse lang-selector" id="top-nav-items">
-      <ul class="navbar-nav ml-auto">
-      {{ if .IsTranslated }}
-        {{ partial "navigators/lang-selector-2.html" . }}
-      {{ end }}
-      {{ if site.Params.features.darkMode.enable }}
-        {{ partial "navigators/theme-selector.html" . }}
-      {{ end }}
-      </ul>
-    </div>
-  </div>
-  <!-- Store the logo information in a hidden img for the JS -->
-  {{ if $mainLogo }}
-    <img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo">
-  {{ end }}
-  {{ if $invertedLogo }}
-    <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
-  {{ end }}
-</nav>
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index b9fdd58ba..9071004f9 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -37,6 +37,11 @@
   {{ $invertedLogo = $invertedLogo.RelPermalink}}
 {{ end }}
 
+{{ $logo := $mainLogo }}
+{{ if .IsHome }}
+  {{ $logo = $invertedLogo }}
+{{ end }}
+
 {{ $customMenus := site.Params.customMenus }}
 {{ if (index site.Data site.Language.Lang).site.customMenus }}
   {{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
@@ -47,29 +52,34 @@
   {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
-<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
+<nav class="navbar navbar-expand-xl top-navbar shadow {{ if .IsHome}}transparent-navbar homepage{{end}}" id="top-navbar">
   <div class="container">
+    {{ if not .IsHome }}
+    <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
+      <i data-feather="sidebar"></i>
+    </button>
+    {{ end }}
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      {{ if $invertedLogo }}
-        <img src="{{ $invertedLogo }}" id="logo" alt="Logo">
+      {{ if $logo }}
+        <img src="{{ $logo }}" id="logo" alt="Logo">
       {{ end }}
       {{- site.Title -}}
     </a>
     <button
-      class="navbar-toggler navbar-dark"
+      class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}"
       id="navbar-toggler"
       type="button"
       data-toggle="collapse"
       data-target="#top-nav-items"
       aria-label="menu"
     >
-      <span class="navbar-toggler-icon"></span>
+      <i data-feather="menu"></i>
     </button>
 
     <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link" href="#home">{{ i18n "home" }}</a>
+          <a class="nav-link" href="{{ site.BaseURL | relLangURL }}#home">{{ i18n "home" }}</a>
         </li>
         {{ if $sections }}
           {{ $sectionCount := 1 }}
@@ -78,7 +88,7 @@
               {{ $sectionCount  = add $sectionCount 1}}
               {{ if le $sectionCount $maxVisibleSections }}
                 <li class="nav-item">
-                  <a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
+                  <a class="nav-link" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                 </li>
               {{ end }}
             {{ end }}
@@ -92,7 +102,7 @@
                   {{ if and (.section.enable) (.section.showOnNavbar) }}
                     {{ $sectionCount  = add $sectionCount 1}}
                     {{ if gt $sectionCount $maxVisibleSections }}
-                      <a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
+                      <a class="dropdown-item" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                     {{ end }}
                   {{ end }}
                 {{- end }}
@@ -106,12 +116,12 @@
         {{ end }}
         {{ if $blogEnabled }}
           <li class="nav-item">
-            <a class="nav-link" id="blog-link" href="{{ "/posts/" | relLangURL }}">{{ i18n "posts" }}</a>
+            <a class="nav-link" id="blog-link" href="{{ path.Join (site.BaseURL | relLangURL) "posts" }}">{{ i18n "posts" }}</a>
           </li>
         {{ end }}
         {{ if $notesEnabled }}
           <li class="nav-item">
-            <a class="nav-link" id="note-link" href="{{ "/notes/" | relLangURL }}">{{ i18n "notes" }}</a>
+            <a class="nav-link" id="note-link" href="{{ path.Join (site.BaseURL | relLangURL) "notes" }}">{{ i18n "notes" }}</a>
           </li>
         {{ end }}
         {{ range $customMenus }}
diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html
index bb2032eab..2e90d1a7f 100644
--- a/layouts/partials/navigators/sidebar.html
+++ b/layouts/partials/navigators/sidebar.html
@@ -1,15 +1,15 @@
 {{ range .menuItems }}
   {{ $class:= "" }}
-  {{ $icon:= "fa-plus-circle" }}
+  {{ $icon:= "plus-circle" }}
   <!-- If the current menu is the selected menu or it contain the selected menu, set expand icon and set "active" class -->
   {{ if or ($.ctx.HasMenuCurrent $.menuName .)  ($.ctx.IsMenuCurrent $.menuName .)}}
-    {{ $icon = "fa-minus-circle"}}
+    {{ $icon = "minus-circle"}}
     {{ $class = "active" }}
   {{end}}
   {{ if .HasChildren }}
     <!-- Add current entry -->
     <li>
-      <i class="fas {{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
+      <i data-feather="{{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
         {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index ea85579d6..84e93c857 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1 +1 @@
-{{ partial "helpers/script-bundle.html" }}
+{{ partial "helpers/script-bundle.html" }}
\ No newline at end of file
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
index 50fb7c19a..4ff7fd7ab 100644
--- a/layouts/tags/list.html
+++ b/layouts/tags/list.html
@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
diff --git a/package-lock.json b/package-lock.json
index 2788895d2..3cf02d9db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,11 +21,13 @@
         "eslint-plugin-n": "^15.6.0",
         "eslint-plugin-no-jquery": "^2.7.0",
         "eslint-plugin-promise": "^6.1.1",
+        "feather-icons": "^4.29.1",
         "filterizr": "^2.2.4",
         "flag-icon-css": "^4.1.7",
         "fuse.js": "^6.6.2",
         "highlight.js": "^11.6.0",
         "imagesloaded": "^5.0.0",
+        "include-media": "^1.4.10",
         "ityped": "^1.0.3",
         "katex": "^0.16.3",
         "mark.js": "^8.11.1",
@@ -504,6 +506,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -1677,6 +1685,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/feather-icons": {
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.1.tgz",
+      "integrity": "sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==",
+      "dev": true,
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2202,6 +2220,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/include-media": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.10.tgz",
+      "integrity": "sha512-TymQzKF7oWHbItEcEHOCponZ90lRr1I9QbYeD+qCxXy4Z0/pSpS4Ocz2bq3FMOERlXXrY9Sawsh9GjiObVQA6A==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -4134,6 +4158,12 @@
         "readdirp": "~3.6.0"
       }
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -5020,6 +5050,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "feather-icons": {
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.1.tgz",
+      "integrity": "sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5399,6 +5439,12 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
+    "include-media": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.10.tgz",
+      "integrity": "sha512-TymQzKF7oWHbItEcEHOCponZ90lRr1I9QbYeD+qCxXy4Z0/pSpS4Ocz2bq3FMOERlXXrY9Sawsh9GjiObVQA6A==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
diff --git a/package.hugo.json b/package.hugo.json
index 3ae562b4e..cfe873915 100644
--- a/package.hugo.json
+++ b/package.hugo.json
@@ -44,6 +44,7 @@
     "mermaid": "^9.2.1",
     "plyr": "^3.7.2",
     "popper.js": "^1.16.1",
-    "include-media": "^1.4.10"
+    "include-media": "^1.4.10",
+    "feather-icons": "^4.29.1"
   }
 }
diff --git a/package.json b/package.json
index 01cad5869..219bc35d6 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,13 @@
       "eslint-plugin-n": "project",
       "eslint-plugin-no-jquery": "project",
       "eslint-plugin-promise": "project",
+      "feather-icons": "project",
       "filterizr": "project",
       "flag-icon-css": "project",
       "fuse.js": "project",
       "highlight.js": "project",
       "imagesloaded": "project",
+      "include-media": "project",
       "ityped": "project",
       "katex": "project",
       "mark.js": "project",
@@ -48,11 +50,13 @@
     "eslint-plugin-n": "^15.6.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-promise": "^6.1.1",
+    "feather-icons": "^4.29.1",
     "filterizr": "^2.2.4",
     "flag-icon-css": "^4.1.7",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.6.0",
     "imagesloaded": "^5.0.0",
+    "include-media": "^1.4.10",
     "ityped": "^1.0.3",
     "katex": "^0.16.3",
     "mark.js": "^8.11.1",

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 13/17] 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 e4b12650c..d496fdb06 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;
+
+  @include media('<=small') {
+    .notFound {
+      img {
+        height: 250px;
+      }
+      .message {
+        top: 20rem;
+        left: 2rem;
+      }
     }
-  
-    .notFound .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) {
-  }  
 }

From 99752a787ac1a2f6f332203d14f39e5c226a5d2b Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Wed, 27 Sep 2023 00:03:46 +0600
Subject: [PATCH 14/17] Refactor list page css

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/layouts/list.scss | 269 +++++++++++++++-----------------
 1 file changed, 126 insertions(+), 143 deletions(-)

diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index cd368d921..a46325af3 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -9,183 +9,166 @@ body.kind-page {
     padding: 0;
     margin: 0;
     width: 100%;
-  }
-
-  .content-section {
-    flex: 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;
-  }
-
-  .post-card-holder {
-    margin-top: 32px;
-    margin-left: auto;
-    padding: 0;
-    display: flex;
-    flex-flow: wrap;
-  }
-
-  .paginator {
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: auto;
-  }
 
-  .paginator .page-item > a {
-    color: #248aaa;
-  }
-
-  .paginator .page-item.active > a {
-    background-color: #248aaa;
-    color: #f9fafc;
-  }
-
-  .navbar-toggler {
-    display: none;
-  }
-
-  .pagination {
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  /* ============= Device specific fixes ======= */
-
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
     .content-section {
-      padding-left: 1rem;
-      padding-right: 1rem;
-      flex: 85%;
-      max-width: 85%;
-    }
-  }
-
-  /* Extra large devices (large desktops, 1200px and up) */
-
-  @media (max-width: 1400px) {
-    .post-card-holder {
-      margin-left: 0px;
-    }
-  }
-
-  @media (max-width: 1200px) {
-  }
-
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
-    .content-section {
-      padding: 0;
-      flex: 60%;
+      flex: 80%;
       order: 2;
-      padding-bottom: 0.5rem;
-    }
-
-    .content {
-      overflow: hidden;
-    }
-    .container {
-      max-width: 100%;
-    }
-    .navbar-toggler {
-      display: block;
-    }
-
-    .navbar-collapse.lang-selector {
-      display: block !important;
-      position: absolute;
-      right: 0;
-      top: 0.5rem;
-    }
-
-    .post-card-holder {
-      margin: 0;
-      margin-top: 1.5rem;
+      /* background-color: lightseagreen; */
+      padding: 0;
+      position: relative;
       padding-left: 0.5rem;
       padding-right: 0.5rem;
-      position: relative;
-      transition: all ease-out 0.3s;
+
+      .content {
+        padding: 0;
+        position: relative;
+        padding-top: 2rem;
+        min-height: 130vh;
+
+        .post-card-holder {
+          margin-top: 32px;
+          margin-left: auto;
+          padding: 0;
+          display: flex;
+          flex-flow: wrap;
+        }
+
+        .paginator {
+          width: -moz-fit-content;
+          width: fit-content;
+          margin: auto;
+
+          .pagination {
+            margin-left: auto;
+            margin-right: auto;
+            margin-top: 0.5rem;
+            margin-bottom: 0.5rem;
+            width: -moz-fit-content;
+            width: fit-content;
+          }
+
+          .page-item {
+            & > a {
+              color: #248aaa;
+            }
+
+            &.active > a {
+              background-color: #248aaa;
+              color: #f9fafc;
+            }
+          }
+        }
+      }
     }
   }
 
-  /* Small devices (landscape phones, 576px and up) */
-
-  @media only screen and (max-width: 576px) {
+  @include media('<medium') {
+    .post-card {
+      margin-left: 1%;
+      margin-right: 1%;
+      width: 98%;
+    }
     .wrapper {
       padding-left: 0px;
       padding-right: 0px;
       flex-flow: column;
       overflow: hidden;
-    }
-    .content-section {
-      flex: 100%;
-      max-width: 100%;
-      padding-left: 0;
-      width: 100%;
-    }
 
-    .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 .post-card-holder {
-      margin-top: 0.5rem;
-      transition: all ease-out 0.3s;
-    }
-  }
-  @include media('<medium') {
-    .post-card {
-      margin-left: 1%;
-      margin-right: 1%;
-      width: 98%;
+      .content-section {
+        flex: 100%;
+        max-width: 100%;
+        padding-left: 0;
+        width: 100%;
+
+        .content {
+          width: 100%;
+          padding-left: 0;
+          padding-right: 0;
+          transition: all ease-out 0.3s;
+        }
+
+        &.hide {
+          .content {
+            margin-top: 0;
+            padding-top: 0;
+            transition: all ease-out 0.3s;
+          }
+          .post-card-holder {
+            margin-top: 0.5rem;
+            transition: all ease-out 0.3s;
+          }
+        }
+      }
     }
   }
+
   @include media('>=medium', '<large') {
     .post-card {
       width: calc(100% / 2);
     }
+    .content-section.hide {
+      .post-card {
+        width: 100%;
+      }
+    }
   }
+
   @include media('>=large', '<very-large') {
     .post-card {
       width: calc(100% / 3);
     }
+    .wrapper {
+      padding-left: 0px;
+      padding-right: 0px;
+
+      .content-section {
+        padding: 0;
+        flex: 60%;
+        order: 2;
+        padding-bottom: 0.5rem;
+
+        .content {
+          overflow: hidden;
+
+          .post-card-holder {
+            margin: 0;
+            margin-top: 1.5rem;
+            padding-left: 0.5rem;
+            padding-right: 0.5rem;
+            position: relative;
+            transition: all ease-out 0.3s;
+          }
+        }
+        .container {
+          max-width: 100%;
+        }
+        &.hide {
+          .post-card {
+            width: calc(100% / 2);
+          }
+        }
+      }
+    }
   }
+
   @include media('>=very-large', '<extra-large') {
     .post-card {
       width: calc(100% / 4);
     }
+    .post-card-holder {
+      margin-left: 0px;
+    }
   }
+
   @include media('>=extra-large') {
     .post-card {
       width: calc(100% / 5);
     }
+    .content-section {
+      padding-left: 1rem;
+      padding-right: 1rem;
+      flex: 85%;
+      max-width: 85%;
+    }
   }
 }

From dfeaea8b26ec2475316d9d157858b7016a19a236 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Wed, 27 Sep 2023 01:24:26 +0600
Subject: [PATCH 15/17] Fix notes page css

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/layouts/notes.scss      | 347 ++++++++++----------------
 assets/styles/navigators/sidebar.scss |   1 +
 2 files changed, 139 insertions(+), 209 deletions(-)

diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss
index c0ee6b320..29d22dce8 100644
--- a/assets/styles/layouts/notes.scss
+++ b/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;
-      padding-right: 1rem;
-      flex: 85%;
-      max-width: 85%;
-    }
-  }
-
-  /* Extra large devices (large desktops, 1200px and up) */
+      flex: 80%;
+      max-width: 80%;
+      order: 2;
+      /* background-color: lightseagreen; */
+      padding: 0;
+      position: relative;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
 
-  @media (max-width: 1400px) {
+      .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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include media('<=extra-large') {
     .note-card-holder {
-      margin-left: 0px;
+      .note-card {
+        flex: 30%;
+      }
     }
   }
 
-  @media (max-width: 1200px) {
-  }
-
-  /* IPad Pro */
-  @media (max-width: 1024px) {
+  @include media('<=large') {
     .wrapper {
       padding-left: 0px;
       padding-right: 0px;
-    }
-    .content-section {
-      padding: 0;
-      max-width: 100%;
-      order: 2;
-      padding-bottom: 0.5rem;
-      transition: all ease-out 0.3s;
-    }
-
-    .content-section.hide {
-      max-width: 60%;
-      transition: all ease-out 0.3s;
-    }
-
-    .content {
-      overflow: hidden;
-    }
-    .container {
-      max-width: 100%;
-    }
-    .navbar-toggler {
-      display: block;
-    }
-
-    .navbar-collapse.lang-selector {
-      display: block !important;
-      position: absolute;
-      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) */
-
-  @media (max-width: 992px) {
+      .content-section {
+        padding: 0;
+        max-width: 100%;
+        order: 2;
+        padding-bottom: 0.5rem;
+        transition: all ease-out 0.3s;
+
+        .content {
+          overflow: hidden;
+
+          .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;
+            .note-card {
+              flex: 50%;
+            }
+          }
+        }
+        .container {
+          max-width: 100%;
+        }
+
+        &.hide {
+          max-width: 60%;
+          transition: all ease-out 0.3s;
+        }
+      }
+    }
+  }
+
+  @include media('<=medium') {
     .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) */
-
-  @media only screen and (max-width: 768px) {
-  }
-
-  /* Small devices (landscape phones, 576px and up) */
-
-  @media only screen and (max-width: 576px) {
+  @include media('<=small') {
     .wrapper {
       padding-left: 0px;
       padding-right: 0px;
       flex-flow: column;
       overflow: hidden;
-    }
-    .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 {
+        .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.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) {
   }
 }
diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss
index d175dcf76..82e9fb177 100644
--- a/assets/styles/navigators/sidebar.scss
+++ b/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);
     }
 

From b34c6860be0131f9d1b83baaafcaa897b538cb28 Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Thu, 28 Sep 2023 00:57:09 +0600
Subject: [PATCH 16/17] Refactor single page css

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/components/buttons.scss         |  28 +-
 assets/styles/layouts/single.scss             | 754 +++++++-----------
 assets/styles/variables.scss                  |  29 +-
 layouts/_default/single.html                  |  24 +-
 .../navigators/next-prev-navigator.html       |   4 +-
 5 files changed, 362 insertions(+), 477 deletions(-)

diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
index 689e122e3..f80b3bf36 100644
--- a/assets/styles/components/buttons.scss
+++ b/assets/styles/components/buttons.scss
@@ -50,7 +50,6 @@
   color: #8392a5;
 }
 
-
 .tags {
   text-align: left;
 
@@ -66,3 +65,30 @@
     color: #f9fafc;
   }
 }
+
+.icon-button {
+  background-color: #3c4858;
+  color: #e5e9f2 !important;
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  border: none;
+
+  &:hover,
+  &:focus {
+    background-color: #248aaa !important;
+    transition: all 0.3s ease-out !important;
+  }
+}
+
+.filled-button {
+  color: #f9fafc !important;
+  background-color: #248aaa !important;
+  transition: all 0.3s ease-out;
+
+  &:hover,
+  &:active {
+    background-color: #0cafe1 !important;
+    transition: all 0.3 ease-out;
+  }
+}
diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss
index 2ece70b3d..faa00b987 100644
--- a/assets/styles/layouts/single.scss
+++ b/assets/styles/layouts/single.scss
@@ -2,10 +2,6 @@ body.kind-page {
   background-color: #e5e9f2;
   position: relative;
 
-  .read-area {
-    background-color: #f9fafc;
-  }
-  
   .wrapper {
     display: flex;
     padding: 0;
@@ -13,269 +9,186 @@ body.kind-page {
     width: 100%;
     justify-content: space-between;
     position: relative;
+
+    .content-section {
+      flex: 60%;
+      max-width: 60%;
+      order: 2;
+      padding: 0;
+      position: relative;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      .content {
+        background: #e5e9f2;
+        padding-top: 1.5rem;
+
+        .read-area {
+          background-color: #f9fafc;
+
+          .hero-area {
+            margin-top: 3rem;
+            width: 100%;
+            height: 400px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+          }
+
+          .page-content {
+            width: 100%;
+            position: relative;
+            top: -4.5rem;
+            padding: 15px;
+
+            .author-profile {
+              position: relative;
+              align-content: center;
+              text-align: center;
+
+              .author-name {
+                margin-top: 0px;
+              }
+
+              img {
+                height: 120px;
+                width: 120px;
+                -o-object-fit: cover;
+                object-fit: cover;
+                background-color: #f9fafc;
+                padding: 5px;
+              }
+              p {
+                color: #8392a5;
+              }
+            }
+
+            .title {
+              text-align: center;
+            }
+            .tags {
+              text-align: center;
+            }
+
+            .post-content {
+              padding: 15px;
+
+              h1,
+              h2 {
+                margin-top: 1.4rem;
+              }
+
+              h3,
+              h4,
+              h5,
+              h6 {
+                margin-top: 1.3rem;
+              }
+
+              blockquote {
+                border-left: 4px solid #248aaa;
+                background-color: #248baa15;
+                padding: 0.3rem;
+                padding-left: 1rem;
+
+                & > p {
+                  color: #3c4858;
+                  margin-top: 0.5rem;
+                  margin-bottom: 0.5rem;
+                }
+              }
+            }
+
+            .next-prev-navigator {
+              padding-left: 1rem !important;
+              padding-right: 1rem !important;
+
+              .next-article {
+                text-align: right;
+              }
+
+              .next-prev-text {
+                white-space: break-spaces;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .toc-section {
+      flex: 20%;
+      order: 3;
+      max-width: 20%;
+      transition: all ease-out 0.5s;
+
+      .toc-holder {
+        position: sticky;
+        top: 4.5rem;
+        padding-top: 1rem;
+        overflow-x: hidden;
+        overflow-y: auto;
+        background-color: #f9fafc;
+        margin-right: 0.5rem;
+        transition: all ease-out 0.3s;
+
+        .toc {
+          position: relative;
+          padding-top: 0px;
+          transition: all ease-out 0.3s;
+
+          nav {
+            padding-top: 0px;
+            margin-top: 0px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            transition: all ease-out 0.3s;
+
+            ul {
+              list-style: none;
+              padding-left: 0.5rem;
+              margin-bottom: 0rem;
+              width: 100%;
+            }
+
+            .nav-link {
+              padding: 0;
+              padding-left: 0.5rem;
+              transition: all ease-out 0.3s;
+              color: #1c2d41;
+
+              &:hover,
+              &:focus,
+              &.active {
+                padding-left: 1rem;
+                padding-right: 0.5rem;
+                background-color: #248aaa;
+                color: #f9f9f9;
+                transition: all ease-out 0.3s;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .disquss {
+      padding: 10px;
+    }
+
+    .share-buttons {
+      @include brand-background();
+      .btn {
+        border: none !important;
+      }
+    }
   }
-  
-  .content-section {
-    flex: 60%;
-    max-width: 60%;
-    order: 2;
-    /* background-color: lightseagreen; */
-    padding: 0;
-    position: relative;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  .content {
-    background: #e5e9f2;
-  }
-  .toc-section {
-    flex: 20%;
-    order: 3;
-    max-width: 20%;
-    /* background-color: lightpink; */
-    transition: all ease-out 0.5s;
-  }
-  
-  .toc-holder {
-    position: sticky;
-    top: 4.5rem;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: #f9fafc;
-    margin-right: 0.5rem;
-    /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
-    transition: all ease-out 0.3s;
-  }
-  
-  .toc {
-    position: relative;
-    padding-top: 0px;
-    transition: all ease-out 0.3s;
-  }
-  
-  .toc nav {
-    padding-top: 0px;
-    margin-top: 0px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    transition: all ease-out 0.3s;
-  }
-  
-  .toc ul {
-    list-style: none;
-    padding-left: 0.5rem;
-    margin-bottom: 0rem;
-    width: 100%;
-  }
-  
-  .toc .nav-link {
-    padding: 0;
-    padding-left: 0.5rem;
-    transition: all ease-out 0.3s;
-    color: #1c2d41;
-  }
-  
-  .toc .nav-link:hover,
-  .toc .nav-link:focus,
-  .toc .nav-link.active {
-    padding-left: 1rem;
-    padding-right: 0.5rem;
-    background-color: #248aaa;
-    color: #f9f9f9;
-    transition: all ease-out 0.3s;
-  }
-  
-  .hero-area {
-    margin-top: 3rem;
-    width: 100%;
-    height: 400px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-  
-  .page-content {
-    width: 100%;
-    position: relative;
-    top: -4.5rem;
-    padding: 15px;
-  }
-  
-  .author-profile {
-    position: relative;
-    align-content: center;
-    text-align: center;
-  }
-  
-  .author-name {
-    margin-top: 0px;
-  }
-  
-  .author-profile img {
-    height: 120px;
-    width: 120px;
-    -o-object-fit: cover;
-    object-fit: cover;
-    background-color: #f9fafc;
-    padding: 5px;
-  }
-  .author-profile p {
-    color: #8392a5;
-  }
-  
-  .title {
-    text-align: center;
-  }
-  
-  .post-content {
-    padding: 15px;
-  }
-  
-  .post-content h1,
-  h2 {
-    margin-top: 1.4rem;
-  }
-  
-  .post-content h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 1.3rem;
-  }
-  
-  .post-content blockquote {
-    border-left: 4px solid #248aaa;
-    background-color: #248baa15;
-    padding: 0.3rem;
-    padding-left: 1rem;
-  }
-  
-  .post-content blockquote > p {
-    color: #3c4858;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  .next-prev-navigator {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  
-  .next-prev-navigator a {
-    color: #2098d1;
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator a:hover {
-    color: #3c4858;
-    transition: all 0.3 ease-out;
-  }
-  
-  .next-prev-navigator .next-article {
-    text-align: right;
-  }
-  
-  .next-prev-navigator .next-article a {
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator .previous-article a {
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator .btn-outline-info {
-    color: #f9fafc !important;
-    border-color: #e5e9f2 !important;
-    background-color: #248aaa !important;
-    transition: all 0.3s ease-out;
-  }
-  
-  .next-prev-navigator .next-prev-text {
-    white-space: break-spaces;
-  }
-  
-  .next-prev-navigator .btn-outline-info:hover {
-    color: #3c4858 !important;
-    background-color: #e5e9f2 !important;
-    transition: all 0.3s ease-out;
-  }
-  
-  .disquss {
-    padding: 10px;
-  }
-  
-  .share-buttons .btn {
-    color: #e5e9f2 !important;
-    transition: all 0.3s ease-out !important;
-  }
-  
-  .share-buttons .btn:hover,
-  .share-buttons .btn:focus {
-    background-color: #248aaa !important;
-    border-color: #248aaa !important;
-    transition: all 0.3s ease-out !important;
-  }
-  
-  .share-buttons .facebook-btn {
-    background-color: #4267b2 !important;
-    border-color: #4267b2 !important;
-  }
-  
-  .share-buttons .twitter-btn {
-    background-color: #1da1f2 !important;
-    border-color: #1da1f2 !important;
-  }
-  
-  .share-buttons .reddit-btn {
-    background-color: #ff4500 !important;
-    border-color: #ff4500 !important;
-  }
-  
-  .share-buttons .tumblr-btn {
-    background-color: #34465d !important;
-    border-color: #34465d !important;
-  }
-  
-  .share-buttons .pocket-btn {
-    background-color: #ef4056 !important;
-    border-color: #ef4056 !important;
-  }
-  
-  .share-buttons .linkedin-btn {
-    background-color: #2867b2 !important;
-    border-color: #2867b2 !important;
-  }
-  
-  .share-buttons .diaspora-btn {
-    background-color: #3c4858 !important;
-    border-color: #3c4858 !important;
-  }
-  
-  .share-buttons .mastodon-btn {
-    background-color: #2791da !important;
-    border-color: #2791da !important;
-  }
-  
-  .share-buttons .whatsapp-btn {
-    background-color: #4ac959 !important;
-    border-color: #4ac959 !important;
-  }
-  
-  .share-buttons .email-btn {
-    background-color: #3c4858 !important;
-    border-color: #3c4858 !important;
-    transition: all 0.3s ease-out !important;
-  }
-  
+
   .btn-improve-page {
     text-align: right;
   }
-  
-  .languageSelector {
-    display: none;
-  }
-  
+
   #scroll-to-top {
     position: fixed;
     bottom: 0rem;
@@ -284,29 +197,22 @@ body.kind-page {
     font-size: 24pt;
     z-index: 900000;
     visibility: hidden;
-  }
-  
-  #scroll-to-top i {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    background-color: #f9f9f9;
-    border-radius: 50%;
-  }
-  
-  #scroll-to-top:hover {
-    color: #2098d1;
-  }
-  
-  #scroll-to-top.show {
-    visibility: visible;
-  }
-  .tags {
-    text-align: center;
+
+    &:hover {
+      color: #2098d1;
+    }
+    &.show {
+      visibility: visible;
+    }
+
+    i {
+      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+      background-color: #f9f9f9;
+      border-radius: 50%;
+    }
   }
 
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
+  @include media('<=ultra-large') {
     .content-section {
       flex: 65%;
       max-width: 65%;
@@ -315,191 +221,117 @@ body.kind-page {
       max-width: 100%;
     }
   }
-  
-  /* Extra large devices (large desktops, 1200px and up) */
-  
-  @media (max-width: 1400px) {
-  }
-  
-  @media (max-width: 1200px) {
-  }
-  
-  /* IPad Pro */
-  @media (max-width: 1024px) {
-    .wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-    }
-  
-    .content-section {
-      padding: 0;
-      flex: 60%;
-      max-width: 100%;
-      order: 2;
-      overflow: hidden;
-    }
-    .content {
-      overflow: hidden;
-    }
+
+  @include media('<=large') {
     .container {
       max-width: 100%;
     }
-  
-    .toc-section {
-      order: 3;
-      flex: 0%;
-      max-width: 0%;
-      transition: all ease-out 0.3s;
-    }
-    .toc-section.hide {
-      flex: 40%;
-      max-width: 40%;
-      margin-left: 0.5rem;
-      transition: all ease-out 0.3s;
-    }
-  
-    .toc-holder {
-      top: 3rem;
-      max-height: calc(100vh - 3rem);
-    }
-  
-    .navbar-toggler {
-      display: block;
-    }
-  
-    .navbar-collapse.lang-selector {
-      display: none;
-    }
-  
-    .languageSelector {
-      display: block;
-    }
-  
-    .hero-area {
-      height: 300px;
-      margin-top: 1rem;
-    }
-  
-    .page-content {
-      padding: 0px;
-    }
-  
-    .btn-improve-page {
-      margin-right: 1rem;
-    }
-  
-    #disqus_thread,
-    .dsq-brlink {
-      padding: 5px;
-    }
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-    #scroll-to-top {
-      right: 8rem;
+
+    .wrapper {
+      padding-left: 0px;
+      padding-right: 0px;
+
+      .content-section {
+        padding: 0;
+        flex: 60%;
+        max-width: 100%;
+        order: 2;
+        overflow: hidden;
+
+        .content {
+          overflow: hidden;
+
+          .read-area {
+            .hero-area {
+              height: 300px;
+              margin-top: 1rem;
+            }
+
+            .page-content {
+              padding: 0px;
+            }
+          }
+        }
+      }
+      .toc-section {
+        display: none;
+      }
+
+      .share-buttons {
+        max-width: 48%;
+      }
+
+      .btn-improve-page {
+        margin-right: 1rem;
+        max-width: 48%;
+      }
+
+      #disqus_thread,
+      .dsq-brlink {
+        padding: 5px;
+      }
     }
   }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     .wrapper {
       padding: 0px;
       display: flex;
       flex-direction: column;
+
+      .content-section {
+        padding: 0;
+        flex: 100%;
+        max-width: 100%;
+        order: 3;
+
+        .content {
+          .read-area {
+            .hero-area {
+              height: 200px;
+              margin-top: 1rem;
+            }
+
+            .page-content {
+              padding: 0px;
+              .next-prev-navigator {
+                .previous-article {
+                  text-align: center;
+                  margin: 5px;
+
+                  a {
+                    width: 100%;
+                  }
+                }
+                .next-article {
+                  text-align: center;
+                  margin: 5px;
+                  a {
+                    width: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .share-buttons {
+        max-width: 100%;
+      }
+
+      .btn-improve-page {
+        text-align: start;
+        max-width: 100%;
+      }
+
+      #scroll-to-top {
+        right: 0.5rem;
+      }
+
+      #disqus_thread,
+      .dsq-brlink {
+        padding: 5px;
+      }
     }
-  
-    .content-section {
-      padding: 0;
-      flex: 100%;
-      max-width: 100%;
-      order: 3;
-    }
-  
-    .toc-section {
-      order: 2;
-      width: 100%;
-      height: -moz-fit-content;
-      height: fit-content;
-      max-height: 0;
-      max-width: 100%;
-      transition: all ease-out 0.5s;
-    }
-  
-    .toc-section.hide {
-      margin-top: 2.5rem;
-      position: relative;
-      /* height: fit-content; */
-      flex: 100%;
-      height: -moz-fit-content;
-      height: fit-content;
-      max-height: 200vh;
-      max-width: 100%;
-      margin-left: 0;
-      padding-right: 0;
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-      transition: all ease-out 0.5s;
-    }
-  
-    .toc-holder {
-      max-height: 0;
-      margin-right: 0;
-      overflow: hidden;
-      transition: all ease-out 0.5s;
-    }
-    .toc-section.hide .toc-holder {
-      max-height: 200vh;
-      transition: all ease-out 0.5s;
-    }
-  
-    .navbar-toggler {
-      display: block;
-    }
-  
-    .hero-area {
-      height: 200px;
-      margin-top: 1rem;
-    }
-  
-    .page-content {
-      padding: 0px;
-    }
-  
-    .next-prev-navigator .previous-article {
-      text-align: center;
-      margin: 5px;
-    }
-    .next-prev-navigator .next-article {
-      text-align: center;
-      margin: 5px;
-    }
-    .previous-article a,
-    .next-article a {
-      width: 100%;
-    }
-  
-    #disqus_thread,
-    .dsq-brlink {
-      padding: 5px;
-    }
-  }
-  
-  /* 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) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index 8316c48ea..507a6f01f 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $breakpoints: (
   tiny: 320px,
   small: 640px,
@@ -8,10 +10,35 @@ $breakpoints: (
   ultra-large: 2560px,
 );
 
-@mixin section-title-adjustment(){
+$brand-colors: (
+  'facebook': #3b5998,
+  'twitter': #1da1f2,
+  'linkedin': #0077b5,
+  'reddit': #ff4500,
+  'tumblr': #35465c,
+  'pocket': #ef4056,
+  'diaspora': #1e1e1e,
+  'whatsapp': #25d366,
+);
+
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin section-title-adjustment() {
   h1 > span {
     margin-top: -55px; /* Size of fixed header */
     padding-bottom: 55px;
     display: block;
   }
 }
+
+@mixin brand-background() {
+  @each $brand, $color in $brand-colors {
+    .bg-#{$brand} {
+      background-color: $color;
+    }
+  }
+}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c25decc8c..761f66828 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -55,56 +55,56 @@ <h1>{{ .Page.Title }}</h1>
         <!-- Share or Contribute -->
         <div class="row pl-3 pr-3">
         <!--Social Media Share Buttons-->
-        <div class="col-md-6 share-buttons">
-        {{ if site.Params.features.blog.shareButtons }}
+          <div class="col-md-6 share-buttons">
+          {{ if site.Params.features.blog.shareButtons }}
             <strong>{{ i18n "share_on" }}:</strong>
             {{ if site.Params.features.blog.shareButtons.facebook }}
-            <a class="btn btn-sm facebook-btn" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
+            <a class="btn icon-button bg-facebook" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
               <i class="fab fa-facebook"></i>
             </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.twitter }}
-                <a class="btn btn-sm twitter-btn" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
+                <a class="btn icon-button bg-twitter" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
                   <i class="fab fa-twitter"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.reddit }}
-                <a  class="btn btn-sm reddit-btn" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                <a  class="btn icon-button bg-reddit" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                   <i class="fab fa-reddit"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.tumblr }}
-                <a class="btn btn-sm tumblr-btn" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
+                <a class="btn icon-button bg-tumblr" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
                   <i class="fab fa-tumblr"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.pocket }}
-                <a class="btn btn-sm pocket-btn" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                <a class="btn icon-button bg-pocket" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                   <i class="fab fa-get-pocket"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.linkedin }}
-                <a class="btn btn-sm linkedin-btn" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                <a class="btn icon-button bg-linkedin" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                   <i class="fab fa-linkedin"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.diaspora }}
-                <a class="btn btn-sm diaspora-btn" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
+                <a class="btn icon-button bg-diaspora" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
                   <i class="fab fa-diaspora"></i>
                 </a>
             {{ end }}
              {{ if site.Params.features.blog.shareButtons.mastodon }}
-                <a class="btn btn-sm mastodon-btn" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
+                <a class="btn icon-button bg-mastodon" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
                   <i class="fab fa-mastodon"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.whatsapp }}
-                 <a class="btn btn-sm whatsapp-btn" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
+                 <a class="btn icon-button bg-whatsapp" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
                   <i class="fab fa-whatsapp"></i>
                 </a>
             {{ end }}
             {{ if site.Params.features.blog.shareButtons.email }}
-                <a class="btn btn-sm email-btn" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
+                <a class="btn icon-button" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
                   <i class="fas fa-envelope-open-text"></i>
                 </a>
             {{ end }}
diff --git a/layouts/partials/navigators/next-prev-navigator.html b/layouts/partials/navigators/next-prev-navigator.html
index 378c97d48..45a8b7daa 100644
--- a/layouts/partials/navigators/next-prev-navigator.html
+++ b/layouts/partials/navigators/next-prev-navigator.html
@@ -22,7 +22,7 @@
 <div class="row next-prev-navigator">
   {{ if $prevPage }}
     <div class="col-md-6 previous-article">
-      <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn btn-outline-info">
+      <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn filled-button">
         <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
         <div class="next-prev-text">{{ $prevPage.Title }}</div>
       </a>
@@ -34,7 +34,7 @@
         {{ $columnWidth = "col-md-6" }}
       {{ end}}
       <div class="{{ $columnWidth }} next-article">
-        <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn btn-outline-info">
+        <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn filled-button">
           <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
           <div class="next-prev-text">{{ $nextPage.Title }}</div>
         </a>

From 6d5d1b98510660a082c239b98fbd966f94cb646b Mon Sep 17 00:00:00 2001
From: hossainemruz <hossainemruz@gmail.com>
Date: Fri, 29 Sep 2023 04:22:23 +0600
Subject: [PATCH 17/17] Introduce color variables

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 assets/styles/application.template.scss       |  15 +-
 assets/styles/components/buttons.scss         |  57 ++-
 assets/styles/components/cards.scss           |  17 +-
 assets/styles/components/images.scss          |  34 ++
 assets/styles/components/links.scss           |  63 +++-
 assets/styles/components/misc.scss            |  33 ++
 assets/styles/components/tables.scss          |  74 ++++
 assets/styles/components/texts.scss           |  62 ++++
 assets/styles/layouts/list.scss               |  14 +-
 assets/styles/layouts/main.scss               | 340 ++----------------
 assets/styles/layouts/notes.scss              |  26 +-
 assets/styles/layouts/single.scss             |  51 +--
 assets/styles/mixins.scss                     |  30 ++
 assets/styles/navigators/navbar.scss          | 114 +++---
 assets/styles/navigators/sidebar.scss         |  53 ++-
 assets/styles/sections/about.scss             | 308 +++++-----------
 assets/styles/sections/accomplishments.scss   |  10 +-
 assets/styles/sections/achievements.scss      |  28 +-
 assets/styles/sections/education.scss         |  29 +-
 assets/styles/sections/experiences.scss       |  12 +-
 assets/styles/sections/footer.scss            |  40 ++-
 assets/styles/sections/home.scss              |  85 ++---
 assets/styles/sections/projects.scss          |   4 +-
 assets/styles/sections/publications.scss      |  10 +-
 assets/styles/sections/recent-posts.scss      |   2 +-
 assets/styles/sections/skills.scss            |   4 +-
 assets/styles/variables.scss                  |  52 +--
 layouts/_default/baseof.html                  |   2 +-
 layouts/_default/single.html                  |   2 +-
 layouts/index.html                            |   8 +-
 .../partials/navigators/lang-selector.html    |   6 +-
 layouts/partials/navigators/navbar.html       |   2 +-
 layouts/partials/sections/education-alt.html  |   8 +-
 layouts/partials/sections/education.html      |   8 +-
 .../sections/experiences/single-position.html |   2 +-
 35 files changed, 696 insertions(+), 909 deletions(-)
 create mode 100644 assets/styles/components/images.scss
 create mode 100644 assets/styles/components/misc.scss
 create mode 100644 assets/styles/components/tables.scss
 create mode 100644 assets/styles/components/texts.scss
 create mode 100644 assets/styles/mixins.scss

diff --git a/assets/styles/application.template.scss b/assets/styles/application.template.scss
index ca89c3126..053a1b843 100644
--- a/assets/styles/application.template.scss
+++ b/assets/styles/application.template.scss
@@ -12,6 +12,16 @@
 @import '@fontsource/mulish/700';
 
 @import './variables';
+@import './mixins';
+
+// components
+@import './components/cards';
+@import './components/buttons';
+@import './components/links';
+@import './components/texts';
+@import './components/images';
+@import './components/tables';
+@import './components/misc';
 
 // layouts
 @import './layouts/main';
@@ -39,11 +49,6 @@
 @import './sections/footer';
 
 
-// components
-@import './components/cards';
-@import './components/buttons';
-@import './components/links';
-
 
 // override
 @import './override';
diff --git a/assets/styles/components/buttons.scss b/assets/styles/components/buttons.scss
index f80b3bf36..d87f102fd 100644
--- a/assets/styles/components/buttons.scss
+++ b/assets/styles/components/buttons.scss
@@ -1,45 +1,44 @@
 .btn-dark {
-  background-color: #3c4858 !important;
-  border-color: #3c4858 !important;
-  color: #e5e9f2 !important;
-  transition: all 0.3s ease-out !important;
+  background-color: $text-color !important;
+  border-color: $text-color !important;
+  color: $text-over-accent-color !important;
+  @include transition();
 
   &:hover,
   &:focus {
-    background-color: #248aaa !important;
-    border-color: #248aaa !important;
-    transition: all 0.3s ease-out !important;
+    background-color: $accent-color !important;
+    border-color: $accent-color !important;
+    @include transition();
   }
 }
 
 .btn-info {
-  background-color: #248aaa !important;
-  color: #e5e9f2 !important;
+  background-color: $accent-color !important;
+  color: $text-over-accent-color !important;
 
   &:hover,
   &:focus {
-    background-color: #2098d1 !important;
-    color: #e5e9f2 !important;
+    background-color: $hover-over-accent-color !important;
   }
 }
 
 .btn-outline-info {
-  color: #2098d1 !important;
-  border-color: #2098d1 !important;
+  color: $accent-color !important;
+  border-color: $accent-color !important;
 
   &:hover,
   &:focus {
-    background-color: #2098d1 !important;
-    color: #e5e9f2 !important;
+    background-color: $accent-color !important;
+    color: $text-over-accent-color !important;
   }
 }
 
 .btn-link {
-  color: #248aaa;
+  color: $accent-color;
 
   &:hover,
   &:focus {
-    color: #207089;
+    color: $hover-over-accent-color;
   }
 }
 
@@ -47,7 +46,7 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 0.25rem;
-  color: #8392a5;
+  color: $muted-text-color;
 }
 
 .tags {
@@ -57,18 +56,18 @@
     font-size: 0.5em;
     list-style-type: none;
     display: inline-block;
-    background: #248aaa;
+    background: $accent-color;
     margin-left: 0.1em;
     margin-right: 0.1em;
   }
   a {
-    color: #f9fafc;
+    color: $text-over-accent-color;
   }
 }
 
 .icon-button {
-  background-color: #3c4858;
-  color: #e5e9f2 !important;
+  background-color: $text-color;
+  color: $text-over-accent-color !important;
   padding: 0.25rem 0.5rem;
   line-height: 1.5;
   border-radius: 0.2rem;
@@ -76,19 +75,19 @@
 
   &:hover,
   &:focus {
-    background-color: #248aaa !important;
-    transition: all 0.3s ease-out !important;
+    background-color: $accent-color !important;
+    @include transition();
   }
 }
 
 .filled-button {
-  color: #f9fafc !important;
-  background-color: #248aaa !important;
-  transition: all 0.3s ease-out;
+  background-color: $accent-color !important;
+  color: $text-over-accent-color !important;
+  @include transition();
 
   &:hover,
   &:active {
-    background-color: #0cafe1 !important;
-    transition: all 0.3 ease-out;
+    background-color: $hover-over-accent-color !important;
+    @include transition();
   }
 }
diff --git a/assets/styles/components/cards.scss b/assets/styles/components/cards.scss
index e14b4b0e0..8e247f86a 100644
--- a/assets/styles/components/cards.scss
+++ b/assets/styles/components/cards.scss
@@ -1,13 +1,14 @@
 .card {
   box-shadow: none;
-  transition: all 0.3s ease-out;
+  @include transition();
   overflow: hidden;
+  background: $bg-card;
 
   &:hover,
   &:focus {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    border: 1px solid #fff;
-    transition: all 0.3s ease-out;
+    box-shadow: $box-shadow;
+    border: 1px solid $bg-primary;
+    @include transition();
   }
 
   .card-head {
@@ -21,7 +22,7 @@
   }
 
   .card-img-top {
-    transition: all 0.3s ease-out !important;
+    @include transition();
   }
 
   .card-img-sm {
@@ -35,7 +36,7 @@
   }
 
   .card-footer {
-    background: #fff;
+    background: $bg-card !important;
   }
 }
 
@@ -55,7 +56,7 @@
     &:focus {
       .card-img-top {
         transform: scale(1.2);
-        transition: all 0.3s ease-out;
+        @include transition();
       }
     }
 
@@ -79,7 +80,7 @@
 
       span {
         font-size: 10pt;
-        color: #6c757d !important;
+        color: $muted-text-color !important;
         padding-top: 5px;
       }
     }
diff --git a/assets/styles/components/images.scss b/assets/styles/components/images.scss
new file mode 100644
index 000000000..14a4e09b1
--- /dev/null
+++ b/assets/styles/components/images.scss
@@ -0,0 +1,34 @@
+img {
+  display: block;
+  max-width: 100%;
+
+  &.center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.left {
+    margin-right: auto;
+  }
+
+  &.right {
+    margin-left: auto;
+  }
+}
+
+figure {
+  border: 1px solid $border-color;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  align-self: center;
+  margin: auto;
+}
+
+caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: $muted-text-color;
+}
diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss
index a30263224..bcd663a64 100644
--- a/assets/styles/components/links.scss
+++ b/assets/styles/components/links.scss
@@ -1,15 +1,52 @@
+a {
+  color: $accent-color;
+  @include transition();
+
+  &:hover,
+  &:focus {
+    text-decoration: $hover-over-accent-color underline;
+    color: $hover-over-accent-color;
+    @include transition();
+  }
+}
+
 .list-link {
-    text-decoration: none;
-    color: #131313;
-    transition: all 0.3s ease-out;
-    &.active {
-      display: inline;
-      color: #2098d1;
+  text-decoration: none;
+  color: $text-color;
+  @include transition();
+  &.active {
+    display: inline;
+    color: $accent-color;
+  }
+
+  &:hover {
+    margin-left: 3px;
+    color: $accent-color;
+    @include transition();
+  }
+}
+
+a.header-anchor {
+  text-decoration: none;
+  color: $heading-color;
+  i,
+  svg {
+    font-size: 10pt;
+    color: $text-color;
+    display: none;
+    margin-left: 0.5rem;
+  }
+  &:hover {
+    i,
+    svg {
+      display: inline-block;
     }
-  
-    &:hover {
-      margin-left: 3px;
-      color: #2098d1;
-      transition: all 0.3s ease-out;
-    }
-  }
\ No newline at end of file
+  }
+  code {
+    color: $inline-code-color;
+  }
+}
+
+.anchor {
+  padding-top: 3.5rem;
+}
diff --git a/assets/styles/components/misc.scss b/assets/styles/components/misc.scss
new file mode 100644
index 000000000..67b6c938d
--- /dev/null
+++ b/assets/styles/components/misc.scss
@@ -0,0 +1,33 @@
+.paginator {
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: auto;
+  vertical-align: bottom;
+
+  .page-item {
+    & > a {
+      color: $accent-color;
+    }
+    &.active,
+    &:hover > a {
+      background-color: $accent-color !important;
+      color: $text-over-accent-color !important;
+    }
+  }
+}
+
+pre {
+  margin: 5px;
+  & > code {
+    padding: 10px !important;
+  }
+}
+
+@include media('<=large') {
+  pre {
+    margin: 0px;
+    & > code {
+      padding: 0px !important;
+    }
+  }
+}
diff --git a/assets/styles/components/tables.scss b/assets/styles/components/tables.scss
new file mode 100644
index 000000000..af0b2468e
--- /dev/null
+++ b/assets/styles/components/tables.scss
@@ -0,0 +1,74 @@
+table {
+  border-radius: 0.1rem;
+  border: 1px solid $border-color;
+  min-width: 10rem;
+  padding: 0.1rem;
+  thead {
+    tr {
+      background: $accent-color;
+      color: $text-over-accent-color;
+    }
+  }
+
+  tbody {
+    tr {
+      height: 40px !important;
+      color: $text-color;
+      &:nth-child(odd) {
+        background-color: $bg-primary;
+      }
+      &:nth-child(even) {
+        background-color: rgba($accent-color, 0.05);
+      }
+    }
+  }
+  th,
+  td {
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+.gist {
+  table {
+    border-radius: unset;
+    background: unset;
+    border: unset;
+    padding: unset;
+
+    tr {
+      height: unset !important;
+    }
+
+    th,
+    td {
+      padding: unset;
+      border-left: unset;
+      border-bottom: unset;
+    }
+    td,
+    tc {
+      border-right: 1px solid $border-color;
+    }
+
+    thead {
+      tr {
+        background: unset;
+        color: unset;
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background-color: unset;
+        }
+        &:hover {
+          background: unset;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/styles/components/texts.scss b/assets/styles/components/texts.scss
new file mode 100644
index 000000000..e406772e2
--- /dev/null
+++ b/assets/styles/components/texts.scss
@@ -0,0 +1,62 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: $heading-color;
+}
+
+strong {
+  color: $heading-color !important;
+}
+
+p {
+  color: $text-color;
+}
+
+blockquote {
+  border-left: 4px solid $accent-color;
+  background-color: rgba($accent-color, 0.05);
+  padding: 0.3rem;
+  padding-left: 1rem;
+
+  & > p {
+    color: $text-color;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.text-muted {
+  color: $muted-text-color !important;
+}
+
+.text-heading {
+  font-weight: bold;
+  color: $muted-text-color;
+}
+
+.sub-title {
+  color: $muted-text-color;
+  font-size: 10pt;
+}
+
+::-moz-selection {
+  @include selection-color();
+}
+
+::selection {
+  @include selection-color();
+}
+
+@include media('<=small') {
+  h1 {
+    font-size: 2.2rem;
+  }
+}
+
+@include media('<=tiny') {
+  h1 {
+    font-size: 1.5rem;
+  }
+}
diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss
index a46325af3..8b530b269 100644
--- a/assets/styles/layouts/list.scss
+++ b/assets/styles/layouts/list.scss
@@ -49,12 +49,12 @@ body.kind-page {
 
           .page-item {
             & > a {
-              color: #248aaa;
+              color: $accent-color;
             }
 
             &.active > a {
-              background-color: #248aaa;
-              color: #f9fafc;
+              background-color: $accent-color;
+              color: $text-over-accent-color;
             }
           }
         }
@@ -84,18 +84,18 @@ body.kind-page {
           width: 100%;
           padding-left: 0;
           padding-right: 0;
-          transition: all ease-out 0.3s;
+          @include transition();
         }
 
         &.hide {
           .content {
             margin-top: 0;
             padding-top: 0;
-            transition: all ease-out 0.3s;
+            @include transition();
           }
           .post-card-holder {
             margin-top: 0.5rem;
-            transition: all ease-out 0.3s;
+            @include transition();
           }
         }
       }
@@ -136,7 +136,7 @@ body.kind-page {
             padding-left: 0.5rem;
             padding-right: 0.5rem;
             position: relative;
-            transition: all ease-out 0.3s;
+            @include transition();
           }
         }
         .container {
diff --git a/assets/styles/layouts/main.scss b/assets/styles/layouts/main.scss
index 3ee539bd5..942dcae3c 100644
--- a/assets/styles/layouts/main.scss
+++ b/assets/styles/layouts/main.scss
@@ -1,18 +1,3 @@
-/* ========= Colors ============
-Heading:     #1C2D41
-Paragraph:   #3C4858
-Iconography: #8392A5
-Secondary:   #C0CCDA
-Dirty Snow:  #E5E9F2
-Snow:        #F9FAFC
-
-Magenta: #7551E9
-Orange:  #FF7D51
-Pink:    #ED63D2
-Green:   #2DCA73
-Yellow:  #FFC212
-*/
-
 /* 
   Removed smooth scrolling implementation in main.js in favor of
   simpler css approach.
@@ -35,71 +20,16 @@ html {
 }
 
 body {
-  background-color: #f9fafc;
+  background-color: $bg-primary;
   font-family: 'Mulish';
 }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-  color: #1c2d41;
-}
-
-strong {
-  color: #1c2d41 !important;
-}
-
-p {
-  color: #3c4858;
-}
-
-a {
-  color: #248aaa;
-}
-
-a:hover {
-  color: #207089;
-}
-a.focused {
-  color: #2098d1 !important;
-}
-
-
-
-.bg-white {
-  background-color: #f9fafc !important;
+.bg-primary {
+  background-color: $bg-primary !important;
 }
 
-.bg-dimmed {
-  background-color: #e5e9f2;
-}
-
-.anchor {
-  padding-top: 3.5rem;
-}
-
-img.center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-img.left {
-  display: block;
-  margin-right: auto;
-}
-
-img.right {
-  display: block;
-  margin-left: auto;
-}
-
-
-.sub-title {
-  color: #c0ccda;
-  font-size: 10pt;
+.bg-secondary {
+  background-color: $bg-secondary !important;
 }
 
 .flag-icon {
@@ -112,220 +42,36 @@ img.right {
   display: none !important;
 }
 
-/* ====== table ====== */
-table {
-  border-radius: 0.1rem;
-  background: #e5e9f2;
-  border: 1px solid #c0ccda;
-  padding: 0.1rem;
-}
-
-table tr {
-  height: 40px !important;
-}
-
-table th,
-td {
-  padding: 0.5rem;
-  border-left: 1px solid #8392a5;
-  border-bottom: 1px solid #8392a5;
-}
-
-table thead tr {
-  background: #248aaa;
-  color: #e5e9f2;
-}
-
-tbody tr:nth-child(odd) {
-  background-color: #e5e9f2;
-}
-
-tbody tr:hover {
-  background: #c0ccda;
-}
-
-/* ====== don't apply css to tables inside gist ====== */
-.gist table {
-  border-radius: unset;
-  background: unset;
-  border: unset;
-  padding: unset;
-}
-
-.gist table tr {
-  height: unset !important;
-}
-
-.gist table th,
-td {
-  padding: unset;
-  border-left: unset;
-  border-bottom: unset;
-}
-
-.gist table thead tr {
-  background: unset;
-  color: unset;
-}
-
-.gist tbody tr:nth-child(odd) {
-  background-color: unset;
-}
-
-.gist tbody tr:hover {
-  background: unset;
-}
-
-.gist table td,
-.gist table tc {
-  border-right: 1px solid #eee;
-}
-
-figure {
-  border: 1px solid #c0ccda;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-self: center;
-  margin: auto;
-}
-
-img {
-  max-width: 100%;
-}
-
-caption,
-figcaption {
-  caption-side: bottom;
-  text-align: center;
-  color: #8392a5;
-}
-
-pre {
-  margin: 5px;
-}
-
-pre > code {
-  padding: 10px !important;
-}
-
-a.header-anchor {
-  text-decoration: none;
-  color: #1c2d41;
-}
-
-a.header-anchor i,
-a.header-anchor svg {
-  font-size: 10pt;
-  color: #3c4858;
-  display: none;
-  margin-left: 0.5rem;
-}
-a.header-anchor:hover i,
-a.header-anchor:hover svg {
-  display: inline-block;
-}
-a.header-anchor code {
-  color: #e83e8c;
-}
-
-.content ul > ol,
-.content ol > ul,
-.content ul > ul,
-.content ol > ol,
-.content li > ol,
-.content li > ul {
-  -webkit-padding-start: 1rem;
-  padding-inline-start: 1rem;
+.content {
+  ul > ol,
+  ol > ul,
+  ul > ul,
+  ol > ol,
+  li > ol,
+  li > ul {
+    -webkit-padding-start: 1rem;
+    padding-inline-start: 1rem;
+  }
 }
 
 kbd {
-  background-color: #248aaa !important;
-  color: #f9fafc;
+  background-color: $accent-color;
+  color: $text-over-accent-color;
 }
 
 mark {
-  background-color: #ffc21280;
-}
-
-/* ======= Paginator ========= */
-.paginator {
-  width: -moz-fit-content;
-  width: fit-content;
-  margin: auto;
-  vertical-align: bottom;
-}
-
-.paginator .page-item > a {
-  color: #248aaa;
-}
-
-.paginator .page-item.active > a {
-  background-color: #248aaa;
-  color: #f9fafc;
-}
-
-/* ============= Media Query Template ======= */
-@include media('<medium') {
-}
-@include media('>=medium','<large') {
-}
-@include media('>=large','<very-large') {
-}
-@include media('>=very-large','<extra-large') {
-}
-@include media('>=extra-large') {
-}
-
-/* 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) {
-  .content-section .languageSelector {
-    position: fixed;
-    right: 0.5rem;
-    bottom: 1rem;
-    z-index: 10000000;
-    background-color: #f9fafc;
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-  }
-  pre {
-    margin: 0px;
-  }
-  code {
-    padding: 0px;
-  }
+  background-color: $highlight-color;
+  border-radius: 0.25rem;
 }
 
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  .skills-section .container,
-  .projects-section .container,
-  .publications-section .container {
-    padding-left: 0.3rem;
-    padding-right: 0.3rem;
+@include media('<=small') {
+  .skills-section,
+  .projects-section,
+  .publications-section {
+    .container {
+      padding-left: 0.3rem;
+      padding-right: 0.3rem;
+    }
   }
 
   .section-holder {
@@ -341,36 +87,4 @@ mark {
     padding-left: 0;
     padding-right: 0;
   }
-
-  pre {
-    margin: 0px;
-  }
-  code {
-    padding: 0px;
-  }
-
-  h1 {
-    font-size: 2.2rem;
-  }
-}
-
-/* iPhoneX, iPhone 6,7,8 */
-@media only screen and (max-width: 375px) {
-  h1 {
-    font-size: 2rem;
-  }
-}
-
-/* Galaxy S5, Moto G4 */
-@media only screen and (max-width: 360px) {
-  h1 {
-    font-size: 1.8rem;
-  }
-}
-
-/* iPhone 5 or before */
-@media only screen and (max-width: 320px) {
-  h1 {
-    font-size: 1.5rem;
-  }
 }
diff --git a/assets/styles/layouts/notes.scss b/assets/styles/layouts/notes.scss
index 29d22dce8..c9bce23bb 100644
--- a/assets/styles/layouts/notes.scss
+++ b/assets/styles/layouts/notes.scss
@@ -48,7 +48,7 @@ body.type-notes {
 
           .note-title {
             padding-left: 1rem;
-            color: #248aaa;
+            color: $accent-color;
 
             &:before {
               content: '';
@@ -56,11 +56,11 @@ body.type-notes {
               width: 98%;
               height: 100%;
               margin-bottom: -26px;
-              border-bottom: 1px solid #248aaa;
+              border-bottom: 1px solid $accent-color;
             }
 
             span {
-              background: #e5e9f2;
+              background: $bg-secondary;
               padding-right: 5px;
             }
           }
@@ -86,7 +86,7 @@ body.type-notes {
         max-width: 100%;
         order: 2;
         padding-bottom: 0.5rem;
-        transition: all ease-out 0.3s;
+        @include transition();
 
         .content {
           overflow: hidden;
@@ -97,7 +97,7 @@ body.type-notes {
             padding-left: 0.5rem;
             padding-right: 0.5rem;
             position: relative;
-            transition: all ease-out 0.3s;
+            @include transition();
             .note-card {
               flex: 50%;
             }
@@ -109,7 +109,7 @@ body.type-notes {
 
         &.hide {
           max-width: 60%;
-          transition: all ease-out 0.3s;
+          @include transition();
         }
       }
     }
@@ -119,13 +119,13 @@ body.type-notes {
     .note-card-holder .note-card {
       max-width: 50%;
       min-width: 50%;
-      transition: all ease-out 0.3s;
+      @include transition();
     }
 
     .content-section.hide .note-card-holder .note-card {
       max-width: 100%;
       min-width: 100%;
-      transition: all ease-out 0.3s;
+      @include transition();
     }
   }
 
@@ -141,16 +141,16 @@ body.type-notes {
           width: 100%;
           padding-left: 0;
           padding-right: 0;
-          transition: all ease-out 0.3s;
+          @include transition();
 
           .note-card-holder {
             margin-top: 0.5rem;
-            transition: all ease-out 0.3s;
+            @include transition();
 
             .note-card {
               flex: 100%;
               max-width: 100%;
-              transition: all ease-out 0.3s;
+              @include transition();
             }
           }
         }
@@ -159,13 +159,13 @@ body.type-notes {
           max-width: 100%;
           padding-left: 0;
           width: 100%;
-          transition: all ease-out 0.3s;
+          @include transition();
 
           .content {
             .note-card-holder {
               margin-top: 0;
               padding-top: 0;
-              transition: all ease-out 0.3s;
+              @include transition();
             }
           }
         }
diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss
index faa00b987..db52be17a 100644
--- a/assets/styles/layouts/single.scss
+++ b/assets/styles/layouts/single.scss
@@ -1,5 +1,5 @@
 body.kind-page {
-  background-color: #e5e9f2;
+  background-color: $bg-secondary;
   position: relative;
 
   .wrapper {
@@ -20,11 +20,10 @@ body.kind-page {
       padding-right: 1rem;
 
       .content {
-        background: #e5e9f2;
         padding-top: 1.5rem;
 
         .read-area {
-          background-color: #f9fafc;
+          background-color: $bg-primary;
 
           .hero-area {
             margin-top: 3rem;
@@ -55,12 +54,9 @@ body.kind-page {
                 width: 120px;
                 -o-object-fit: cover;
                 object-fit: cover;
-                background-color: #f9fafc;
+                background-color: $bg-primary;
                 padding: 5px;
               }
-              p {
-                color: #8392a5;
-              }
             }
 
             .title {
@@ -84,19 +80,6 @@ body.kind-page {
               h6 {
                 margin-top: 1.3rem;
               }
-
-              blockquote {
-                border-left: 4px solid #248aaa;
-                background-color: #248baa15;
-                padding: 0.3rem;
-                padding-left: 1rem;
-
-                & > p {
-                  color: #3c4858;
-                  margin-top: 0.5rem;
-                  margin-bottom: 0.5rem;
-                }
-              }
             }
 
             .next-prev-navigator {
@@ -120,7 +103,7 @@ body.kind-page {
       flex: 20%;
       order: 3;
       max-width: 20%;
-      transition: all ease-out 0.5s;
+      @include transition();
 
       .toc-holder {
         position: sticky;
@@ -128,14 +111,14 @@ body.kind-page {
         padding-top: 1rem;
         overflow-x: hidden;
         overflow-y: auto;
-        background-color: #f9fafc;
+        background-color: $bg-primary;
         margin-right: 0.5rem;
-        transition: all ease-out 0.3s;
+        @include transition();
 
         .toc {
           position: relative;
           padding-top: 0px;
-          transition: all ease-out 0.3s;
+          @include transition();
 
           nav {
             padding-top: 0px;
@@ -143,7 +126,7 @@ body.kind-page {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
-            transition: all ease-out 0.3s;
+            @include transition();
 
             ul {
               list-style: none;
@@ -155,17 +138,17 @@ body.kind-page {
             .nav-link {
               padding: 0;
               padding-left: 0.5rem;
-              transition: all ease-out 0.3s;
-              color: #1c2d41;
+              @include transition();
+              color: $heading-color;
 
               &:hover,
               &:focus,
               &.active {
                 padding-left: 1rem;
                 padding-right: 0.5rem;
-                background-color: #248aaa;
-                color: #f9f9f9;
-                transition: all ease-out 0.3s;
+                background-color: $accent-color;
+                color: $text-over-accent-color;
+                @include transition();
               }
             }
           }
@@ -193,21 +176,21 @@ body.kind-page {
     position: fixed;
     bottom: 0rem;
     right: 1rem;
-    color: #248aaa;
+    color: $accent-color;
     font-size: 24pt;
     z-index: 900000;
     visibility: hidden;
 
     &:hover {
-      color: #2098d1;
+      color: $hover-over-accent-color;
     }
     &.show {
       visibility: visible;
     }
 
     i {
-      box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-      background-color: #f9f9f9;
+      box-shadow: $box-shadow;
+      background-color: $bg-primary;
       border-radius: 50%;
     }
   }
diff --git a/assets/styles/mixins.scss b/assets/styles/mixins.scss
new file mode 100644
index 000000000..ec26fd853
--- /dev/null
+++ b/assets/styles/mixins.scss
@@ -0,0 +1,30 @@
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin section-title-adjustment() {
+  h1 > span {
+    margin-top: -55px; /* Size of fixed header */
+    padding-bottom: 55px;
+    display: block;
+  }
+}
+
+@mixin brand-background() {
+  @each $brand, $color in $brand-colors {
+    .bg-#{$brand} {
+      background-color: $color;
+    }
+  }
+}
+
+@mixin transition() {
+  transition: all $transition-type $transition-duration;
+}
+
+@mixin selection-color() {
+  background: $accent-color;
+  color: $text-over-accent-color;
+}
diff --git a/assets/styles/navigators/navbar.scss b/assets/styles/navigators/navbar.scss
index 8a7efb8dc..fbbcd5807 100644
--- a/assets/styles/navigators/navbar.scss
+++ b/assets/styles/navigators/navbar.scss
@@ -1,9 +1,8 @@
 @mixin nav-item-hover-effect() {
-  color: #2098d1 !important;
-  transition: all 0.3s ease-out;
-  border-bottom: 2px solid #2098d1 !important;
-  background: rgb(2, 0, 36);
-  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%);
+  color: $accent-color !important;
+  border-bottom: 2px solid $accent-color !important;
+  background: rgba($accent-color, 0.1);
+  @include transition();
 }
 
 .top-navbar {
@@ -13,18 +12,25 @@
   width: 100%;
   height: 50px;
   z-index: 99999;
-  transition: all 0.4s ease-out;
   margin: 0px;
   padding-top: 0.4rem;
+  color: $heading-color;
   text-align: center;
-
-  background-color: #f9fafc;
-  color: #1c2d41;
-  transition: all 0.3s ease-out;
+  background-color: $bg-primary;
+  @include transition();
 
   .navbar-brand {
-    color: #1c2d41;
+    color: $heading-color;
     font-weight: 600;
+    img {
+      width: 42px;
+      padding: 5px;
+      margin-left: -10px;
+    }
+  }
+
+  img {
+    display: inline-block;
   }
 
   .sidebar-icon {
@@ -35,9 +41,9 @@
 
   li {
     a {
-      color: #1c2d41;
+      color: $heading-color;
       font-weight: 500;
-      transition: all 0.3s ease-out;
+      @include transition();
       border-bottom: 2px solid transparent;
       &:hover {
         @include nav-item-hover-effect();
@@ -50,25 +56,28 @@
   }
 
   #top-navbar-divider {
-    background: rgba(0, 0, 0, 0.6);
+    margin-top: 10px;
+    background-color: $muted-text-color;
+    height: 20px;
+    width: 2px;
   }
 
   .dropdown-menu {
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    border: 1px solid #fff;
+    box-shadow: $box-shadow;
+    border: 1px solid $border-color;
     max-height: 0vh;
     overflow: hidden;
     display: block;
     visibility: hidden;
-    transition: all 0.3s ease-out;
+    @include transition();
 
     &.show {
       max-height: 100vh;
       visibility: visible;
-      transition: all 0.3s ease-in;
+      @include transition();
 
       a {
-        color: #1c2d41 !important;
+        color: $heading-color !important;
 
         &:hover {
           @include nav-item-hover-effect();
@@ -81,22 +90,22 @@
     margin-top: -5px;
     &.show,
     &.collapsing {
-      background-color: #f9fafc;
+      background-color: $bg-primary;
       padding-left: 1rem;
 
       li {
         a {
-          color: #1c2d41;
+          color: $heading-color;
           font-weight: 500;
-          transition: all 0.3s ease-out;
+          @include transition();
         }
       }
       .navbar-nav {
         .active {
-          color: #2098d1;
+          color: $accent-color;
         }
         a:hover {
-          color: #2098d1;
+          color: $accent-color;
         }
       }
     }
@@ -105,32 +114,19 @@
   &.transparent-navbar {
     background-color: transparent;
     .navbar-brand {
-      color: #c0ccda;
+      color: $inverse-text-color;
       font-weight: 600;
     }
     li {
       a {
-        color: #c0ccda;
+        color: $inverse-text-color;
       }
     }
     .feather-menu {
-      stroke: #8392a5;
+      stroke: $inverse-text-color;
     }
   }
 
-  #top-navbar-divider {
-    margin-top: 10px;
-    background: rgba(192, 204, 218, 0.8);
-    height: 20px;
-    width: 2px;
-  }
-
-  .navbar-brand img {
-    width: 42px;
-    padding: 5px;
-    margin-left: -10px;
-  }
-
   @include media('<=large') {
     height: -moz-fit-content;
     height: fit-content;
@@ -144,39 +140,31 @@
     &.transparent-navbar {
       .navbar-nav .active,
       li a:hover {
-        color: #2098d1;
-        transition: all 0.3s ease-out;
-      }
-    }
-    &.final-navbar {
-      .navbar-nav .active,
-      li a:hover {
-        color: #2098d1;
-        transition: none;
-
-        border-bottom: none !important;
-        background: transparent;
-      }
-      li a {
-        border-bottom: none;
+        color: $accent-color;
+        @include transition();
       }
     }
 
-    .dropdown-divider {
-      border-top: 1px solid #c0ccda;
-    }
-
     #top-navbar-divider {
-      background: rgba(0, 0, 0, 0.6);
       height: auto;
       width: auto;
       margin-right: 15px;
+      border-top: 1px solid #c0ccda;
     }
+
     .dropdown-menu {
       text-align: center;
-      margin-bottom: 0.5rem;
       margin-right: 1rem;
-      transition: all 0.3s ease-out;
+      @include transition();
+    }
+
+    .languageSelector {
+      position: fixed;
+      right: 0.5rem;
+      bottom: 1rem;
+      z-index: 10000000;
+      background-color: $bg-primary;
+      box-shadow: $box-shadow;
     }
   }
 
@@ -192,5 +180,5 @@
 .feather-menu {
   width: 1.5rem;
   height: 1.5rem;
-  stroke: #3c4858;
+  stroke: $text-color;
 }
diff --git a/assets/styles/navigators/sidebar.scss b/assets/styles/navigators/sidebar.scss
index 82e9fb177..125c52be4 100644
--- a/assets/styles/navigators/sidebar.scss
+++ b/assets/styles/navigators/sidebar.scss
@@ -2,22 +2,21 @@
   order: 1;
   flex: 20%;
   max-width: 20%;
-  /* background-color: lightsalmon; */
-  transition: all ease-out 0.5s;
+  @include transition();
 
   .sidebar-holder {
     top: 2.5rem;
     position: sticky;
-    background-color: #f9fafc;
+    background-color: $bg-primary;
     height: 100vh;
     overflow: auto;
-    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
-    transition: all ease-out 0.3s;
+    box-shadow: $box-shadow;
+    @include transition();
 
     .sidebar {
-      background: #f9fafc;
+      background: $bg-primary;
       height: 100vh;
-      transition: all ease-out 0.3s;
+      @include transition();
 
       #search-box {
         margin-left: 5%;
@@ -28,12 +27,12 @@
         margin-top: 30px;
         margin-bottom: 10px;
         border-radius: 5px;
-        background-color: #e5e9f2;
-        transition: all 0.3s ease-out;
-        border: 1px solid #c0ccda;
+        background-color: $bg-secondary;
+        @include transition();
+        border: 1px solid $border-color;
 
         &:focus {
-          border: 1pt solid #248aaa;
+          border: 1pt solid $accent-color;
           outline: none;
         }
       }
@@ -57,11 +56,11 @@
             margin: 0;
             padding: 0 1em;
             line-height: 2em;
-            color: #3c4858;
+            color: $heading-color;
             position: relative;
 
             i {
-              color: #3c4858;
+              color: $heading-color;
               font-size: 12px;
               margin-right: 5px;
             }
@@ -81,7 +80,7 @@
               top: 2.5rem;
               left: 1.5rem;
               bottom: 0.9rem;
-              border-left: 1px solid;
+              border-left: 1px solid $text-color;
             }
             li {
               &:before {
@@ -89,14 +88,14 @@
                 display: block;
                 width: 18px;
                 height: 0;
-                border-top: 1px solid;
+                border-top: 1px solid $text-color;
                 margin-top: -1px;
                 position: absolute;
                 top: 18px;
                 left: -2px;
               }
               &:last-child:before {
-                background: #f9fafc;
+                background: $bg-primary;
                 height: auto;
                 top: 1.1rem;
                 bottom: 0;
@@ -154,7 +153,7 @@
     flex: 0%;
     max-width: 0%;
     min-height: 100vh;
-    transition: all ease-out 0.3s;
+    @include transition();
 
     .sidebar-holder {
       position: sticky;
@@ -168,7 +167,7 @@
       flex: 30%;
       max-width: 30%;
       margin-right: 0.5rem;
-      transition: all ease-out 0.3s;
+      @include transition();
     }
   }
 
@@ -176,7 +175,7 @@
     flex: 0%;
     max-width: 0%;
     min-height: 100vh;
-    transition: all ease-out 0.3s;
+    @include transition();
 
     .sidebar-holder {
       position: sticky;
@@ -188,7 +187,7 @@
       flex: 40%;
       max-width: 40%;
       margin-right: 0.5rem;
-      transition: all ease-out 0.3s;
+      @include transition();
     }
   }
 
@@ -197,7 +196,7 @@
     min-height: 0;
     max-height: 0;
     max-width: 100%;
-    transition: all ease-out 0.5s;
+    @include transition();
 
     .sidebar-holder {
       max-height: 0;
@@ -205,7 +204,7 @@
       height: fit-content;
       overflow: hidden;
       max-width: 100%;
-      transition: all ease-out 0.5s;
+      @include transition();
 
       .sidebar {
         position: relative;
@@ -216,12 +215,12 @@
         width: 100vw;
         min-height: 0;
         overflow: hidden;
-        transition: all ease-out 0.5s;
+        @include transition();
 
         .sidebar-tree {
           margin-left: 0rem;
           max-height: 0;
-          transition: all 0.5s ease-out;
+          @include transition();
         }
       }
     }
@@ -234,15 +233,15 @@
       flex: none;
       max-height: 300vh;
       max-width: 100%;
-      transition: all ease-out 0.5s;
+      @include transition();
 
       .sidebar-holder {
         max-height: 200vh;
-        transition: all ease-out 0.5s;
+        @include transition();
 
         .sidebar-tree {
           max-height: 200vh;
-          transition: all 0.5s ease-out;
+          @include transition();
         }
       }
     }
diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss
index 201e50021..1ef7eeead 100644
--- a/assets/styles/sections/about.scss
+++ b/assets/styles/sections/about.scss
@@ -1,3 +1,52 @@
+@use 'sass:map';
+
+$progress-bar-colors: (
+  'blue': #048dff,
+  'yellow': #eebb4d,
+  'pink': #ed63d2,
+  'green': #2dca73,
+  'sky': #00c9e3,
+  'orange': #ff7c7c,
+);
+
+@mixin circular-progress-bar-color() {
+  @each $color, $value in $progress-bar-colors {
+    &.#{$color} {
+      .circular-progress-bar {
+        border-color: $value;
+      }
+    }
+  }
+}
+
+@mixin circular-progress-animation-breakpoints() {
+  $progress: 50;
+  $duration: 0;
+
+  @for $i from 1 through 10 {
+    .circular-progress-percentage-#{$progress} {
+      animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s;
+    }
+    $progress: $progress + 5;
+    $duration: $duration + 0.18;
+  }
+}
+
+@mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) {
+  @for $i from 1 through $keyframes {
+    @keyframes circular-loading-#{$progress} {
+      0% {
+        transform: rotate(0);
+      }
+      100% {
+        transform: rotate(#{$degree}deg);
+      }
+    }
+    $progress: $progress + 5;
+    $degree: $degree + 18;
+  }
+}
+
 .about-section {
   .social-link {
     list-style: none;
@@ -5,12 +54,12 @@
 
     a {
       font-size: 1.5rem;
-      color: #3c4858;
+      color: $text-color;
       padding: 0.5rem;
 
       &:hover {
-        color: #248aaa;
-        transition: all 0.3s ease-in;
+        color: $accent-color;
+        @include transition();
       }
     }
   }
@@ -29,7 +78,7 @@
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      border: 12px solid #f9fafc;
+      border: 12px solid $bg-primary;
       position: absolute;
       top: 0;
       left: 0;
@@ -42,9 +91,7 @@
       top: 0;
       z-index: 1;
     }
-    .circular-progress-left {
-      left: 0;
-    }
+
     .circular-progress-bar {
       width: 100%;
       height: 100%;
@@ -54,32 +101,38 @@
       position: absolute;
       top: 0;
     }
-    .circular-progress-left .circular-progress-bar {
-      left: 100%;
-      border-top-right-radius: 80px;
-      border-bottom-right-radius: 80px;
-      border-left: 0;
-      transform-origin: center left;
+
+    .circular-progress-left {
+      left: 0;
+
+      .circular-progress-bar {
+        left: 100%;
+        border-top-right-radius: 80px;
+        border-bottom-right-radius: 80px;
+        border-left: 0;
+        transform-origin: center left;
+      }
     }
     .circular-progress-right {
       right: 0;
-    }
-    .circular-progress-right .circular-progress-bar {
-      left: -100%;
-      border-top-left-radius: 80px;
-      border-bottom-left-radius: 80px;
-      border-right: 0;
-      transform-origin: center right;
-      animation: circular-loading-1 1.8s linear forwards;
+
+      .circular-progress-bar {
+        left: -100%;
+        border-top-left-radius: 80px;
+        border-bottom-left-radius: 80px;
+        border-right: 0;
+        transform-origin: center right;
+        animation: circular-loading-1 1.8s linear forwards;
+      }
     }
     .circular-progress-value {
       width: 90%;
       height: 90%;
       padding: 1rem;
       border-radius: 50%;
-      background: #3c4858;
+      background: $text-color;
       font-size: 1rem;
-      color: #f9fafc;
+      color: $bg-primary;
       line-height: initial;
       text-align: center;
       position: absolute;
@@ -89,211 +142,10 @@
       justify-content: center;
       align-items: center;
     }
-    &.blue .circular-progress-bar {
-      border-color: #048dff;
-    }
-    &.yellow .circular-progress-bar {
-      border-color: #eebb4d;
-    }
-    &.pink .circular-progress-bar {
-      border-color: #ed63d2;
-    }
-    &.green .circular-progress-bar {
-      border-color: #2dca73;
-    }
-    &.sky .circular-progress-bar {
-      border-color: #00c9e3;
-    }
-    &.orange .circular-progress-bar {
-      border-color: #ff7c7c;
-    }
-    .circular-progress-percentage-50 {
-      animation: circular-loading-50 0s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-55 {
-      animation: circular-loading-55 0.18s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-60 {
-      animation: circular-loading-60 0.36s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-65 {
-      animation: circular-loading-65 0.54s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-70 {
-      animation: circular-loading-70 0.72s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-75 {
-      animation: circular-loading-75 0.9s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-80 {
-      animation: circular-loading-80 1.08s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-85 {
-      animation: circular-loading-85 1.26s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-90 {
-      animation: circular-loading-90 1.44s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-95 {
-      animation: circular-loading-95 1.62s linear forwards 1.8s;
-    }
-
-    .circular-progress-percentage-100 {
-      animation: circular-loading-100 1.8s linear forwards 1.8s;
-    }
-
-    @keyframes circular-loading-50 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(0deg);
-      }
-    }
-
-    @keyframes circular-loading-55 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(18deg);
-      }
-    }
-
-    @keyframes circular-loading-60 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(36deg);
-      }
-    }
-
-    @keyframes circular-loading-65 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(54deg);
-      }
-    }
-
-    @keyframes circular-loading-70 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(72deg);
-      }
-    }
-
-    @keyframes circular-loading-75 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(90deg);
-      }
-    }
-
-    @keyframes circular-loading-80 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(108deg);
-      }
-    }
-
-    @keyframes circular-loading-85 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(126deg);
-      }
-    }
-
-    @keyframes circular-loading-90 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(144deg);
-      }
-    }
-
-    @keyframes circular-loading-95 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(162deg);
-      }
-    }
-
-    @keyframes circular-loading-100 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(180deg);
-      }
-    }
-
-    @keyframes circular-loading-1 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(180deg);
-      }
-    }
-
-    @keyframes circular-loading-2 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(144deg);
-      }
-    }
-
-    @keyframes circular-loading-3 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(90deg);
-      }
-    }
-
-    @keyframes circular-loading-4 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(36deg);
-      }
-    }
-
-    @keyframes circular-loading-5 {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(126deg);
-      }
-    }
+    @include circular-progress-bar-color();
+    @include circular-progress-animation-breakpoints();
+    @include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10);
+    @include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5);
   }
 
   @include media('<=large') {
diff --git a/assets/styles/sections/accomplishments.scss b/assets/styles/sections/accomplishments.scss
index c4e1ebb25..00bebac5e 100644
--- a/assets/styles/sections/accomplishments.scss
+++ b/assets/styles/sections/accomplishments.scss
@@ -2,13 +2,13 @@
   @include section-title-adjustment();
 
   .card {
-    background: #fff;
-    border-top: 2px solid #248aaa;
+    background: $bg-card;
+    border-top: 2px solid $accent-color;
     height: 100%;
 
     &:hover,
     &:focus {
-      border-top: 2px solid #248aaa;
+      border-top: 2px solid $hover-over-accent-color;
     }
 
     .card-header {
@@ -16,7 +16,7 @@
       border: none;
 
       .sub-title {
-        color: #8392a5;
+        color: $muted-text-color;
         margin-top: 0.4rem;
       }
     }
@@ -28,7 +28,7 @@
     }
 
     .card-footer {
-      background: #fff;
+      background: $bg-card;
       border: none;
       padding: 0;
       padding-left: 0.7rem;
diff --git a/assets/styles/sections/achievements.scss b/assets/styles/sections/achievements.scss
index e389c3c7e..e0d548295 100644
--- a/assets/styles/sections/achievements.scss
+++ b/assets/styles/sections/achievements.scss
@@ -12,17 +12,17 @@
       margin-left: 7px;
       margin-right: 7px;
       z-index: 1;
-      background-color: #e5e9f2;
+      background-color: $bg-secondary;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       position: relative;
       overflow: hidden;
-      transition: all 0.3s ease-out;
+      @include transition();
 
       .title {
-        color: #e5e9f2;
-        background-color: rgba(0, 0, 0, 0.7);
+        color: $inverse-text-color;
+        background-color: rgba($bg-primary-inverse, 0.7);
         opacity: 0;
         padding: 5px;
         position: absolute;
@@ -35,19 +35,19 @@
       &:hover {
         cursor: pointer;
         transform: scale(1.1);
-        transition: all 0.3s ease-out;
+        @include transition();
         z-index: 20000;
 
         .svg-inline--fa {
           opacity: 1;
           font-size: 1rem;
-          transition: all 0.3s ease-out;
+          @include transition();
         }
 
         .title {
           opacity: 1;
           bottom: 0px;
-          transition: bottom 0.3s ease-out;
+          @include transition();
         }
       }
     }
@@ -85,28 +85,28 @@
     }
 
     .svg-inline--fa {
-      color: #8392a5;
-      background-color: rgba(0, 0, 0, 0.7);
+      color: $muted-text-color;
+      background-color: rgba($bg-primary-inverse, 0.7);
       padding: 10px;
       font-size: 0rem;
       opacity: 0;
     }
     .caption {
-      background-color: rgba(0, 0, 0, 0.7);
+      background-color: rgba($bg-primary-inverse, 0.7);
       bottom: 1rem;
       left: 1rem;
-      color: #e5e9f2;
+      color: $inverse-text-color;
       padding: 15px;
       position: absolute;
-      transition: all 0.3s ease-out;
+      @include transition();
 
       h4 {
-        color: #e5e9f2;
+        color: $inverse-text-color;
       }
       p {
         font-size: 16px;
         font-weight: 300;
-        color: #e5e9f2;
+        color: $inverse-text-color;
       }
     }
 
diff --git a/assets/styles/sections/education.scss b/assets/styles/sections/education.scss
index 1cb363a18..7d065d1a9 100644
--- a/assets/styles/sections/education.scss
+++ b/assets/styles/sections/education.scss
@@ -4,7 +4,7 @@
   .card {
     &:hover,
     &:focus {
-      border-left: 2px solid #248aaa;
+      border-left: 2px solid $accent-color;
     }
   }
 
@@ -23,19 +23,19 @@
         position: absolute;
         left: 1rem;
         top: 0;
-        background-color: #248aaa;
+        background-color: $accent-color;
         height: 100%;
         width: 2px;
       }
 
       .icon-holder {
-        background-color: #248aaa;
+        background-color: $accent-color;
         border-radius: 50%;
         height: 2rem;
         width: 2rem;
         padding: 0.2rem;
         text-align: center;
-        color: #e5e9f2;
+        color: $text-over-accent-color;
         position: relative;
       }
     }
@@ -71,9 +71,8 @@
 
         div {
           height: 2px;
-          /* width: 100%; */
           margin-right: -1px;
-          background-color: #248aaa;
+          background-color: $accent-color;
         }
       }
 
@@ -82,10 +81,10 @@
           padding: 1rem;
           margin-top: 0.5rem;
           margin-bottom: 0.5rem;
-          border-left: 2px solid #248aaa;
-          border-top: 1px solid #c0ccda;
-          border-bottom: 1px solid #c0ccda;
-          border-right: 1px solid #c0ccda;
+          border-left: 2px solid $accent-color;
+          border-top: 1px solid $bg-primary;
+          border-bottom: 1px solid $bg-primary;
+          border-right: 1px solid $bg-primary;
           border-radius: 5px;
 
           h5 {
@@ -93,7 +92,7 @@
           }
 
           .timeframe {
-            color: #8392a5;
+            color: $muted-text-color;
             text-align: right;
           }
 
@@ -101,7 +100,7 @@
             table {
               margin-left: 1rem;
               width: 100%;
-              transition: all 0.3s ease-out;
+              @include transition();
               background: none;
               border: none;
 
@@ -110,7 +109,7 @@
               th {
                 background: none;
                 border: none;
-                color: #212529;
+                color: $text-color;
               }
 
               tr {
@@ -123,7 +122,7 @@
               }
               .hidden-course {
                 display: none;
-                transition: all 1s ease-out;
+                @include transition();
               }
               ul {
                 margin-bottom: 0;
@@ -168,5 +167,5 @@
 }
 
 .education-alt .degree-info {
-  border-right: 2px solid #248aaa;
+  border-right: 2px solid $accent-color;
 }
diff --git a/assets/styles/sections/experiences.scss b/assets/styles/sections/experiences.scss
index df639b47c..5578dd65e 100644
--- a/assets/styles/sections/experiences.scss
+++ b/assets/styles/sections/experiences.scss
@@ -7,7 +7,7 @@
     padding-left: 1rem;
     & > li {
       margin-left: 0;
-      color: #3c4858;
+      color: $text-color;
     }
   }
 
@@ -18,8 +18,8 @@
   .circle {
     padding: 13px 20px;
     border-radius: 50%;
-    background-color: #248aaa;
-    color: #f9fafc;
+    background-color: $accent-color;
+    color: $text-over-accent-color;
     max-height: 50px;
     z-index: 2;
   }
@@ -33,7 +33,7 @@
       &::after {
         content: '';
         position: absolute;
-        border-left: 3px solid #248aaa;
+        border-left: 3px solid $accent-color;
         z-index: 1;
         height: 100%;
         left: 50%;
@@ -48,7 +48,7 @@
         height: 40px;
       }
       hr {
-        border-top: 3px solid #248aaa;
+        border-top: 3px solid $accent-color;
         margin: 0;
         top: 17px;
         position: relative;
@@ -58,7 +58,7 @@
         overflow: hidden;
       }
       .corner {
-        border: 3px solid #248aaa;
+        border: 3px solid $accent-color;
         width: 100%;
         position: relative;
         border-radius: 15px;
diff --git a/assets/styles/sections/footer.scss b/assets/styles/sections/footer.scss
index 52c643dd9..bc2e10b5f 100644
--- a/assets/styles/sections/footer.scss
+++ b/assets/styles/sections/footer.scss
@@ -1,19 +1,20 @@
 .footer {
-  color: #8392a5 !important;
-  background-color: #1c2d41;
+  color: $muted-text-color !important;
+  background-color: $bg-primary-inverse;
   position: relative;
   z-index: 9999;
 
   h5 {
-    color: #c0ccda;
+    color: $inverse-text-color;
   }
 
   a {
-    color: #8392a5;
-    transition: all 0.3s ease-out;
+    color: $muted-text-color;
+    @include transition();
     &:hover {
       margin-left: 5px;
-      transition: all 0.3s ease-out;
+      text-decoration: $muted-text-color underline;
+      @include transition();
     }
   }
 
@@ -27,37 +28,42 @@
   }
 
   hr {
-    background-color: #8392a5;
+    background-color: $muted-text-color;
   }
 
   p:first-child {
-    color: #c0ccda;
+    color: $inverse-text-color;
   }
 
   input {
-    background-color: #c0ccda;
+    background-color: $inverse-text-color;
     &:focus {
-      background-color: #e5e9f2;
+      background-color: $bg-secondary;
     }
   }
 
   #disclaimer {
-    color: #8392a5 !important;
+    color: $muted-text-color !important;
     text-align: justify;
     & > strong {
-      color: #c0ccda !important;
+      color: $inverse-text-color !important;
     }
   }
 
   #theme {
-    color: #c0ccda;
+    color: $inverse-text-color;
     img {
       width: 32px;
+      display: inline-block;
     }
   }
-
-  #hugo:hover {
-    margin-right: 5px;
-    transition: all 0.3s ease-out;
+  #hugo {
+    &:hover {
+      margin-right: 5px;
+      @include transition();
+    }
+    img {
+      display: inline-block;
+    }
   }
 }
diff --git a/assets/styles/sections/home.scss b/assets/styles/sections/home.scss
index b5eeb0a5a..58f8db8b3 100644
--- a/assets/styles/sections/home.scss
+++ b/assets/styles/sections/home.scss
@@ -2,7 +2,7 @@
   height: 100vh;
   padding: 0;
   margin: 0;
-  color: #f9fafc;
+  color: $text-over-accent-color;
   overflow: hidden;
 
   .background {
@@ -16,12 +16,12 @@
     filter: blur(3px);
     background-size: cover;
   }
-  
+
   .arrow-center {
     display: flex;
     justify-content: center;
   }
-  
+
   /*
     Resolves https://github.com/hugo-toha/toha/issues/70
   
@@ -34,45 +34,46 @@
       background-attachment: scroll;
     }
   }
-  
+
   .content {
     position: relative;
     top: -65%;
     height: 60%;
   }
-  
+
   img {
     width: 148px;
     height: 148px;
-    background-color: #e7e7ef;
+    background-color: $bg-secondary;
     padding: 5px;
     margin-bottom: 10px;
   }
-  
-  .greeting, .greeting-subtitle {
-    color: #f9fafc;
+
+  .greeting,
+  .greeting-subtitle {
+    color: $text-over-accent-color;
   }
-  
+
   .typing-carousel {
     font-size: 14pt;
-    color: #f0f0f0;
+    color: $text-over-accent-color;
   }
-  
+
   #typing-carousel-data {
     display: none;
   }
-  
+
   .arrow {
     position: absolute;
-    color: #f9fafc;
+    color: $text-over-accent-color;
     font-size: 1.5rem;
     bottom: 0;
   }
-  
+
   .bounce {
     animation: bounce 2s infinite;
   }
-  
+
   @keyframes bounce {
     0%,
     20%,
@@ -88,64 +89,22 @@
       transform: translateY(-15px);
     }
   }
-  
-  /* ============= 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) {
-  }
-  
-  /*  Large devices (desktops, 992px and up) */
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
-  }
-  
-  /* Small devices (landscape phones, 576px and up) */
-  
-  @media only screen and (max-width: 576px) {
+
+  @include media('<=small') {
     .content {
       position: relative;
       top: -75%;
       height: 65%;
     }
-  
+
     img {
       width: 140px;
       max-width: 50%;
       height: auto;
     }
-  
+
     .greeting {
       font-size: 24pt;
     }
   }
-  
-  /* 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) {
-  }  
-}
\ No newline at end of file
+}
diff --git a/assets/styles/sections/projects.scss b/assets/styles/sections/projects.scss
index 2724bac29..5e5349240 100644
--- a/assets/styles/sections/projects.scss
+++ b/assets/styles/sections/projects.scss
@@ -1,7 +1,7 @@
 .projects-section {
   .card {
     .card-header {
-      background-color: #f9fafc;
+      background-color: $bg-card;
       padding: 0.7rem;
       padding-bottom: 0rem;
       text-decoration: none;
@@ -10,7 +10,7 @@
         margin-right: 0.5rem;
       }
       .sub-title {
-        color: #8392a5;
+        color: $muted-text-color;
         margin-top: 0.4rem;
 
         span {
diff --git a/assets/styles/sections/publications.scss b/assets/styles/sections/publications.scss
index ba2ee1de5..94fc3858a 100644
--- a/assets/styles/sections/publications.scss
+++ b/assets/styles/sections/publications.scss
@@ -2,12 +2,12 @@
   @include section-title-adjustment();
 
   .card {
-    background: #fff;
-    border-top: 2px solid #248aaa;
+    background: $bg-card;
+    border-top: 2px solid $accent-color;
 
     &:hover,
     &:focus {
-      border-top: 2px solid #248aaa;
+      border-top: 2px solid $accent-color;
     }
 
     .card-header {
@@ -17,7 +17,7 @@
       flex-direction: column;
 
       .sub-title {
-        color: #8392a5;
+        color: $muted-text-color;
         margin-top: 0.4rem;
 
         span:nth-child(2) {
@@ -33,7 +33,7 @@
     }
 
     .card-footer {
-      background: #fff;
+      background: $bg-card;
       border: none;
       padding: 0;
       padding-left: 1rem;
diff --git a/assets/styles/sections/recent-posts.scss b/assets/styles/sections/recent-posts.scss
index dde264a00..d1819481a 100644
--- a/assets/styles/sections/recent-posts.scss
+++ b/assets/styles/sections/recent-posts.scss
@@ -16,7 +16,7 @@
       width: 98%;
     }
   }
-  @include media('>=medium','<large') {
+  @include media('>=medium', '<large') {
     .container {
       max-width: 100%;
     }
diff --git a/assets/styles/sections/skills.scss b/assets/styles/sections/skills.scss
index 42d4fce8d..405a4f7ed 100644
--- a/assets/styles/sections/skills.scss
+++ b/assets/styles/sections/skills.scss
@@ -5,12 +5,12 @@
     height: 100%;
 
     .card-head {
-      background-color: #f9fafc;
+      background-color: $bg-primary !important;
       height: -moz-fit-content;
       height: fit-content;
       padding: 0.7rem;
       padding-bottom: 0rem;
-      border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
+      border-bottom: 0.0625rem solid rgba($accent-color, 0.4);
 
       .card-img-xs {
         margin-right: 0.5rem;
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
index 507a6f01f..b62258fb9 100644
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@@ -10,6 +10,36 @@ $breakpoints: (
   ultra-large: 2560px,
 );
 
+// Color are chosen from TailwindCSS color scheme
+// https://tailwindcss.com/docs/customizing-colors
+
+// accent-color
+$accent-color: #0891b2; // cyan 600
+$hover-over-accent-color: #06b6d4; // cyan 500
+$text-over-accent-color: #e4e4e7; // zinc 200
+
+// background-color
+$bg-primary: #f8fafc; // slate 50
+$bg-primary-inverse: #0f172a; // slate 900
+$bg-secondary: #e2e8f0; // slate 200
+$bg-card: #fff;
+
+// text-color
+$heading-color: #1e293b; // slate 800
+$text-color: #334155; // slate 700
+$inverse-text-color: #cbd5e1; // slate 300
+$muted-text-color: #64748b; // slate 500
+$inline-code-color: #dc2626; // red 600
+$highlight-color: #fde68a; // amber 200
+
+// transitions
+$transition-duration: 0.3s;
+$transition-type: ease-out;
+
+// borders and shadows
+$border-color: rgba($accent-color, 0.1);
+$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+
 $brand-colors: (
   'facebook': #3b5998,
   'twitter': #1da1f2,
@@ -20,25 +50,3 @@ $brand-colors: (
   'diaspora': #1e1e1e,
   'whatsapp': #25d366,
 );
-
-@mixin reset-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-@mixin section-title-adjustment() {
-  h1 > span {
-    margin-top: -55px; /* Size of fixed header */
-    padding-bottom: 55px;
-    display: block;
-  }
-}
-
-@mixin brand-background() {
-  @each $brand, $color in $brand-colors {
-    .bg-#{$brand} {
-      background-color: $color;
-    }
-  }
-}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 58d631b80..1b6b3975c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,7 +15,7 @@
   </head>
 
   <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">
-    <div class="container-fluid bg-dimmed wrapper">
+    <div class="container-fluid bg-secondary wrapper">
       <!----- ADD NAVBAR --------------->
       {{ block "navbar" . }} {{ end }}
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 761f66828..61929522b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -39,7 +39,7 @@
         <div class="author-profile ml-auto align-self-lg-center">
           <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
-          <p>{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</p>
+          <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</p>
         </div>
 
         <div class="title">
diff --git a/layouts/index.html b/layouts/index.html
index 77b7e1994..91d269040 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -33,7 +33,7 @@
     {{ end }}
 
     {{ if $sections }}
-      {{ $background:= "bg-white"}}
+      {{ $background:= "bg-primary"}}
       {{ range sort $sections "section.weight" }}
         {{ if .section.enable }}
           <div class="container-fluid section-holder d-flex {{ $background }}">
@@ -44,10 +44,10 @@
             {{ end }}
           </div>
           <!--- alter background color for next section --->
-          {{ if eq $background "bg-white" }}
-            {{ $background = "bg-dimmed" }}
+          {{ if eq $background "bg-primary" }}
+            {{ $background = "bg-secondary" }}
           {{ else }}
-            {{ $background = "bg-white" }}
+            {{ $background = "bg-primary" }}
           {{end}}
         {{ end }}
       {{ end }}
diff --git a/layouts/partials/navigators/lang-selector.html b/layouts/partials/navigators/lang-selector.html
index b5b16bfe8..9232e446f 100644
--- a/layouts/partials/navigators/lang-selector.html
+++ b/layouts/partials/navigators/lang-selector.html
@@ -1,3 +1,7 @@
+{{ $pageURL:= .RelPermalink }}
+{{ if site.IsMultiLingual }}
+  {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
+{{ end }}
 <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {{ if ne site.Params.features.flags.enable false }}
@@ -8,7 +12,7 @@
     </a>
     <div class="dropdown-menu" aria-labelledby="languageSelector">
         {{ range site.Home.AllTranslations }}
-        <a class="dropdown-item nav-link languages-item" href="{{ .RelPermalink }}">
+        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
             {{ if ne site.Params.features.flags.enable false }}
                 {{ $countryCode := partial "helpers/country-code.html" . }}
                 <span class="flag-icon flag-icon-{{$countryCode}}"></span>
diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html
index 9071004f9..57f3a8e3e 100644
--- a/layouts/partials/navigators/navbar.html
+++ b/layouts/partials/navigators/navbar.html
@@ -112,7 +112,7 @@
         {{- end }}
         {{ $shouldAddSeparator:= partial "helpers/add-navbar-separator.html" . }}
         {{ if $shouldAddSeparator }}
-          <div class="dropdown-divider" id="top-navbar-divider"></div>
+          <div id="top-navbar-divider"></div>
         {{ end }}
         {{ if $blogEnabled }}
           <li class="nav-item">
diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html
index eaaca5386..b6996dfe6 100644
--- a/layouts/partials/sections/education-alt.html
+++ b/layouts/partials/sections/education-alt.html
@@ -43,11 +43,11 @@ <h5>{{ .institution.name }}</h5>
                             </div>
                             <h6>{{ .name }}</h6>
                             {{ if .grade }}
-                                <h6><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6>
+                                <h6 class="text-heading"><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6>
                             {{ end }}
                             {{ if .publications }}
                                 <div class="publications">
-                                    <h6 class="text-muted">{{i18n "publications"}}</h6>
+                                    <h6 class="text-heeading">{{i18n "publications"}}:</h6>
                                     <ul>
                                         {{ range .publications }}
                                             {{ if .url }}
@@ -62,7 +62,7 @@ <h6 class="text-muted">{{i18n "publications"}}</h6>
                             {{ if .takenCourses }}
                             {{ $collapseAfter  := .takenCourses.collapseAfter | default 2 }}
                             <div class="taken-courses">
-                                <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
+                                <h6 class="text-heading">{{ i18n "taken_courses" }}:</h6>
                                 {{ if .takenCourses.showGrades }}
                                 {{ $hideScale  := .takenCourses.hideScale }}
                                 <table>
@@ -98,7 +98,7 @@ <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
                             {{ end }}
                             {{ if .extracurricularActivities }}
                             <div class="extracurricular-activities">
-                                <h6 class="text-muted">{{ i18n "extracurricular_activities" }}</h6>
+                                <h6 class="text-heading">{{ i18n "extracurricular_activities" }}:</h6>
                                 <ul>
                                 {{ range .extracurricularActivities }}
                                     <li>{{ . | markdownify }}</li>
diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html
index 22f4048d2..6a7fb74f2 100644
--- a/layouts/partials/sections/education.html
+++ b/layouts/partials/sections/education.html
@@ -43,11 +43,11 @@ <h5>{{ .institution.name }}</h5>
                             </div>
                             <h6>{{ .name }}</h6>
                             {{ if .grade }}
-                                <h6><span class="text-muted">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6>
+                                <h6><span class="text-heading">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6>
                             {{ end }}
                             {{ if .publications }}
                                 <div class="publications">
-                                    <h6 class="text-muted">{{ i18n "publications"}}</h6>
+                                    <h6 class="text-heading">{{ i18n "publications"}}:</h6>
                                     <ul>
                                         {{ range .publications }}
                                             {{ if .url }}
@@ -62,7 +62,7 @@ <h6 class="text-muted">{{ i18n "publications"}}</h6>
                             {{ if .takenCourses }}
                             {{ $collapseAfter  := .takenCourses.collapseAfter | default 2 }}
                             <div class="taken-courses">
-                                <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
+                                <h6 class="text-heading">{{ i18n "taken_courses"}}:</h6>
                                 {{ if .takenCourses.showGrades }}
                                 {{ $hideScale  := .takenCourses.hideScale }}
                                 <table>
@@ -98,7 +98,7 @@ <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
                             {{ end }}
                             {{ if .extracurricularActivities }}
                             <div class="extracurricular-activities">
-                                <h6 class="text-muted">{{ i18n "extracurricular_activities"}}</h6>
+                                <h6 class="text-heading">{{ i18n "extracurricular_activities"}}:</h6>
                                 <ul>
                                 {{ range .extracurricularActivities }}
                                     <li>{{ . | markdownify }}</li>
diff --git a/layouts/partials/sections/experiences/single-position.html b/layouts/partials/sections/experiences/single-position.html
index b49fcedec..4b0e500c7 100644
--- a/layouts/partials/sections/experiences/single-position.html
+++ b/layouts/partials/sections/experiences/single-position.html
@@ -13,7 +13,7 @@ <h6>{{ if .company.url }}<a href={{.company.url}} title="{{ .company.name }}" ta
     <p>{{ .company.overview | markdownify }}</p>
     <!-- Add the responsibilities handled at this position -->
     {{ if $position.responsibilities }}
-    <h6 class="text-muted">{{ i18n "responsibilities" }}</h6>
+    <h6 class="text-heading">{{ i18n "responsibilities" }}</h6>
     <ul class="justify-content-around">
     {{ range $position.responsibilities }}
         <li>{{ . | markdownify }}</li>