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

Merge branch 'master' of github.com:Plume-org/Plume

Browse Source
This commit is contained in:
Bat 2018-09-01 18:33:00 +01:00
commit 5cb994c15b
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 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

100
static/main.css
View File

@ -24,8 +24,7 @@ a, a:visited {
small { small {
margin-left: 1em; margin-left: 1em;
color: #242424; color: rgba(36, 36, 36, 0.6);
opacity: 0.6;
font-size: 0.75em; font-size: 0.75em;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
@ -54,14 +53,31 @@ small {
*/ */
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 {
@ -452,6 +468,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
z-index: -20;
} }
.badge { .badge {
margin-left: 1em; margin-left: 1em;
@ -555,31 +572,80 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
* 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;
}
to {
transform: scaleX(1);
transform-origin: left;
opacity: 1;
}
} }
header:focus-within > nav { 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: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 > * { body > main > * {

38
templates/base.html.tera
View File

@ -9,24 +9,28 @@
</head> </head>
<body> <body>
<header> <header>
<nav id="menu"><a href="#">{{ "Menu" | _ }}</a></nav> <nav id="menu">
<nav> <a href="#" aria-label="{{ "Menu" | _ }}" title="{{ "Menu" | _ }}"></a>
<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> </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> </header>
<main> <main>
{% block content %} {% block content %}