Now light and dark themes available, remember theme with cookies

This commit is contained in:
Phuntsok Drak-pa 2019-08-25 04:48:03 +02:00
parent 6a993740f5
commit fff0d4bfed
6 changed files with 139 additions and 35 deletions

31
css/dark.css Normal file
View File

@ -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;
}

31
css/light.css Normal file
View File

@ -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;
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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" />

View File

@ -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');
}
});
}