diff --git a/assets/images/article-illu.png b/assets/images/article-illu.png new file mode 100644 index 0000000000..bfe6ddde73 Binary files /dev/null and b/assets/images/article-illu.png differ diff --git a/assets/images/opinion-illu.png b/assets/images/opinion-illu.png new file mode 100644 index 0000000000..7c0b04d592 Binary files /dev/null and b/assets/images/opinion-illu.png differ diff --git a/assets/images/tutorial-illu.png b/assets/images/tutorial-illu.png new file mode 100644 index 0000000000..b317a8a4ec Binary files /dev/null and b/assets/images/tutorial-illu.png differ diff --git a/assets/scss/components/_content-item.scss b/assets/scss/components/_content-item.scss index 7d42d6b1b4..48dc459f53 100644 --- a/assets/scss/components/_content-item.scss +++ b/assets/scss/components/_content-item.scss @@ -50,12 +50,23 @@ $content-reaction-offset: -14px; // -30px to not offset the meta flex: 0 0 $content-illu-size; height: $content-illu-size; background-color: $content-border-color; + background-size: contain; img { width: 100%; height: 100%; background-color: #FFF; } + + &.article-illu { + background-image: url("/static/images/article-illu.png"); + } + &.tutorial-illu { + background-image: url("/static/images/tutorial-illu.png"); + } + &.opinion-illu { + background-image: url("/static/images/opinion-illu.png"); + } } .content-info { diff --git a/templates/tutorialv2/includes/content_item.part.html b/templates/tutorialv2/includes/content_item.part.html index 359e2b8940..c38d409c5f 100644 --- a/templates/tutorialv2/includes/content_item.part.html +++ b/templates/tutorialv2/includes/content_item.part.html @@ -57,7 +57,7 @@
- + {% if content.image %} {% endif %}