fix: padding + add: top/bottom buttons

This commit is contained in:
sadorowo 2024-03-16 11:03:32 +01:00
parent c683c7376c
commit 43ddcb23d8
5 changed files with 53 additions and 19 deletions

View File

@ -3,11 +3,14 @@ if (typeof age !== 'undefined') {
age.textContent = difference.toFixed(4); age.textContent = difference.toFixed(4);
} }
if (typeof arrow !== 'undefined') { if (typeof arrow_top !== 'undefined' && typeof arrow_bottom !== 'undefined') {
arrow.addEventListener('click', () => { [arrow_top, arrow_bottom].forEach(arrow => {
window.scrollTo({ arrow.addEventListener('click', () => {
top: document.body.scrollHeight, console.warn('scroll!')
behavior: 'smooth' window.scrollTo({
top: arrow === arrow_top ? 0 : document.body.scrollHeight,
behavior: 'smooth'
});
}); });
}); });
} }
@ -24,10 +27,9 @@ smoothScrollLinks.forEach(link => {
}); });
}); });
const switchTheme = document.getElementById('switch-theme');
const theme = localStorage.getItem('theme'); const theme = localStorage.getItem('theme');
switchTheme?.addEventListener('click', () => { switch_theme?.addEventListener('click', () => {
if (theme === 'dark') { if (theme === 'dark') {
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
} else { } else {

View File

@ -29,7 +29,7 @@ body#centered {
align-content: center; align-content: center;
} }
body>div { body>div:not([id]) {
display: grid; display: grid;
overflow-y: auto; overflow-y: auto;
place-items: center; place-items: center;
@ -37,13 +37,13 @@ body>div {
float: left; float: left;
height: 100%; height: 100%;
border: 1px solid;
width: calc(100% / var(--columns)); width: calc(100% / var(--columns));
} }
body>div:first-child #arrow { body>div:first-child #arrow {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 2em;
display: none; display: none;
cursor: pointer; cursor: pointer;
@ -88,8 +88,16 @@ ol li::before {
content: "✉ "; content: "✉ ";
} }
#switch-theme { #switch_theme {
color: blue; color: blue;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
body>#arrows {
display: none;
}
body>#arrows>div {
padding: 0.5em;
}

View File

@ -18,7 +18,7 @@ body.dark>div:first-child #arrow {
background-color: #fff; background-color: #fff;
} }
body > div:first-child #arrow { body>div:first-child #arrow {
background-color: var(--color); background-color: var(--color);
color: var(--background-color); color: var(--background-color);
} }
@ -27,6 +27,11 @@ body.dark a {
color: var(--color); color: var(--color);
} }
body.dark #switch-theme { body.dark #switch_theme {
color: var(--color); color: var(--color);
} }
body.dark>#arrows>div {
background-color: var(--color);
color: var(--background-color);
}

View File

@ -1,9 +1,25 @@
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
body > div { body>div {
width: 100% !important; width: 100% !important;
} }
body > div:first-child #arrow { body>div>div#inner {
display: block !important; 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;
} }
} }

View File

@ -46,9 +46,7 @@
</ul> </ul>
<h2><a href="#projects">go to top</a></h2> <h2><a href="#projects">go to top</a></h2>
<h2 id="switch-theme">switch theme</h2> <h2 id="switch_theme">switch theme</h2>
<div id="arrow"></div>
</div> </div>
</div> </div>
<div> <div>
@ -96,7 +94,7 @@
</li> </li>
</ul> </ul>
<h2 id="music-taste">my music taste</h2> <h2 id="music_taste">my music taste</h2>
<p>i'm a fan of:</p> <p>i'm a fan of:</p>
<ul> <ul>
<li> <li>
@ -220,6 +218,11 @@
they are the only ones that respect my privacy. i also use a vpn and a password manager.</p> they are the only ones that respect my privacy. i also use a vpn and a password manager.</p>
</div> </div>
</div> </div>
<div id="arrows">
<div id="arrow_top"></div>
<div id="arrow_bottom"></div>
</div>
</body> </body>
</html> </html>