Now light and dark themes available, remember theme with cookies

css/dark.css

@@ -0,0 +1,31 @@
+body {
+    background-color: #34495e;
+    color: #ecf0f1;
+}
+
+a {
+    color: #ecf0f1;
+}
+
+th,
+td {
+    border: 1px solid #263646;
+}
+
+table {
+    border: 2px solid #263646;
+}
+
+thead tr {
+    background-color: #34495e;
+}
+
+.outline-2,
+#footnotes,
+#postamble {
+    background-color: #2c3e50;
+}
+
+.themeBtn {
+    color: #ecf0f1;
+}

css/light.css

@@ -0,0 +1,31 @@
+body {
+    background-color: #eee;
+    color: #444;
+}
+
+a {
+    color: #444;
+}
+
+th,
+td {
+    border: 1px solid #444;
+}
+
+table {
+    border: 2px solid #444;
+}
+
+thead tr {
+    background-color: #ddd;
+}
+
+.outline-2,
+#footnotes,
+#postamble {
+    background-color: #eee;
+}
+
+.themeBtn {
+    color: #ecf0f1;
+}

css/style.css

@@ -13,8 +13,6 @@
 }
 
 body {
-    background-color: #34495e;
-    color: #ecf0f1;
     font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
     font-weight: normal;
     overflow-x: hidden;
@@ -26,7 +24,7 @@ body {
 #content {
     max-width: 1100px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 2px;
 }
 
 img,
@@ -36,7 +34,6 @@ table {
 
 a {
     text-decoration: none;
-    color: #ecf0f1;
     box-shadow: inset 0 -3px 0 #9b59b6;
     transition: all .3s ease-out;
 }
@@ -55,19 +52,6 @@ td {
     padding: 10px;
 }
 
-th,
-td {
-    border: 1px solid #263646;
-}
-
-table {
-    border: 2px solid #263646;
-}
-
-thead tr {
-    background-color: #34495e;
-}
-
 .vertical {
     writing-mode: vertical-rl;
     text-align: right;
@@ -92,16 +76,6 @@ legend {
     margin-top: 0;
 }
 
-h1:before,
-h2:before,
-h3:before,
-h4:before,
-h5:before,
-h6:before,
-    {
-    content: '>';
-}
-
 h1 {
     font-size: 170%;
 }
@@ -142,14 +116,21 @@ h6 {
 .outline-text-4,
 .outline-text-5,
 .outline-text-6 {
-    margin: 0 10px;
+    margin: 0 2px;
     padding: 0 10px;
 }
 
+.outline-text-2,
+.outline-text-3,
+.outline-text-4,
+.outline-text-5,
+.outline-text-6 {
+    margin-bottom: 20px;
+}
+
 .outline-2,
 #footnotes,
 #postamble {
-    background-color: #2c3e50;
     box-shadow: 5px 5px 7px rgba(1, 1, 1, .6);
     margin: 20px;
     padding: 20px;
@@ -168,7 +149,8 @@ h6 {
     display: none;
 }
 
-.largetable {
+.largetable,
+.figure {
     display: block;
     overflow-x: auto;
 }
@@ -187,3 +169,20 @@ a.footref {
     content: "⌄";
     padding-left: 20px;
 }
+
+.themeBtn {
+    position: fixed;
+    bottom: 25px;
+    right: 25px;
+    padding-top:10px;
+    height: 40px;
+    width: 50px;
+    border-radius: 25px;
+    background-color: #1e5b50;
+    text-align: center;
+    box-shadow: 3px 3px 6px rgba(1, 1, 1, .6);
+}
+
+.themeBtn .fas {
+    font-size: 30px;
+}

headers/head-lvl0.org

@@ -5,6 +5,8 @@
 
 #+HTML_HEAD: <link rel="stylesheet" href="./css/htmlize.min.css"/>
 #+HTML_HEAD: <link rel="stylesheet" href="./css/style.css"/>
+#+HTML_HEAD: <link id="theme" rel="stylesheet" href="./css/dark.css"/>
+# #+HTML_HEAD: <link id="theme" rel="stylesheet" href="./css/light.css"/>
 
 #+HTML_HEAD: <script src="./js/jquery.min.js"></script>
 #+HTML_HEAD: <script src="./js/main.js"></script>

headers/headers.org

@@ -22,6 +22,7 @@
 
 #+HTML_DOCTYPE: html5
 #+HTML_HEAD: <script src="https://kit.fontawesome.com/4d42d0c8c5.js"></script>
+#+HTML_HEAD: <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
 #+HTML_HEAD: <link rel="shortcut icon" href="https://cdn.phundrak.fr/img/mahakala-128x128.png" type="img/png" media="screen" />
 #+HTML_HEAD: <link rel="shortcut icon" href="https://cdn.phundrak.fr/img/favicon.ico" type="image/x-icon" media="screen" />
 #+HTML_HEAD: <meta property="og:image" content="https://cdn.phundrak.fr/img/rich_preview.png" />

js/main.js

@@ -1,6 +1,16 @@
+/*jshint esversion: 6 */
+
+var light = false;
+
 window.onload = function() {
+    roll_elems();
+    reorganize_html();
+    create_theme_switcher();
+};
+
+function roll_elems() {
     // Add the possibility for all headers to roll what follows them
-    ['h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(htitle){
+    ['h2', 'h3', 'h4', 'h5', 'h6'].forEach(htitle => {
         $(htitle).addClass('rolled');
     });
 
@@ -16,12 +26,14 @@ window.onload = function() {
         $header.toggleClass('unrolled');
         $header.toggleClass('rolled');
     });
+}
 
+function reorganize_html() {
     // Move the title out of the content div
-    $('.title').prependTo($("body"));
+    $('.title').prependTo($('body'));
 
     // Move the postamble in the content div
-    $('#postamble').appendTo($("#content"));
+    $('#postamble').appendTo($('#content'));
 
     // Move each table in a div to handle large tables' overflow
     $('table').each(function() {
@@ -29,4 +41,32 @@ window.onload = function() {
         $table.before('<div class="largetable"></div>');
         $table.prependTo($table.prev());
     });
-};
+}
+
+function create_theme_switcher() {
+    // If no theme cookie is found, set dark by default
+    if (Cookies.get('theme') == null) {
+        Cookies.set('theme', 'dark');
+    }
+
+    // set the css and button depending on the cookie found, dark is default
+    if (Cookies.get('theme') == 'dark') {
+        $('body').append('<div class="themeBtn"><i class="fas fa-sun"></i></div>');
+    } else {
+        $('body').append('<div class="themeBtn"><i class="fas fa-moon"></i></div>');
+        $('link[href="./css/dark.css"]').attr('href', './css/light.css');
+    }
+
+    // switch CSS files and button icon, set new cookie
+    $('.themeBtn').click(function() {
+        if (Cookies.get('theme') == 'dark') {
+            $('link[href="./css/dark.css"]').attr('href', './css/light.css');
+            $('.themeBtn').html('<i class="fas fa-moon"></i>');
+            Cookies.set('theme', 'light');
+        } else {
+            $('link[href="./css/light.css"]').attr('href', './css/dark.css');
+            $('.themeBtn').html('<i class="fas fa-sun"></i>');
+            Cookies.set('theme', 'dark');
+        }
+    });
+}