From fff0d4bfed30bf0fba0e5d387aa753137a5806cc Mon Sep 17 00:00:00 2001 From: Phuntsok Drak-pa Date: Sun, 25 Aug 2019 04:48:03 +0200 Subject: [PATCH] Now light and dark themes available, remember theme with cookies --- css/dark.css | 31 +++++++++++++++++++++++ css/light.css | 31 +++++++++++++++++++++++ css/style.css | 59 +++++++++++++++++++++---------------------- headers/head-lvl0.org | 2 ++ headers/headers.org | 1 + js/main.js | 50 ++++++++++++++++++++++++++++++++---- 6 files changed, 139 insertions(+), 35 deletions(-) create mode 100644 css/dark.css create mode 100644 css/light.css diff --git a/css/dark.css b/css/dark.css new file mode 100644 index 0000000..32ef5fe --- /dev/null +++ b/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; +} diff --git a/css/light.css b/css/light.css new file mode 100644 index 0000000..9cb059b --- /dev/null +++ b/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; +} diff --git a/css/style.css b/css/style.css index 02c555d..fcdf7af 100644 --- a/css/style.css +++ b/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; +} diff --git a/headers/head-lvl0.org b/headers/head-lvl0.org index f78ad60..c0b92a0 100644 --- a/headers/head-lvl0.org +++ b/headers/head-lvl0.org @@ -5,6 +5,8 @@ #+HTML_HEAD: #+HTML_HEAD: +#+HTML_HEAD: +# #+HTML_HEAD: #+HTML_HEAD: #+HTML_HEAD: diff --git a/headers/headers.org b/headers/headers.org index 3d7d7f9..0c20f1c 100644 --- a/headers/headers.org +++ b/headers/headers.org @@ -22,6 +22,7 @@ #+HTML_DOCTYPE: html5 #+HTML_HEAD: +#+HTML_HEAD: #+HTML_HEAD: #+HTML_HEAD: #+HTML_HEAD: diff --git a/js/main.js b/js/main.js index 35eb2d7..82a0f96 100644 --- a/js/main.js +++ b/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,17 +26,47 @@ 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(){ + $('table').each(function() { $table = $(this); $table.before('
'); $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('
'); + } else { + $('body').append('
'); + $('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(''); + Cookies.set('theme', 'light'); + } else { + $('link[href="./css/light.css"]').attr('href', './css/dark.css'); + $('.themeBtn').html(''); + Cookies.set('theme', 'dark'); + } + }); +}