Baptiste Gelez
GitHub
commit
c4543312b7
|
|
@ -6,3 +6,4 @@ rls
|
||||||
translations
|
translations
|
||||||
po/*.po~
|
po/*.po~
|
||||||
.env
|
.env
|
||||||
|
Rocket.toml
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
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 > * {
|
||||||
|
|
|
||||||
|
|
@ -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 %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue