Fix post card images

This commit is contained in:
Damillora 2020-11-11 12:07:41 +07:00
parent 89c8773803
commit 7efebbb439
3 changed files with 23 additions and 5 deletions

View File

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

View File

@ -1,7 +1,7 @@
{
"name": "yuika",
"description": "nanao.moe's blog theme",
"version": "2.0.0",
"version": "2.0.1",
"engines": {
"ghost-api": "v3"
},

View File

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