Revamp comments style like sql statements

4 files changed, 51 insertions, 29 deletions

diff --git a/blog.node5.net/static/comment_section.css b/blog.node5.net/static/comment_section.css
index ff190f6..5e74ab8 100644
--- a/blog.node5.net/static/comment_section.css
+++ b/blog.node5.net/static/comment_section.css
@@ -1,7 +1,18 @@
-input, textarea {
-    color: white;
-    background: black;
-    border-color: white;
-    border-width: 1px;
-    border-radius: 4px;
-}
\ No newline at end of file
+input, textarea, select {
+    background: transparent;
+    border: 0.2em solid #eee;
+    border-radius: 0.3em;
+    color:white;
+    padding: 0.5em;
+}
+
+textarea:focus, input:focus, select:focus {
+    outline: none;
+    border: 0.2em solid #00ffff;
+}
+
+#comment {
+  width: 90%;
+  margin: 1em 0;
+}
+
diff --git a/blog.node5.net/static/main.css b/blog.node5.net/static/main.css
index 86cd455..c7b153f 100644
--- a/blog.node5.net/static/main.css
+++ b/blog.node5.net/static/main.css
@@ -122,3 +122,12 @@ label{
 #motd img{
 max-height: 2em;
 }
+
+img {
+  border-radius: 0.2em;
+}
+
+/* Code highlight */
+pre:not(#comments) {
+	border-radius: 0.5em;
+}
diff --git a/blog.node5.net/templates/article.html b/blog.node5.net/templates/article.html
index 8c56a14..1164eb6 100644
--- a/blog.node5.net/templates/article.html
+++ b/blog.node5.net/templates/article.html
@@ -3,7 +3,6 @@
 {% block head %}
 	{{ super() }}
 	<link rel="stylesheet" type="text/css" href="/article.css">
-	<link rel="stylesheet" type="text/css" href="/pygmentize_code_highlight.css">
 	<link rel="stylesheet" type="text/css" href="/devicons.css">
 {% endblock %}
 {% block content %}
diff --git a/blog.node5.net/templates/base.html b/blog.node5.net/templates/base.html
index a872fb6..71335a5 100644
--- a/blog.node5.net/templates/base.html
+++ b/blog.node5.net/templates/base.html
@@ -4,6 +4,7 @@
     {% block head %}
     <link rel="stylesheet" href="/main.css"/>
     <link rel="stylesheet" type="text/css" href="/comment_section.css">
+    <link rel="stylesheet" type="text/css" href="/pygmentize_code_highlight.css">
     <title>{% block title_prefix %}{% endblock %}{{title}}</title>
     <link rel="icon" type="image/x-icon" href="https://node5.net/static/dmg_01.png">
     <meta charset="UTF-8">
@@ -25,29 +26,31 @@
     <h2>Comments</h2>
 
     <form action="/comment" method="post">
-        <label for="nickname">Nickname <span class="grey">(optional)</span></label><br>
-        <input type="text" id="nickname" name="nickname">
-        <br><br>
-
-        <label title="If you have a blog too, leave the url here to show it off"
-               for="visitor_url">Your website URL <span class="grey">(optional)</span></label><br>
-        <input type="text" id="visitor_url" name="visitor_url">
-        <br><br>
-
-        <label title="If you wish for me to be able to contact you, leave any means of contacting you here."
-               for="contact">Means of contacting you <span class="grey">(optional)</span></label><br>
-        <input type="text" id="contact" name="contact">
-        <label for="show_contact">Show publicly</label>
-        <input type="checkbox" id="show_contact" name="show_contact" checked>
-        <br><br>
-
-        <label for="comment">Comment, </label>
-        <label title="Or just post it to the person behind this website" for="public">Show publicly (entire comment)</label>
-        <input type="checkbox" id="public" name="public" checked><br>
-        <textarea class="width-100" rows="4" id="comment" required name="comment" id="comment"></textarea><br><br>
-        <input type="submit" value="Post comment" /> <small>(Will await approval before becoming public)</small>
+        {{ insert_sql_pretty | safe }}
+          <input placeholder="Nickname (optional)" type="text" id="nickname" name="nickname" title="Your name"><code>, </code>
+          <input placeholder="Your website URL" type="text" id="visitor_url" name="visitor_url"
+                 title="If you have a website too, leave the url here to show it off"><code>, </code>
+          <input placeholder="Means of contacting you" type="text" id="contact" name="contact"
+                 title="If you wish for me to be able to contact you, leave e.g: a phone number email or anything here."><code>, </code>
+          <select name="show_contact" id="show_contact">
+            <option value="">--Show contact publicly--</option>
+            <option value="on">TRUE</option>
+            <option value="off">FALSE</option>
+          </select><code>, </code>
+          <select name="public" id="public">
+            <option value="">--Show comment publicly--</option>
+            <option value="on">TRUE</option>
+            <option value="off">FALSE</option>
+          </select><code>, </code>
+          <br>
+          <textarea placeholder="Type your comment here" rows="4" id="comment" required name="comment" id="comment"></textarea>
+        <code>);</code><br>
+        <input type="submit" id="post-comment" value="Post comment" /> <small class="grey">(Will await approval before becoming public)</small>
     </form>
+
     <br>
+
+    {{ comments_sql | safe }}
     {% if comments and comments|length > 0 %}<pre id="comments">
 {{ comments }}
     </pre>{% else %}*No comments*{% endif %}