forked from Plume/Plume
New mobile menu.
This commit is contained in:
parent
ec4b791727
commit
836897cdad
5 changed files with 115 additions and 32 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -6,3 +6,4 @@ rls
|
|||
translations
|
||||
po/*.po~
|
||||
.env
|
||||
Rocket.toml
|
||||
|
|
|
|||
1
static/images/boxicon-menu.svg
Normal file
1
static/images/boxicon-menu.svg
Normal file
|
|
@ -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 |
10
static/js/menu.js
Normal file
10
static/js/menu.js
Normal file
|
|
@ -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 {
|
||||
background: #ECECEC;
|
||||
}
|
||||
header #content {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
background: #ECECEC;
|
||||
}
|
||||
|
||||
header #menu {
|
||||
header nav#menu {
|
||||
position: relative;
|
||||
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 {
|
||||
|
|
@ -483,31 +500,80 @@ form.new-post input[type="submit"] {
|
|||
* Small Screens *
|
||||
* ================= */
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
header {
|
||||
padding: 1em;
|
||||
@media screen and (max-width: 900px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header #menu {
|
||||
display: flex;
|
||||
header nav#menu {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
header > nav {
|
||||
header #content {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
header nav a, header nav a.title { padding: 0.5em; }
|
||||
header nav a.title {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-size: 1.75em;
|
||||
|
||||
@keyframes menuOpening {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
header:focus-within > nav {
|
||||
header #content.opened, header:focus-within #content {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
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 > * {
|
||||
|
|
|
|||
|
|
@ -6,27 +6,32 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="/static/main.css" />
|
||||
<link rel="stylesheet" href="/static/fontawesome-5.0.10/css/fontawesome-all.min.css" />
|
||||
<script src="/static/js/menu.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav id="menu"><a href="#">{{ "Menu" | _ }}</a></nav>
|
||||
<nav>
|
||||
<a href="/" class="title">{{ "Plume" | _ }}</a>
|
||||
<hr/>
|
||||
{% block header %}
|
||||
{% endblock header %}
|
||||
</nav>
|
||||
<nav>
|
||||
{% if account %}
|
||||
<a href="/dashboard">{{ "Dashboard" | _ }}</a>
|
||||
<a href="/notifications">{{ "Notifications" | _ }}</a>
|
||||
<a href="/me">{{ "My account" | _ }}</a>
|
||||
<a href="/logout">{{ "Log Out" | _ }}</a>
|
||||
{% else %}
|
||||
<a href="/login">{{ "Log In" | _ }}</a>
|
||||
<a href="/users/new">{{ "Register" | _ }}</a>
|
||||
{% endif %}
|
||||
<nav id="menu">
|
||||
<a href="#" aria-label="{{ "Menu" | _ }}" title="{{ "Menu" | _ }}"></a>
|
||||
</nav>
|
||||
<div id="content">
|
||||
<nav>
|
||||
<a href="/" class="title">{{ "Plume" | _ }}</a>
|
||||
<hr/>
|
||||
{% block header %}
|
||||
{% endblock header %}
|
||||
</nav>
|
||||
<nav>
|
||||
{% if account %}
|
||||
<a href="/dashboard">{{ "Dashboard" | _ }}</a>
|
||||
<a href="/notifications">{{ "Notifications" | _ }}</a>
|
||||
<a href="/me">{{ "My account" | _ }}</a>
|
||||
<a href="/logout">{{ "Log Out" | _ }}</a>
|
||||
{% else %}
|
||||
<a href="/login">{{ "Log In" | _ }}</a>
|
||||
<a href="/users/new">{{ "Register" | _ }}</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue