Cleanup css & fix styling for the blog index page (#12)

Author: adinhodovic

wagtail_code_blog/static/wagtail_code_blog/css/blog_index_page.css

@@ -1,49 +1,22 @@
-body * {
-  font-weight: 400;
-  line-height: 1.5;
-}
-
 .post {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 0.2rem auto;
+  padding: 1rem;
 }
 
-.post .img-link {
-  margin: 0.4rem;
-  width: 80%;
+.img-link {
   display: flex;
   align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
 }
 
-.post img {
-  object-fit: cover;
-  border-radius: 3%;
-}
-
-.post-info-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  margin-left: 1rem;
-}
-
-.post-info-container h2 {
-  margin-bottom: 0;
-  margin-top: 0.5rem;
-}
-
-.author-name {
-  font-weight: bold;
+img {
+  width: 100%;
 }
 
 .date {
   color: #6C757D;
 }
 
-
 .post * {
   font-family: "Merriweather", serif;
 }
@@ -53,45 +26,47 @@ body * {
 }
 
 .post-intro {
-  margin: 0.5rem;
-}
-
-.post-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
+  margin-top: 0.5rem;
 }
 
-.post-info span {
-  margin: 0 0.5rem;
+.author-name, .date {
+  margin-bottom: 0;
 }
 
-.post a {
+a {
   color: black;
   text-decoration: none;
 }
 
-.post a:hover {
-  text-decoration: none;
+a:hover {
+  color: #484848;
 }
 
 hr {
   background-color: #989898;
   height: 1px;
   border: none;
-  margin-top: 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
 
   .post {
+    display: flex;
+    align-items: center;
     flex-direction: row;
     justify-content: stretch;
   }
 
-  .post .img-link {
-    width: 15rem;
-    height: 10rem;
+  .img-link {
+    margin-bottom: 0rem;
+    margin-right: 1.5rem;
+    width: 240px;
+  }
+
+  img {
+    width: 240px;
   }
 }

wagtail_code_blog/templates/wagtail_code_blog/blog_index_page_body.html

@@ -4,21 +4,17 @@
 <div class="post">
   {% if post.image_url %}
   <a class="img-link" href="{% pageurl post %}">
-    <img src="{{ post.image_url }}" class="img-fluid" alt="Responsive image">
+    <img src="{{ post.image_url }}" alt="{{ post.title }}">
   </a>
   {% endif %}
   <a href="{% pageurl post %}">
-    <div class="post-info-container">
-      <h2 class="post-title">{{ post.title }}</h2>
-      {% if post.intro %}
-      <p class="post-intro">{{ post.intro }}</p>
-      {% endif %}
-      <div class="post-info">
-        <span class="author-name">{{ post.author_name }}</span>
-        <span class="date">{{ post.date }}</span>
-      </div>
-    </div>
+    <h2 class="post-title">{{ post.title }}</h2>
+    {% if post.intro %}
+    <p class="post-intro">{{ post.intro }}</p>
+    {% endif %}
+    <p class="author-name"><b>{{ post.author_name }}</b></p>
+    <p class="date">{{ post.date }}</p>
   </a>
 </div>
-<hr>
+<hr />
 {% endfor %}