Commit 99439787 authored by David Loiret's avatar David Loiret Committed by Jean-Baptiste Kempf

Add slick carousel

Signed-off-by: Jean-Baptiste Kempf's avatarJean-Baptiste Kempf <jb@videolan.org>
parent 79d19816
......@@ -29,7 +29,9 @@ ifneq ($(PHP_IGNORES),)
endif
TARGETS := $(PHP_FILES:%.php=%.html) $(ROOT)/news-rss.html $(ROOT)/style/style.min.css \
$(ROOT)/style/bootstrap.min.css
$(ROOT)/style/bootstrap.min.css \
$(ROOT)/style/slick.min.css \
$(ROOT)/js/slick.min.js
real-all: $(TARGETS) all-recursive
......
......@@ -31,6 +31,21 @@ style/bootstrap.min.css: style/bootstrap.css
yui-compressor --type css $< > $@.tmp || cp $< $@.tmp
rm -f $@ && mv $@.tmp $@
style/slick.css: style/slick.scss style/slick-theme.scss
@echo "Processing $< ..."
sassc $< > $@ || sass $< > $@
style/slick.min.css: style/slick.css
@echo "Processing $< ..."
yui-compressor --type css $< > $@.tmp || cp $< $@.tmp
rm -f $@ && mv $@.tmp $@
js/slick.min.js: js/slick.js
@echo "Processing $< ..."
yui-compressor --type js $< > $@.tmp || cp $< $@.tmp
rm -f $@ && mv $@.tmp $@
locales: index.af.php \
index.an.php \
index.ar.php \
......
This diff is collapsed.
......@@ -9,3 +9,20 @@
#{$property}: #{$vendor}#{$name}#{'('}#{$value}#{')'};
}
}
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
@import "style/mixins";
@import "bootstrap/mixins/vendor-prefixes";
$left-arrow: "/images/icons/arrow-left.png";
$right-arrow: "/images/icons/arrow-right.png";
$bg-color: rgba(0, 0, 0, 0.2);
$bg-color-hover: rgba(0, 0, 0, 0.4);
/* Arrows */
.slick-prev,
.slick-next {
z-index: 1;
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 30px;
height: 100%;
padding: 0;
cursor: pointer;
border: none;
outline: none;
color: transparent;
@include transition(background-color 200ms ease-out 0.1ms, opacity 80ms ease-out 0.1ms, background-size 20ms ease-out 0.1ms);
}
.slick-prev {
left: 0;
background: $bg-color url($left-arrow) center no-repeat;
background-size: 40px;
&:hover {
background: $bg-color-hover url($left-arrow) center no-repeat;
background-size: 50px;
}
}
.slick-next {
right: 0;
background: $bg-color url($right-arrow) center no-repeat;
background-size: 40px;
&:hover {
background: $bg-color-hover url($right-arrow) center no-repeat;
background-size: 50px;
}
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
opacity: .25;
}
[dir='rtl'] .slick-prev {
right: 0;
left: auto;
background: url($right-arrow) center no-repeat;
}
[dir='rtl'] .slick-next {
right: auto;
left: 0;
background: url($left-arrow) center no-repeat;
}
.bg-nav-left,
.bg-nav-right {
position: absolute;
}
#header-carousel .screenshot2 {
overflow: hidden;
max-height: 320px;
@include aspect-ratio(16, 9);
}
#header-carousel img {
max-width: 100%;
height: auto;
//max-height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
@import 'style/slick-theme';
/* Slider */
.slick-slider
{
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
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;
}
.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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment