Commit 408e2ef7 authored by Christian Engwer's avatar Christian Engwer

improved carousel design

- make caption more readible
parent 48a0b4e3
Pipeline #14873 passed with stage
in 29 seconds
......@@ -17,7 +17,7 @@
<h style="font-weight: bold">{{ .Title }}</h>
<p>{{ .Summary }}</p>
<p style="text-align: center; bottom: 0">
<span style="font-size: 125%;">
<span style="font-size: 80%;">
<i class="fab fa-creative-commons"></i>
<i class="fab fa-creative-commons-by"></i>
<i class="fab fa-creative-commons-sa"></i></span>
......
<div class="well" style="padding: 0;">
<div id="topCarousel" class="carousel slide" data-ride="carousel">
<div id="topCarousel" class="carousel slide"
data-interval="2500",
data-ride="carousel">
<!-- Carousel indicators -->
{{/* <ol class="carousel-indicators">
{{ $.Scratch.Set "counter" 0 }}
......@@ -33,10 +34,9 @@
<a class="carousel-control right" href="#topCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div style="margin-top: -20px;
margin-bottom: 20px; width: 100%; text-align: center;">
<div style="margin-top: 1ex;
margin-bottom: 2ex; width: 100%; text-align: center;">
<a href="#page-start" class="btn btn-warning
start-me">
{{/*<i class="fa fa-angle-double-down"></i>&nbsp;
......@@ -52,3 +52,22 @@
<i class="fa fa-cog"></i>&nbsp;
Get involved in DUNE</a>
</div>
<script>
$('#topCarousel').hover(function(){
$("#topCarousel").carousel('pause');
$("#topCarousel").addClass('fullinfo');
},function(){
$("#topCarousel").carousel('cycle');
$("#topCarousel").removeClass('fullinfo');
});
// var classname = document.getElementsByClassName("classname");
//
// var myFunction = function() {
// var attribute = this.getAttribute("data-myattribute");
// alert(attribute);
// };
//
// for (var i = 0; i < classname.length; i++) {
// classname[i].addEventListener('click', myFunction, false);
// }
</script>
......@@ -120,27 +120,66 @@
#fullpage-carousel, #topCarousel {
height: calc(50vh - 75px) !important;
width: 100% !important;
background: #999;
}
.carousel-caption {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.6);
.carousel-caption a {
color: #add9ff;
}
.carousel-caption p,
.carousel-caption h,
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption h4,
.carousel-caption h5
{
color: white !important;
}
#topCarousel .carousel-caption {
background: rgba(255,255,255,0.5);
width: 100%;
height: 25%;
max-height: 75px;
font-weight: 400;
font-size: 125%;
height: 3em;
margin: 0;
padding: 0;
right: 0 !important;
bottom: 0 !important;
left: auto;
/* z-index: 2; */
text-shadow: none;
color: #777;
text-shadow:
0px 0px 2ex black,
0px 0px 2ex black,
0px 0px 2.5ex black,
0px 0px 2.5ex black,
0px 0px 3ex black,
0px 0px 3ex black,
0px 0px 3.5ex black,
0px 0px 3.5ex black,
0px 0px 4ex black,
0px 0px 4ex black,
0px 0px 1ex black;
font-weight: inherit;
color: white;
}
#topCarousel.fullinfo .carousel-caption {
min-height: 75px;
max-height: 75%;
height: auto;
}
.carousel-dark {
background: rgba(0,0,0,0.3);
color: #333;
background: rgba(0,0,0,0.4);
color: inherit;
width: 100%;
height: 100%;
margin: 0;
......@@ -151,7 +190,7 @@
.carousel-inner {
height: 100% !important;
width: 100% !important;
max-height: calc(100vw - 300px);
max-height: calc(100vh - 300px);
}
.carousel-image {
......@@ -176,7 +215,9 @@
/* z-index: 20; */
top: auto;
bottom: 0 !important;
height: 70px;
height: 100%;
width: auto;
padding: 2em;
}
.carousel-indicators {
......
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