Commit 2237cade authored by Christian Engwer's avatar Christian Engwer

fix layout glitches and jumping caption in the carousel

parent 6b3b3d88
......@@ -3,24 +3,28 @@
{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
{{ end }}
{{ $c := $.Scratch.Get "counter" }}
<div class="carousel-image">
{{ range $img := .Params.image }}<img src="{{ $img }}"
class="figure-img ratio img-responsive img-rounded"
style="max-width: calc((100% / {{ $c }}) - .5ex);
max-height: 100%;
display: inline-block; scale=10;
margin-left: .25ex; margin-right: .25ex;"
alt="{{ $.Title }}">{{ end }}
<div class="carousel-image">{{ range $img := .Params.image }}
<div style="background-image: url('{{ $img }}');
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
width: calc((100% / {{ $c }}) - .5ex);
height: 100%;
display: inline-block;
margin-left: .25ex; margin-right: .25ex;"
></div>{{ end }}
</div>
<div class="carousel-caption">
<div class="carousel-dark">
<h style="font-weight: bold">{{ .Title }}</h>
<h style="font-weight: bold;">{{ .Title }}</h>
<div class="caption-details">
<p>{{ .Summary }}</p>
<p style="text-align: center; bottom: 0">
<p>
<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>
<span style="font-size: 75%;">&nbsp;Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.</span></p>
</div>
</div>
</div>
......@@ -88,18 +88,6 @@
display: none;
}
.carousel,
.item,
.item.active {
font-family: helvetica;
height: 100% !important;
width: 100% !important;
}
.carousel {
font-size: 80%;
}
#fourofour {
min-height: calc(100vh - 60px) !important;
width: 100% !important;
......@@ -119,13 +107,22 @@
.btn.start-me { margin: 1ex auto;}
#fullpage-carousel, #topCarousel {
height: calc(50vh - 75px) !important;
font-family: helvetica;
font-size: 80%;
height: calc(50vh - 38px) !important;
width: 100% !important;
background: #999;
}
.carousel-caption a {
color: #add9ff;
.carousel,
#topCarousel
.item,
.carousel
.item.active,
.carousel
.item.next {
height: 100% !important;
width: 100% !important;
}
.carousel-caption p,
......@@ -139,17 +136,22 @@
color: white !important;
}
.carousel-caption a {
color: #add9ff;
}
#topCarousel .carousel-caption {
background: rgba(255,255,255,0.5);
width: 100%;
font-weight: 400;
font-size: 125%;
height: 3em;
height: 2.7em;
margin: 0;
padding: 0;
right: 0 !important;
bottom: 0 !important;
left: auto;
left: 0 !important;
text-shadow:
0px 0px 2ex black,
......@@ -170,37 +172,39 @@
0px 0px 1ex black;
font-weight: inherit;
color: white;
}
#topCarousel.fullinfo .carousel-caption {
min-height: 75px;
max-height: 75%;
height: auto;
}
#topCarousel .caption-details {
display: none;
}
#topCarousel.fullinfo .caption-details {
display: block;
}
.carousel-dark {
background: rgba(0,0,0,0.4);
color: inherit;
width: 100%;
height: 100%;
margin: 0;
padding: 1ex;
overflow: hidden;
/* overflow: hidden; */
}
.carousel-inner {
height: 100% !important;
width: 100% !important;
max-height: calc(100vh - 300px);
}
.carousel-image {
height: calc(100% - 2ex);
width: calc(100% - 2ex);
margin-top: 1ex;
margin-left: 1ex;
padding: 1ex;
text-align: center;
white-space: nowrap;
overflow: hidden
}
.carousel-indicators li {
......@@ -213,7 +217,6 @@
{
background: none !important;
-filter: none !important;
/* z-index: 20; */
top: auto;
bottom: 0 !important;
height: 100%;
......
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