Simplified titles style and javascript
This commit is contained in:
Phuntsok Drak-pa
parent
556d774a5e
commit
33dd081747
118
css/style.css
118
css/style.css
@ -71,8 +71,8 @@ h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
legend {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
@ -82,34 +82,67 @@ legend {
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
box-shadow: inset 0 -50px 0 #1abc9c;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 150%;
|
||||
box-shadow: inset 0 -20px 0 #16a085;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 125%;
|
||||
box-shadow: inset 0 -16px 0 #27ae60;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 115%;
|
||||
box-shadow: inset 0 -15px 0 #e67e22;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 10%;
|
||||
box-shadow: inset 0 -14px 0 #9b59b6;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h5 {
|
||||
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-3,
|
||||
.outline-4,
|
||||
@ -164,23 +197,6 @@ a.footref {
|
||||
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 {
|
||||
position: fixed;
|
||||
bottom: 25px;
|
||||
@ -198,57 +214,3 @@ h5::after {
|
||||
.themeBtn .fas {
|
||||
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
|
||||
}
|
||||
|
||||
43
js/main.js
43
js/main.js
@ -7,22 +7,21 @@ window.onload = function() {
|
||||
};
|
||||
|
||||
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
|
||||
$('.header-container').each(function($header) {
|
||||
$header = $(this);
|
||||
$header.click(function() {
|
||||
$header.nextAll().each(function() {
|
||||
$(this).slideToggle(500);
|
||||
$(".outline-2").each(function() {
|
||||
['h2', 'h3', 'h4', 'h5', 'h6'].forEach(htitle => {
|
||||
$(this).find(htitle).each(function($header) {
|
||||
$header = $(this);
|
||||
if (isEmpty($header.next())) {
|
||||
$header.next().remove();
|
||||
}
|
||||
$header.click(function() {
|
||||
$header.nextAll().each(function() {
|
||||
$(this).slideToggle(500);
|
||||
});
|
||||
$header.toggleClass('rotated');
|
||||
});
|
||||
});
|
||||
$header.find('>:first-child').toggleClass('rotated');
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -38,21 +37,6 @@ function reorganize_html() {
|
||||
// Move the postamble in the content div
|
||||
$('#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
|
||||
$('table').each(function() {
|
||||
$table = $(this);
|
||||
@ -101,7 +85,6 @@ function isThemeLight() {
|
||||
return light;
|
||||
}
|
||||
|
||||
|
||||
function isEmpty(el) {
|
||||
return !$.trim(el.html());
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user