Simplified titles style and javascript

css/style.css

@@ -71,8 +71,8 @@ h2,
 h3,
 h4,
 h5,
-h6,
 legend {
+    display: inline-block;
     position: relative;
     font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
     font-weight: 700;
@@ -82,34 +82,67 @@ legend {
 
 h1 {
     font-size: 4em;
+    box-shadow: inset 0 -50px 0 #1abc9c;
 }
 
 h2 {
     font-size: 150%;
+    box-shadow: inset 0 -20px 0 #16a085;
 }
 
 h3 {
     font-size: 125%;
+    box-shadow: inset 0 -16px 0 #27ae60;
 }
 
 h4 {
     font-size: 115%;
+    box-shadow: inset 0 -15px 0 #e67e22;
 }
 
 h5 {
     font-size: 110%;
-}
+    box-shadow: inset 0 -14px 0 #9b59b6;
-
-h6 {
-    font-size: 10%;
 }
 
 h4,
-h5,
+h5 {
-h6 {
     font-weight: 300;
 }
 
+h2,
+h3,
+h4,
+h5 {
+    cursor: pointer;
+}
+
+h2::after,
+h3::after,
+h4::after,
+h5::after {
+    content: "➤";
+    margin-left: 20px;
+    display: inline-block;
+}
+
+.footnotes {
+    cursor: default !important;
+}
+
+.footnotes::after {
+    content: "" !important;
+    margin: 0 !important;
+}
+
+.rotated::after {
+    -webkit-transform: rotate(var(--after-rotation));
+    -moz-transform: rotate(var(--after-rotation));
+    -o-transform: rotate(var(--after-rotation));
+    -ms-transform: rotate(var(--after-rotation));
+    transform: rotate(var(--after-rotation));
+}
+
 .outline-2,
 .outline-3,
 .outline-4,
@@ -164,23 +197,6 @@ a.footref {
     margin: 0 2px;
 }
 
-h2::after,
-h3::after,
-h4::after,
-h5::after {
-    content: "➤";
-    margin-left: 20px;
-    display: inline-block;
-}
-
-.rotated::after {
-    -webkit-transform: rotate(var(--after-rotation));
-    -moz-transform: rotate(var(--after-rotation));
-    -o-transform: rotate(var(--after-rotation));
-    -ms-transform: rotate(var(--after-rotation));
-    transform: rotate(var(--after-rotation));
-}
-
 .themeBtn {
     position: fixed;
     bottom: 25px;
@@ -198,57 +214,3 @@ h5::after {
 .themeBtn .fas {
     font-size: 30px;
 }
-
-.h1-container, .header-container {
-    display: inline-block;
-}
-
-.header-container {
-    cursor: pointer;
-    /* margin-bottom: -20px; */
-}
-
-.highlight-h1,
-.highlight-h2,
-.highlight-h3,
-.highlight-h4,
-.highlight-h5 {
-    position: relative;
-    left: -10px;
-    width: 120%;
-    max-width: 90vw;
-    z-index: 0;
-    width: auto !important;
-    margin-bottom: -20px;
-}
-
-.highlight-h1 {
-    background-color: #1abc9c !important;
-    height: 50px;
-    top: -60px
-}
-
-.highlight-h2 {
-    background-color: #16a085 !important;
-    height: 20px;
-    top: -40px
-}
-
-.highlight-h3 {
-    background-color: #27ae60 !important;
-    height: 20px;
-    top: -38px
-}
-
-.highlight-h4 {
-    background-color: #e67e22 !important;
-    height: 16px;
-    top: -40px;
-    width: 110%
-}
-
-.highlight-h5 {
-    background-color: #9b59b6 !important;
-    height: 14px;
-    top: -44px
-}

js/main.js

@@ -7,22 +7,21 @@ window.onload = function() {
 };
 
 function roll_elems() {
-    // Add the possibility for all headers to roll what follows them
-    ['h2', 'h3', 'h4', 'h5', 'h6'].forEach(htitle => {
-        $(htitle).addClass('rolled');
-    });
-
-    // Except for the footnotes
-    $('.footnotes').removeClass('rolled');
-
     // Make the rollable headers actually rollable and rolled
-    $('.header-container').each(function($header) {
+    $(".outline-2").each(function() {
+        ['h2', 'h3', 'h4', 'h5', 'h6'].forEach(htitle => {
+            $(this).find(htitle).each(function($header) {
                 $header = $(this);
+                if (isEmpty($header.next())) {
+                    $header.next().remove();
+                }
                 $header.click(function() {
                     $header.nextAll().each(function() {
                         $(this).slideToggle(500);
                     });
-            $header.find('>:first-child').toggleClass('rotated');
+                    $header.toggleClass('rotated');
+                });
+            });
         });
     });
 }
@@ -38,21 +37,6 @@ function reorganize_html() {
     // Move the postamble in the content div
     $('#postamble').appendTo($('#content'));
 
-    // Move to container the various heads
-    [2, 3, 4, 5, 6].forEach(htitle => {
-        $('h' + htitle).each(function() {
-            $header = $(this);
-            $header.before('<div class="header-container"><div class="highlight-h' +
-                htitle + '"></div></div>');
-            $header.prependTo($header.prev());
-        });
-        $('.outline-text-' + htitle).each(function() {
-            if (isEmpty($(this))) {
-                $(this).remove();
-            }
-        });
-    });
-
     // Move each table in a div to handle large tables' overflow
     $('table').each(function() {
         $table = $(this);
@@ -101,7 +85,6 @@ function isThemeLight() {
     return light;
 }
 
-
 function isEmpty(el) {
     return !$.trim(el.html());
 }