78 lines
3.0 KiB
HTML
78 lines
3.0 KiB
HTML
<!-- main div start -->
|
|
<section class="container mx-auto relative pt-20 md:pt-[180px]">
|
|
<div class="top-rect">
|
|
</div>
|
|
<div class="h-[375px] absolute min-w-[107%] overflow-x-clip">
|
|
<img src="{{ site.baseurl }}{{page.icon}}" class="absolute leading-[0px] top-[150px] w-[50%] left-auto right-[50px] opacity-50" alt="{{guide.title}}" loading="lazy">
|
|
</div>
|
|
<div class="relative z-20 md:flex">
|
|
<div class="px-5 md:flex pt-10">
|
|
<!-- left section -->
|
|
<div class="w-full md:w-1/4 sticky self-start top-10 mr-16 h-full">
|
|
<a href="{{ site.baseurl }}learn">
|
|
<div class="flex text-grey opacity-50 cursor-pointer mb-5">
|
|
<img src="{{ site.baseurl }}images/icon/arrow-left.svg" alt="arrow-left" loading="lazy">
|
|
<p class="ml-5 hidden md:block">Back</p>
|
|
</div>
|
|
</a>
|
|
<div class="relative h-full hidden md:block guide-sidebar">
|
|
<div class="relative guide grid mt-5">
|
|
{% toc %}
|
|
</div>
|
|
<div class="absolute right-[2px] top-0 w-[1px] bg-border-line h-full"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right section -->
|
|
<article class="w-full md:w-3/4 md:pr-20 snap">
|
|
<h1 class="text-[32px] md:text-[64px] font-semibold text-black md:pb-0 font-bold mb-0">{{page.title}}</h1>
|
|
<div class="content guide-content">
|
|
{{ content | output_modder }}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<script>
|
|
const guideTocMenus = document.querySelectorAll(".toc-entry");
|
|
|
|
for (let li of guideTocMenus) {
|
|
li.addEventListener("click", function(){
|
|
// 1. Remove Class from All Lis
|
|
for (let li of guideTocMenus) {
|
|
li.classList.remove('guide-active');
|
|
}
|
|
|
|
// 2. Add Class to Relevant Li
|
|
this.classList.add('guide-active');
|
|
});
|
|
}
|
|
|
|
window.addEventListener('load', () => {
|
|
const headings = document.querySelectorAll('h2 a[name]');
|
|
|
|
document.addEventListener('scroll', (e) => {
|
|
headings.forEach(ha => {
|
|
const rect = ha.getBoundingClientRect();
|
|
if(rect.top > 0 && rect.top < 200) {
|
|
const location = window.location.toString().split('#')[0];
|
|
history.replaceState(null, null, location + '#' + ha.name);
|
|
|
|
for (let li of guideTocMenus) {
|
|
const aHref = li.getElementsByTagName('a')[0].getAttribute("href");
|
|
|
|
if(aHref === ('#' + ha.name)) {
|
|
li.classList.add('guide-active');
|
|
} else {
|
|
li.classList.remove('guide-active');
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|