Baptiste Gelez
GitHub
commit
c4543312b7
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 |
100
static/main.css
100
static/main.css
@ -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) {
|
||||
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: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 > * {
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user