Fixed mobile vs desktop styling
This commit is contained in:
parent
885b7087ff
commit
c25e443c4d
|
@ -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');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
@ -321,4 +318,16 @@ em {
|
||||||
#name {
|
#name {
|
||||||
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;
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue