tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more mobile refinements

Browse Source
This commit is contained in:
BenjaminToby 2021-06-07 07:08:45 +01:00
parent 0ab8abea69
commit 13c0f9e58a
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scripts/v2.js
View File

@ -155,6 +155,7 @@ sectionOneIo.observe(translate[4]);
//############################################################################## -- Hamburger //############################################################################## -- Hamburger
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle); document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
var logo = document.querySelector("header > a");
let hc = 0; let hc = 0;
@ -162,9 +163,12 @@ function hamburgerMenuToggle() {
if (hc == 0) { if (hc == 0) {
document.querySelector("nav").className = "nav-mobile"; document.querySelector("nav").className = "nav-mobile";
document.querySelector("#aside-heder-block").className = "aside-header-mobile"; document.querySelector("#aside-heder-block").className = "aside-header-mobile";
logo.style.color = "#222";
document.querySelector(".aside-header-mobile > a:first-child").style.color = "#222";
} else { } else {
document.querySelector("nav").className = "none"; document.querySelector("nav").className = "none";
document.querySelector("#aside-heder-block").className = "aside-header"; document.querySelector("#aside-heder-block").className = "aside-header";
logo.style.color = "inherit";
hc = -1; hc = -1;
} }
hc++; hc++;
@ -172,7 +176,7 @@ function hamburgerMenuToggle() {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
if(window.innerWidth > 800) { if(window.innerWidth > 1200) {
document.querySelector("nav").className = "none"; document.querySelector("nav").className = "none";
document.querySelector("#aside-heder-block").className = "aside-header"; document.querySelector("#aside-heder-block").className = "aside-header";
hc = 0; hc = 0;

4
v2.css
View File

@ -892,6 +892,10 @@ input:focus {
text-align: center; text-align: center;
} }
.aside-header-mobile > a:first-child {
color: #222;
}
.hamburger-wrapper { .hamburger-wrapper {
display: flex; display: flex;
} }

2
v2.html
View File

@ -56,7 +56,7 @@
</a> </a>
</div> </div>
<a class="hamburger-wrapper" href="#"> <a class="hamburger-wrapper" href="#hamburger">
<div class="hamburger-line"></div> <div class="hamburger-line"></div>
<div class="hamburger-line"></div> <div class="hamburger-line"></div>
<div class="hamburger-line"></div> <div class="hamburger-line"></div>