Refactor CSS

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

assets/styles/application.template.scss

@@ -2,13 +2,27 @@
 // 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
 @import '@fontsource/mulish/500';
 @import '@fontsource/mulish/600';
 @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';
 @import './layouts/list';
@@ -32,6 +46,8 @@
 @import './sections/achievements';
 @import './sections/accomplishments';
 @import './sections/publications';
+@import './sections/footer';
+
 
 
 // override
@@ -61,4 +77,4 @@
       {{ end }}
     {{ end }}
   {{ end }}
-{{ end }}
+{{ end }}

assets/styles/components/buttons.scss

@@ -0,0 +1,93 @@
+.btn-dark {
+  background-color: $text-color !important;
+  border-color: $text-color !important;
+  color: $text-over-accent-color !important;
+  @include transition();
+
+  &:hover,
+  &:focus {
+    background-color: $accent-color !important;
+    border-color: $accent-color !important;
+    @include transition();
+  }
+}
+
+.btn-info {
+  background-color: $accent-color !important;
+  color: $text-over-accent-color !important;
+
+  &:hover,
+  &:focus {
+    background-color: $hover-over-accent-color !important;
+  }
+}
+
+.btn-outline-info {
+  color: $accent-color !important;
+  border-color: $accent-color !important;
+
+  &:hover,
+  &:focus {
+    background-color: $accent-color !important;
+    color: $text-over-accent-color !important;
+  }
+}
+
+.btn-link {
+  color: $accent-color;
+
+  &:hover,
+  &:focus {
+    color: $hover-over-accent-color;
+  }
+}
+
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: $muted-text-color;
+}
+
+.tags {
+  text-align: left;
+
+  li {
+    font-size: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    background: $accent-color;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+  }
+  a {
+    color: $text-over-accent-color;
+  }
+}
+
+.icon-button {
+  background-color: $text-color;
+  color: $text-over-accent-color !important;
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  border: none;
+
+  &:hover,
+  &:focus {
+    background-color: $accent-color !important;
+    @include transition();
+  }
+}
+
+.filled-button {
+  background-color: $accent-color !important;
+  color: $text-over-accent-color !important;
+  @include transition();
+
+  &:hover,
+  &:active {
+    background-color: $hover-over-accent-color !important;
+    @include transition();
+  }
+}

assets/styles/components/cards.scss

@@ -0,0 +1,88 @@
+.card {
+  box-shadow: none;
+  @include transition();
+  overflow: hidden;
+  background: $bg-card;
+
+  &:hover,
+  &:focus {
+    box-shadow: $box-shadow;
+    border: 1px solid $bg-primary;
+    @include transition();
+  }
+
+  .card-head {
+    height: 172px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .card-body {
+    text-align: justify;
+  }
+
+  .card-img-top {
+    @include transition();
+  }
+
+  .card-img-sm {
+    width: 32px;
+    height: 32px;
+  }
+
+  .card-img-xs {
+    width: 24px;
+    height: 24px;
+  }
+
+  .card-footer {
+    background: $bg-card !important;
+  }
+}
+
+.post-card {
+  width: 24rem;
+  display: inline-flex;
+
+  .post-card-link {
+    text-decoration: none;
+  }
+
+  .card {
+    margin: 5px;
+    position: relative;
+
+    &:hover,
+    &:focus {
+      .card-img-top {
+        transform: scale(1.2);
+        @include transition();
+      }
+    }
+
+    .card-body {
+      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 {
+      margin-top: auto;
+
+      span {
+        font-size: 10pt;
+        color: $muted-text-color !important;
+        padding-top: 5px;
+      }
+    }
+  }
+}

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;
+}

assets/styles/components/links.scss

@@ -0,0 +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: $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;
+    }
+  }
+  code {
+    color: $inline-code-color;
+  }
+}
+
+.anchor {
+  padding-top: 3.5rem;
+}