Fix post card images

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;
 }

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"
     },

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}}