Fixed mobile vs desktop styling

This commit is contained in:
Notoric 2024-05-23 04:02:22 +01:00
parent 885b7087ff
commit c25e443c4d
2 changed files with 19 additions and 10 deletions

View File

@ -1,8 +1,8 @@
const menu = document.getElementById('menu'); const navbtn = document.getElementById('nav-btn');
menu.addEventListener('click', () => { navbtn.addEventListener('click', () => {
const header = document.getElementById('header'); const navbar = document.getElementById('navbar');
header.classList.toggle('expanded'); navbar.classList.toggle('expanded');
menu.classList.toggle('expanded'); navbtn.classList.toggle('expanded');
}); });

View File

@ -207,10 +207,6 @@ em {
display: none; display: none;
} }
body {
font-size: 30px;
}
#nav-btn { #nav-btn {
content: ""; content: "";
display: block; display: block;
@ -226,6 +222,7 @@ em {
width: 0.6em; width: 0.6em;
padding: 0px; padding: 0px;
transition: transform 0.5s ease; transition: transform 0.5s ease;
cursor: pointer;
} }
body::before { body::before {
@ -306,7 +303,7 @@ em {
#homepage-text { #homepage-text {
text-align: center; text-align: center;
max-width: 550px; max-width: 20em;
} }
#homepage-img { #homepage-img {
@ -322,3 +319,15 @@ em {
font-size: 3em; font-size: 3em;
} }
} }
@media (pointer: fine) and (hover: hover) {
body {
font-size: 16px;
}
}
@media (pointer: coarse) and (hover: none) {
body {
font-size: 30px;
}
}