From 7e7c6af732f14cc3ed05afb88742ba3a5938889a Mon Sep 17 00:00:00 2001 From: Sojon Date: Wed, 25 Jan 2023 15:56:44 +0600 Subject: [PATCH 1/5] updated how-it-works section --- content/english/_index.md | 2 +- content/english/how-it-works.md | 8 +- themes/delta/assets/js/script.js | 18 ++++ themes/delta/assets/scss/templates/_main.scss | 92 +++++++++++++++---- themes/delta/layouts/_default/optimizor.html | 37 ++++---- .../delta/layouts/partials/work-process.html | 33 +++---- 6 files changed, 132 insertions(+), 58 deletions(-) diff --git a/content/english/_index.md b/content/english/_index.md index 3f4e0ac0..114319fd 100644 --- a/content/english/_index.md +++ b/content/english/_index.md @@ -63,7 +63,7 @@ fun_facts: content: Make hires 40%
faster content_color: "" work_process: - enable: false + enable: true section: how-it-works image_and_content_block: enable: false diff --git a/content/english/how-it-works.md b/content/english/how-it-works.md index 7c29d8cd..0744d664 100644 --- a/content/english/how-it-works.md +++ b/content/english/how-it-works.md @@ -28,25 +28,25 @@ work_process: - title: "Ultimate Guide" title_color: "" image: "images/process/01.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" - title: "How to webinar" title_color: "" image: "images/process/02.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" - title: "workshop & FAQ" title_color: "" image: "images/process/03.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" - title: "Collaboration" title_color: "" image: "images/process/04.jpg" - content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." + content: "Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat. Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat.Lorem ipsum dolor amet cosne adipis scing elit. Purus donec nunc eros ullamcorper fegiat." content_color: "" diff --git a/themes/delta/assets/js/script.js b/themes/delta/assets/js/script.js index 7cc61fee..2d520dcf 100644 --- a/themes/delta/assets/js/script.js +++ b/themes/delta/assets/js/script.js @@ -278,6 +278,24 @@ $(document).ready(function () { clickable: true, }, }); + + var $processItem = $(".process-item"); + $processItem.each(function () { + var $this = $(this); + $(window).on("scroll", function () { + if ( + $this.offset().top - $(window).scrollTop() < + $(window).outerHeight() - 250 + ) { + $this.find(".image-block").addClass("active"); + } + }); + }); + $(window).on("scroll", function () { + if ($(window).scrollTop() === 0) { + $processItem.find(".image-block").removeClass("active"); + } + }); }); //custom diff --git a/themes/delta/assets/scss/templates/_main.scss b/themes/delta/assets/scss/templates/_main.scss index 3437a151..c2c54982 100644 --- a/themes/delta/assets/scss/templates/_main.scss +++ b/themes/delta/assets/scss/templates/_main.scss @@ -590,22 +590,18 @@ main:empty { // process-item .process-item { - .process-image { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - padding: 30px; - padding-bottom: 0; - margin-bottom: 30px; - img { - border-top-left-radius: 6px; - border-top-right-radius: 6px; - } + position: relative; + margin-bottom: 120px; + @include tablet { + margin-bottom: 0; } - - .block { + .content-block { position: relative; + padding: 100px 30px; &::before { - position: absolute; + display: inline-block; + margin-bottom: 30px; + text-align: center; content: attr(data-count); height: 50px; width: 50px; @@ -613,19 +609,68 @@ main:empty { font-size: 25px; font-family: $font-primary; font-weight: 900; - top: 0; - left: calc(50% - 25px); background-color: $white; border-radius: 100%; box-shadow: 0px 15px 50px 10px rgba($black, 0.05); } } + .image-block { + perspective: 1800px; + opacity: 0; + .process-image { + opacity: 0; + will-change: transform; + transform-origin: center top; + img { + transform: translateY(100px); + } + } + &.active { + opacity: 1; + .process-image { + opacity: 1; + transition: 0.45s; + img { + transform: translateY(40px); + transition: 0.6s cubic-bezier(0.17, 0.84, 0.44, 1); + transition-delay: 0.1s; + } + } + } + } + .is-left { + .process-image { + transform: translate(0, 70px) rotate(-4e-5deg) rotateY(15deg) + rotateX(15deg); + } + .active { + .process-image { + transform: translate(0, 0) rotate(-4e-5deg) rotateY(15deg) + rotateX(9.99994deg); + } + } + } + .is-right { + .process-image { + transform: translate(0, 70px) rotate(-4e-5deg) rotateY(-20deg) + rotateX(15deg); + } + .active { + .process-image { + transform: translate(0, 0) rotate(-4e-5deg) rotateY(-20deg) + rotateX(9.99994deg); + } + } + } &:nth-child(1), &:nth-child(5) { .process-image { background-color: $color-secondary; + img { + box-shadow: 0 0 60px darken($color-secondary, 25%); + } } - .block::before { + .content-block::before { color: $color-secondary; } } @@ -633,8 +678,11 @@ main:empty { &:nth-child(6) { .process-image { background-color: $color-tertiary; + img { + box-shadow: 0 0 60px darken($color-tertiary, 25%); + } } - .block::before { + .content-block::before { color: $color-tertiary; } } @@ -642,8 +690,11 @@ main:empty { &:nth-child(7) { .process-image { background-color: $color-quaternary; + img { + box-shadow: 0 0 60px darken($color-quaternary, 25%); + } } - .block::before { + .content-block::before { color: $color-quaternary; } } @@ -651,8 +702,11 @@ main:empty { &:nth-child(8) { .process-image { background-color: $color-primary; + img { + box-shadow: 0 0 60px darken($color-primary, 25%); + } } - .block::before { + .content-block::before { color: $color-primary; } } diff --git a/themes/delta/layouts/_default/optimizor.html b/themes/delta/layouts/_default/optimizor.html index 4ef0f930..66c4aa09 100644 --- a/themes/delta/layouts/_default/optimizor.html +++ b/themes/delta/layouts/_default/optimizor.html @@ -50,36 +50,37 @@

-
-
+
+
-

{{.subtitle | markdownify}}

-

{{.title | markdownify}}

+

{{.subtitle | markdownify}}

+
-
-
- {{ $.Scratch.Set "counter" 0 }} - {{range .process_item}} - {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }} -
- {{$n := $.Scratch.Get "counter"}} -
- {{with .image}} -
+ {{range $i, $e := .process_item}} +
+
+
+ {{with .image}} +
+
{{$img:= resources.Get . }} {{$img:= $img.Resize "350x"}} {{$imgWebp:= $img.Resize "350x webp"}} - Banner Image + Banner Image
- {{end}} -

{{.title | markdownify}}

+
+ {{end}} +
+
+
+

{{.content | markdownify}}

- {{end}}
+ {{end}}
diff --git a/themes/delta/layouts/partials/work-process.html b/themes/delta/layouts/partials/work-process.html index af1ef987..f8f5e06f 100644 --- a/themes/delta/layouts/partials/work-process.html +++ b/themes/delta/layouts/partials/work-process.html @@ -1,36 +1,37 @@ {{with .Params.work_process}} -
+
-
-
+
+

{{.subtitle | markdownify}}

-
-
- {{ $.Scratch.Set "counter" 0 }} - {{range .process_item}} - {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }} -
- {{$n := $.Scratch.Get "counter"}} -
- {{with .image}} -
+ {{range $i, $e := .process_item}} +
+
+
+ {{with .image}} +
+
{{$img:= resources.Get . }} {{$img:= $img.Resize "350x"}} {{$imgWebp:= $img.Resize "350x webp"}} - Banner Image + Banner Image
- {{end}} +
+ {{end}} +
+
+

{{.content | markdownify}}

- {{end}}
+ {{end}}
From 2ae98dee26d228cece0b5226976d7b0a50850c79 Mon Sep 17 00:00:00 2001 From: Sojon Date: Tue, 7 Feb 2023 11:17:49 +0600 Subject: [PATCH 2/5] updated how-it-works page --- content/english/_index.md | 4 +- themes/delta/assets/js/script.js | 6 +- themes/delta/assets/scss/templates/_main.scss | 70 +++++++++++++++++++ .../delta/layouts/_default/how-it-works.html | 40 +---------- themes/delta/layouts/_default/optimizor.html | 41 +---------- themes/delta/layouts/index.html | 4 +- .../delta/layouts/partials/how-it-works.html | 48 +++++++++++++ .../delta/layouts/partials/work-process.html | 51 ++++++-------- 8 files changed, 149 insertions(+), 115 deletions(-) create mode 100644 themes/delta/layouts/partials/how-it-works.html diff --git a/content/english/_index.md b/content/english/_index.md index 114319fd..fdcf9805 100644 --- a/content/english/_index.md +++ b/content/english/_index.md @@ -62,8 +62,8 @@ fun_facts: counter_suffix: "%" content: Make hires 40%
faster content_color: "" -work_process: - enable: true +how_it_works: + enable: false section: how-it-works image_and_content_block: enable: false diff --git a/themes/delta/assets/js/script.js b/themes/delta/assets/js/script.js index 2d520dcf..340e905b 100644 --- a/themes/delta/assets/js/script.js +++ b/themes/delta/assets/js/script.js @@ -279,8 +279,8 @@ $(document).ready(function () { }, }); - var $processItem = $(".process-item"); - $processItem.each(function () { + var processItem = $(".process-item"); + processItem.each(function () { var $this = $(this); $(window).on("scroll", function () { if ( @@ -293,7 +293,7 @@ $(document).ready(function () { }); $(window).on("scroll", function () { if ($(window).scrollTop() === 0) { - $processItem.find(".image-block").removeClass("active"); + processItem.find(".image-block").removeClass("active"); } }); }); diff --git a/themes/delta/assets/scss/templates/_main.scss b/themes/delta/assets/scss/templates/_main.scss index c2c54982..5c6822ad 100644 --- a/themes/delta/assets/scss/templates/_main.scss +++ b/themes/delta/assets/scss/templates/_main.scss @@ -712,6 +712,76 @@ main:empty { } } +// work-process-item +.work-process-item { + .work-process-image { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + padding: 30px; + padding-bottom: 0; + margin-bottom: 30px; + img { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + } + + .block { + position: relative; + &::before { + position: absolute; + content: attr(data-count); + height: 50px; + width: 50px; + line-height: 50px; + font-size: 25px; + font-family: $font-primary; + font-weight: 900; + top: 0; + left: calc(50% - 25px); + background-color: $white; + border-radius: 100%; + box-shadow: 0px 15px 50px 10px rgba($black, 0.05); + } + } + &:nth-child(1), + &:nth-child(5) { + .work-process-image { + background-color: $color-secondary; + } + .block::before { + color: $color-secondary; + } + } + &:nth-child(2), + &:nth-child(6) { + .work-process-image { + background-color: $color-tertiary; + } + .block::before { + color: $color-tertiary; + } + } + &:nth-child(3), + &:nth-child(7) { + .work-process-image { + background-color: $color-quaternary; + } + .block::before { + color: $color-quaternary; + } + } + &:nth-child(4), + &:nth-child(8) { + .work-process-image { + background-color: $color-primary; + } + .block::before { + color: $color-primary; + } + } +} + // testiminials style .testimonials-carousel.has-border { &::after { diff --git a/themes/delta/layouts/_default/how-it-works.html b/themes/delta/layouts/_default/how-it-works.html index 9723ef36..2b5daef8 100644 --- a/themes/delta/layouts/_default/how-it-works.html +++ b/themes/delta/layouts/_default/how-it-works.html @@ -33,7 +33,7 @@

{{.title | markdownify}}

{{end}} -
+
@@ -44,43 +44,7 @@

{{.title | markdownify}}

-{{with .Params.work_process}} -
-
-
-
-
- {{with .subtitle}}

{{. | markdownify}}

{{end}} -

{{.title | markdownify}}

-
-
-
-
- {{ $.Scratch.Set "counter" 0 }} - {{range .process_item}} - {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }} -
- {{$n := $.Scratch.Get "counter"}} -
- {{with .image}} -
- {{$img:= resources.Get . }} - {{$img:= $img.Resize "350x"}} - {{$imgWebp:= $img.Resize "350x webp"}} - Banner Image -
- {{end}} -

{{.title | markdownify}}

-

{{.content | markdownify}}

-
-
- {{end}} -
-
-
-
-
-{{end}} +{{ partial "how-it-works.html" . }} {{with site.GetPage "home-2" }} {{with .Params.image_and_content_block}} diff --git a/themes/delta/layouts/_default/optimizor.html b/themes/delta/layouts/_default/optimizor.html index 66c4aa09..9f1fe3df 100644 --- a/themes/delta/layouts/_default/optimizor.html +++ b/themes/delta/layouts/_default/optimizor.html @@ -47,44 +47,7 @@

-
-
-
-
-

{{.subtitle | markdownify}}

- -
-
- {{range $i, $e := .process_item}} -
-
-
- {{with .image}} -
-
- {{$img:= resources.Get . }} - {{$img:= $img.Resize "350x"}} - {{$imgWebp:= $img.Resize "350x webp"}} - Banner Image -
-
- {{end}} -
-
-
- -

{{.content | markdownify}}

-
-
-
-
- {{end}} -
-
-

-{{end}} +{{ partial "work-process.html" . }} {{with site.GetPage "home-2" }} {{with .Params.image_and_content_block}} @@ -154,4 +117,4 @@

{{.title | markdownify}}

{{end}} {{ partial "call-to-action-2.html" . }} -{{ end }} +{{ end }} \ No newline at end of file diff --git a/themes/delta/layouts/index.html b/themes/delta/layouts/index.html index 06a5b5d5..e87b1980 100644 --- a/themes/delta/layouts/index.html +++ b/themes/delta/layouts/index.html @@ -155,10 +155,10 @@

+
+
+
+
+

{{.subtitle | markdownify}}

+ +
+
+ {{range $i, $e := .process_item}} +
+
+
+ {{with .image}} +
+
+ {{$img:= resources.Get . }} + {{$img:= $img.Resize "350x"}} + {{$imgWebp:= $img.Resize "350x webp"}} + Banner Image +
+
+ {{end}} +
+
+
+ +

{{.content | markdownify}}

+
+
+
+
+ {{end}} +
+
+ +
+ + + + + + + +
+ +{{end}} \ No newline at end of file diff --git a/themes/delta/layouts/partials/work-process.html b/themes/delta/layouts/partials/work-process.html index f8f5e06f..86afb0e8 100644 --- a/themes/delta/layouts/partials/work-process.html +++ b/themes/delta/layouts/partials/work-process.html @@ -1,48 +1,37 @@ {{with .Params.work_process}} -
+
-
-
+
+
-

{{.subtitle | markdownify}}

- + {{with .subtitle}}

{{. | markdownify}}

{{end}} +

{{.title | markdownify}}

- {{range $i, $e := .process_item}} -
-
-
- {{with .image}} -
-
+
+
+ {{ $.Scratch.Set "counter" 0 }} + {{range .process_item}} + {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }} +
+ {{$n := $.Scratch.Get "counter"}} +
+ {{with .image}} +
{{$img:= resources.Get . }} {{$img:= $img.Resize "350x"}} {{$imgWebp:= $img.Resize "350x webp"}} - Banner Image + Banner Image
-
- {{end}} -
-
-
- -

{{.content | markdownify}}

+ {{end}} +

{{.title | markdownify}}

+

{{.content | markdownify}}

+ {{end}}
- {{end}}
- -
- - - - - - - -
{{end}} From c8373b11f7711cfe2e70076aa56d465fdaaaacfe Mon Sep 17 00:00:00 2001 From: Sojon Date: Tue, 7 Feb 2023 11:36:25 +0600 Subject: [PATCH 3/5] fix search popup in how-it-works page --- themes/delta/layouts/_default/how-it-works.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/delta/layouts/_default/how-it-works.html b/themes/delta/layouts/_default/how-it-works.html index 2b5daef8..8e9074c1 100644 --- a/themes/delta/layouts/_default/how-it-works.html +++ b/themes/delta/layouts/_default/how-it-works.html @@ -1,8 +1,8 @@ {{ define "main" }} -