Add form for creating a new thread

doctorpavel
Emil Miler 3 years ago
parent f30d196457
commit b070a59d3d

@ -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>

@ -2,6 +2,8 @@
max-width: 60rem; max-width: 60rem;
margin: 0 auto; margin: 0 auto;
} }
.wrap.slim { max-width: 40rem }
body { body {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
@ -60,6 +62,17 @@ article .image-info {
margin-bottom: .5rem; 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) { @media screen and (max-width: 900px) {
article img { width: 10rem } article img { width: 10rem }
} }
@ -67,4 +80,5 @@ article .image-info {
body { font-size: 16px } body { font-size: 16px }
article img { width: 6rem } article img { width: 6rem }
article .meta { flex-direction: column-reverse } article .meta { flex-direction: column-reverse }
form input[type=submit] { max-width: 100% }
} }

Loading…
Cancel
Save