aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some JavaScript to open an close the mobile menu

Browse Source 
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:
Bat
2018-09-08 14:05:38 +01:00
parent 0f5f9101b6
commit 6c80002e43
3 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+13 -10
View File
@@ -803,7 +803,7 @@ figcaption {
}
}
header:focus-within #content {
header:focus-within #content, #content.show {
position: fixed;
display: flex;
flex-direction: column;
@@ -817,7 +817,7 @@ figcaption {
animation: 0.2s menuOpening;
}
header:focus-within #content::before {
header:focus-within #content::before, #content.show::before {
content: "";
position: absolute;
transform: skewX(-10deg);
@@ -830,11 +830,11 @@ figcaption {
background: #7765E3;
}
header:focus-within #content > nav {
header:focus-within #content > nav, #content.show > nav {
flex-direction: column;
align-items: flex-start;
}
header:focus-within #content > nav a {
header:focus-within #content > nav a, #content.show > nav a {
display: flex;
flex-direction: row;
align-items: center;
@@ -844,19 +844,22 @@ figcaption {
font-size: 1.4em;
font-weight: 300;
}
header:focus-within #content > nav a > *:first-child { width: 3rem; }
header:focus-within #content > nav a > img:first-child { height: 3rem; }
header:focus-within #content > nav a > *:last-child { margin-left: 1rem; }
header:focus-within #content > nav a.title {
header:focus-within #content > nav a > *:first-child,
#content.show > nav a > *:first-child { width: 3rem; }
header:focus-within #content > nav a > img:first-child,
#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;
}
header:focus-within #content > nav hr {
header:focus-within #content > nav hr, #content.show > nav hr {
display: block;
margin: 0;
width: 100%;
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;
}