From 069e694881239c117a66a08c9a2a905a5dd031ff Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 30 May 2019 12:26:38 +0530
Subject: [PATCH] fix: Blog Post styling

---
 frappe/public/scss/website-image.scss         |  4 ++
 .../blog_post/templates/blog_post.html        |  5 +-
 .../blog_post/templates/blog_post_row.html    | 49 +++++++++++--------
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/frappe/public/scss/website-image.scss b/frappe/public/scss/website-image.scss
index 49da3e40f7..18adae4acc 100644
--- a/frappe/public/scss/website-image.scss
+++ b/frappe/public/scss/website-image.scss
@@ -82,3 +82,7 @@ img:after {
 .website-image[src*="no-image.jpg"] {
 	padding: 46% 0;
 }
+
+.object-fit-cover {
+	object-fit: cover;
+}
\ No newline at end of file
diff --git a/frappe/website/doctype/blog_post/templates/blog_post.html b/frappe/website/doctype/blog_post/templates/blog_post.html
index 0231f255c2..bc6c5a9242 100644
--- a/frappe/website/doctype/blog_post/templates/blog_post.html
+++ b/frappe/website/doctype/blog_post/templates/blog_post.html
@@ -10,10 +10,13 @@
 		<!-- begin blog content -->
 		<div class="blog-info">
 			<h1 itemprop="headline" class="blog-header">{{ title }}</h1>
-			<p class="text-muted">
+			<p class="text-muted small">
 			{{ frappe.format_date(published_on) }}
 			</p>
 		</div>
+		<p class="lead">
+			{{ description }}
+		</p>
 		<div itemprop="articleBody" class="longform blog-text mt-5">
 		{{ content }}
 		</div>
diff --git a/frappe/website/doctype/blog_post/templates/blog_post_row.html b/frappe/website/doctype/blog_post/templates/blog_post_row.html
index fa928a5e33..b5735ee7a4 100644
--- a/frappe/website/doctype/blog_post/templates/blog_post_row.html
+++ b/frappe/website/doctype/blog_post/templates/blog_post_row.html
@@ -1,27 +1,34 @@
 {%- set post = doc -%}
 <div class="web-list-item blog-list-item my-5">
 	<div class="row">
-		<div class="col-12 col-md-7">
-			<h4><a href="/{{ post.route }}" class="text-dark">{{ post.title }}</a></h4>
-			{% if post.cover_image %}
-			<p>
-				<img  class="blogpost-cover-img" src="{{ post.cover_image }}" alt="{{post.title}} - Cover Image">
-			</p>
-			{% endif %}
-			<p class="post-description text-muted">{{ post.intro }}</p>
-			<p class="text-muted small">
-				<a class="text-muted" href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
-				&middot;
-				{{ frappe.format_date(post.published_on) }}
-				{% if post.comments %}
-                &middot;
-                {% if post.comments == 1 %}
-                {{ _('1 comment') }}
-                {% else %}
-				{{ _('{0} comments').format(post.comments) }}
-                {% endif %}
-				{% endif %}
-			</p>
+		<div class="col-12 col-md-8">
+			<div class="row">
+				<div class="col-9 d-flex flex-column justify-content-between">
+					<div>
+						<div class="text-muted small text-uppercase">{{ post.category.title }}</div>
+						<h4><a href="/{{ post.route }}" class="text-dark">{{ post.title }}</a></h4>
+						<p class="post-description text-muted">{{ post.intro }}</p>
+					</div>
+					<div class="text-muted small">
+						<a class="text-muted" href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
+						&middot;
+						{{ frappe.format_date(post.published_on) }}
+						{% if post.comments %}
+						&middot;
+						{% if post.comments == 1 %}
+						{{ _('1 comment') }}
+						{% else %}
+						{{ _('{0} comments').format(post.comments) }}
+						{% endif %}
+						{% endif %}
+					</div>
+				</div>
+				<div class="col-3">
+					{% if post.cover_image %}
+					<img  class="website-image-medium object-fit-cover" src="{{ post.cover_image }}" alt="{{post.title}} - Cover Image">
+					{% endif %}
+				</div>
+			</div>
 		</div>
 	</div>
 </div>