Update article page

4 files changed, 50 insertions, 14 deletions

diff --git a/blog/views.py b/blog/views.py
index 9fd2b10e..4c10af31 100644
--- a/blog/views.py
+++ b/blog/views.py
@@ -118,6 +118,13 @@ def post(request, slug):
             if p.find('br') is not None:
                 p.decompose()
 
+        # separate the body in two parts -> the first paragraph and the rest
+        first_paragraph = soup.find('p')
+        if first_paragraph is not None:
+            first_paragraph = str(first_paragraph)
+            soup.find('p').decompose()
+
+        post.first_paragraph = first_paragraph
         post.body = str(soup)
 
 
diff --git a/static/css/styles.css b/static/css/styles.css
index 3df5c61e..819e974f 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -13,6 +13,10 @@ body {
     box-sizing: border-box;
 }
 
+input, textarea {
+    font-family: 'Mali', sans-serif !important;
+}
+
 #bg-video {
     position: fixed;
     right: 0;
@@ -116,7 +120,7 @@ kbd {
 
 blockquote {
     border-left: solid 4px #a591ee;
-    width: 650px;
+    /* width: 650px; */
     margin: 0px auto;
     padding: 8px;
     background: #2f2f2f;
@@ -313,6 +317,18 @@ blockquote {
     text-align: justify;
 }
 
+#article {
+    padding: 0px;
+    display: block;
+    clear: both;
+    width: 730px;
+}
+
+#article-body {
+    width: 730px;
+    margin: 0px 10px;
+}
+
 #article-body img,
 #editor-container img {
     height: 300px;
diff --git a/templates/blog/home.html b/templates/blog/home.html
index a0fe6b47..391c510e 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -49,7 +49,7 @@
 </div>
 {% if posts %}
 <div id="recent-posts" class="mtctitem">
-  <h2 style="margin-bottom: -20px;">Recent Posts</h2>
+  <h2>Recent Posts</h2>
   {% include 'blog/partials/post_list.html' %}
 </div>
 {% endif %}
diff --git a/templates/blog/post.html b/templates/blog/post.html
index f5227e25..701d0b28 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -1,18 +1,31 @@
 {% extends 'blog/partials/base.html' %} {% block content %}
 {% load static %}
+{% load tz %}
 <div id="article" class="mtsbitem">
-    <img src="{% url 'ignis:post_image' '730' post.id %}.gif" alt="Cover Image" style="width: 730px; margin: 0 auto; display: block;">
-    <h1>{{ post.title }}</h1>
-    <p style="line-height: 1.6em;">
-        Posted on <em><u>{{ post.date | date:"M d, Y" }}</u></em> by <em><a href="{% url 'blog:user_activity' post.author %}">{{ post.author }}</a> in <a href="{% url 'blog:categories' %}/{{ post.category.slug }}">{{ post.category }}</a></em>
-    </p>
-    <p>Tags:
-        {% for tag in tags %}
-            <a href="#" class="tag">{{ tag.name|title }}</a>{% if not forloop.last %},{% endif %}
-        {% endfor %}
-    </p>
-    <hr>
-    <div id="article-body">{{ post.body | safe }}</div>
+    <h1 style="margin: 10px; text-align: left; font-size: 32px; font-weight: bold; color: #f4ebff;">
+        {{ post.title }}
+    </h1>
+    <div style="margin: 10px 0px 10px 12px; display: inline-block;">
+        {% with post.author.userprofile_set.first as userprofile %}
+        <div style="height: 20px; width: 20px; display: inline-block; margin-right: 4px; border-radius: 10px; background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif'); background-size: cover; background-position: center;"></div>
+        {% endwith %}
+        <div style="display: inline-block; vertical-align: top;">
+            <a href="{% url 'blog:user_activity' post.author %}" style="font-weight: bold; font-size: 11px; position: relative; top: 2.5px;">
+                {{ post.author.first_name }} {{ post.author.last_name }}
+            </a>
+            <span style="position: relative; top: 2.5px;">posted in</span>
+            <a href="{% url 'blog:categories' %}/{{ post.category.slug }}" style="position: relative; top: 2.5px;">
+                {{ post.category }}
+            </a>
+            <span style="position: relative; top: 2.5px; margin-left: 4px;"><b>|</b></span>
+            <span style="position: relative; top: 2.5px; margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
+        </div>
+    </div>
+    <div id="article-body">
+        <div>{{ post.first_paragraph | safe }}</div>
+        <div style="width: 730px; height: 486.6667px; margin: 20px auto; display: block; border-radius: 8px; background-image: url('{% url 'ignis:post_image' '730' post.id %}.gif'); background-size: cover; background-position: center;"></div>
+        <div>{{ post.body | safe }}</div>
+    </div>
 </div>
 
 <div id="comments" style="clear: both;" class="mtsbitem">