Simplified titles style and javascript

This commit is contained in:
Phuntsok Drak-pa 2019-09-03 03:35:33 +02:00
parent 556d774a5e
commit 33dd081747
2 changed files with 53 additions and 108 deletions

View File

@ -71,8 +71,8 @@ h2,
h3, h3,
h4, h4,
h5, h5,
h6,
legend { legend {
display: inline-block;
position: relative; position: relative;
font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif; font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
font-weight: 700; font-weight: 700;
@ -82,34 +82,67 @@ legend {
h1 { h1 {
font-size: 4em; font-size: 4em;
box-shadow: inset 0 -50px 0 #1abc9c;
} }
h2 { h2 {
font-size: 150%; font-size: 150%;
box-shadow: inset 0 -20px 0 #16a085;
} }
h3 { h3 {
font-size: 125%; font-size: 125%;
box-shadow: inset 0 -16px 0 #27ae60;
} }
h4 { h4 {
font-size: 115%; font-size: 115%;
box-shadow: inset 0 -15px 0 #e67e22;
} }
h5 { h5 {
font-size: 110%; font-size: 110%;
} box-shadow: inset 0 -14px 0 #9b59b6;
h6 {
font-size: 10%;
} }
h4, h4,
h5, h5 {
h6 {
font-weight: 300; 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-2,
.outline-3, .outline-3,
.outline-4, .outline-4,
@ -164,23 +197,6 @@ a.footref {
margin: 0 2px; 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 { .themeBtn {
position: fixed; position: fixed;
bottom: 25px; bottom: 25px;
@ -198,57 +214,3 @@ h5::after {
.themeBtn .fas { .themeBtn .fas {
font-size: 30px; 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
}

View File

@ -7,22 +7,21 @@ window.onload = function() {
}; };
function roll_elems() { 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 // 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); $header = $(this);
if (isEmpty($header.next())) {
$header.next().remove();
}
$header.click(function() { $header.click(function() {
$header.nextAll().each(function() { $header.nextAll().each(function() {
$(this).slideToggle(500); $(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 // Move the postamble in the content div
$('#postamble').appendTo($('#content')); $('#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 // Move each table in a div to handle large tables' overflow
$('table').each(function() { $('table').each(function() {
$table = $(this); $table = $(this);
@ -101,7 +85,6 @@ function isThemeLight() {
return light; return light;
} }
function isEmpty(el) { function isEmpty(el) {
return !$.trim(el.html()); return !$.trim(el.html());
} }