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!({ | ||||
|                 "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>>() | ||||
|  | ||||
| @ -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>>() | ||||
|  | ||||
| @ -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>>(), | ||||
|  | ||||
| @ -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%; | ||||
|     } | ||||
| } | ||||
|  | ||||
| @ -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 %} | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user