refactor: reduce custom CSS

_includes/mermaid.html

@@ -45,7 +45,7 @@
     [...basicList].forEach((elem) => {
       const svgCode = elem.textContent;
       const backup = elem.parentElement;
-      backup.classList.add('unloaded');
+      backup.classList.add('d-none');
       /* create mermaid node */
       let mermaid = document.createElement('pre');
       mermaid.classList.add('mermaid');

_includes/search-results.html

@@ -1,6 +1,6 @@
 <!-- The Search results -->
 
-<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
+<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
   <div class="col-11 content">
     <div id="search-hints">
       {% include_cached trending-tags.html %}

_javascript/modules/components/search-display.js

@@ -14,8 +14,8 @@ const input = document.getElementById('search-input');
 const hints = document.getElementById('search-hints');
 
 // CSS class names
-const LOADED = 'loaded';
-const UNLOADED = 'unloaded';
+const LOADED = 'd-block';
+const UNLOADED = 'd-none';
 const FOCUS = 'input-focus';
 const FLEX = 'd-flex';
 

_sass/addon/commons.scss

@@ -596,26 +596,6 @@ main {
 
 /* --- Effects classes --- */
 
-.loaded {
-  display: block !important;
-
-  @at-root .d-flex#{&} {
-    display: flex !important;
-  }
-}
-
-.unloaded {
-  display: none !important;
-}
-
-.visible {
-  visibility: visible !important;
-}
-
-.hidden {
-  visibility: hidden !important;
-}
-
 .flex-grow-1 {
   flex-grow: 1 !important;
 }