From 9849b618794d9114704fecf274b5de219bd686e8 Mon Sep 17 00:00:00 2001
From: Harald Eilertsen <haraldei@anduin.net>
Date: Fri, 19 Jan 2018 18:17:28 +0100
Subject: A bit more styling and some markup fixes in forms.

---
 public/assets/application.css | 33 +++++++++++++++++++++++++++++++++
 templates/new_post.html       | 18 +++++++++---------
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/public/assets/application.css b/public/assets/application.css
index e25b890..299be36 100644
--- a/public/assets/application.css
+++ b/public/assets/application.css
@@ -3,3 +3,36 @@
   color: #dddd84;
   padding: 1mm;
 }
+
+form {
+  width: 40em;
+}
+
+.field, .actions {
+  padding: 2mm;
+}
+
+.field label {
+  display: block;
+  color: #64f;
+  font-weight: bold;
+}
+
+.field textarea {
+  width: 100%;
+  height: 15em;
+  padding: 2mm;
+}
+
+.field input[type=text] {
+  width: 100%;
+  padding: 1.2mm 0;
+}
+
+.checkbox label {
+  display: inline;
+}
+
+.actions {
+  display: block;
+}
diff --git a/templates/new_post.html b/templates/new_post.html
index a3a1a0f..7ef49dd 100644
--- a/templates/new_post.html
+++ b/templates/new_post.html
@@ -1,18 +1,18 @@
 <h1>Create a new post</h1>
 <form id="new_post" name="post" method="post" action="/posts/create">
-  <div class="field">
-    <label>Title:</label>
-    <input type="text" name="title" value="{{ post.title }}">
+  <div class="field string required">
+    <label for="post_title">Title:</label>
+    <input type="text" name="title" id="post_title" value="{{ post.title }}">
   </div>
 
-  <div class="field">
-    <label>Contents:</label>
-    <textarea name="body">{{ post.body }}</textarea>
+  <div class="field textarea required">
+    <label for="post_body">Contents:</label>
+    <textarea id="post_body" name="body">{{ post.body }}</textarea>
   </div>
 
-  <div class="field">
-    <input type="checkbox" checked="{{ post.published }}">
-    <label>Published</label>
+  <div class="field checkbox">
+    <input type="checkbox" id="post_published" checked="{{ post.published }}">
+    <label for="post_published">Published</label>
   </div>
 
   <div class="actions">
-- 
cgit v1.2.3