improved the way anchors work
All checks were successful
Jenkins
Web/pipeline/head This commit looks good

This commit is contained in:
Ell 2023-02-12 12:18:45 +01:00
parent 0e73603716
commit 5e60b8feba
9 changed files with 24 additions and 39 deletions

View file

@ -1,6 +1,5 @@
<span class="anchor" id="about"></span>
<div class="list-display rounded"> <div class="list-display rounded">
<h1>💬 About</h1> <h1 id="about">💬 About</h1>
<p> <p>
Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be interesting to you! Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be interesting to you!
</p> </p>

View file

@ -1,11 +1,11 @@
<span class="anchor" id="blog"></span>
<span class="anchor" id="blog-all"></span>
{% for tag in site.tags %}
<span class="anchor" id="blog-{{ tag[0] | slugify }}"></span>
{% endfor %}
<div class="list-display rounded"> <div class="list-display rounded">
<h1>📔 Blog</h1> <h1 id="blog">
<span id="blog-all"></span>
{% for tag in site.tags %}
<span id="blog-{{ tag[0] | slugify }}"></span>
{% endfor %}
📔 Blog
</h1>
<p> <p>
This is my blog, where I post about gaming, programming and life. The featured posts are the ones you'll probably be most interested in, but you can select a different category to see every post. This is my blog, where I post about gaming, programming and life. The featured posts are the ones you'll probably be most interested in, but you can select a different category to see every post.
</p> </p>

View file

@ -1,6 +1,5 @@
<span class="anchor" id="projects"></span>
<div class="list-display rounded"> <div class="list-display rounded">
<h1>💻 Projects</h1> <h1 id="projects">💻 Projects</h1>
<p> <p>
Here is a list of some of my bigger projects as well as some things you might know me from.<br> Here is a list of some of my bigger projects as well as some things you might know me from.<br>
<span class="text-muted">For a more exhaustive list of my projects, you can also check out the <a href="#social">Social</a> section.</span> <span class="text-muted">For a more exhaustive list of my projects, you can also check out the <a href="#social">Social</a> section.</span>

View file

@ -1,6 +1,5 @@
<span class="anchor" id="social"></span>
<div class="list-display rounded"> <div class="list-display rounded">
<h1>🔗 Social</h1> <h1 id="social">🔗 Social</h1>
<p> <p>
These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me. These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me.
</p> </p>

View file

@ -1,6 +1,5 @@
<span class="anchor" id="support"></span>
<div class="list-display rounded"> <div class="list-display rounded">
<h1>💸 Support Me</h1> <h1 id="support">💸 Support Me</h1>
<p> <p>
Most of the projects you know me from, I work on in my free time, but by supporting me, you help out with all of my projects equally. As I'm a student, a bit of extra cash is always helpful for me, and it feels especially good when it comes from something that I enjoy doing a lot. Most of the projects you know me from, I work on in my free time, but by supporting me, you help out with all of my projects equally. As I'm a student, a bit of extra cash is always helpful for me, and it feels especially good when it comes from something that I enjoy doing a lot.
<br><span class="text-muted">Please only support me if you have money to spare. Always take care of your own finances first.</span> <br><span class="text-muted">Please only support me if you have money to spare. Always take care of your own finances first.</span>

View file

@ -30,7 +30,7 @@
<script src="/scripts/main.js"></script> <script src="/scripts/main.js"></script>
</head> </head>
<body data-spy="scroll" data-target="#navbar"> <body data-spy="scroll" data-target="#navbar" data-offset="140">
{% include nav/navbar.html %} {% include nav/navbar.html %}
<!-- Content --> <!-- Content -->

View file

@ -35,8 +35,7 @@ function populateManual(lang) {
let name = lines[0].substring(lines[0].indexOf("=") + 1); let name = lines[0].substring(lines[0].indexOf("=") + 1);
let id = lines[0].match(/chapter\.([^\.]*)\.name/)[1]; let id = lines[0].match(/chapter\.([^\.]*)\.name/)[1];
sidebar.append(`<a href=#${id}>${name}</a>`); sidebar.append(`<a href=#${id}>${name}</a>`);
t += `<a class="anchor" id="${id}"></a>`; t += `<h1 id="${id}">${name}</h1>`;
t += `<h1>${name}</h1>`;
// following lines are content // following lines are content
for (let i = 1; i < lines.length; i++) { for (let i = 1; i < lines.length; i++) {
let text = lines[i].substring(lines[i].indexOf("=") + 1); let text = lines[i].substring(lines[i].indexOf("=") + 1);

View file

@ -1,3 +1,7 @@
html {
scroll-padding-top: 40px;
}
body { body {
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-display: swap; font-display: swap;
@ -74,13 +78,6 @@ body {
padding: 15px; padding: 15px;
} }
.anchor {
display: block;
position: relative;
top: -40px;
visibility: hidden;
}
.sellout { .sellout {
display: flex; display: flex;
align-items: center; align-items: center;

View file

@ -1,4 +1,5 @@
html { html {
scroll-padding-top: 136px;
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
@ -12,10 +13,9 @@ body {
} }
sup { sup {
scroll-margin-top: 70px; scroll-margin-top: -66px;
} }
.main { .main {
margin-top: 20px; margin-top: 20px;
margin-bottom: 40px; margin-bottom: 40px;
@ -114,13 +114,6 @@ sup {
display: none; display: none;
} }
.anchor {
display: block;
position: relative;
top: -46px;
visibility: hidden;
}
.blog-button:link, .blog-button:link,
.blog-button:visited { .blog-button:visited {
color: black; color: black;