phundrak/langue-phundrak-com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Better titles

Browse Source
This commit is contained in:
Phuntsok Drak-pa 2019-08-26 16:58:30 +02:00
parent 9590408c7c
commit 0cdcc9f02b
2 changed files with 90 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css/style.css
View File

@ -58,9 +58,9 @@ td {
} }
.title { .title {
padding: 50px; padding: 0 20px;
background-color: #1abc9c;
color: #eee; color: #eee;
text-align: left;
} }
h1, h1,
@ -70,14 +70,15 @@ h4,
h5, h5,
h6, h6,
legend { legend {
cursor: pointer; 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;
margin-top: 0; margin-top: 0;
z-index: 20;
} }
h1 { h1 {
font-size: 170%; font-size: 4em;
} }
h2 { h2 {
@ -186,3 +187,57 @@ a.footref {
.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
}

35
js/main.js
View File

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