Damillora
/
Yuika
mirror of https://github.com/Damillora/Yuika
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/styles.css
View File

@ -246,7 +246,7 @@ footer {
top: 100%; top: 100%;
} }
.nav li { .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 { .nav li a {
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2; @apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
@ -294,12 +294,30 @@ footer {
/* 5. Post Card */ /* 5. Post Card */
.post-card { .post-card {
}
.post-image-box {
@apply relative;
width: 100%;
} }
@screen md { @screen md {
.post-image { .post-image-box {
max-width: 320px; 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 { .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; @apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
} }

2
package.json
View File

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

2
partials/post-background.hbs
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 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. with a `no-image` class so we can style it accordingly.
--}} --}}
<div> <div class="post-image-box">
{{#if feature_image}} {{#if feature_image}}
<img class="post-image" src="{{img_url feature_image size='m'}}"> <img class="post-image" src="{{img_url feature_image size='m'}}">
{{else}} {{else}}