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

Merge pull request #180 from Madeorsk/mobile-menu

Browse Source 
New mobile menu
This commit is contained in:
Baptiste Gelez 2018-09-01 18:29:35 +01:00 committed by GitHub
commit c4543312b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 106 additions and 34 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
po/*.po~
.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

98
static/main.css
View File

@ -24,8 +24,7 @@ a, a:visited {
small {
margin-left: 1em;
color: #242424;
opacity: 0.6;
color: rgba(36, 36, 36, 0.6);
font-size: 0.75em;
word-wrap: break-word;
word-break: break-all;
@ -54,14 +53,31 @@ small {
*/
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 {
@ -452,6 +468,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
flex-direction: row;
align-items: center;
margin-bottom: 0;
z-index: -20;
}
.badge {
margin-left: 1em;
@ -555,31 +572,80 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
* Small Screens *
* ================= */
@media screen and (max-width: 500px) {
@media screen and (max-width: 900px) {
header {
padding: 1em;
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: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:focus-within #content::before {
content: "";
position: absolute;
transform: skewX(-10deg);
top: 0;
left: -20%;
width: 100%;
height: 100%;
z-index: -10;
background: #7765E3;
}
header:focus-within #content > nav {
flex-direction: column;
align-items: flex-start;
}
header:focus-within #content > nav a {
margin: 0;
padding: 1rem 1.5rem;
color: #F4F4F4;
font-size: 1.4em;
font-weight: 300;
}
header:focus-within #content > nav a.title {
font-size: 1.8em;
}
header:focus-within #content > nav hr {
display: block;
margin: 0;
width: 100%;
border: solid #F4F4F4 0.1rem;
}
body > main > * {

38
templates/base.html.tera
View File

@ -9,24 +9,28 @@
</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 %}