Style - Content border + background

3 files changed, 46 insertions, 47 deletions

diff --git a/blog.node5.net/static/article.css b/blog.node5.net/static/article.css
index 00cbdbc..d482ed4 100644
--- a/blog.node5.net/static/article.css
+++ b/blog.node5.net/static/article.css
@@ -8,15 +8,6 @@ img {
   background: unset !important;
 }
 
-pre:not(#comments) {
-  overflow: auto;
-  width: 100%;
-  display: inline-block;
-  border: 1px solid;
-  padding: 2px;
-  background: #111;
-}
-
 blockquote>p:before {
   content: "ℹ️";
   padding: 1em;
diff --git a/blog.node5.net/static/main.css b/blog.node5.net/static/main.css
index ed6dc8b..933fc61 100644
--- a/blog.node5.net/static/main.css
+++ b/blog.node5.net/static/main.css
@@ -142,6 +142,7 @@ tr:nth-child(even) {
 .entries {
 	padding: 0;
 	list-style: None;
+  margin: 0;
 }
 
 label{
@@ -162,12 +163,7 @@ max-height: 2em;
 }
 
 img {
-  border-radius: 0.1em;
-}
-
-/* Code highlight */
-pre:not(#comments) {
-	border-radius: 0.5em;
+  border-radius: 0.25em;
 }
 
 /* Background blurred image */
@@ -191,11 +187,19 @@ body:before {
     background-position: center;
 }
 
+/* Code highlight */
 pre:not(#comments) {
   overflow: auto;
   width: 100%;
   display: inline-block;
-  border: 1px solid;
-  padding: 2px;
   background: #111;
 }
+
+.container {
+  border-style: solid;
+  border-color: #1baaaa;
+  border-radius: 0.5em;
+  background-color: #050b11d4;
+  border-width: 0.175em;
+  padding: 0.5em;
+}
diff --git a/blog.node5.net/templates/base.html b/blog.node5.net/templates/base.html
index d064d6b..2a5285f 100644
--- a/blog.node5.net/templates/base.html
+++ b/blog.node5.net/templates/base.html
@@ -19,42 +19,46 @@
     </a><span id="motd" class="grey inline">{{ motd }}</span>
     <br>
 
-    {% block content %}
-    {% endblock %}
+    <div id="content" class="container">
+      {% block content %}
+      {% endblock %}
+    </div>
 
-    <hr>
+    <br>
 
-    <h2>Comments</h2>
+    <div id="comments" class="container">
+      <h2>Comments</h2>
 
-    <form action="/comment" method="post">
-        {{ 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>
+      <form action="/comment" method="post">
+          {{ 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">
-<pre>{{ comments }}</pre>
-    </pre>{% else %}*No comments*{% endif %}
+      {{ comments_sql | safe }}
+      {% if comments and comments|length > 0 %}<pre id="comments">
+      <pre>{{ comments }}</pre>
+      </pre>{% else %}*No comments*{% endif %}
+  </div>
 
 </div>
 <div id="footer">