Refactor CSS (#785)

* Refactor CSS

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

* Refactor about section

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

* Refactor CSS for experiences section

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

* Update education section

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

* Update projects section

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

* Update publication + accomplishment section

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

* Update achievements section

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

* Refactor footer CSS

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

* Re-use section title adjustment css for top header

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

* Refactor navbar CSS

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

* Refactor sidebar CSS

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

* Use unified navbar for all pages

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

* Refactor 404 page CSS

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

* Refactor list page css

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

* Fix notes page css

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

* Refactor single page css

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

* Introduce color variables

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

---------

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

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();

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()
 })

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) {