Better titles

css/style.css

@@ -58,9 +58,9 @@ td {
 }
 
 .title {
-    padding: 50px;
-    background-color: #1abc9c;
+    padding: 0 20px;
     color: #eee;
+    text-align: left;
 }
 
 h1,
@@ -70,14 +70,15 @@ h4,
 h5,
 h6,
 legend {
-    cursor: pointer;
+    position: relative;
     font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
     font-weight: 700;
     margin-top: 0;
+    z-index: 20;
 }
 
 h1 {
-    font-size: 170%;
+    font-size: 4em;
 }
 
 h2 {
@@ -186,3 +187,57 @@ a.footref {
 .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

@@ -3,9 +3,10 @@
 var light = false;
 
 window.onload = function() {
-    roll_elems();
+    $("#table-of-contents").remove();
     reorganize_html();
     create_theme_switcher();
+    roll_elems();
 };
 
 function roll_elems() {
@@ -17,24 +18,42 @@ function roll_elems() {
     // Except for the footnotes
     $('.footnotes').removeClass('rolled');
 
-    // Make the rollable headers actually rollable and rolled
-    $('.rolled').click(function() {
+    // // Make the rollable headers actually rollable and rolled
+    $('.header-container').each(function($header) {
         $header = $(this);
+        $header.click(function() {
             $header.nextAll().each(function() {
                 $(this).slideToggle(500);
             });
-        $header.toggleClass('unrolled');
-        $header.toggleClass('rolled');
+            $header.find('>:first-child').toggleClass('unrolled');
+            $header.find('>:first-child').toggleClass('rolled');
+        });
     });
 }
 
 function reorganize_html() {
     // Move the title out of the content div
-    $('.title').prependTo($('body'));
+    $('#content').before('<div class="h1-container"><div class="highlight-h1"></div></div>');
+    $('.title').prependTo($('.h1-container'));
 
     // 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);
@@ -71,3 +90,7 @@ function create_theme_switcher() {
         }
     });
 }
+
+function isEmpty( el ){
+    return !$.trim(el.html())
+}