Feat: Add carousel to modular layouts
This commit is contained in:
parent
29443d6698
commit
fe0f29272b
GPG key ID:
989DE36109AFA354
1
.vscode/ltex.dictionary.en-US.txt
vendored
1
.vscode/ltex.dictionary.en-US.txt
vendored
|
|
@ -8,3 +8,4 @@ Murnau
|
|||
MakerLab
|
||||
blueROCK
|
||||
digitalrock
|
||||
assable
|
||||
|
|
|
|||
|
|
@ -1,10 +1,24 @@
|
|||
01-hero:
|
||||
modularLayout: hero
|
||||
00-carousel:
|
||||
modularLayout: carousel
|
||||
classes: 'text-light overlay-dark'
|
||||
positionY: 80
|
||||
image: "images/home/Hero.jpg"
|
||||
imageParallax: true
|
||||
content: "# Welcome \n ## Itsblue Development"
|
||||
items:
|
||||
-
|
||||
image: "images/reader-clock/cnc.jpg"
|
||||
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:
|
||||
modularLayout: features
|
||||
|
|
@ -31,7 +45,7 @@
|
|||
header: 'Server management'
|
||||
|
||||
content: |
|
||||
# What's our field of activity?
|
||||
# Our field of activity
|
||||
## **everything around electronics**
|
||||
|
||||
03-headlineCurrentProjects:
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import 'theme/header';
|
||||
@import 'theme/footer';
|
||||
@import 'theme/menu';
|
||||
@import 'theme/carousels';
|
||||
|
||||
// Extra Skeleton Styling
|
||||
@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">
|
||||
|
||||
<!-- Styles -->
|
||||
{{ $scssStyles := (slice "spectre" "theme") }}
|
||||
{{ $scssStyles := (slice "spectre" "spectre-exp" "theme") }}
|
||||
{{ range $scssStyles }}
|
||||
{{ $scssOptions := (dict "targetPath" (print "/css/compiled/" . ".css") "outputStyle" "compressed" "enableSourceMap" true) }}
|
||||
{{ $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