Feat: Add carousel to modular layouts
This commit is contained in:
parent
29443d6698
commit
fe0f29272b
1
.vscode/ltex.dictionary.en-US.txt
vendored
1
.vscode/ltex.dictionary.en-US.txt
vendored
|
@ -8,3 +8,4 @@ Murnau
|
||||||
MakerLab
|
MakerLab
|
||||||
blueROCK
|
blueROCK
|
||||||
digitalrock
|
digitalrock
|
||||||
|
assable
|
||||||
|
|
|
@ -1,10 +1,24 @@
|
||||||
01-hero:
|
00-carousel:
|
||||||
modularLayout: hero
|
modularLayout: carousel
|
||||||
classes: 'text-light overlay-dark'
|
classes: 'text-light overlay-dark'
|
||||||
positionY: 80
|
items:
|
||||||
image: "images/home/Hero.jpg"
|
-
|
||||||
imageParallax: true
|
image: "images/reader-clock/cnc.jpg"
|
||||||
content: "# Welcome \n ## Itsblue Development"
|
positionY: 80
|
||||||
|
content: |
|
||||||
|
## Introducing: The Reader-Clock
|
||||||
|
A beautiful, handcrafted clock, which shows the time in form of quotes from actual books
|
||||||
|
links:
|
||||||
|
-
|
||||||
|
text: "Check it out"
|
||||||
|
href: "/products/reader-clock"
|
||||||
|
classes: "btn btn-primary"
|
||||||
|
-
|
||||||
|
image: "images/scstw/hero.jpeg"
|
||||||
|
positionY: 80
|
||||||
|
content: |
|
||||||
|
# Test
|
||||||
|
## Lalaal
|
||||||
|
|
||||||
02-highlights:
|
02-highlights:
|
||||||
modularLayout: features
|
modularLayout: features
|
||||||
|
@ -31,7 +45,7 @@
|
||||||
header: 'Server management'
|
header: 'Server management'
|
||||||
|
|
||||||
content: |
|
content: |
|
||||||
# What's our field of activity?
|
# Our field of activity
|
||||||
## **everything around electronics**
|
## **everything around electronics**
|
||||||
|
|
||||||
03-headlineCurrentProjects:
|
03-headlineCurrentProjects:
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
@import 'theme/header';
|
@import 'theme/header';
|
||||||
@import 'theme/footer';
|
@import 'theme/footer';
|
||||||
@import 'theme/menu';
|
@import 'theme/menu';
|
||||||
|
@import 'theme/carousels';
|
||||||
|
|
||||||
// Extra Skeleton Styling
|
// Extra Skeleton Styling
|
||||||
@import 'theme/blog';
|
@import 'theme/blog';
|
||||||
|
|
64
themes/quark-hugo/assets/scss/theme/_carousels.scss
Normal file
64
themes/quark-hugo/assets/scss/theme/_carousels.scss
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
.carousel {
|
||||||
|
|
||||||
|
height: 30rem;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.carousel-container {
|
||||||
|
.item-prev,
|
||||||
|
.item-next {
|
||||||
|
background: rgba(#000, 0.05);
|
||||||
|
border-color: rgba($gray-color, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-prev.btn,
|
||||||
|
.item-next.btn {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.1rem;
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: inset 0 0 0 .05rem transparentize($border-color, 0.5);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: inset 0 0 0 .05rem transparentize($border-color, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-hero {
|
||||||
|
.carousel-nav {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes carousel-slidein {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes carousel-slideout {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,7 +3,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Styles -->
|
<!-- Styles -->
|
||||||
{{ $scssStyles := (slice "spectre" "theme") }}
|
{{ $scssStyles := (slice "spectre" "spectre-exp" "theme") }}
|
||||||
{{ range $scssStyles }}
|
{{ range $scssStyles }}
|
||||||
{{ $scssOptions := (dict "targetPath" (print "/css/compiled/" . ".css") "outputStyle" "compressed" "enableSourceMap" true) }}
|
{{ $scssOptions := (dict "targetPath" (print "/css/compiled/" . ".css") "outputStyle" "compressed" "enableSourceMap" true) }}
|
||||||
{{ $style := resources.Get (print "/scss/" . ".scss") | resources.ToCSS $scssOptions }}
|
{{ $style := resources.Get (print "/scss/" . ".scss") | resources.ToCSS $scssOptions }}
|
||||||
|
|
67
themes/quark-hugo/layouts/partials/modular/carousel.html
Normal file
67
themes/quark-hugo/layouts/partials/modular/carousel.html
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
<div class="carousel section carousel-hero {{ .classes }}">
|
||||||
|
<!-- carousel locator -->
|
||||||
|
{{ $currentSlideIndex := 0 }}
|
||||||
|
{{ range .items }}
|
||||||
|
<input
|
||||||
|
class="carousel-locator"
|
||||||
|
id="slide-{{ $currentSlideIndex }}"
|
||||||
|
type="radio"
|
||||||
|
name="carousel-radio"
|
||||||
|
hidden=""
|
||||||
|
{{ if eq $currentSlideIndex 0 }}
|
||||||
|
checked=""
|
||||||
|
{{ end }}
|
||||||
|
/>
|
||||||
|
{{ $currentSlideIndex = add $currentSlideIndex 1}}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- carousel container -->
|
||||||
|
<div class="carousel-container">
|
||||||
|
<!-- carousel item -->
|
||||||
|
{{ $currentSlideIndex = 0 }}
|
||||||
|
{{ $lastSlideIndex := sub (len .items) 1 }}
|
||||||
|
{{ range .items }}
|
||||||
|
<figure class="carousel-item modular-hero hero" style="{{ with .image }}background-image: url('{{ . | relURL }}');{{ end }} {{ with .positionY }} background-position-y: {{ . }}%;{{ end }}">
|
||||||
|
{{ $previousSlideIndex := sub $currentSlideIndex 1 }}
|
||||||
|
{{ if lt $previousSlideIndex 0 }}
|
||||||
|
{{ $previousSlideIndex = $lastSlideIndex }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ $nextSlideIndex := add $currentSlideIndex 1}}
|
||||||
|
{{ if gt $nextSlideIndex $lastSlideIndex }}
|
||||||
|
{{ $nextSlideIndex = 0 }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<div class="image-overlay"></div>
|
||||||
|
|
||||||
|
<label class="item-prev btn" for="slide-{{ $previousSlideIndex }}">
|
||||||
|
<i class="fa fa-chevron-left"></i>
|
||||||
|
</label>
|
||||||
|
<label class="item-next btn" for="slide-{{ $nextSlideIndex }}">
|
||||||
|
<i class="fa fa-chevron-right"></i>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<section class="container {{ site.Params.GridSize }} carousel-content" style="text-align: {{ default "center" .align }}">
|
||||||
|
{{ .content | markdownify }}
|
||||||
|
{{ with .links }}
|
||||||
|
<p>
|
||||||
|
{{ range . }}
|
||||||
|
<a href="{{ .href }}" class="{{ .classes }}" {{ with .target }}target="{{.}}"{{ end }}>{{ .text }}</a>
|
||||||
|
{{ end }}
|
||||||
|
</p>
|
||||||
|
{{ end }}
|
||||||
|
</section>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
{{ $currentSlideIndex = add $currentSlideIndex 1}}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<!-- carousel navigation -->
|
||||||
|
<div class="carousel-nav">
|
||||||
|
{{$currentSlideIndex = 0}}
|
||||||
|
{{ range .items }}
|
||||||
|
<label class="nav-item text-hide c-hand" for="slide-{{ $currentSlideIndex }}">{{ $currentSlideIndex }}</label>
|
||||||
|
{{ $currentSlideIndex = add $currentSlideIndex 1}}
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
Loading…
Reference in a new issue