New mobile menu.
This commit is contained in:
Madeorsk
parent
ec4b791727
commit
836897cdad
|
|
@ -6,3 +6,4 @@ rls
|
||||||
translations
|
translations
|
||||||
po/*.po~
|
po/*.po~
|
||||||
.env
|
.env
|
||||||
|
Rocket.toml
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#F4F4F4"/></svg>
|
||||||
|
After Width: | Height: | Size: 154 B |
|
|
@ -0,0 +1,10 @@
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
let content = document.getElementById("content");
|
||||||
|
document.getElementById("menu").querySelector("a").addEventListener("click", () => {
|
||||||
|
content.classList.add("opened");
|
||||||
|
});
|
||||||
|
content.addEventListener("click", (e) => {
|
||||||
|
if (e.target === content)
|
||||||
|
content.classList.remove("opened");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -25,14 +25,31 @@ a, a:visited {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
background: #ECECEC;
|
||||||
|
}
|
||||||
|
header #content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: #ECECEC;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header #menu {
|
header nav#menu {
|
||||||
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
|
transform: skewX(-15deg);
|
||||||
|
left: -1em;
|
||||||
|
padding: 1em 1em 1em 2em;
|
||||||
|
background: #7765E3;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
header nav#menu a {
|
||||||
|
transform: skewX(15deg);
|
||||||
|
width: 1.75em;
|
||||||
|
height: 1.75em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: url("/static/images/boxicon-menu.svg") no-repeat center;
|
||||||
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
header nav {
|
header nav {
|
||||||
|
|
@ -483,31 +500,80 @@ form.new-post input[type="submit"] {
|
||||||
* Small Screens *
|
* Small Screens *
|
||||||
* ================= */
|
* ================= */
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 900px) {
|
||||||
header {
|
header {
|
||||||
padding: 1em;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
header #menu {
|
header nav#menu {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav {
|
header #content {
|
||||||
display: none;
|
display: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
header nav a, header nav a.title { padding: 0.5em; }
|
|
||||||
header nav a.title {
|
@keyframes menuOpening {
|
||||||
width: 100vw;
|
from {
|
||||||
margin: 0;
|
transform: scaleX(0);
|
||||||
border: none;
|
transform-origin: left;
|
||||||
font-size: 1.75em;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header:focus-within > nav {
|
to {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: left;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header #content.opened, header:focus-within #content {
|
||||||
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
animation: 0.2s menuOpening;
|
||||||
|
}
|
||||||
|
header #content.opened::before, header:focus-within #content::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
transform: skewX(-10deg);
|
||||||
|
top: 0;
|
||||||
|
left: -20%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
z-index: -10;
|
||||||
|
|
||||||
|
background: #7765E3;
|
||||||
|
}
|
||||||
|
header #content.opened > nav, header:focus-within #content > nav {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
header #content.opened > nav a, header:focus-within #content > nav a {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
color: #F4F4F4;
|
||||||
|
font-size: 1.4em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
header #content.opened > nav a.title, header:focus-within #content > nav a.title {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
header #content.opened > nav hr, header:focus-within #content > nav hr {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
border: solid #F4F4F4 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > main > * {
|
body > main > * {
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,14 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="stylesheet" href="/static/main.css" />
|
<link rel="stylesheet" href="/static/main.css" />
|
||||||
<link rel="stylesheet" href="/static/fontawesome-5.0.10/css/fontawesome-all.min.css" />
|
<link rel="stylesheet" href="/static/fontawesome-5.0.10/css/fontawesome-all.min.css" />
|
||||||
|
<script src="/static/js/menu.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav id="menu"><a href="#">{{ "Menu" | _ }}</a></nav>
|
<nav id="menu">
|
||||||
|
<a href="#" aria-label="{{ "Menu" | _ }}" title="{{ "Menu" | _ }}"></a>
|
||||||
|
</nav>
|
||||||
|
<div id="content">
|
||||||
<nav>
|
<nav>
|
||||||
<a href="/" class="title">{{ "Plume" | _ }}</a>
|
<a href="/" class="title">{{ "Plume" | _ }}</a>
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
@ -27,6 +31,7 @@
|
||||||
<a href="/users/new">{{ "Register" | _ }}</a>
|
<a href="/users/new">{{ "Register" | _ }}</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue