Add some JavaScript to open an close the mobile menu
Fixes #75 but still works in Firefox mobile without JS (and it will in Chrome/Safari too once :focus-within will be implemented there)
This commit is contained in:
parent
0f5f9101b6
commit
6c80002e43
@ -803,7 +803,7 @@ figcaption {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header:focus-within #content {
|
header:focus-within #content, #content.show {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -817,7 +817,7 @@ figcaption {
|
|||||||
|
|
||||||
animation: 0.2s menuOpening;
|
animation: 0.2s menuOpening;
|
||||||
}
|
}
|
||||||
header:focus-within #content::before {
|
header:focus-within #content::before, #content.show::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: skewX(-10deg);
|
transform: skewX(-10deg);
|
||||||
@ -830,11 +830,11 @@ figcaption {
|
|||||||
|
|
||||||
background: #7765E3;
|
background: #7765E3;
|
||||||
}
|
}
|
||||||
header:focus-within #content > nav {
|
header:focus-within #content > nav, #content.show > nav {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
header:focus-within #content > nav a {
|
header:focus-within #content > nav a, #content.show > nav a {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -844,19 +844,22 @@ figcaption {
|
|||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
header:focus-within #content > nav a > *:first-child { width: 3rem; }
|
header:focus-within #content > nav a > *:first-child,
|
||||||
header:focus-within #content > nav a > img:first-child { height: 3rem; }
|
#content.show > nav a > *:first-child { width: 3rem; }
|
||||||
header:focus-within #content > nav a > *:last-child { margin-left: 1rem; }
|
header:focus-within #content > nav a > img:first-child,
|
||||||
header:focus-within #content > nav a.title {
|
#content.show > nav a > img:first-child { height: 3rem; }
|
||||||
|
header:focus-within #content > nav a > *:last-child,
|
||||||
|
#content.show > nav a > *:last-child { margin-left: 1rem; }
|
||||||
|
header:focus-within #content > nav a.title, #content.show > nav a.title {
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
}
|
}
|
||||||
header:focus-within #content > nav hr {
|
header:focus-within #content > nav hr, #content.show > nav hr {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: solid #F4F4F4 0.1rem;
|
border: solid #F4F4F4 0.1rem;
|
||||||
}
|
}
|
||||||
header:focus-within #content > nav a .mobile-label {
|
header:focus-within #content > nav a .mobile-label, #content.show > nav a .mobile-label {
|
||||||
display: initial;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
13
static/js/menu.js
Normal file
13
static/js/menu.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// It should normally be working fine even without this code
|
||||||
|
// But :focus-within is not yet supported by Webkit/Blink
|
||||||
|
|
||||||
|
const button = document.getElementById('menu')
|
||||||
|
const menu = document.getElementById('content')
|
||||||
|
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
menu.classList.add('show')
|
||||||
|
})
|
||||||
|
|
||||||
|
menu.addEventListener('click', () => {
|
||||||
|
menu.classList.remove('show')
|
||||||
|
})
|
@ -65,5 +65,6 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="/static/js/menu.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user