fix: padding + add: top/bottom buttons
This commit is contained in:
parent
c683c7376c
commit
43ddcb23d8
@ -3,13 +3,16 @@ if (typeof age !== 'undefined') {
|
||||
age.textContent = difference.toFixed(4);
|
||||
}
|
||||
|
||||
if (typeof arrow !== 'undefined') {
|
||||
if (typeof arrow_top !== 'undefined' && typeof arrow_bottom !== 'undefined') {
|
||||
[arrow_top, arrow_bottom].forEach(arrow => {
|
||||
arrow.addEventListener('click', () => {
|
||||
console.warn('scroll!')
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
top: arrow === arrow_top ? 0 : document.body.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
|
||||
@ -24,10 +27,9 @@ smoothScrollLinks.forEach(link => {
|
||||
});
|
||||
});
|
||||
|
||||
const switchTheme = document.getElementById('switch-theme');
|
||||
const theme = localStorage.getItem('theme');
|
||||
|
||||
switchTheme?.addEventListener('click', () => {
|
||||
switch_theme?.addEventListener('click', () => {
|
||||
if (theme === 'dark') {
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
|
@ -29,7 +29,7 @@ body#centered {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
body>div {
|
||||
body>div:not([id]) {
|
||||
display: grid;
|
||||
overflow-y: auto;
|
||||
place-items: center;
|
||||
@ -37,13 +37,13 @@ body>div {
|
||||
|
||||
float: left;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
width: calc(100% / var(--columns));
|
||||
}
|
||||
|
||||
body>div:first-child #arrow {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
|
||||
@ -88,8 +88,16 @@ ol li::before {
|
||||
content: "✉ ";
|
||||
}
|
||||
|
||||
#switch-theme {
|
||||
#switch_theme {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body>#arrows {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body>#arrows>div {
|
||||
padding: 0.5em;
|
||||
}
|
@ -27,6 +27,11 @@ body.dark a {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
body.dark #switch-theme {
|
||||
body.dark #switch_theme {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
body.dark>#arrows>div {
|
||||
background-color: var(--color);
|
||||
color: var(--background-color);
|
||||
}
|
@ -3,7 +3,23 @@
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body > div:first-child #arrow {
|
||||
display: block !important;
|
||||
body>div>div#inner {
|
||||
padding: 0.5em !important;
|
||||
}
|
||||
|
||||
body>#arrows {
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
body>#arrows>div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
11
index.html
11
index.html
@ -46,9 +46,7 @@
|
||||
</ul>
|
||||
|
||||
<h2><a href="#projects">go to top</a></h2>
|
||||
<h2 id="switch-theme">switch theme</h2>
|
||||
|
||||
<div id="arrow">▼</div>
|
||||
<h2 id="switch_theme">switch theme</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -96,7 +94,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="music-taste">my music taste</h2>
|
||||
<h2 id="music_taste">my music taste</h2>
|
||||
<p>i'm a fan of:</p>
|
||||
<ul>
|
||||
<li>
|
||||
@ -220,6 +218,11 @@
|
||||
they are the only ones that respect my privacy. i also use a vpn and a password manager.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="arrows">
|
||||
<div id="arrow_top">▲</div>
|
||||
<div id="arrow_bottom">▼</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user