Skip to content

E
earth-and-city
Commit 72acf3f0 authored by Evgeny Talagaev's avatar Evgeny Talagaev
Browse files
Options

work with top-slider (change logic)

parent a15ade53
Hide whitespace changes
Inline Side-by-side
Showing with 1460 additions and 1186 deletions
src/blocks/bg-sliders/bg-sliders.js
View file @ 72acf3f0
......@@ -2,77 +2,41 @@
import ready from 'Utils/documentReady.js';
ready(function() {
const bgSliderWrapper = document.querySelector('.bg-sliders');
const bgSlider = document.querySelector('.bg-sliders');
if (bgSliderWrapper && window.getComputedStyle(bgSliderWrapper).display != 'none') {
const bgSliders = document.querySelectorAll('.bg-slider');
if (bgSlider && window.getComputedStyle(bgSlider).display != 'none') {
const bgSlides = document.querySelectorAll('.bg-slider');
if (bgSliders.length > 0) {
const sldierDuration = parseInt(window.getComputedStyle(bgSliders[0]).getPropertyValue('--slider-duration-js'));
const sliderDelay = 1000;
if (bgSlides.length > 0) {
const sldierDuration = parseInt(window.getComputedStyle(bgSlides[0]).getPropertyValue('--slider-duration-js'));
const sliderDelay = 650;
const sliderAnimation = sldierDuration + sliderDelay;
const sliderDelayInAction = sldierDuration + (sliderAnimation * 2);
bgSliders.forEach(slider => {
firstAction(slider);
sliderInAction(slider, sliderDelayInAction); //1500 + 2500 + 2500 = 6500
});
function firstAction(slider) {
let activeSlide = slider.firstElementChild
let activeSlideClasses = activeSlide.dataset.classes.split(' ');
activeSlide.classList.add('active');
setTimeout(() => {
if (activeSlideClasses[1]) {
slider.classList.add(activeSlideClasses[0]);
}
activeSlide.classList.remove('active');
setTimeout(() => {
activeSlideClasses[1] ? slider.classList.add(activeSlideClasses[1]) : slider.classList.add(activeSlideClasses[0]);
activeSlide.classList.add('active');
}, sldierDuration)
}, sliderAnimation);
}
function sliderInAction(slider, delay) {
setTimeout(() => {
let activeSlide = slider.querySelector('.active');
let activeSlideClasses = activeSlide.dataset.classes.split(' ');
let nextSlide = activeSlide.nextElementSibling === null ? slider.firstElementChild : activeSlide.nextElementSibling;
let nextSlideClasses = nextSlide.dataset.classes.split(' ');
slider.classList.remove(...activeSlideClasses);
if (nextSlideClasses.length > 1) {
sliderInActionPart(activeSlide, nextSlide, nextSlideClasses);
} else {
sliderInActionPart(activeSlide, nextSlide, nextSlideClasses);
}
}, delay);
function sliderInActionPart(activeSlide, nextSlide, nextSlideClasses) {
if (nextSlideClasses[1]) {
slider.classList.add(nextSlideClasses[0]);
}
activeSlide.classList.remove('active');
sliderInAction(bgSlides);
function sliderInAction(slides) {
let count = 0;
showSlide(slides[count]);
function showSlide(slide) {
slide.classList.add('active', 'start');
setTimeout(() => {
nextSlideClasses[1] ? slider.classList.add(nextSlideClasses[1]) : slider.classList.add(nextSlideClasses[0]);
nextSlide.classList.add('active');
sliderInAction(slider, sliderAnimation);
}, sldierDuration);
slide.classList.add('end');
setTimeout(() => {
slide.classList.remove('active', 'start', 'end');
count++;
if (count === slides.length) count = 0;
showSlide(slides[count]);
// setTimeout(() => {
// }, sldierDuration);
}, sldierDuration);
}, sliderAnimation);
}
};
};
}
}
}
});
src/blocks/bg-sliders/bg-sliders.pug
View file @ 72acf3f0
......@@ -18,127 +18,59 @@ mixin bg-sliders(mods)
}
.bg-sliders(class=allMods)&attributes(attributes)
section.bg-slider.bg-slider--1
.bg-slider__item(data-slide="1", data-classes="stage-1-1 stage-1-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-1.png);")
.bg-slider__item(data-slide="2", data-classes="stage-2-1 stage-2-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-2.jpg);")
.bg-slider__item(data-slide="3", data-classes="stage-3-1 stage-3-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-3.jpg);")
.bg-slider__item(data-slide="4", data-classes="stage-4-1 stage-4-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-4.jpg);")
.bg-slider__item(data-slide="5", data-classes="stage-5-1 stage-5-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-5.jpg);")
.bg-slider__item(data-slide="6", data-classes="stage-6-1 stage-6-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-6.jpg);")
.bg-slider.bg-slider--0
.bg-slider__item.bg-slider__animation-0-1(style="background-image: url(img/bg-s-1-1.webp)")
.bg-slider__item.bg-slider__animation-0-2(style="background-image: url(img/bg-s-1-2.webp)")
.bg-slider__item.bg-slider__animation-0-3(style="background-image: url(img/bg-s-1-3.webp)")
.bg-slider__item.bg-slider__animation-0-4(style="background-image: url(img/bg-s-1-4.webp)")
.bg-slider__item.bg-slider__animation-0-5(style="background-image: url(img/bg-s-1-5.webp)")
.bg-slider.bg-slider--1
.bg-slider__item.bg-slider__animation-1-1(style="background-image: url(img/bg-s-2-1.webp)")
.bg-slider__item.bg-slider__animation-1-2(style="background-image: url(img/bg-s-2-2.webp)")
.bg-slider__item.bg-slider__animation-1-3(style="background-image: url(img/bg-s-2-3.webp)")
.bg-slider__item.bg-slider__animation-1-4(style="background-image: url(img/bg-s-2-4.webp)")
.bg-slider__item.bg-slider__animation-1-5(style="background-image: url(img/bg-s-2-5.webp)")
.bg-slider.bg-slider--2
.bg-slider__item.bg-slider__animation-2-1(style="background-image: url(img/bg-s-3-1.webp)")
.bg-slider__item.bg-slider__animation-2-2(style="background-image: url(img/bg-s-3-2.webp)")
.bg-slider__item.bg-slider__animation-2-3(style="background-image: url(img/bg-s-3-3.webp)")
.bg-slider__item.bg-slider__animation-2-4(style="background-image: url(img/bg-s-3-4.webp)")
.bg-slider__item.bg-slider__animation-2-5(style="background-image: url(img/bg-s-3-5.webp)")
.bg-slider.bg-slider--3
.bg-slider__item.bg-slider__animation-3-1(style="background-image: url(img/bg-s-4-1.webp)")
.bg-slider__item.bg-slider__animation-3-2(style="background-image: url(img/bg-s-4-2.webp)")
.bg-slider__item.bg-slider__animation-3-3(style="background-image: url(img/bg-s-4-3.webp)")
.bg-slider__item.bg-slider__animation-3-4(style="background-image: url(img/bg-s-4-4.webp)")
.bg-slider__item.bg-slider__animation-3-5(style="background-image: url(img/bg-s-4-5.webp)")
.bg-slider.bg-slider--4
.bg-slider__item.bg-slider__animation-4-1(style="background-image: url(img/bg-s-5-1.webp)")
.bg-slider__item.bg-slider__animation-4-2(style="background-image: url(img/bg-s-5-2.webp)")
.bg-slider__item.bg-slider__animation-4-3(style="background-image: url(img/bg-s-5-3.webp)")
.bg-slider__item.bg-slider__animation-4-4(style="background-image: url(img/bg-s-5-4.webp)")
.bg-slider__item.bg-slider__animation-4-5(style="background-image: url(img/bg-s-5-5.webp)")
.bg-slider.bg-slider--5
.bg-slider__item.bg-slider__animation-5-1(style="background-image: url(img/bg-s-6-1.webp)")
.bg-slider__item.bg-slider__animation-5-2(style="background-image: url(img/bg-s-6-2.webp)")
.bg-slider__item.bg-slider__animation-5-3(style="background-image: url(img/bg-s-6-3.webp)")
.bg-slider__item.bg-slider__animation-5-4(style="background-image: url(img/bg-s-6-4.webp)")
.bg-slider__item.bg-slider__animation-5-5(style="background-image: url(img/bg-s-6-5.webp)")
.bg-slider.bg-slider--6
.bg-slider__item.bg-slider__animation-6-1(style="background-image: url(img/bg-s-7-1.webp)")
.bg-slider__item.bg-slider__animation-6-2(style="background-image: url(img/bg-s-7-2.webp)")
.bg-slider__item.bg-slider__animation-6-3(style="background-image: url(img/bg-s-7-3.webp)")
.bg-slider__item.bg-slider__animation-6-4(style="background-image: url(img/bg-s-7-4.webp)")
.bg-slider__item.bg-slider__animation-6-5(style="background-image: url(img/bg-s-7-5.webp)")
.bg-slider.bg-slider--7
.bg-slider__item.bg-slider__animation-7-1(style="background-image: url(img/bg-s-8-1.webp)")
.bg-slider__item.bg-slider__animation-7-2(style="background-image: url(img/bg-s-8-2.webp)")
.bg-slider__item.bg-slider__animation-7-3(style="background-image: url(img/bg-s-8-3.webp)")
.bg-slider__item.bg-slider__animation-7-4(style="background-image: url(img/bg-s-8-4.webp)")
.bg-slider__item.bg-slider__animation-7-5(style="background-image: url(img/bg-s-8-5.webp)")
.bg-slider__item(data-slide="7", data-classes="stage-7-1 stage-7-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-7.jpg);")
.bg-slider__item(data-slide="8", data-classes="stage-8-1 stage-8-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-1-1.jpg);")
section.bg-slider.bg-slider--2
.bg-slider__item(data-slide="1", data-classes="stage-1-1 stage-1-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-1.png);")
.bg-slider__item(data-slide="2", data-classes="stage-2-1 stage-2-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-2.jpg);")
.bg-slider__item(data-slide="3", data-classes="stage-3-1 stage-3-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-3.jpg);")
.bg-slider__item(data-slide="4", data-classes="stage-4-1 stage-4-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-4.jpg);")
.bg-slider__item(data-slide="5", data-classes="stage-5-1 stage-5-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-5.jpg);")
.bg-slider__item(data-slide="6", data-classes="stage-6-1 stage-6-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-6.jpg);")
.bg-slider__item(data-slide="7", data-classes="stage-7-1 stage-7-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-7.jpg);")
.bg-slider__item(data-slide="8", data-classes="stage-8-1 stage-8-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-2-1.jpg);")
section.bg-slider.bg-slider--3
.bg-slider__item(data-slide="1", data-classes="stage-1-1 stage-1-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-1.png);")
.bg-slider__item(data-slide="2", data-classes="stage-2-1 stage-2-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-2.jpg);")
.bg-slider__item(data-slide="3", data-classes="stage-3-1 stage-3-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-3.jpg);")
.bg-slider__item(data-slide="4", data-classes="stage-4-1 stage-4-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-4.jpg);")
.bg-slider__item(data-slide="5", data-classes="stage-5-1 stage-5-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-5.jpg);")
.bg-slider__item(data-slide="6", data-classes="stage-6-1 stage-6-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-6.jpg);")
.bg-slider__item(data-slide="7", data-classes="stage-7-1 stage-7-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-7.jpg);")
.bg-slider__item(data-slide="8", data-classes="stage-8-1 stage-8-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-3-1.jpg);")
section.bg-slider.bg-slider--4
.bg-slider__item(data-slide="1", data-classes="stage-1-1 stage-1-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-1.png);")
.bg-slider__item(data-slide="2", data-classes="stage-2-1 stage-2-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-2.jpg);")
.bg-slider__item(data-slide="3", data-classes="stage-3-1 stage-3-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-3.jpg);")
.bg-slider__item(data-slide="4", data-classes="stage-4-1 stage-4-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-4.jpg);")
.bg-slider__item(data-slide="5", data-classes="stage-5-1 stage-5-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-5.jpg);")
.bg-slider__item(data-slide="6", data-classes="stage-6-1 stage-6-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-6.jpg);")
.bg-slider__item(data-slide="7", data-classes="stage-7-1 stage-7-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-7.jpg);")
.bg-slider__item(data-slide="8", data-classes="stage-8-1 stage-8-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-4-1.jpg);")
section.bg-slider.bg-slider--5
.bg-slider__item(data-slide="1", data-classes="stage-1-1 stage-1-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-1.png);")
.bg-slider__item(data-slide="2", data-classes="stage-2-1 stage-2-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-2.jpg);")
.bg-slider__item(data-slide="3", data-classes="stage-3-1 stage-3-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-3.jpg);")
.bg-slider__item(data-slide="4", data-classes="stage-4-1 stage-4-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-4.jpg);")
.bg-slider__item(data-slide="5", data-classes="stage-5-1 stage-5-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-5.jpg);")
.bg-slider__item(data-slide="6", data-classes="stage-6-1 stage-6-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-6.jpg);")
.bg-slider__item(data-slide="7", data-classes="stage-7-1 stage-7-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-7.jpg);")
.bg-slider__item(data-slide="8", data-classes="stage-8-1 stage-8-2")
.bg-slider__item-bg(style="background-image: url(img/bg-s-5-1.jpg);")
src/blocks/bg-sliders/bg-sliders.scss
View file @ 72acf3f0
......@@ -24,814 +24,1115 @@
--slider-duration: 1.25s;
--slider-duration-js: 1250;
--one-indent: calc(var(--s-cell) + var(--s-indent));
--one-cell: calc(var(--s-cell) + var(--s-indent));
position: absolute;
left: var(--container-horizontal-padding);
top: 0;
width: 1040px;
height: 830px;
clip-path: polygon(
var(--s1-left) var(--s1-top),
var(--s1-right) var(--s1-top),
var(--s1-right) var(--s1-bottom),
var(--s1-left) var(--s1-bottom)
);
will-change: clip-path;
transition: clip-path var(--slider-duration) cubic-bezier(0.895, 0, 0.18, 1);
width: calc(var(--one-cell) * 5);
height: calc(var(--one-cell) * 4);
&.active {
#{$block-name}__item {
opacity: 1;
}
}
&.start {
}
&.end {
#{$block-name}__item {
opacity: 0;
}
}
}
&__item,
&__item-bg {
&__item {
@media (min-width: $screen-xxl) {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: polygon(
var(--s1-left) var(--s1-top),
var(--s1-right) var(--s1-top),
var(--s1-right) var(--s1-bottom),
var(--s1-left) var(--s1-bottom)
);
opacity: 0;
background: left bottom/var(--s-cell) auto no-repeat;
// background-color: tomato;
transition-property: clip-path, opacity;
transition-duration: var(--slider-duration);
transition-timing-function: cubic-bezier(0.895, 0, 0.18, 1);
will-change: opacity;
}
}
&__item {
&__animation-0-1 {
@media (min-width: $screen-xxl) {
opacity: 0;
will-change: opacity;
transition: opacity var(--slider-duration) cubic-bezier(0.895, 0, 0.18, 1);
background-position: 0 var(--one-indent);
&.active {
opacity: 1;
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
--s1-left: 0;
--s1-right: calc(var(--one-cell) - var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: 0;
--s1-right: var(--s-cell);
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&__item-bg {
&__animation-0-2 {
@media (min-width: $screen-xxl) {
background: left bottom/auto no-repeat;
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) + var(--s-indent));
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: var(--one-indent);
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s1-left) + var(--s-cell));
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&--1 {
&__animation-0-3 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: 0;
--s1-right: var(--s-cell);
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) + var(--s-indent));
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: left calc(var(--s-cell) + var(--s-indent));
}
}
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
&.stage-1-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
&.stage-1-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&__animation-0-4 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3)
calc(var(--s-cell) + var(--s-indent));
&.stage-2-1 {
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s1-top) + var(--s-cell));
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
}
&.stage-2-2 {
--s1-top: 0;
--s1-bottom: calc(var(--s-cell) * 3);
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
[data-slide="2"] {
#{$block-name}__item-bg {
background-position: left top;
}
&__animation-0-5 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4)
calc(var(--s-cell) + var(--s-indent));
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) * 3 - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) * 4 + var(--s-indent) * 4);
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
}
&.stage-3-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-3-2 {
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
&__animation-1-1 {
@media (min-width: $screen-xxl) {
background-position: 0 var(--one-indent);
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
}
[data-slide="3"] {
#{$block-name}__item-bg {
background-position: left top;
}
@at-root #{$block-name}.end & {
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) - var(--s-indent)
);
}
}
}
&__animation-1-2 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--s-cell) + var(--s-indent)) 0;
&.stage-4-1 {
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s1-left) + var(--s-cell));
@at-root #{$block-name}.start & {
--s1-top: 0;
--s1-bottom: var(--s-cell);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
}
&.stage-4-2 {
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-top: var(--one-indent);
}
}
}
[data-slide="4"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2) 0;
}
}
&__animation-1-3 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--one-indent) * 2);
&.stage-5-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
&.stage-5-2 {
--s1-left: 0;
@at-root #{$block-name}.start & {
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
}
[data-slide="5"] {
#{$block-name}__item-bg {
background-position: 0 calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 3);
}
}
}
&.stage-6-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: 0;
--s1-right: var(--s-cell);
}
&__animation-1-4 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 3) var(--one-indent);
&.stage-6-2 {
--s1-top: 0;
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
[data-slide="6"] {
#{$block-name}__item-bg {
background-position: left top;
}
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
}
&.stage-7-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-7-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
&__animation-1-5 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 4) 0;
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 4 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-top: 0;
}
&.stage-8-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-8-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
&__animation-2-1 {
@media (min-width: $screen-xxl) {
background-position: 0 0;
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.start & {
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) * 3 - var(--s-indent));
}
[data-slide="8"] {
#{$block-name}__item-bg {
background-position: 0 calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.end & {
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
}
}
}
&--2 {
&__animation-2-2 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s1-left) + var(--s-cell));
background-position: calc(var(--s-cell) + var(--s-indent))
var(--one-indent);
background-size: calc(var(--one-cell) * 2);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) + var(--s-indent));
}
}
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
--s1-left: var(--one-indent);
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
&.stage-1-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-1-2 {
--s1-top: 0;
--s1-bottom: calc(210px + var(--s-cell) + var(--s-indent));
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent)) 0;
}
}
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 2);
}
}
}
&.stage-2-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s1-top) + var(--s-cell));
&__animation-2-3 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--one-indent) * 3);
background-size: calc(var(--one-cell) * 2);
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent)) 0;
}
}
@at-root #{$block-name}.start & {
--s1-left: var(--one-indent);
}
&.stage-2-2 {
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
}
}
}
[data-slide="2"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) + var(--s-indent));
}
}
&__animation-2-4 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2)
calc(var(--one-indent) * 2);
background-size: calc(var(--one-cell) * 2);
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
&.stage-3-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.start & {
--s1-left: calc(var(--one-indent) * 2);
}
&.stage-3-2 {
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
@at-root #{$block-name}.end & {
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
}
}
[data-slide="3"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) + var(--s-indent));
}
}
&__animation-2-5 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 4) var(--one-indent);
&.stage-4-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s1-top) + var(--s-cell));
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 4 + var(--one-cell) - var(--s-indent)
);
&.stage-4-2 {
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
}
[data-slide="4"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3)
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 3);
}
}
}
&.stage-5-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-left: calc(var(--s-cell) * 4 + var(--s-indent) * 4);
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
}
&__animation-3-1 {
@media (min-width: $screen-xxl) {
background-position: 0 0;
background-size: calc(var(--one-cell) * 3);
&.stage-5-2 {
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: 0;
--s1-right: var(--s-cell);
[data-slide="5"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4)
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.start & {
--s1-right: calc(var(--one-cell) * 3 - var(--s-indent));
}
&.stage-6-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: calc(var(--s-cell) * 4 + var(--s-indent) * 4);
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 2);
}
}
}
&.stage-6-2 {
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
}
&__animation-3-2 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2) var(--one-indent);
background-size: calc(var(--one-cell) * 2);
[data-slide="6"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3)
calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
}
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
&.stage-7-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
@at-root #{$block-name}.start & {
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-7-2 {
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 3);
}
}
}
[data-slide="7"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
}
&__animation-3-3 {
@media (min-width: $screen-xxl) {
background-position: 0 calc(var(--one-indent) * 2);
&.stage-8-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
}
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
--s1-left: var(--one-indent);
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
&.stage-8-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: calc(var(--one-indent) * 2);
--s1-left: 0;
--s1-right: var(--s-cell);
}
[data-slide="8"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.end & {
--s1-bottom: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
}
}
}
&--3 {
&__animation-3-4 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
background-position: var(--one-indent) var(--one-indent);
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-left: var(--one-indent);
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
}
&.stage-1-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) - var(--s-indent)
);
}
}
}
&.stage-1-2 {
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
}
}
&__animation-3-5 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2)
calc(var(--one-indent) * 3);
background-size: calc(var(--one-cell) * 3);
&.stage-2-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 4 + var(--one-cell) - var(--s-indent)
);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
}
@at-root #{$block-name}.start & {
--s1-left: calc(var(--one-indent) * 2);
}
&.stage-2-2 {
--s1-left: calc(var(--s-cell) + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
}
}
}
[data-slide="2"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) * 3 + var(--s-indent) * 3);
}
}
&__animation-4-1 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2) 0;
&.stage-3-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
}
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(var(--one-cell) * 3 - var(--s-indent));
&.stage-3-2 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.start & {
--s1-bottom: calc(var(--one-cell) * 3 - var(--s-indent));
}
[data-slide="3"] {
#{$block-name}__item-bg {
background-position: 0 calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-4-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: 0;
--s1-right: var(--s-cell);
&__animation-4-2 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 3) var(--one-indent);
background-size: calc(var(--one-cell) * 2);
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-4-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 4);
}
}
}
[data-slide="4"] {
#{$block-name}__item-bg {
background-position: 0 calc(var(--s-cell) + var(--s-indent));
}
&__animation-4-3 {
@media (min-width: $screen-xxl) {
background-position: 0 var(--one-indent);
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
}
&.stage-5-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-left: 0;
--s1-right: var(--s-cell);
@at-root #{$block-name}.end & {
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) - var(--s-indent)
);
}
}
}
&__animation-4-4 {
@media (min-width: $screen-xxl) {
background-position: var(--one-indent) 0;
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
--s1-left: var(--one-indent);
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
&.stage-5-2 {
@at-root #{$block-name}.start & {
--s1-top: 0;
}
[data-slide="5"] {
#{$block-name}__item-bg {
background-position: 0 0;
}
@at-root #{$block-name}.end & {
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
}
}
}
&.stage-6-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
&__animation-4-5 {
@media (min-width: $screen-xxl) {
background-position: 0 calc(var(--one-indent) * 3);
background-size: calc(var(--one-cell) * 3);
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-left: 0;
--s1-right: var(--s-cell);
}
&.stage-6-2 {
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 2);
}
}
}
[data-slide="6"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent)) 0;
}
}
&__animation-5-1 {
@media (min-width: $screen-xxl) {
background-position: 0 calc(var(--one-indent) * 2);
background-size: calc(var(--one-cell) * 3);
&.stage-7-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(var(--one-cell) * 3 - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(var(--one-cell) * 3 - var(--s-indent));
&.stage-7-2 {
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-left: 0;
}
[data-slide="7"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2) 0;
}
@at-root #{$block-name}.end & {
--s1-right: calc(var(--one-cell) - var(--s-indent));
}
}
}
&.stage-8-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
&__animation-5-2 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 4) var(--one-indent);
&.stage-8-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) * 2 - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
[data-slide="8"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&--4 {
&__animation-5-3 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
background-position: 0 0;
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3)
calc(var(--s-cell) + var(--s-indent));
}
}
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
--s1-left: 0;
--s1-right: var(--s-cell);
&.stage-1-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: 0;
}
&.stage-1-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
}
}
}
&.stage-2-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
}
&__animation-5-4 {
@media (min-width: $screen-xxl) {
background-position: var(--one-indent) 0;
background-size: calc(var(--one-cell) * 2);
&.stage-2-2 {
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: var(--one-indent);
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
[data-slide="2"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) * 2 + var(--s-indent) * 2);
}
@at-root #{$block-name}.start & {
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-3-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 2);
}
}
}
&.stage-3-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
&__animation-5-5 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2)
calc(var(--one-indent) * 3);
background-size: calc(var(--one-cell) * 3);
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) * 3 - var(--s-indent)
);
}
@at-root #{$block-name}.end & {
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
}
}
}
[data-slide="3"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent))
calc(var(--s-cell) + var(--s-indent));
}
}
&__animation-6-1 {
@media (min-width: $screen-xxl) {
background-position: 0 0;
&.stage-4-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(var(--one-cell) * 3 - var(--s-indent));
--s1-left: 0;
--s1-right: calc(var(--one-cell) - var(--s-indent));
&.stage-4-2 {
@at-root #{$block-name}.start & {
--s1-top: 0;
}
[data-slide="4"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent)) 0;
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-5-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
--s1-left: calc(var(--s-cell) + var(--s-indent));
--s1-right: calc(var(--s-cell) * 2 + var(--s-indent));
}
&__animation-6-2 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 3)
calc(var(--one-indent) * 2);
background-size: calc(var(--one-cell) * 2);
&.stage-5-2 {
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) * 2 - var(--s-indent)
);
[data-slide="5"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) + var(--s-indent)) 0;
}
@at-root #{$block-name}.start & {
--s1-left: calc(var(--one-indent) * 3);
}
&.stage-6-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
}
}
}
&.stage-6-2 {
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
}
&__animation-6-3 {
@media (min-width: $screen-xxl) {
background-position: var(--one-indent) 0;
background-size: calc(var(--one-cell) * 2);
[data-slide="6"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3) 0;
}
}
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: 0;
--s1-right: calc(var(--one-cell) - var(--s-indent));
&.stage-7-1 {
--s1-top: 0;
--s1-bottom: var(--s-cell);
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
@at-root #{$block-name}.start & {
--s1-left: var(--one-indent);
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-7-2 {
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 2);
}
}
}
[data-slide="7"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3) 0;
}
}
&__animation-6-4 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 3) 0;
background-size: calc(var(--one-cell) * 2);
&.stage-8-1 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 2 + var(--s-indent));
--s1-left: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-right: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
}
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
&.stage-8-2 {
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) * 2 - var(--s-indent)
);
}
[data-slide="8"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 3 + var(--s-indent) * 3)
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.end & {
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
}
}
}
&--5 {
&__animation-6-5 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
--s1-left: calc(var(--s-cell) * 4 + var(--s-indent) * 4);
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
background-position: calc(var(--one-indent) * 2) var(--one-indent);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4)
calc(var(--s-cell) + var(--s-indent));
}
}
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
&.stage-1-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
}
&.stage-1-2 {
--s1-top: 0;
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4) 0;
}
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 3);
}
}
}
&.stage-2-1 {
--s1-top: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
&__animation-7-1 {
@media (min-width: $screen-xxl) {
background-position: 0 var(--one-indent);
[data-slide="1"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4) 0;
}
}
}
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(var(--one-cell) * 3 - var(--s-indent));
--s1-left: 0;
--s1-right: calc(var(--one-cell) - var(--s-indent));
&.stage-2-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 3 - var(--s-indent)
);
}
[data-slide="2"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4)
calc(var(--s-cell) + var(--s-indent));
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
}
}
}
&.stage-3-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
}
&__animation-7-2 {
@media (min-width: $screen-xxl) {
background-position: var(--one-indent) calc(var(--one-indent) * 2);
background-size: calc(var(--one-cell) * 2);
&.stage-3-2 {
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-left: var(--one-indent);
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
[data-slide="3"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) * 3 + var(--s-indent) * 3);
}
@at-root #{$block-name}.end & {
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
}
}
}
&.stage-4-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
&__animation-7-3 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2) 0;
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
}
&.stage-4-2 {
--s1-left: 0;
@at-root #{$block-name}.end & {
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
}
}
}
&__animation-7-4 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 3) 0;
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
[data-slide="4"] {
#{$block-name}__item-bg {
background-position: 0 calc(var(--s-cell) * 3 + var(--s-indent) * 3);
}
@at-root #{$block-name}.start & {
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
}
&.stage-5-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
}
}
}
&.stage-5-2 {
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
&__animation-7-5 {
@media (min-width: $screen-xxl) {
background-position: calc(var(--one-indent) * 2)
calc(var(--one-indent) * 3);
background-size: calc(var(--one-cell) * 3);
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) * 3 - var(--s-indent)
);
}
[data-slide="5"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) * 3 + var(--s-indent) * 3);
}
@at-root #{$block-name}.end & {
--s1-left: calc(var(--one-indent) * 4);
}
}
}
&.stage-6-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
&__animation-8-1 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
--s1-left: 0;
--s1-right: calc(var(--one-cell) - var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-6-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
[data-slide="6"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) + var(--s-indent));
}
&__animation-8-2 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--one-indent) * 2);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
--s1-left: var(--one-indent);
--s1-right: calc(var(--one-indent) + var(--one-cell) - var(--s-indent));
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-7-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: calc(var(--s-cell) * 2 + var(--s-indent) * 2);
--s1-right: calc(var(--s-cell) * 3 + var(--s-indent) * 2);
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-7-2 {
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
&__animation-8-3 {
@media (min-width: $screen-xxl) {
--s1-top: 0;
--s1-bottom: calc(var(--one-cell) - var(--s-indent));
--s1-left: calc(var(--one-indent) * 2);
--s1-right: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
[data-slide="7"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 2 + var(--s-indent) * 2)
calc(var(--s-cell) * 3 + var(--s-indent) * 3);
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
&.stage-8-1 {
--s1-top: calc(var(--s-cell) * 3 + var(--s-indent) * 3);
--s1-bottom: calc(var(--s-cell) * 4 + var(--s-indent) * 3);
--s1-left: calc(var(--s-cell) * 4 + var(--s-indent) * 4);
--s1-right: calc(var(--s-cell) * 5 + var(--s-indent) * 4);
&__animation-8-4 {
@media (min-width: $screen-xxl) {
--s1-top: var(--one-indent);
--s1-bottom: calc(var(--one-cell) * 2 - var(--s-indent));
--s1-left: calc(var(--one-indent) * 3);
--s1-right: calc(
var(--one-indent) * 3 + var(--one-cell) - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
&.stage-8-2 {
--s1-top: calc(var(--s-cell) + var(--s-indent));
--s1-bottom: calc(var(--s-cell) * 3 + var(--s-indent));
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
[data-slide="8"] {
#{$block-name}__item-bg {
background-position: calc(var(--s-cell) * 4 + var(--s-indent) * 4)
calc(var(--s-cell) + var(--s-indent));
}
&__animation-8-5 {
@media (min-width: $screen-xxl) {
--s1-top: calc(var(--one-indent) * 3);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 4 - var(--s-indent)
);
--s1-left: calc(var(--one-indent) * 4);
--s1-right: calc(
var(--one-indent) * 2 + var(--one-cell) * 3 - var(--s-indent)
);
@at-root #{$block-name}.start & {
--s1-top: var(--one-indent);
--s1-bottom: calc(
var(--one-indent) + var(--one-cell) * 2 - var(--s-indent)
);
}
@at-root #{$block-name}.end & {
--s1-top: calc(var(--one-indent) * 2);
}
}
}
......
src/blocks/page/page.scss
View file @ 72acf3f0
......@@ -2009,6 +2009,7 @@ pre {
height: 13px;
background: url(../img/ico-pin-g.svg) center/contain no-repeat;
line-height: 0;
pointer-events: none;
transition: opacity $transition-time, visibility $transition-time;
}
......@@ -2052,6 +2053,28 @@ pre {
}
}
}
[data-area="tyumen"]:hover {
& + [data-area="yamalo-nenetskiy"],
& + [data-area="yamalo-nenetskiy"] + [data-area="khanty-mansiyskiy"] {
fill: #badcbe;
}
}
// + [data-area="yamalo-nenetskiy"],
// [data-area="tyumen"]
// + [data-area="yamalo-nenetskiy"]
// + [data-area="khanty-mansiyskiy"] {
// fill: #badcbe;
// }
g {
[data-area] {
&:hover ~ path {
fill: #badcbe;
}
}
}
}
/* ----- .swiper-list ----- */
......
src/favicon/apple-touch-icon.png
View replaced file @ a15ade53 View file @ 72acf3f0
src/favicon/apple-touch-icon.png

2.33 KB | W: | H:

src/favicon/apple-touch-icon.png

625 Bytes | W: | H:

src/favicon/apple-touch-icon.png
src/favicon/apple-touch-icon.png
src/favicon/apple-touch-icon.png
src/favicon/apple-touch-icon.png
  • 2-up
  • Swipe
  • Onion skin
src/favicon/favicon-16x16.png
View replaced file @ a15ade53 View file @ 72acf3f0
src/favicon/favicon-16x16.png

686 Bytes | W: | H:

src/favicon/favicon-16x16.png

228 Bytes | W: | H:

src/favicon/favicon-16x16.png
src/favicon/favicon-16x16.png
src/favicon/favicon-16x16.png
src/favicon/favicon-16x16.png
  • 2-up
  • Swipe
  • Onion skin
src/favicon/favicon-32x32.png
View replaced file @ a15ade53 View file @ 72acf3f0
src/favicon/favicon-32x32.png

1010 Bytes | W: | H:

src/favicon/favicon-32x32.png

241 Bytes | W: | H:

src/favicon/favicon-32x32.png
src/favicon/favicon-32x32.png
src/favicon/favicon-32x32.png
src/favicon/favicon-32x32.png
  • 2-up
  • Swipe
  • Onion skin
src/favicon/safari-pinned-tab.svg
View file @ 72acf3f0
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 2544 l0 -55 315 -315 315 -315 0 -235 0 -234 -315 0 -315 0 0 -85
0 -85 315 0 315 0 0 -235 0 -235 -315 -315 -315 -315 0 -60 0 -60 60 0 60 0
315 315 315 315 235 0 235 0 0 -315 0 -315 85 0 85 0 0 315 0 315 234 0 235 0
315 -315 314 -315 56 0 56 0 0 66 0 66 -310 309 -310 310 0 234 0 235 310 0
310 0 0 85 0 85 -310 0 -310 0 0 235 0 235 310 310 310 310 0 60 0 60 -60 0
-60 0 -310 -310 -310 -310 -235 0 -235 0 0 310 0 310 -85 0 -85 0 0 -310 0
-310 -234 0 -235 0 -310 310 -310 310 -65 0 -66 0 0 -56z"/>
</g>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 49.8 49.8" style="enable-background:new 0 0 49.8 49.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#71BD86;}
.st1{fill:#3B8F5B;}
.st2{fill:#BADCBE;}
.st3{fill:#4F4F4E;}
.st4{fill:#3C6547;}
.st5{fill:#73B395;}
</style>
<path class="st0" d="M25.7,24.2H37V0H25.7V24.2z"/>
<path class="st1" d="M25.7,37h24.2V25.7H25.7V37z"/>
<path class="st2" d="M12.8,37h11.3V12.8H12.8V37z"/>
<path class="st3" d="M104.7,23.1c0.8-0.1,1.8-0.5,1.8-3.7v-3h7.6v9.3H111v-6.8h-1.6v0.5c0,3.8-1.1,6.4-4.7,6.4V23.1z"/>
<path class="st3" d="M121.2,20.8v-2.5h-0.8c-0.7,0-1.2,0.3-1.2,1.2c0,0.9,0.5,1.3,1.3,1.3H121.2z M117.4,22.9
c0.3-0.4,0.4-0.6,0.4-0.6v0c-1-0.5-1.7-1.6-1.7-2.8c0-2,1.3-3.2,3.4-3.2h4.9v9.3h-3.1v-2.8h-0.7l-1.8,2.8h-3.3L117.4,22.9z"/>
<path class="st3" d="M131,16.4h3v4.1c0,0.3,0,0.7,0,0.9h0c0.2-0.4,0.3-0.7,0.5-0.9l2.6-4.1h3v9.3h-3v-4.1c0-0.2,0-0.6,0-0.9h0
c-0.2,0.4-0.4,0.7-0.5,0.9l-2.6,4.1h-3V16.4z"/>
<path class="st3" d="M146.7,16.4h6.6V19h-3.4v6.7h-3.1V16.4z"/>
<path class="st3" d="M159.4,23.3c1.1,0,2.1-0.8,2.1-2.2c0-1.4-1-2.3-2.1-2.3c-1.1,0-2.1,0.9-2.1,2.3
C157.3,22.5,158.3,23.3,159.4,23.3z M159.4,16.2c3,0,5.3,2,5.3,4.9c0,2.9-2.4,4.9-5.3,4.9c-2.9,0-5.3-1.9-5.3-4.9
C154.2,18.1,156.5,16.2,159.4,16.2z"/>
<path class="st3" d="M171.3,23.3c1,0,1.8-0.8,1.8-2.2c0-1.4-0.7-2.3-1.8-2.3c-0.9,0-1.8,0.7-1.8,2.3C169.4,22.2,170,23.3,171.3,23.3
z M166.4,16.4h2.8v0.5c0,0.3,0,0.6,0,0.6h0c0.6-0.8,1.7-1.3,2.8-1.3c2.5,0,4.2,2,4.2,4.9c0,3-1.9,4.9-4.3,4.9
c-0.9,0-1.7-0.3-2.4-0.9h0c0,0,0,0.3,0,0.8v3.5h-3.1V16.4z"/>
<path class="st3" d="M182.7,23.3c1.1,0,2.1-0.8,2.1-2.2c0-1.4-1-2.3-2.1-2.3c-1.1,0-2.1,0.9-2.1,2.3
C180.6,22.5,181.6,23.3,182.7,23.3z M182.7,16.2c3,0,5.3,2,5.3,4.9c0,2.9-2.4,4.9-5.3,4.9c-2.9,0-5.3-1.9-5.3-4.9
C177.4,18.1,179.8,16.2,182.7,16.2z"/>
<path class="st3" d="M100,37.8c0.9,0,1.6-0.7,1.6-1.7c0-1-0.7-1.7-1.6-1.7c-0.9,0-1.6,0.7-1.6,1.7C98.4,37.1,99.1,37.8,100,37.8z
M100,33.7c1.4,0,2.6,1,2.6,2.5c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.6-1-2.6-2.5C97.4,34.7,98.6,33.7,100,33.7z"/>
<path class="st3" d="M103.9,36.2h2.7v-0.8h-2.7V36.2z"/>
<path class="st3" d="M108.2,33.8h0.9v2.8c0,0.3,0,0.6,0,0.6h0c0-0.1,0.3-0.4,0.4-0.6l2-2.8h0.9v4.7h-0.9v-2.8c0-0.2,0-0.6,0-0.6h0
c0,0.1-0.3,0.4-0.4,0.6l-2,2.8h-0.9V33.8z"/>
<path class="st3" d="M116.3,33.7c0.6,0,1.3,0.2,1.8,0.7l-0.4,0.6c-0.3-0.3-0.8-0.5-1.3-0.5c-1,0-1.6,0.7-1.6,1.7
c0,1,0.7,1.7,1.7,1.7c0.5,0,1.1-0.3,1.5-0.6l0.4,0.7c-0.4,0.5-1.1,0.8-1.9,0.8c-1.5,0-2.5-1.1-2.5-2.5
C113.8,34.7,114.9,33.7,116.3,33.7z"/>
<path class="st3" d="M121.6,33.7c0.6,0,1.3,0.2,1.8,0.7L123,35c-0.3-0.3-0.8-0.5-1.3-0.5c-1,0-1.6,0.7-1.6,1.7c0,1,0.7,1.7,1.7,1.7
c0.5,0,1.1-0.3,1.5-0.6l0.4,0.7c-0.4,0.5-1.2,0.8-1.9,0.8c-1.5,0-2.5-1.1-2.5-2.5C119.1,34.7,120.1,33.7,121.6,33.7z"/>
<path class="st3" d="M124.4,37.7c0.7-0.1,1.1-0.8,1.1-2.5v-1.5h3.2v4.7h-0.9v-4h-1.4v0.7c0,2.1-0.5,3.2-1.9,3.3V37.7z"/>
<path class="st3" d="M133.6,35.6c0-0.8-0.5-1.2-1.2-1.2c-0.7,0-1.3,0.5-1.4,1.2H133.6z M132.4,33.7c1.3,0,2,1,2,2.2
c0,0.1,0,0.3,0,0.4H131c0,1,0.8,1.6,1.6,1.6c0.5,0,1-0.2,1.4-0.6l0.4,0.7c-0.5,0.4-1.2,0.7-1.8,0.7c-1.5,0-2.5-1.1-2.5-2.5
C130.1,34.6,131.1,33.7,132.4,33.7z"/>
<path class="st3" d="M139,37.8v-3.2h-1.4v0.3c0,0.7-0.1,2.1-0.7,3H139z M136,37.8c0.7-0.9,0.7-2.4,0.7-3.1v-0.9h3.2v4h0.7v1.9h-0.8
v-1.1h-3.5v1.1h-0.9v-1.9H136z"/>
<path class="st3" d="M144,37.8c0.9,0,1.6-0.7,1.6-1.7c0-1-0.7-1.7-1.6-1.7c-0.9,0-1.6,0.7-1.6,1.7C142.4,37.1,143.1,37.8,144,37.8z
M144,33.7c1.4,0,2.6,1,2.6,2.5c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.6-1-2.6-2.5C141.5,34.7,142.6,33.7,144,33.7z"/>
<path class="st3" d="M149.8,37.9c0.7,0,1-0.3,1-0.7c0-0.5-0.3-0.7-1-0.7h-1v1.5H149.8z M149.7,35.8c0.5,0,0.8-0.3,0.8-0.7
c0-0.4-0.3-0.7-0.8-0.7h-0.9v1.4H149.7z M148,33.8h2c1,0,1.6,0.4,1.6,1.2c0,0.5-0.2,0.8-0.7,1v0c0.6,0.1,0.9,0.6,0.9,1.1
c0,0.9-0.7,1.3-1.7,1.3h-2V33.8z"/>
<path class="st3" d="M154.6,37.9c0.8,0,1.3-0.8,1.3-1.5v-0.2h-0.2c-0.7,0-1.9,0.1-1.9,0.9C153.7,37.5,154,37.9,154.6,37.9z
M155.6,35.6h0.2v-0.1c0-0.8-0.4-1-1-1c-0.5,0-0.9,0.2-1.3,0.5l-0.4-0.7c0.4-0.3,1.1-0.6,1.8-0.6c1.2,0,1.9,0.7,1.9,1.9v3h-0.9V38
c0-0.2,0-0.4,0-0.4h0c-0.3,0.5-0.9,1-1.6,1c-0.8,0-1.6-0.5-1.6-1.4C152.8,35.7,154.6,35.6,155.6,35.6z"/>
<path class="st3" d="M159.4,34.6h-1.6v-0.8h4.2v0.8h-1.7v4h-0.9V34.6z"/>
<path class="st3" d="M166.3,35.6c0-0.8-0.5-1.2-1.2-1.2c-0.7,0-1.3,0.5-1.4,1.2H166.3z M165.2,33.7c1.3,0,2,1,2,2.2
c0,0.1,0,0.3,0,0.4h-3.4c0,1,0.8,1.6,1.6,1.6c0.5,0,1-0.2,1.4-0.6l0.4,0.7c-0.5,0.4-1.2,0.7-1.8,0.7c-1.5,0-2.5-1.1-2.5-2.5
C162.8,34.6,163.8,33.7,165.2,33.7z"/>
<path class="st3" d="M168.2,37.7c0.7-0.1,1.1-0.8,1.1-2.5v-1.5h3.2v4.7h-0.9v-4h-1.4v0.7c0,2.1-0.5,3.2-1.9,3.3V37.7z"/>
<path class="st3" d="M175.8,37.9c0.7,0,0.9-0.4,0.9-0.8c0-0.5-0.3-0.9-0.9-0.9H175v1.7H175.8z M174.1,33.8h0.9v1.7h1
c1,0,1.7,0.4,1.7,1.5c0,0.9-0.5,1.5-1.7,1.5h-1.8V33.8z"/>
<path class="st3" d="M181.2,33.7c0.6,0,1.3,0.2,1.8,0.7l-0.4,0.6c-0.3-0.3-0.8-0.5-1.3-0.5c-1,0-1.6,0.7-1.6,1.7
c0,1,0.7,1.7,1.7,1.7c0.5,0,1.1-0.3,1.5-0.6l0.4,0.7c-0.4,0.5-1.2,0.8-1.9,0.8c-1.5,0-2.5-1.1-2.5-2.5
C178.7,34.7,179.7,33.7,181.2,33.7z"/>
<path class="st3" d="M184.3,33.8h0.9v1.9h0.7l1.3-1.9h1l-1.6,2.3v0l1.8,2.5h-1.1l-1.4-2h-0.7v2h-0.9V33.8z"/>
<path class="st3" d="M189.5,33.8h0.9v2.8c0,0.3,0,0.6,0,0.6h0c0-0.1,0.3-0.4,0.4-0.6l2-2.8h0.9v4.7h-0.9v-2.8c0-0.2,0-0.6,0-0.6h0
c0,0.1-0.3,0.4-0.4,0.6l-2,2.8h-0.9V33.8z"/>
<path class="st3" d="M196.1,32v-0.1h0.7V32c0,0.4,0.3,0.6,0.7,0.6c0.3,0,0.7-0.2,0.7-0.6v-0.1h0.7V32c0,0.8-0.7,1.2-1.4,1.2
C196.8,33.2,196.1,32.8,196.1,32z M195.4,33.8h0.9v2.8c0,0.3,0,0.6,0,0.6h0c0-0.1,0.3-0.4,0.4-0.6l2-2.8h0.9v4.7h-0.9v-2.8
c0-0.2,0-0.6,0-0.6h0c0,0.1-0.3,0.4-0.4,0.6l-2,2.8h-0.9V33.8z"/>
<path class="st3" d="M99.4,45.9h-1.6v-0.8h4.2v0.8h-1.7v4h-0.9V45.9z"/>
<path class="st3" d="M103.7,51c0.4,0,0.7-0.3,0.9-0.7l0.2-0.5l-2-4.7h1l1.2,3.1c0.1,0.2,0.2,0.6,0.2,0.6h0c0,0,0.1-0.3,0.2-0.6
l1.2-3.1h1l-2.2,5.6c-0.3,0.7-0.9,1.1-1.5,1.1c-0.5,0-0.9-0.3-0.9-0.3l0.3-0.7C103.2,50.8,103.4,51,103.7,51z"/>
<path class="st3" d="M110,45.9h-1.6v-0.8h4.2v0.8h-1.7v4H110V45.9z"/>
<path class="st4" d="M38.5,49.8h11.3V38.5H38.5V49.8z"/>
<path class="st5" d="M0,49.8h37V38.5H0V49.8z"/>
</svg>
src/img/map-svg.svg
View file @ 72acf3f0
This source diff could not be displayed because it is too large. You can view the blob instead.
src/js/script.js
View file @ 72acf3f0
......@@ -379,7 +379,7 @@ ready(function() {
smolenskaya: {left: 6, top: 5},
kaliningradskaya: {left: 8, top: 5},
murmanskaya: {left: 9, top: 0},
leningradskaya: {left: 0, top: 2},
leningradskaya: {left: 8, top: 10},
pskovskaya: {left: 5, top: 6},
novgorodskaya: {left: 7, top: 4},
tverskaya: {left: 6, top: 6},
......@@ -399,43 +399,62 @@ ready(function() {
kirovskaya: {left: 4, top: 8},
arkhangelskaya: {left: 4, top: 2},
komi: {left: 0, top: 5},
krym: {left: 6, top: 2},
krym: {left: 8, top: 6},
rostovskaya: {left: 4, top: 4},
kalmykia: {left: 11, top: 4},
dagestan: {left: 2, top: 10},
dagestan: {left: 4, top: 10},
'karachayevo-cherkesiya': {left: 6, top: 2},
'kabardino-balkariya': {left: 7, top: 2},
omskaya: {left: 5, top: 5},
permskiy: {left: 6, top: 2},
sverdlovskaya: {left: 12, top: 10},
bashkortostan: {left: 2, top: 0},
orenburgskaya: {left: -2, top: -2},
orenburgskaya: {left: -3, top: -2},
chelyabinskaya: {left: 12, top: 3},
kurganskaya: {left: 3, top: 5},
'khanty-mansiyskiy': {left: -10, top: 10},
'yamalo-nenetskiy': {left: 10, top: 25},
'yamalo-nenetskiy': {left: 20, top: 32},
kemerovskaya: {left: 5, top: 2},
tyva: {left: 15, top: 5},
buryatiya: {left: 35, top: -8},
buryatiya: {left: 31, top: 0},
zabaykalskaya: {left: 20, top: 15},
amurskaya: {left: 15, top: 0},
primorskaya: {left: 10, top: 5},
sakhalinskaya: {left: 5, top: 0},
kamchatskaya: {left: 17, top: 25},
primorskaya: {left: 10, top: 12},
sakhalinskaya: {left: -15, top: 10},
kamchatskaya: {left: 11, top: 25},
altayskiy: {left: 5, top: 5},
novosibirskaya: {left: 10, top: 8},
tomskaya: {left: 8, top: 5},
khabarovsk: {left: 22, top: 40},
yakutskaya: {left: 0, top: 25},
irkutsk: {left: -10, top: 25},
tyumen: {left: -4, top: 5},
udmurtia: {left: 7, top: 7},
tatarstan: {left: 8, top: 2},
saratov: {left: 8, top: 8},
ulyanovsk: {left: 4, top: 4},
kostroma: {left: 6, top: 4},
'st-petersburg': {left: 7, top: 1},
tula: {left: 6, top: 2},
belgorod: {left: 8, top: 4},
kursk: {left: 5, top: 2},
karelia: {left: 12, top: 4},
volgograd: {left: 7, top: 6},
astrakhan: {left: 11, top: 6},
stavropol: {left: 6, top: 4},
krasnodar: {left: 10, top: 0},
sevastopol: {left: 6, top: 0},
},
xl: {
smolenskaya: {left: 4, top: 2},
kaliningradskaya: {left: 7, top: 3},
murmanskaya: {left: 10, top: 0},
leningradskaya: {left: -6, top: -2},
leningradskaya: {left: 8, top: 12},
pskovskaya: {left: 5, top: 0},
novgorodskaya: {left: 6, top: 0},
tverskaya: {left: 4, top: 4},
bryanskaya: {left: 6, top: 4},
moskovskaya: {left: 4, top: 2},
moskovskaya: {left: 5, top: 10},
voronezhskaya: {left: 3, top: 4},
yaroslavskaya: {left: 6, top: 2},
ryazanskaya: {left: 5, top: 2},
......@@ -463,30 +482,49 @@ ready(function() {
chelyabinskaya: {left: 15, top: -4},
kurganskaya: {left: 1, top: 2},
'khanty-mansiyskiy': {left: -15, top: 15},
'yamalo-nenetskiy': {left: 15, top: 35},
'yamalo-nenetskiy': {left: 25, top: 45},
kemerovskaya: {left: 4, top: 0},
tyva: {left: 20, top: 5},
buryatiya: {left: 45, top: -8},
zabaykalskaya: {left: 25, top: 15},
amurskaya: {left: 20, top: 0},
primorskaya: {left: 10, top: 5},
sakhalinskaya: {left: 5, top: 0},
kamchatskaya: {left: 25, top: 40},
primorskaya: {left: 10, top: 12},
sakhalinskaya: {left: -30, top: 10},
kamchatskaya: {left: 15, top: 40},
altayskiy: {left: 5, top: 5},
novosibirskaya: {left: 10, top: 8},
tomskaya: {left: 10, top: 5},
omskaya: {left: 5, top: 5},
khabarovsk: {left: 30, top: 55},
yakutskaya: {left: 0, top: 35},
irkutsk: {left: -16, top: 25},
tyumen: {left: -11, top: 0},
udmurtia: {left: 5, top: 4},
tatarstan: {left: 8, top: 1},
saratov: {left: 7, top: 7},
ulyanovsk: {left: 2, top: 1},
kostroma: {left: 2, top: 2},
'st-petersburg': {left: 5, top: 0},
tula: {left: 4, top: 2},
belgorod: {left: 7, top: 2},
kursk: {left: 3, top: 0},
karelia: {left: 10, top: 0},
volgograd: {left: 5, top: 2},
astrakhan: {left: 12, top: 10},
stavropol: {left: 4, top: 2},
krasnodar: {left: 10, top: -5},
sevastopol: {left: 4, top: -2},
},
xxl: {
smolenskaya: {left: 2, top: 2},
kaliningradskaya: {left: 10, top: 4},
murmanskaya: {left: 12, top: 0},
leningradskaya: {left: -6, top: 0},
leningradskaya: {left: 4, top: 12},
pskovskaya: {left: 6, top: -4},
novgorodskaya: {left: 0, top: -8},
novgorodskaya: {left: 4, top: -4},
tverskaya: {left: 2, top: 0},
bryanskaya: {left: 4, top: 2},
moskovskaya: {left: 4, top: -2},
moskovskaya: {left: 5, top: 13},
yaroslavskaya: {left: 4, top: 0},
ryazanskaya: {left: 5, top: 0},
ivanovskaya: {left: 6, top: 0},
......@@ -506,26 +544,45 @@ ready(function() {
dagestan: {left: -1, top: 16},
'karachayevo-cherkesiya': {left: 6, top: 0},
'kabardino-balkariya': {left: 4, top: 0},
sverdlovskaya: {left: 15, top: 0},
sverdlovskaya: {left: 20, top: 10},
bashkortostan: {left: -6, top: -5},
orenburgskaya: {left: -12, top: -10},
chelyabinskaya: {left: 15, top: -1},
kurganskaya: {left: 0, top: 0},
'khanty-mansiyskiy': {left: -35, top: 8},
'yamalo-nenetskiy': {left: 25, top: 45},
'khanty-mansiyskiy': {left: -25, top: 15},
'yamalo-nenetskiy': {left: 35, top: 55},
kemerovskaya: {left: 2, top: -5},
tyva: {left: 15, top: 5},
buryatiya: {left: 55, top: -8},
zabaykalskaya: {left: 35, top: 15},
amurskaya: {left: 20, top: -5},
primorskaya: {left: 12, top: 15},
sakhalinskaya: {left: 4, top: 0},
kamchatskaya: {left: 30, top: 50},
sakhalinskaya: {left: -45, top: 10},
kamchatskaya: {left: 15, top: 50},
altayskiy: {left: 5, top: 5},
novosibirskaya: {left: 10, top: 10},
tomskaya: {left: 10, top: 5},
omskaya: {left: 5, top: 5},
voronezhskaya: {left:4, top: 4},
khabarovsk: {left: 35, top: 80},
yakutskaya: {left: 0, top: 40},
irkutsk: {left: -25, top: 40},
tyumen: {left: -16, top: 0},
udmurtia: {left: 5, top: 2},
tatarstan: {left: 10, top: 0},
saratov: {left: 8, top: 5},
ulyanovsk: {left: 2, top: 1},
kostroma: {left: 4, top: 2},
'st-petersburg': {left: 5, top: 2},
tula: {left: 5, top: 0},
belgorod: {left: 9, top: 2},
kursk: {left: 3, top: 0},
karelia: {left: 13, top: 0},
volgograd: {left: 5, top: 5},
astrakhan: {left: 13, top: 13},
stavropol: {left: 4, top: 2},
krasnodar: {left: 12, top: -10},
sevastopol: {left: 4, top: -3},
},
};
......
src/pages/index.pug
View file @ 72acf3f0
This source diff could not be displayed because it is too large. You can view the blob instead.
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