add custom css

frontend/js/accordion.js

+document.addEventListener("DOMContentLoaded", function () {
+
+    var acc = document.getElementsByClassName("accordion");
+    var i;
+
+    for (i = 0; i < acc.length; i++) {
+        acc[i].addEventListener("click", function() {
+            this.classList.toggle("active");
+            var panel = this.nextElementSibling;
+            if (panel.style.display === "block") {
+                panel.style.display = "none";
+            } else {
+                panel.style.display = "block";
+            }
+        });
+    }
+
+});
\ No newline at end of file

frontend/main.js

@@ -15,6 +15,10 @@ import './styles/login.css'
 import './styles/toolbar.css'
 import './styles/breadcrumbs.css'
 import './styles/fn.css'
+import './styles/accordion.css'
+import './styles/texts.css'
+import './styles/tree.css'
+
 
 import './styles/admin.css'
 //import './styles/fontawesone.css'
@@ -23,6 +27,7 @@ import './js/burger.js'
 import './js/speech.js'
 import './js/scrollup.js'
 import './js/background.js'
+import './js/accordion.js'
 //import './js/search.js'
 //import './js/toc.js'
 

frontend/styles/accordion.css

+.accordion {
+    background-color: #eee;
+    color: #444;
+    cursor: pointer;
+    margin-top: 12px;
+    padding: 12px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    transition: 0.4s;
+}
+
+.active, .accordion:hover {
+    background-color: #ccc; 
+}
+
+.panel {
+    margin: 12px 0;
+    padding: 12px 18px;
+    display: none;
+    background-color: white;
+    overflow: hidden;
+}
\ No newline at end of file

frontend/styles/texts.css

+.txt-right{
+    text-align: right;
+}
+
+.txt-center{
+    text-align: center;
+}    
\ No newline at end of file

frontend/styles/tree.css

+.title {
+    padding: 3px 0 0;
+    display: block;
+}
+
+.tree {
+    padding: 0;
+  --spacing : 24px;
+  --radius  : 10px;
+  margin-left: -12px;
+}
+
+.tree li{
+  display      : block;
+  position     : relative;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+}
+
+.tree ul{
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 0;
+  margin-top: -3px;
+}
+
+.tree ul li{
+  border-left : 2px solid #ddd;
+}
+
+.tree ul li:last-child{
+  border-color : transparent;
+}
+
+.tree ul li:before{
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) / -2);
+  left         : -2px;
+  width        : calc(var(--spacing) + var(--radius));
+  height       : calc(var(--spacing) + 1px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+.tree summary{
+  display : block;
+  cursor  : pointer;
+  padding: 3px 0;
+}
+
+.tree summary:marker,
+.tree summary:-webkit-details-marker{
+  display : none;
+}
+
+.tree summary:focus{
+  outline : none;
+}
+
+.tree summary:focus-visible{
+  outline : 1px dotted #000;
+}
+
+.tree summary:before{
+  content       : '';
+  display       : block;
+  position      : absolute;
+  top           : calc(var(--spacing) / 2 - var(--radius));
+  left          : calc(var(--spacing) - var(--radius) - 1px);
+  width         : calc(2 * var(--radius));
+  height        : calc(2 * var(--radius));
+  background    : #ddd;
+}
+
+.tree summary:before{
+  content     : '+';
+  z-index     : 1;
+  color       : #fff;
+  line-height : calc(2 * var(--radius) - 2px);
+  text-align  : center;
+}
+
+.tree details[open] > summary:before{
+  content : '−';
+}
\ No newline at end of file