Make the website more mobile-friendly
This commit is contained in:
parent
aefa31b84e
commit
b68e481b3f
|
@ -26,7 +26,7 @@ fn details(name: String, conn: DbConn, user: Option<User>) -> Template {
|
||||||
json!({
|
json!({
|
||||||
"post": p,
|
"post": p,
|
||||||
"author": p.get_authors(&*conn)[0],
|
"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()
|
"date": p.creation_date.timestamp()
|
||||||
})
|
})
|
||||||
}).collect::<Vec<serde_json::Value>>()
|
}).collect::<Vec<serde_json::Value>>()
|
||||||
|
|
|
@ -23,7 +23,7 @@ fn index(conn: DbConn, user: Option<User>) -> Template {
|
||||||
json!({
|
json!({
|
||||||
"post": p,
|
"post": p,
|
||||||
"author": p.get_authors(&*conn)[0],
|
"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()
|
"date": p.creation_date.timestamp()
|
||||||
})
|
})
|
||||||
}).collect::<Vec<serde_json::Value>>()
|
}).collect::<Vec<serde_json::Value>>()
|
||||||
|
|
|
@ -32,7 +32,7 @@ fn details(name: String, conn: DbConn, account: Option<User>) -> Template {
|
||||||
json!({
|
json!({
|
||||||
"post": p,
|
"post": p,
|
||||||
"author": p.get_authors(&*conn)[0],
|
"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()
|
"date": p.creation_date.timestamp()
|
||||||
})
|
})
|
||||||
}).collect::<Vec<serde_json::Value>>(),
|
}).collect::<Vec<serde_json::Value>>(),
|
||||||
|
|
|
@ -21,6 +21,10 @@ header {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header #menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
header nav a {
|
header nav a {
|
||||||
margin: 0px 20px;
|
margin: 0px 20px;
|
||||||
}
|
}
|
||||||
|
@ -101,3 +105,32 @@ textarea {
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin: 0px 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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -3,10 +3,12 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>{% block title %}{% endblock title %} ⋅ Plume</title>
|
<title>{% block title %}{% endblock title %} ⋅ Plume</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="/static/main.css">
|
<link rel="stylesheet" href="/static/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
<nav id="menu"><a href="#">Menu</a></nav>
|
||||||
<nav>
|
<nav>
|
||||||
<a href="/">Plume</a>
|
<a href="/">Plume</a>
|
||||||
{% block header %}
|
{% block header %}
|
||||||
|
|
Loading…
Reference in New Issue