mirror of
https://github.com/mgrove36/bbc-young-reporter.git
synced 2026-03-03 11:27:06 +00:00
Add list of articles by same author(s) to each article page It is in the form of a carousel
This commit is contained in:
Matthew Grove
50
_includes/article-carousel.html
Normal file
50
_includes/article-carousel.html
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
{% if site.categories.articles.size > 1 %}
|
||||||
|
{% assign article_list_displayed = false %}
|
||||||
|
{% for article in site.categories.articles %}
|
||||||
|
{% if article.url != page.url %}
|
||||||
|
{% for author in article.authors %}
|
||||||
|
{% for current_author in page.authors %}
|
||||||
|
{% if author == current_author %}
|
||||||
|
{% if article_list_displayed == false %}
|
||||||
|
<h2 class="mdc-typography--headline5">
|
||||||
|
{% if page.authors.first %}
|
||||||
|
Other Articles By These Authors
|
||||||
|
{% else %}
|
||||||
|
Other Articles By This Author
|
||||||
|
{% endif %}
|
||||||
|
</h2>
|
||||||
|
<!-- define carousel -->
|
||||||
|
<div class="carousel">
|
||||||
|
{% assign article_list_displayed = true %}
|
||||||
|
{% endif %}
|
||||||
|
<!-- display article -->
|
||||||
|
<div class="mdc-card carousel-item">
|
||||||
|
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
|
||||||
|
<div class="mdc-card-content">
|
||||||
|
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>
|
||||||
|
<h3 class="mdc-typography--subtitle2">
|
||||||
|
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
|
||||||
|
| by {{ article.authors }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="mdc-card__actions">
|
||||||
|
<div class="mdc-card__action-buttons">
|
||||||
|
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
|
||||||
|
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
{% break %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<!-- close carousel -->
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
6
_includes/article-page-head.html
Normal file
6
_includes/article-page-head.html
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<link href="/css/slick.css" rel="stylesheet">
|
||||||
|
<link href="/css/slick-theme.css" rel="stylesheet">
|
||||||
|
<script src="/js/jquery-migrate-3.0.0.min.js"></script>
|
||||||
|
<script src="/js/slick.min.js"></script>
|
||||||
|
<link href="/css/article-page.css" rel="stylesheet">
|
||||||
|
<script src="/js/article-page.js"></script>
|
||||||
@@ -42,4 +42,5 @@
|
|||||||
<!-- import local styling & scripts -->
|
<!-- import local styling & scripts -->
|
||||||
<script src="/js/global.js"></script>
|
<script src="/js/global.js"></script>
|
||||||
<link href="/css/global.css" rel="stylesheet">
|
<link href="/css/global.css" rel="stylesheet">
|
||||||
|
<script src="/js/top-scroll-button.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
{% include top-scroll-button.html %}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
<link href="/css/mdc-card-list.css" rel="stylesheet">
|
<link href="/css/mdc-card-list.css" rel="stylesheet">
|
||||||
<script src="/js/top-scroll-button.js"></script>
|
|
||||||
<body>
|
<body>
|
||||||
<!-- cookie notice is included automatically -->
|
<!-- cookie notice is included automatically -->
|
||||||
{% include cookie-notice.html %}
|
{% include cookie-notice.html %}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
<link href="/css/article-page.css" rel="stylesheet">
|
{% include article-page-head.html %}
|
||||||
<body>
|
<body>
|
||||||
<!-- cookie notice is included automatically -->
|
<!-- cookie notice is included automatically -->
|
||||||
{% include cookie-notice.html %}
|
{% include cookie-notice.html %}
|
||||||
@@ -24,9 +24,12 @@
|
|||||||
<figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
|
<figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
|
{% include article-carousel.html %}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
{% include top-scroll-button.html %}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
<link href="/css/article-page.css" rel="stylesheet">
|
{% include article-page-head.html %}
|
||||||
<body>
|
<body>
|
||||||
<!-- cookie notice is included automatically -->
|
<!-- cookie notice is included automatically -->
|
||||||
{% include cookie-notice.html %}
|
{% include cookie-notice.html %}
|
||||||
@@ -24,9 +24,12 @@
|
|||||||
<figcaption class="mdc-typography--caption-text">{{ page.video-caption }}</figcaption>
|
<figcaption class="mdc-typography--caption-text">{{ page.video-caption }}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
|
{% include article-carousel.html %}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
{% include top-scroll-button.html %}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -44,6 +44,7 @@
|
|||||||
<!-- import local styling & scripts -->
|
<!-- import local styling & scripts -->
|
||||||
<script src="/js/global.js"></script>
|
<script src="/js/global.js"></script>
|
||||||
<link href="/css/global.css" rel="stylesheet">
|
<link href="/css/global.css" rel="stylesheet">
|
||||||
|
<script src="/js/top-scroll-button.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -107,6 +108,10 @@ Click <a href="/">here</a> to see the articles Reading School’s year 8 student
|
|||||||
<span >© Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a></span>
|
<span >© Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a></span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<a href="javascript:scrollUp()" class="top-scroll-button">
|
||||||
|
<img alt="Scroll to top" src="/images/up-arrow.png">
|
||||||
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
/* make text look nice */
|
||||||
.mdc-typography--headline2, .mdc-typography--subtitle1 {
|
.mdc-typography--headline2, .mdc-typography--subtitle1 {
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
@@ -8,6 +9,8 @@
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* adjust video dimensions depending on screen size */
|
||||||
iframe {
|
iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(68.8vw / 16 * 9);
|
height: calc(68.8vw / 16 * 9);
|
||||||
@@ -31,3 +34,52 @@ iframe {
|
|||||||
height: calc(93.5vw / 16 * 9);
|
height: calc(93.5vw / 16 * 9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* make article cards look nice by altering margins */
|
||||||
|
.mdc-card-content {
|
||||||
|
margin: 5px 15px 5px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* change carousel dots' styling to make them more visible */
|
||||||
|
.slick-dots {
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-dots li button:before {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-dots li.slick-active button::before {
|
||||||
|
font-size: 40px;
|
||||||
|
color: var(--mdc-theme-primary);
|
||||||
|
top: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ensure buttons don't get in the way & enable scrolling */
|
||||||
|
.slick-next {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ensure MDC cards are separated enough that they are distinguishable */
|
||||||
|
.carousel-item {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove excessive margin below carousel */
|
||||||
|
.slick-dotted.slick-slider {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
|||||||
0
_site/css/carousel-mdc-card-list.css
Normal file
0
_site/css/carousel-mdc-card-list.css
Normal file
@@ -111,3 +111,43 @@ footer img {
|
|||||||
color: var(--mdc-theme-secondary);
|
color: var(--mdc-theme-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* for scroll-to-top button */
|
||||||
|
.top-scroll-button {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 25px;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
background-color: #273967;
|
||||||
|
display: none;
|
||||||
|
-webkit-transition-duration: 0.25s;
|
||||||
|
-moz-transition-duration: 0.25s;
|
||||||
|
-o-transition-duration: 0.25s;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-scroll-button img {
|
||||||
|
position: relative;
|
||||||
|
top: 7px;
|
||||||
|
width: 35px;
|
||||||
|
height: auto;
|
||||||
|
-webkit-transition-duration: 0.25s;
|
||||||
|
-moz-transition-duration: 0.25s;
|
||||||
|
-o-transition-duration: 0.25s;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-scroll-button:hover, .top-scroll-button:focus {
|
||||||
|
background-color: #1C2E56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-scroll-button:hover img {
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -75,42 +75,3 @@
|
|||||||
float: left;
|
float: left;
|
||||||
clear: left;
|
clear: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* for scroll-to-top button */
|
|
||||||
.top-scroll-button {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 25px;
|
|
||||||
-webkit-border-radius: 50%;
|
|
||||||
-moz-border-radius: 50%;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: fixed;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
background-color: #273967;
|
|
||||||
display: none;
|
|
||||||
-webkit-transition-duration: 0.25s;
|
|
||||||
-moz-transition-duration: 0.25s;
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
transition-duration: 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-scroll-button img {
|
|
||||||
position: relative;
|
|
||||||
top: 7px;
|
|
||||||
width: 35px;
|
|
||||||
height: auto;
|
|
||||||
-webkit-transition-duration: 0.25s;
|
|
||||||
-moz-transition-duration: 0.25s;
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
transition-duration: 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-scroll-button:hover, .top-scroll-button:focus {
|
|
||||||
background-color: #1C2E56;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-scroll-button:hover img {
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
|
|||||||
204
_site/css/slick-theme.css
Normal file
204
_site/css/slick-theme.css
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
@charset 'UTF-8';
|
||||||
|
/* Slider */
|
||||||
|
.slick-loading .slick-list
|
||||||
|
{
|
||||||
|
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons */
|
||||||
|
@font-face
|
||||||
|
{
|
||||||
|
font-family: 'slick';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
src: url('./fonts/slick.eot');
|
||||||
|
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||||
|
}
|
||||||
|
/* Arrows */
|
||||||
|
.slick-prev,
|
||||||
|
.slick-next
|
||||||
|
{
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-transform: translate(0, -50%);
|
||||||
|
-ms-transform: translate(0, -50%);
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.slick-prev:hover,
|
||||||
|
.slick-prev:focus,
|
||||||
|
.slick-next:hover,
|
||||||
|
.slick-next:focus
|
||||||
|
{
|
||||||
|
color: transparent;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.slick-prev:hover:before,
|
||||||
|
.slick-prev:focus:before,
|
||||||
|
.slick-next:hover:before,
|
||||||
|
.slick-next:focus:before
|
||||||
|
{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.slick-prev.slick-disabled:before,
|
||||||
|
.slick-next.slick-disabled:before
|
||||||
|
{
|
||||||
|
opacity: .25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev:before,
|
||||||
|
.slick-next:before
|
||||||
|
{
|
||||||
|
font-family: 'slick';
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
opacity: .75;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev
|
||||||
|
{
|
||||||
|
left: -25px;
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-prev
|
||||||
|
{
|
||||||
|
right: -25px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
.slick-prev:before
|
||||||
|
{
|
||||||
|
content: '←';
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-prev:before
|
||||||
|
{
|
||||||
|
content: '→';
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-next
|
||||||
|
{
|
||||||
|
right: -25px;
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-next
|
||||||
|
{
|
||||||
|
right: auto;
|
||||||
|
left: -25px;
|
||||||
|
}
|
||||||
|
.slick-next:before
|
||||||
|
{
|
||||||
|
content: '→';
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-next:before
|
||||||
|
{
|
||||||
|
content: '←';
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dots */
|
||||||
|
.slick-dotted.slick-slider
|
||||||
|
{
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-dots
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
bottom: -25px;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.slick-dots li
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 5px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.slick-dots li button
|
||||||
|
{
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: transparent;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.slick-dots li button:hover,
|
||||||
|
.slick-dots li button:focus
|
||||||
|
{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.slick-dots li button:hover:before,
|
||||||
|
.slick-dots li button:focus:before
|
||||||
|
{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.slick-dots li button:before
|
||||||
|
{
|
||||||
|
font-family: 'slick';
|
||||||
|
font-size: 6px;
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
content: '•';
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
opacity: .25;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.slick-dots li.slick-active button:before
|
||||||
|
{
|
||||||
|
opacity: .75;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
119
_site/css/slick.css
Normal file
119
_site/css/slick.css
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
/* Slider */
|
||||||
|
.slick-slider
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-ms-touch-action: pan-y;
|
||||||
|
touch-action: pan-y;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-list
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.slick-list:focus
|
||||||
|
{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.slick-list.dragging
|
||||||
|
{
|
||||||
|
cursor: pointer;
|
||||||
|
cursor: hand;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-slider .slick-track,
|
||||||
|
.slick-slider .slick-list
|
||||||
|
{
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-track
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.slick-track:before,
|
||||||
|
.slick-track:after
|
||||||
|
{
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
.slick-track:after
|
||||||
|
{
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.slick-loading .slick-track
|
||||||
|
{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-slide
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
min-height: 1px;
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-slide
|
||||||
|
{
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.slick-slide img
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.slick-slide.slick-loading img
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.slick-slide.dragging img
|
||||||
|
{
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.slick-initialized .slick-slide
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.slick-loading .slick-slide
|
||||||
|
{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.slick-vertical .slick-slide
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.slick-arrow.slick-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@@ -44,10 +44,10 @@
|
|||||||
<!-- import local styling & scripts -->
|
<!-- import local styling & scripts -->
|
||||||
<script src="/js/global.js"></script>
|
<script src="/js/global.js"></script>
|
||||||
<link href="/css/global.css" rel="stylesheet">
|
<link href="/css/global.css" rel="stylesheet">
|
||||||
|
<script src="/js/top-scroll-button.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<link href="/css/mdc-card-list.css" rel="stylesheet">
|
<link href="/css/mdc-card-list.css" rel="stylesheet">
|
||||||
<script src="/js/top-scroll-button.js"></script>
|
|
||||||
<body>
|
<body>
|
||||||
<!-- cookie notice is included automatically -->
|
<!-- cookie notice is included automatically -->
|
||||||
<div id="cookies">
|
<div id="cookies">
|
||||||
|
|||||||
39
_site/js/article-page.js
Normal file
39
_site/js/article-page.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
$(document).ready(function(){
|
||||||
|
// initiate carousel
|
||||||
|
$('.carousel').slick({
|
||||||
|
dots: true,
|
||||||
|
infinite: false,
|
||||||
|
speed: 300,
|
||||||
|
slidesToShow: 4,
|
||||||
|
slidesToScroll: 4,
|
||||||
|
adaptiveHeight: true,
|
||||||
|
autoplay: true,
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 1024,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 3,
|
||||||
|
slidesToScroll: 2,
|
||||||
|
dots: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 600,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 2,
|
||||||
|
slidesToScroll: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 480,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 1,
|
||||||
|
slidesToScroll: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// overwrite auto-generated inline styling
|
||||||
|
$(".slick-prev, .slick-next").hide();
|
||||||
|
});
|
||||||
2
_site/js/jquery-migrate-1.4.1.min.js
vendored
Normal file
2
_site/js/jquery-migrate-1.4.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
_site/js/jquery-migrate-3.0.0.min.js
vendored
Normal file
2
_site/js/jquery-migrate-3.0.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
_site/js/slick.min.js
vendored
Normal file
1
_site/js/slick.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<url>
|
<url>
|
||||||
<loc>/404.html</loc>
|
<loc>/404.html</loc>
|
||||||
<lastmod>2019-03-04</lastmod>
|
<lastmod>2019-03-05</lastmod>
|
||||||
<changefreq>hourly</changefreq>
|
<changefreq>hourly</changefreq>
|
||||||
<priority>0.5</priority>
|
<priority>0.5</priority>
|
||||||
</url>
|
</url>
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
<url>
|
<url>
|
||||||
<loc>/</loc>
|
<loc>/</loc>
|
||||||
<lastmod>2019-03-04</lastmod>
|
<lastmod>2019-03-05</lastmod>
|
||||||
<changefreq>hourly</changefreq>
|
<changefreq>hourly</changefreq>
|
||||||
<priority>0.5</priority>
|
<priority>0.5</priority>
|
||||||
</url>
|
</url>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
/* make text look nice */
|
||||||
.mdc-typography--headline2, .mdc-typography--subtitle1 {
|
.mdc-typography--headline2, .mdc-typography--subtitle1 {
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
@@ -8,6 +9,8 @@
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* adjust video dimensions depending on screen size */
|
||||||
iframe {
|
iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(68.8vw / 16 * 9);
|
height: calc(68.8vw / 16 * 9);
|
||||||
@@ -31,3 +34,52 @@ iframe {
|
|||||||
height: calc(93.5vw / 16 * 9);
|
height: calc(93.5vw / 16 * 9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* make article cards look nice by altering margins */
|
||||||
|
.mdc-card-content {
|
||||||
|
margin: 5px 15px 5px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* change carousel dots' styling to make them more visible */
|
||||||
|
.slick-dots {
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-dots li button:before {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-dots li.slick-active button::before {
|
||||||
|
font-size: 40px;
|
||||||
|
color: var(--mdc-theme-primary);
|
||||||
|
top: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ensure buttons don't get in the way & enable scrolling */
|
||||||
|
.slick-next {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ensure MDC cards are separated enough that they are distinguishable */
|
||||||
|
.carousel-item {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove excessive margin below carousel */
|
||||||
|
.slick-dotted.slick-slider {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
|||||||
0
css/carousel-mdc-card-list.css
Normal file
0
css/carousel-mdc-card-list.css
Normal file
@@ -111,3 +111,43 @@ footer img {
|
|||||||
color: var(--mdc-theme-secondary);
|
color: var(--mdc-theme-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* for scroll-to-top button */
|
||||||
|
.top-scroll-button {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 25px;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
background-color: #273967;
|
||||||
|
display: none;
|
||||||
|
-webkit-transition-duration: 0.25s;
|
||||||
|
-moz-transition-duration: 0.25s;
|
||||||
|
-o-transition-duration: 0.25s;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-scroll-button img {
|
||||||
|
position: relative;
|
||||||
|
top: 7px;
|
||||||
|
width: 35px;
|
||||||
|
height: auto;
|
||||||
|
-webkit-transition-duration: 0.25s;
|
||||||
|
-moz-transition-duration: 0.25s;
|
||||||
|
-o-transition-duration: 0.25s;
|
||||||
|
transition-duration: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-scroll-button:hover, .top-scroll-button:focus {
|
||||||
|
background-color: #1C2E56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-scroll-button:hover img {
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -75,42 +75,3 @@
|
|||||||
float: left;
|
float: left;
|
||||||
clear: left;
|
clear: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* for scroll-to-top button */
|
|
||||||
.top-scroll-button {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 25px;
|
|
||||||
-webkit-border-radius: 50%;
|
|
||||||
-moz-border-radius: 50%;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: fixed;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
background-color: #273967;
|
|
||||||
display: none;
|
|
||||||
-webkit-transition-duration: 0.25s;
|
|
||||||
-moz-transition-duration: 0.25s;
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
transition-duration: 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-scroll-button img {
|
|
||||||
position: relative;
|
|
||||||
top: 7px;
|
|
||||||
width: 35px;
|
|
||||||
height: auto;
|
|
||||||
-webkit-transition-duration: 0.25s;
|
|
||||||
-moz-transition-duration: 0.25s;
|
|
||||||
-o-transition-duration: 0.25s;
|
|
||||||
transition-duration: 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-scroll-button:hover, .top-scroll-button:focus {
|
|
||||||
background-color: #1C2E56;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-scroll-button:hover img {
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
|
|||||||
204
css/slick-theme.css
Normal file
204
css/slick-theme.css
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
@charset 'UTF-8';
|
||||||
|
/* Slider */
|
||||||
|
.slick-loading .slick-list
|
||||||
|
{
|
||||||
|
background: #fff url('./ajax-loader.gif') center center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons */
|
||||||
|
@font-face
|
||||||
|
{
|
||||||
|
font-family: 'slick';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
src: url('./fonts/slick.eot');
|
||||||
|
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||||
|
}
|
||||||
|
/* Arrows */
|
||||||
|
.slick-prev,
|
||||||
|
.slick-next
|
||||||
|
{
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-transform: translate(0, -50%);
|
||||||
|
-ms-transform: translate(0, -50%);
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.slick-prev:hover,
|
||||||
|
.slick-prev:focus,
|
||||||
|
.slick-next:hover,
|
||||||
|
.slick-next:focus
|
||||||
|
{
|
||||||
|
color: transparent;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.slick-prev:hover:before,
|
||||||
|
.slick-prev:focus:before,
|
||||||
|
.slick-next:hover:before,
|
||||||
|
.slick-next:focus:before
|
||||||
|
{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.slick-prev.slick-disabled:before,
|
||||||
|
.slick-next.slick-disabled:before
|
||||||
|
{
|
||||||
|
opacity: .25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev:before,
|
||||||
|
.slick-next:before
|
||||||
|
{
|
||||||
|
font-family: 'slick';
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
opacity: .75;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-prev
|
||||||
|
{
|
||||||
|
left: -25px;
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-prev
|
||||||
|
{
|
||||||
|
right: -25px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
.slick-prev:before
|
||||||
|
{
|
||||||
|
content: '←';
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-prev:before
|
||||||
|
{
|
||||||
|
content: '→';
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-next
|
||||||
|
{
|
||||||
|
right: -25px;
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-next
|
||||||
|
{
|
||||||
|
right: auto;
|
||||||
|
left: -25px;
|
||||||
|
}
|
||||||
|
.slick-next:before
|
||||||
|
{
|
||||||
|
content: '→';
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-next:before
|
||||||
|
{
|
||||||
|
content: '←';
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dots */
|
||||||
|
.slick-dotted.slick-slider
|
||||||
|
{
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-dots
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
bottom: -25px;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.slick-dots li
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 5px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.slick-dots li button
|
||||||
|
{
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: transparent;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.slick-dots li button:hover,
|
||||||
|
.slick-dots li button:focus
|
||||||
|
{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.slick-dots li button:hover:before,
|
||||||
|
.slick-dots li button:focus:before
|
||||||
|
{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.slick-dots li button:before
|
||||||
|
{
|
||||||
|
font-family: 'slick';
|
||||||
|
font-size: 6px;
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
content: '•';
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
opacity: .25;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.slick-dots li.slick-active button:before
|
||||||
|
{
|
||||||
|
opacity: .75;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
119
css/slick.css
Normal file
119
css/slick.css
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
/* Slider */
|
||||||
|
.slick-slider
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-ms-touch-action: pan-y;
|
||||||
|
touch-action: pan-y;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-list
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.slick-list:focus
|
||||||
|
{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.slick-list.dragging
|
||||||
|
{
|
||||||
|
cursor: pointer;
|
||||||
|
cursor: hand;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-slider .slick-track,
|
||||||
|
.slick-slider .slick-list
|
||||||
|
{
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
-ms-transform: translate3d(0, 0, 0);
|
||||||
|
-o-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-track
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.slick-track:before,
|
||||||
|
.slick-track:after
|
||||||
|
{
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
.slick-track:after
|
||||||
|
{
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.slick-loading .slick-track
|
||||||
|
{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slick-slide
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
min-height: 1px;
|
||||||
|
}
|
||||||
|
[dir='rtl'] .slick-slide
|
||||||
|
{
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.slick-slide img
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.slick-slide.slick-loading img
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.slick-slide.dragging img
|
||||||
|
{
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.slick-initialized .slick-slide
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.slick-loading .slick-slide
|
||||||
|
{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.slick-vertical .slick-slide
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.slick-arrow.slick-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
39
js/article-page.js
Normal file
39
js/article-page.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
$(document).ready(function(){
|
||||||
|
// initiate carousel
|
||||||
|
$('.carousel').slick({
|
||||||
|
dots: true,
|
||||||
|
infinite: false,
|
||||||
|
speed: 300,
|
||||||
|
slidesToShow: 4,
|
||||||
|
slidesToScroll: 4,
|
||||||
|
adaptiveHeight: true,
|
||||||
|
autoplay: true,
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 1024,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 3,
|
||||||
|
slidesToScroll: 2,
|
||||||
|
dots: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 600,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 2,
|
||||||
|
slidesToScroll: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 480,
|
||||||
|
settings: {
|
||||||
|
slidesToShow: 1,
|
||||||
|
slidesToScroll: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// overwrite auto-generated inline styling
|
||||||
|
$(".slick-prev, .slick-next").hide();
|
||||||
|
});
|
||||||
2
js/jquery-migrate-1.4.1.min.js
vendored
Normal file
2
js/jquery-migrate-1.4.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
js/jquery-migrate-3.0.0.min.js
vendored
Normal file
2
js/jquery-migrate-3.0.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/slick.min.js
vendored
Normal file
1
js/slick.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user