dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-25 14:14:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

add smooth scrolling & add relative to absolute links converter

Browse Source
This commit is contained in:
M Sarmad Qadeer
2022-08-18 18:05:40 +05:00
parent a412ffc90c
commit 1c22af4846
2 changed files with 99 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_includes/layouts/article.html
+40 -7
View File
@@ -71,22 +71,55 @@
window.addEventListener("click", (e) => {
if (e.target.tagName === "A") {
e.preventDefault();
if (e.target.href.split("#")[1]) {
const id = e.target.href.split("#")[1];
if (e.target.getAttribute("href").split("#")[0] == "") {
const id = e.target.getAttribute("href").split("#")[1];
const element = document.getElementById(id);
const yOffset = -80; // Offset for fixed header
const yOffset = 0; // Offset for fixed header
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({
top: y,
behavior: 'smooth'
});
} else {
window.open(e.target.href, "_blank");
}
else {
window.open(e.target.href, "_self");
}
}
});
// convert relative blog links to absolute links
document.querySelectorAll("a").forEach((a) => {
const dotSepList = a.getAttribute("href").split(".");
if (dotSepList[0] == "") {
const hashSepList = dotSepList[dotSepList.length - 1].split("#")
if (hashSepList[0] == "md") {
let str = `/blog${dotSepList[1]}`;
for (let i = 2; i < dotSepList.length; i++) {
if (dotSepList[i].substring(0, 2) != "md") {
str += "." + dotSepList[i];
} else break;
}
if (hashSepList[1]) {
str += "#" + hashSepList[1];
}
a.setAttribute("href", str);
}
}
});
const url = window.location.href;
const hash = url.split("#")[1];
if (hash) {
console.log("entered")
const element = document.getElementById(hash);
const yOffset = 0; // Offset for fixed header
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({
top: y,
behavior: 'smooth'
});
}
</script>
</body>
website/src/css/blog.css
+59 -41
View File
@@ -1,58 +1,76 @@
h1{
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.6px;
h1 {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.6px;
}
section.container > div > p:nth-child(2){
margin: 0;
margin-bottom: 2rem;
margin-top: 4px;
font-size: 1rem;
section.container > div > p:nth-child(2) {
margin: 0;
margin-bottom: 2rem;
margin-top: 4px;
font-size: 1rem;
}
h2{
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 1rem;
margin-top: 2.2rem;
h2 {
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 1rem;
margin-top: 2.2rem;
}
h3{
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 1rem;
margin-top: 1.8rem;
h3 {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 1rem;
margin-top: 1.8rem;
}
ul li,ol li{
text-decoration: none;
/* list-style: none; */
font-size: 1.1rem;
line-height: 30px;
letter-spacing: 0.6px;
margin: 0.5rem 0;
ul li,
ol li {
text-decoration: none;
/* list-style: none; */
font-size: 1.1rem;
line-height: 30px;
letter-spacing: 0.6px;
margin: 0.5rem 0;
}
ul,ol{
list-style-position: inside;
/* list-style-type: decimal; */
overflow: auto;
ul,
ol {
list-style-position: inside;
/* list-style-type: decimal; */
overflow: auto;
}
ul li::marker, ol li::marker{
/* content: "-> "; */
font-weight: 600;
/* color: #fbd561; */
ul li::marker,
ol li::marker {
/* content: "-> "; */
font-weight: 600;
/* color: #fbd561; */
}
pre{
overflow: auto;
pre {
overflow: auto;
}
/* code{
width: 100%;
height: auto;
} */
p{
margin: 1rem 0;
}
p {
margin: 1rem 0;
}
html {
scroll-behavior: smooth;
}
h1::before,
h2::before,
h3::before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
pointer-events: none;
}