Add style for form as p

articles/static/style.css

@@ -140,15 +140,25 @@ tr:hover {
     vertical-align: 15%;
 }
 
+form p .helptext::before {
+    content: "\A";
+    white-space: pre;
+}
+
 .helptext {
     color: var(--main3);
     font-size: 80%;
+    font-weight: normal;
 }
 
 .helptext a {
     color: var(--main3);
 }
 
+form .required {
+    font-weight: bold;
+}
+
 form table th {
     vertical-align: top;
 }
@@ -167,6 +177,10 @@ form {
     padding: 1em;
 }
 
+form, form p {
+    line-height: normal;
+}
+
 form button[type=submit] {
     font-size: 1em;
     padding: .9ex 1.2ex;
@@ -177,7 +191,7 @@ form button[type=submit] {
     cursor: pointer;
 }
 
-form table tr.error, form table tr.error .helptext, .errorlist {
+form .error, form .error .helptext, .errorlist {
     color: var(--error-text);
     background-color: var(--error-background);
 }
@@ -186,10 +200,11 @@ form table tr.error, form table tr.error .helptext, .errorlist {
     margin-top: 0;
     list-style-type: none;
     padding-left: 0;
+    margin-bottom: 0;
 }
 
-.errorlist.nonfield {
-    margin-bottom: 0;
+.errorlist + .error {
+    margin-top: 0;
 }
 
 .comment {

articles/templates/articles/article_detail.html

@@ -31,9 +31,9 @@
         {% endfor %}
         <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
             {% csrf_token %}
-            <table>
-                {{ form.as_table }}
-            </table>
+{#            <table>#}
+                {{ form.as_p }}
+{#            </table>#}
             <button type="submit">Submit</button>
             <p class="helptext">
                 Your comment may not be approved if it's not respectful, on topic or spammy.