From 7efebbb439bcaca9f1241ba012e7173eaac37c5d Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Wed, 11 Nov 2020 12:07:41 +0700
Subject: [PATCH] Fix post card images

---
 assets/css/styles.css        | 24 +++++++++++++++++++++---
 package.json                 |  2 +-
 partials/post-background.hbs |  2 +-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 061e562..3114b10 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -246,7 +246,7 @@ footer {
   top: 100%;
 }
 .nav li {
-  @apply w-full flex flex-row justify-start items-center my-0 text-white text-sm h-12 transition duration-300 ease-in-out;
+  @apply w-full flex flex-row justify-start items-center my-0 text-white text-lg h-12 transition duration-300 ease-in-out;
 }
 .nav li a {
   @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
@@ -294,12 +294,30 @@ footer {
 /* 5. Post Card */
 .post-card {
 
+}
+.post-image-box {
+  @apply relative;
+  width: 100%;
 }
 @screen md {
-  .post-image {
-    max-width: 320px;
+  .post-image-box {
+    width: 35%;
+    min-width: 300px;
+    max-width: 450px;
   }
 }
+.post-image-box::after {
+  @apply block;
+  content: '';
+  padding-bottom: 56.25%;
+}
+.post-image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
 .primary-tag-header {
   @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
 }
diff --git a/package.json b/package.json
index bbcb1c3..aa1aee7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "yuika",
     "description": "nanao.moe's blog theme",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "engines": {
         "ghost-api": "v3"
     },
diff --git a/partials/post-background.hbs b/partials/post-background.hbs
index cf49eee..90fa4e7 100644
--- a/partials/post-background.hbs
+++ b/partials/post-background.hbs
@@ -10,7 +10,7 @@ If the template in question has a background image, then we render responsive im
 for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
 with a `no-image` class so we can style it accordingly.
 --}}
-<div>
+<div class="post-image-box">
 {{#if feature_image}}
 <img class="post-image" src="{{img_url feature_image size='m'}}">
 {{else}}