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
tag. Else, we just output a
tag with a `no-image` class so we can style it accordingly. --}} -
+
{{#if feature_image}} {{else}}