Ensure cover images show in article carousel

This commit is contained in:
Matthew Grove
2019-03-06 18:23:13 +00:00
parent 55ac39b145
commit d903886346
9 changed files with 178 additions and 156 deletions

View File

@@ -24,7 +24,8 @@
{% assign article_list_displayed = true %} {% assign article_list_displayed = true %}
{% endif %} {% endif %}
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div> <div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2> <h2 class="mdc-typography--headline6">{{ article.title }}</h2>
@@ -45,6 +46,7 @@
} }
</style> </style>
</div> </div>
</div>
{% assign break = true %} {% assign break = true %}
{% break %} {% break %}
{% endif %} {% endif %}

View File

@@ -461,7 +461,8 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-what-is-in-the-patients-best-interest-html"></div> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-what-is-in-the-patients-best-interest-html"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest?</h2> <h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest?</h2>
@@ -482,6 +483,7 @@
} }
</style> </style>
</div> </div>
</div>

View File

@@ -452,7 +452,8 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-young-reporter-team-ready-to-go-html"></div> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-young-reporter-team-ready-to-go-html"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2> <h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2>
@@ -473,6 +474,7 @@
} }
</style> </style>
</div> </div>
</div>

View File

@@ -465,7 +465,8 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-whats-next-for-reading-prison-html"></div> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-whats-next-for-reading-prison-html"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2> <h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2>
@@ -486,6 +487,7 @@
} }
</style> </style>
</div> </div>
</div>

View File

@@ -373,7 +373,8 @@ It is standard protocol in the NHS that doctors must consult with the patient an
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html"></div> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2> <h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2>
@@ -394,6 +395,7 @@ It is standard protocol in the NHS that doctors must consult with the patient an
} }
</style> </style>
</div> </div>
</div>

View File

@@ -349,7 +349,8 @@ Under the plan, the main theatre would operate on a commercial basis with the re
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html"></div> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2> <h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2>
@@ -370,6 +371,7 @@ Under the plan, the main theatre would operate on a commercial basis with the re
} }
</style> </style>
</div> </div>
</div>

View File

@@ -254,7 +254,8 @@
<!-- display article --> <!-- display article -->
<div class="mdc-card carousel-item"> <div class="carousel-item">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-finished-product-html"></div> <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-finished-product-html"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">The Finished Product</h2> <h2 class="mdc-typography--headline6">The Finished Product</h2>
@@ -275,6 +276,7 @@
} }
</style> </style>
</div> </div>
</div>

View File

@@ -26,10 +26,14 @@ iframe {
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 800px) {
iframe { iframe {
height: calc(90vw / 16 * 9 - 5px); height: calc(90vw / 16 * 9 - 5px);
} }
.mdc-typography--headline3, .mdc-typography--headline5 {
font-size: 1.5rem;
line-height: 1.625rem;
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {

View File

@@ -26,10 +26,14 @@ iframe {
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 800px) {
iframe { iframe {
height: calc(90vw / 16 * 9 - 5px); height: calc(90vw / 16 * 9 - 5px);
} }
.mdc-typography--headline3, .mdc-typography--headline5 {
font-size: 1.5rem;
line-height: 1.625rem;
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {