Skip to content

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

changes from 19.01.23

parent 6ed79938
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1060 additions and 877 deletions
config.js
View file @ a15ade53
......@@ -16,7 +16,7 @@ let config = {
'src/scss/mixins.scss',
'../../node_modules/swiper/swiper.scss',
'../../node_modules/swiper/modules/autoplay/autoplay.scss',
'../../node_modules/swiper/modules/autoplay/autoplay.scss',
'../../node_modules/swiper/modules/thumbs/thumbs.scss',
// '../../node_modules/accordion-js/dist/accordion.min.css',
// 'somePackage/dist/somePackage.css', // для 'node_modules/somePackage/dist/somePackage.css',
],
......
src/blocks/bg-sliders/bg-sliders.js
View file @ a15ade53
......@@ -2,73 +2,77 @@
import ready from 'Utils/documentReady.js';
ready(function() {
const bgSliders = document.querySelectorAll('.bg-slider');
const bgSliderWrapper = document.querySelector('.bg-sliders');
if (bgSliders.length > 0) {
const sldierDuration = parseInt(window.getComputedStyle(bgSliders[0]).getPropertyValue('--slider-duration-js'));
const sliderDelay = 1000;
const sliderAnimation = sldierDuration + sliderDelay;
const sliderDelayInAction = sldierDuration + (sliderAnimation * 2);
console.log(sldierDuration);
if (bgSliderWrapper && window.getComputedStyle(bgSliderWrapper).display != 'none') {
const bgSliders = document.querySelectorAll('.bg-slider');
bgSliders.forEach(slider => {
firstAction(slider);
sliderInAction(slider, sliderDelayInAction); //1500 + 2500 + 2500 = 6500
});
if (bgSliders.length > 0) {
const sldierDuration = parseInt(window.getComputedStyle(bgSliders[0]).getPropertyValue('--slider-duration-js'));
const sliderDelay = 1000;
const sliderAnimation = sldierDuration + sliderDelay;
const sliderDelayInAction = sldierDuration + (sliderAnimation * 2);
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');
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(' ');
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');
activeSlide.classList.add('active');
setTimeout(() => {
nextSlideClasses[1] ? slider.classList.add(nextSlideClasses[1]) : slider.classList.add(nextSlideClasses[0]);
nextSlide.classList.add('active');
sliderInAction(slider, sliderAnimation);
}, sldierDuration);
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');
setTimeout(() => {
nextSlideClasses[1] ? slider.classList.add(nextSlideClasses[1]) : slider.classList.add(nextSlideClasses[0]);
nextSlide.classList.add('active');
sliderInAction(slider, sliderAnimation);
}, sldierDuration);
}
};
};
};
}
});
src/blocks/bg-sliders/bg-sliders.scss
View file @ a15ade53
......@@ -21,8 +21,8 @@
@media (min-width: $screen-xxl) {
--s-cell: 161px;
--s-indent: 16px;
--slider-duration: 1.5s;
--slider-duration-js: 1500;
--slider-duration: 1.25s;
--slider-duration-js: 1250;
position: absolute;
left: var(--container-horizontal-padding);
......@@ -39,20 +39,6 @@
transition: clip-path var(--slider-duration) cubic-bezier(0.895, 0, 0.18, 1);
}
@at-root .bg-sliders--type-1 & {
@media (min-width: $screen-xxl) {
--slider-duration: 2.25s;
--slider-duration-js: 2250;
}
}
@at-root .bg-sliders--type-2 & {
@media (min-width: $screen-xxl) {
--slider-duration: 3s;
--slider-duration-js: 3000;
}
}
&__item,
&__item-bg {
@media (min-width: $screen-xxl) {
......
src/blocks/burger/burger.js
View file @ a15ade53
......@@ -14,6 +14,9 @@ ready(function(){
function showBurgerTarget() {
var targetId = this.getAttribute('data-target-id');
var targetClassToggle = this.getAttribute('data-target-class-toggle');
if (targetId && targetClassToggle) {
this.classList.toggle('burger--close');
document.getElementById(targetId).classList.toggle(targetClassToggle);
......
src/blocks/main-nav/main-nav.scss
View file @ a15ade53
......@@ -8,14 +8,6 @@
position: relative;
z-index: 10;
@media (min-width: $screen-xxxl) {
margin: 0 76px;
}
@media (min-width: $screen-xxl) {
margin: 0 45px;
}
@at-root .page-header__inner & {
@media (max-width: ($screen-xxl - 1)) {
display: none;
......@@ -87,6 +79,7 @@
padding-right: 15px;
}
&.active,
&:hover,
&:focus {
outline: 0;
......@@ -95,6 +88,10 @@
color: $color-main;
}
&.active {
pointer-events: none;
}
&--lvl-2 {
min-width: 200px;
......
src/blocks/page-header/page-header.scss
View file @ a15ade53
......@@ -28,6 +28,7 @@
&__inner {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-top: 20px;
......@@ -37,7 +38,6 @@
&__right {
display: flex;
align-items: center;
margin-left: auto;
.main-nav__toggler {
@media (min-width: $screen-md) {
......
src/blocks/page/page.scss
View file @ a15ade53
......@@ -859,10 +859,6 @@ pre {
&__second {
font: 22px/140% $font-family;
@media (min-width: $screen-xxl) {
font-size: 40px;
}
@media (min-width: $screen-xl) {
font-size: 30px;
}
......@@ -1055,6 +1051,18 @@ pre {
@media (min-width: $screen-lg) {
font-size: 36px;
}
@at-root .next-article & {
@media (min-width: $screen-xxl) {
font-size: 40px;
}
}
&--type-1 {
@media (min-width: $screen-xxl) {
font-size: 50px;
}
}
}
/* ----- .painted ----- */
......@@ -1604,113 +1612,6 @@ pre {
}
}
.swiper-pagination {
display: flex;
align-items: flex-start;
margin-top: 30px;
width: 100%;
@media (min-width: $screen-xxxl) {
margin-top: 110px;
width: calc(1920px - 20px);
}
@media (min-width: $screen-xxl) {
margin-top: 100px;
}
@media (min-width: $screen-xl) {
gap: 0 40px;
margin-top: 80px;
}
@media (min-width: $screen-lg) {
gap: 0 30px;
margin-top: 50px;
}
.swiper-pagination-custom-btn {
position: relative;
padding: 20px 0 0;
border: none;
width: 100%;
background-color: transparent;
overflow: hidden;
text-align: left;
font-size: 16px;
font-family: $font-family;
line-height: 130%;
cursor: pointer;
@media (min-width: $screen-xxxl) {
padding-top: 51px;
font-size: 25px;
width: calc(100% / 3 - (40px * 2));
}
@media (min-width: $screen-xxl) {
font-size: 23px;
}
@media (min-width: $screen-xl) {
padding-top: 50px;
font-size: 19px;
}
@media (min-width: $screen-md) {
padding-top: 35px;
font-size: 17px;
}
@media (max-width: ($screen-lg - 1)) {
display: none;
}
&.swiper-pagination-custom-btn-active {
cursor: default;
@media (max-width: ($screen-lg - 1)) {
display: block;
}
.swiper-pagination-progress {
span {
opacity: 1;
}
}
}
&.active {
.swiper-pagination-progress {
span {
width: 100%;
opacity: 1;
}
}
}
.swiper-pagination-progress,
.swiper-pagination-progress span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
}
.swiper-pagination-progress {
background-color: rgba(48, 147, 100, 0.3);
span {
width: 0;
background-color: $color-main;
opacity: 0;
transition: opacity 1s;
}
}
}
}
&__s-inner {
box-sizing: border-box;
......@@ -1854,6 +1755,116 @@ pre {
}
}
.slider-t-1-pagination-wrapper {
@media (min-width: $screen-xxxl) {
// overflow: hidden;
}
}
.slider-t-1-pagination {
margin-top: 30px;
@media (min-width: $screen-xxxl) {
margin-top: 110px;
width: 1740px;
}
@media (min-width: $screen-xxl) {
margin-top: 100px;
}
@media (min-width: $screen-xl) {
margin-top: 80px;
}
@media (min-width: $screen-lg) {
margin-top: 50px;
}
}
.swiper-pagination-custom-btn {
position: relative;
padding: 20px 0 0;
border: none;
width: 100%;
background-color: transparent;
overflow: hidden;
text-align: left;
font-size: 16px;
font-family: $font-family;
line-height: 130%;
cursor: pointer;
@media (min-width: $screen-xxxl) {
padding-top: 51px;
font-size: 25px;
}
@media (min-width: $screen-xxl) {
font-size: 23px;
}
@media (min-width: $screen-xl) {
padding-top: 50px;
font-size: 19px;
}
@media (min-width: $screen-lg) {
}
@media (min-width: $screen-md) {
padding-top: 35px;
font-size: 17px;
}
@media (max-width: ($screen-lg - 1)) {
display: none;
}
@at-root .swiper-slide-thumb-active & {
cursor: default;
@media (max-width: ($screen-lg - 1)) {
display: block;
}
.swiper-pagination-progress {
span {
opacity: 1;
}
}
}
@at-root .autoplay-false .swiper-slide-thumb-active & {
.swiper-pagination-progress {
span {
width: 100%;
opacity: 1;
}
}
}
.swiper-pagination-progress,
.swiper-pagination-progress span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
}
.swiper-pagination-progress {
background-color: rgba(48, 147, 100, 0.3);
span {
width: 0;
background-color: $color-main;
opacity: 0;
transition: opacity 1s;
}
}
}
/* ----- .map-svg ----- */
.map-svg {
......@@ -1978,14 +1989,14 @@ pre {
}
&__pin {
@media (min-width: $screen-xxl) {
width: 28px;
height: 28px;
}
// @media (min-width: $screen-xxl) {
// width: 28px;
// height: 28px;
// }
@media (min-width: $screen-xl) {
width: 17px;
height: 17px;
width: 18px;
height: 18px;
}
@media (min-width: $screen-lg) {
......@@ -2028,8 +2039,8 @@ pre {
path {
@media (min-width: $screen-md) {
position: relative;
fill: transparent;
stroke: $color-main;
// fill: transparent;
// stroke: $color-main;
transition: fill $transition-time;
}
......@@ -2294,30 +2305,21 @@ pre {
margin: 40px auto;
@media (min-width: $screen-xxl) {
margin: 85px auto 100px;
}
@media (min-width: $screen-lg) {
margin: 80px auto;
margin-bottom: 80px;
}
&__title {
@media (min-width: $screen-xxl) {
font-size: 80px;
@media (min-width: $screen-lg) {
font-size: 40px;
}
}
& + .big-text {
margin-top: 0;
}
&--type-1 {
#{$block-name}__title {
@media (min-width: $screen-xxl) {
font-size: 80px;
}
}
}
}
/* ----- .big-img ----- */
......@@ -2404,16 +2406,8 @@ pre {
font-size: 18px;
line-height: 140%;
@media (min-width: $screen-xxl) {
font-size: 25px;
}
@media (min-width: $screen-xl) {
font-size: 22px;
}
@media (min-width: $screen-md) {
font-size: 22px;
font-size: 20px;
}
&__first,
......@@ -2486,10 +2480,6 @@ pre {
}
&__title {
@media (min-width: $screen-xxl) {
line-height: 82px;
}
@media (min-width: $screen-lg) {
position: sticky;
top: 80px;
......@@ -2608,6 +2598,11 @@ pre {
@media (min-width: $screen-lg) {
margin: 80px auto;
}
.btn.active {
cursor: default;
pointer-events: none;
}
}
/* ----- .buttons-group ----- */
......@@ -2880,6 +2875,12 @@ pre {
background-image: url(../img/ico-clock-g.svg);
}
}
&--people {
&::before {
background-image: url(../img/ico-people.svg);
}
}
}
&__i-divider {
......@@ -2915,9 +2916,28 @@ pre {
margin-top: 0 !important;
}
.swiper-slide {
max-width: 100%;
width: 70% !important;
opacity: 0.2;
transition: opacity 1s;
@media (min-width: $screen-xxl) {
width: 1160px !important;
}
&.swiper-slide-active {
opacity: 1;
}
}
.big-img {
margin: 0 !important;
}
.big-img__photo {
aspect-ratio: 16/10.7;
}
}
/* ----- .ac ----- */
......@@ -2961,6 +2981,7 @@ pre {
background-color: transparent;
font: 700 20px/130% $font-family;
text-align: left;
color: $text-color;
@media (min-width: $screen-xxl) {
padding: 50px 100px 50px 0;
......@@ -3037,10 +3058,6 @@ pre {
margin: 40px 0;
@media (min-width: $screen-xxl) {
margin: 120px 0;
}
@media (min-width: $screen-lg) {
margin: 80px 0;
}
......@@ -3076,12 +3093,8 @@ pre {
& + & {
margin-top: 30px;
@media (min-width: $screen-xxl) {
margin-top: 90px;
}
@media (min-width: $screen-xl) {
margin-top: 70px;
margin-top: 60px;
}
@media (min-width: $screen-lg) {
......@@ -3115,10 +3128,6 @@ pre {
font-size: 24px;
line-height: 130%;
@media (min-width: $screen-lg) {
font-size: 40px;
}
@media (min-width: $screen-md) {
font-size: 30px;
}
......
src/img/map-svg.svg
View file @ a15ade53
This diff is collapsed.
src/js/script.js
View file @ a15ade53
This diff is collapsed.
src/pages/about-us.pug
View file @ a15ade53
......@@ -20,7 +20,7 @@ block content
section.def-block
.def-block__inner.container
.def-block__first.def-block__first--type-1
h2.def-title Портфолио
h2.def-title.def-title--type-1 Портфолио
.def-block__second
section.two-col-txt
......@@ -34,7 +34,7 @@ block content
section.our-team.mb-0
.our-team__inner.container
.our-team__first
h2.def-title.our-team__title Наша команда
h2.def-title.def-title--type-1.our-team__title Наша команда
.our-team__second
ul.our-team__list
......
src/pages/contacts.pug
View file @ a15ade53
......@@ -18,15 +18,15 @@ block content
address.contacts__info
ul.contacts__list
li.contacts__item
h6.contacts__i-title Адрес
h6.contacts__i-title Адрес:
.contacts__i-cont
p г. Нижний Новгород, ул. Нартова, д. 6
li.contacts__item
h6.contacts__i-title Телефон
h6.contacts__i-title Телефон:
.contacts__i-cont
a(href="tel:+78312600888") +7 (831) 260-08-88
li.contacts__item
h6.contacts__i-title Email
h6.contacts__i-title E-mail:
.contacts__i-cont
a(href="mailto:info@niizig.ru") info@niizig.ru
......
src/pages/geography-work.pug
View file @ a15ade53
This diff is collapsed.
src/pages/index-1.pug deleted 100644 → 0
View file @ 6ed79938
extends ../pug/layout.pug
block meta
title Главная
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
section.top-banner
.top-banner__inner.container.container--type-1
+bg-sliders('type-1')
.top-banner__right
h2.top-banner__r-title о нас
p.top-banner__r-text.h1 Земля <br> и город
+btn('перейти в раздел')(href='javascript:void(0)')
\ No newline at end of file
src/pages/index-2.pug deleted 100644 → 0
View file @ 6ed79938
extends ../pug/layout.pug
block meta
title Главная
meta(name='description', content='')
//- block append head
//- link(rel='stylesheet', href='css/some.css')
block content
section.top-banner
.top-banner__inner.container.container--type-1
+bg-sliders('type-2')
.top-banner__right
h2.top-banner__r-title о нас
p.top-banner__r-text.h1 Земля <br> и город
+btn('перейти в раздел')(href='javascript:void(0)')
\ No newline at end of file
src/pages/index.pug
View file @ a15ade53
This diff is collapsed.
src/pages/portfolio-detailed-type-2.pug
View file @ a15ade53
......@@ -18,9 +18,9 @@ block content
li.project-information__item.project-information__item--address Архангельская область
li.project-information__item.project-information__item--customer #[span Заказчик:] Администрация муниципального образования «Северодвинск»
li.project-information__item.project-information__item--area #[span.project-information__i-divider Площадь территории:] 190 га
li.project-information__item.project-information__item--date #[span.project-information__i-divider Период разработки:] ноябрь 2016 — декабрь 2017
section.swiper.big-slider.fade.container.container--type-1.lr-arrow
li.project-information__item.project-information__item--date #[span.project-information__i-divider Период разработки:] ноябрь 2016 — декабрь 2017
section.swiper.big-slider.lr-arrow
.swiper-wrapper
.swiper-slide
figure.big-img
......@@ -35,27 +35,27 @@ block content
img(src="img/bi-1.jpg", alt="Lorem ipsum dolor sit amet consectetur adipisicing elit")
figcaption.big-img__desc
p Lorem ipsum dolor sit amet consectetur adipisicing elit
.swiper-slide
figure.big-img
.big-img__photo
img(src="img/bi-2.jpg", alt="Voluptatem veniam necessitatibus dignissimos nostrum eius")
figcaption.big-img__desc
p Voluptatem veniam necessitatibus dignissimos nostrum eius
+btn('', 'circle').swiper-button-prev
<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 1L1 6L6 11" stroke="#309364" stroke-linecap="round" stroke-linejoin="round"/><path d="M1.5 6H17" stroke="#309364"/></svg>
+btn('', 'circle').swiper-button-next
<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L16 6L11 11" stroke="#309364" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5 6H0" stroke="#309364"/></svg>
section.def-block
.def-block__inner.container.container--type-2
.def-block__third
+btn('Вернуться назад', 'link-circle, lc-reverse')(href='javascript:void(0)')
<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L16 6L11 11" stroke="#309364" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5 6H0" stroke="#309364"/></svg>
section.def-block.def-block--type-1.next-article
.def-block__inner.container
.def-block__first.def-block__first--type-2
......
src/pages/territorial-planning.pug
View file @ a15ade53
......@@ -32,7 +32,7 @@ block content
.def-block__inner
.def-block__first.container
.def-block__f-left
h2.def-title Проекты
h2.def-title.def-title--type-1 Проекты
.def-block__f-right
+btn('перейти в раздел')(href='javascript:void(0)')
......
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