Make the website more mobile-friendly

This commit is contained in:
Bat 2018-05-12 18:59:38 +01:00
parent aefa31b84e
commit b68e481b3f
5 changed files with 38 additions and 3 deletions

View File

@ -26,7 +26,7 @@ fn details(name: String, conn: DbConn, user: Option<User>) -> Template {
json!({
"post": p,
"author": p.get_authors(&*conn)[0],
"url": p.compute_id(&*conn),
"url": format!("/~/{}/{}/", p.get_blog(&*conn).actor_id, p.slug),
"date": p.creation_date.timestamp()
})
}).collect::<Vec<serde_json::Value>>()

View File

@ -23,7 +23,7 @@ fn index(conn: DbConn, user: Option<User>) -> Template {
json!({
"post": p,
"author": p.get_authors(&*conn)[0],
"url": p.compute_id(&*conn),
"url": format!("/~/{}/{}/", p.get_blog(&*conn).actor_id, p.slug),
"date": p.creation_date.timestamp()
})
}).collect::<Vec<serde_json::Value>>()

View File

@ -32,7 +32,7 @@ fn details(name: String, conn: DbConn, account: Option<User>) -> Template {
json!({
"post": p,
"author": p.get_authors(&*conn)[0],
"url": p.compute_id(&*conn),
"url": format!("/~/{}/{}/", p.get_blog(&*conn).actor_id, p.slug),
"date": p.creation_date.timestamp()
})
}).collect::<Vec<serde_json::Value>>(),

View File

@ -21,6 +21,10 @@ header {
justify-content: space-between;
}
header #menu {
display: none;
}
header nav a {
margin: 0px 20px;
}
@ -101,3 +105,32 @@ textarea {
padding: 5px 10px;
margin: 0px 10px;
}
@media screen and (max-width: 500px) {
header {
padding: 20px 0px;
flex-direction: column;
}
header #menu {
display: flex;
}
header > nav {
display: none;
text-align: center;
}
header nav a {
padding: 10px;
}
header:focus-within > nav {
display: flex;
flex-direction: column;
}
input {
width: 100%;
}
}

View File

@ -3,10 +3,12 @@
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock title %} ⋅ Plume</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/main.css">
</head>
<body>
<header>
<nav id="menu"><a href="#">Menu</a></nav>
<nav>
<a href="/">Plume</a>
{% block header %}