diff --git a/src/php/views/page.twig b/src/php/views/page.twig index 9ab6467..4d3e81b 100644 --- a/src/php/views/page.twig +++ b/src/php/views/page.twig @@ -3,6 +3,12 @@ {% block content %}
+ 0 %} + alt="{{ post.thumbnail.alt }}" + {% endif %} + /> {{ post.content }}
diff --git a/src/php/views/partials/content-single.twig b/src/php/views/partials/content-single.twig index f410556..63fb327 100644 --- a/src/php/views/partials/content-single.twig +++ b/src/php/views/partials/content-single.twig @@ -1,8 +1,19 @@ -
-

- {{ post.title }} -

+
+ {% if post.thumbnail %} + 0 %} + alt="{{ post.thumbnail.alt }}" + {% endif %} + /> + {% endif %}
- {{ post.preview }} +

+ {{ post.title }} +

+
+ {{ post.preview }} +
diff --git a/src/scss/base.scss b/src/scss/base.scss index 2e9cb2f..965eae4 100644 --- a/src/scss/base.scss +++ b/src/scss/base.scss @@ -64,6 +64,7 @@ // and our UI components are often composed of Objects and Components @import 'components/main-nav'; @import 'components/pagination'; +@import 'components/post-preview'; @import 'components/primary-sidebar'; @import 'components/post-body'; @import 'components/skip-to-content'; diff --git a/src/scss/components/_post-preview.scss b/src/scss/components/_post-preview.scss new file mode 100644 index 0000000..74cbfb4 --- /dev/null +++ b/src/scss/components/_post-preview.scss @@ -0,0 +1,20 @@ +.post-preview { + margin-bottom: 1.5rem; + min-height: 9.375rem; // 150px + + @media (min-width: 50rem) { + display: flex; + column-gap: 1.5rem; + } + + &__title { + margin: 0 0 1rem; + } + + &__featured-image { + max-height: 9.375rem; // 150px + max-width: 9.375rem; // 150px + width: auto; + height: auto; + } +}