Add form for creating a new thread

3 years ago · b070a59d3d
parent f30d196457
commit b070a59d3d
2 changed files with 45 additions and 0 deletions
--- a/src/www/new_thread.html
+++ b/src/www/new_thread.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>kchan - {name}</title>
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<header>
+		<div class="wrap">
+			<nav>
+				<span>kchan &ndash;</span>
+				<a href="#">index</a>
+				<a href="#">faq</a>
+				<a href="#">new thread</a>
+			</nav>
+		</div>
+	</header>
+	<main>
+		<div class="wrap slim">
+			<h1>Create new thread</h1>
+			<form method="post">
+				<input type="text" placeholder="Title (optional)">
+				<textarea rows="10" placeholder="Content" required></textarea>
+				<input type="file" required>
+				<input type="submit" value="Create">
+			</form>
+		</div>
+	</main>
+</head>
+</html>
--- a/src/www/style.css
+++ b/src/www/style.css
@ -2,6 +2,8 @@
 	max-width: 60rem;
 	margin: 0 auto;
 }
+.wrap.slim { max-width: 40rem }
+
 body {
 	margin: 0;
 	box-sizing: border-box;
@ -60,6 +62,17 @@ article .image-info {
 	margin-bottom: .5rem;
 }

+form {
+	display: flex;
+	flex-direction: column;
+}
+form input, form textarea {
+	margin-bottom: 1rem;
+	padding: .5rem;
+}
+form input[type=file] { padding: 0 }
+form input[type=submit] { max-width: 20rem }
+
@media screen and (max-width: 900px) {
 	article img { width: 10rem }
 }
@ -67,4 +80,5 @@ article .image-info {
 	body { font-size: 16px }
 	article img { width: 6rem }
 	article .meta { flex-direction: column-reverse }
+	form input[type=submit] { max-width: 100% }
 }