diff options
| -rw-r--r-- | blog/views.py | 7 | ||||
| -rw-r--r-- | static/css/styles.css | 18 | ||||
| -rw-r--r-- | templates/blog/home.html | 2 | ||||
| -rw-r--r-- | templates/blog/post.html | 37 |
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"> |