refactor: use bootstrap classes and sass variables

frappe/public/scss/blog.scss

@@ -10,19 +10,9 @@
 }
 
 .blog-card {
-	margin-bottom: 3rem;
+	margin-bottom: 2rem;
 	position: relative;
 	width: 100%;
-	padding-right: 15px;
-	padding-left: 15px;
-
-	flex: 0 0 33.33333%;
-	max-width: 33.33333%;
-
-	&.featured {
-		flex: 0 0 66.66667%;
-		max-width: 66.66667%;
-	}
 
 	.card-body {
 		display: flex;
@@ -75,7 +65,7 @@
 	.blog-footer {
 		display: flex;
 		justify-content: space-between;
-		color: #8d99a6;
+		color: $text-muted;
 		margin-top: 3rem;
 	}
 

frappe/website/doctype/blog_post/templates/blog_post_list.html

@@ -21,7 +21,7 @@
 
 <div class="blog-list-content">
 	<div class="website-list" data-doctype="{{ doctype }}" data-txt="{{ txt or '[notxt]' | e }}">
-		<div id="blog-list" class="blog-list result">
+		<div id="blog-list" class="blog-list result row">
 			{% if not result -%}
 				<div class="text-muted" style="min-height: 300px;">
 					{{ no_result_message or _("Nothing to show") }}

frappe/website/doctype/blog_post/templates/blog_post_row.html

@@ -1,5 +1,5 @@
 {%- set post = doc -%}
-<div class="blog-card {{ 'featured' if post.featured else '' }}">
+<div class="blog-card col-sm-12 {{ 'col-md-8' if post.featured else 'col-md-4' }}">
 	<div class="card h-100">
 		<div class="card-img-top">
 			{% if post.cover_image %}

frappe/website/website_theme/standard/standard.json

@@ -9,7 +9,7 @@
  "doctype": "Website Theme",
  "font_properties": "wght:400;500;600;700;800",
  "idx": 28,
- "modified": "2020-05-19 00:33:58.011046",
+ "modified": "2020-06-04 17:47:09.207101",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Standard",