PirateCare
/
Syllabus
23
1
Fork 1
Code Issues 6 Pull Requests Releases Wiki Activity

hiding topic title & toc+has_ when scrolled...

This commit is contained in:
Marcell Mars 2020-08-23 04:22:16 +02:00
parent 9cb68e45d5
commit eae85ceb05
2 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/sandpoints.js Normal file
View File

@ -0,0 +1,28 @@
window.addEventListener('scroll', function(e) {
let element = document.querySelector('.topicstitle')
let topicbar = document.querySelector('.topicbar')
let grid = document.querySelector('.grid')
let rect = element.getBoundingClientRect();
if (rect.top < 12 && !grid.classList.contains('moved')) {
topicbar.style.display = "inline";
element.style.visibility = "hidden";
grid.classList.add('moved');
grid.style.display = "none";
window.scrollBy({top: grid.clientHeight + element.clientHeight, behavior: 'smooth'})
} else if (rect.top > 11 && grid.classList.contains('moved')) {
grid.style.display = "grid";
grid.classList.remove('moved');
topicbar.style.display = "none";
element.style.visibility = "visible";
window.scroll({top: 0, behavior: 'smooth'})
}
})
window.addEventListener('DOMContentLoaded', (e) => {
console.log("SHUFFLE!")
let par = document.querySelector("#TableOfContents > ol:first-child > li:first-child");
let s = document.createElement("span");
s.appendChild(par.cloneNode(true))
par.remove()
document.querySelector("#TableOfContents > ol:first-child").insertBefore(s, document.querySelector("#TableOfContents > ol:first-child").firstChild)
})

38
themes/sandpoints/assets/css/site.css
View File

@ -424,6 +424,7 @@ template {
body {
font-family: 'Vollkorn', serif;
font-weight: 400;
max-width: 1024px;
width: 80%;
font-size: 1.4rem;
padding-left: 3rem;
@ -481,7 +482,6 @@ body {
}
#TableOfContents {
position: relative;
margin-left: -2rem;
margin-top: -1.5rem;
}
@ -500,19 +500,18 @@ body {
font-style: normal;
}
#TableOfContents > ol:first-child > li:first-child> a::after {
#TableOfContents > ol:first-child > span > li > a::after {
content: "¶";
color: rgba(0, 0, 0, 0.2);
font-size: 1.3em;
position: absolute;
margin-top: -0.3em;
top: 0;
padding-left: 0.1em;
}
.rightcolumn {
grid-column: 2;
display: grid;
grid-template-columns: auto 1fr;
padding-left: 0.5rem;
}
.has {
@ -522,19 +521,9 @@ body {
.content {
margin-top: 4rem;
padding-left: 3rem;
padding-right: 6rem;
padding-right: 10rem;
max-width: 720px;
}
/*
a::after {
color: white;
content: "..";
}
a:hover::after {
color: white;
content: ".";
}
*/
a {
color: black;
@ -561,12 +550,22 @@ h2 {
h3 {
font-weight: 500;
font-size: 1.5rem;
font-size: 1.4rem;
}
h4 {
font-weight: 500;
font-size: 1.4rem;
font-size: 1.2rem;
}
h5 {
font-weight: 500;
font-size: 1.1rem;
}
h6 {
font-weight: 500;
font-size: 1rem;
}
blockquote {
@ -613,7 +612,6 @@ h2 + p:first-letter {
margin-top: -0.4em;
}
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}