changes from 19.01.23

config.js

@@ -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

@@ -2,6 +2,9 @@
 import ready from 'Utils/documentReady.js';
 
 ready(function() {
+    const bgSliderWrapper = document.querySelector('.bg-sliders');
+
+    if (bgSliderWrapper && window.getComputedStyle(bgSliderWrapper).display != 'none') {
       const bgSliders = document.querySelectorAll('.bg-slider');
 
       if (bgSliders.length > 0) {
@@ -9,7 +12,6 @@ ready(function() {
         const sliderDelay = 1000;
         const sliderAnimation = sldierDuration + sliderDelay;
         const sliderDelayInAction = sldierDuration + (sliderAnimation * 2);
-      console.log(sldierDuration);
   
         bgSliders.forEach(slider => {
           firstAction(slider);
@@ -71,4 +73,6 @@ ready(function() {
         };
     
       };
+    }
+    
 });

src/blocks/bg-sliders/bg-sliders.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/pages/about-us.pug

@@ -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

@@ -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/index-1.pug

-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

-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/portfolio-detailed-type-2.pug

@@ -20,7 +20,7 @@ block content
         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
+  section.swiper.big-slider.lr-arrow
     .swiper-wrapper
       .swiper-slide
         figure.big-img

src/pages/territorial-planning.pug

@@ -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)')