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

New mobile menu.

Browse Source
This commit is contained in:
Madeorsk 2018-09-01 16:11:42 +02:00
parent ec4b791727
commit 836897cdad
5 changed files with 115 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -6,3 +6,4 @@ rls
translations translations
po/*.po~ po/*.po~
.env .env
Rocket.toml

1
static/images/boxicon-menu.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 154 B

10
static/js/menu.js Normal file
View 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");
});
});

94
static/main.css
View File

@ -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 > * {

7
templates/base.html.tera
View File

@ -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 %}