one header styles

gulp/tasks/styles.js

@@ -2,6 +2,7 @@
 import gulp from 'gulp';
 import gulpif from 'gulp-if';
 import sass  from 'gulp-sass';
+// import sass  from 'gulp-ruby-sass';
 import cleanCSS from 'gulp-clean-css';
 import newer from 'gulp-newer';
 import autoprefixer from 'gulp-autoprefixer';
@@ -9,22 +10,42 @@ import sourcemaps from 'gulp-sourcemaps';
 import browser from 'browser-sync';
 import pathConfig from '../paths.js'
 import gcmq from 'gulp-group-css-media-queries';
+import concat from 'gulp-concat';
+import minifyCss from 'gulp-minify-css';
+
+// export const stylesBuild = () => {
+//   return gulp.src(`${pathConfig.src.sass}/**/*.scss`, {
+//     ignore: pathConfig.isProd && [`${pathConfig.src.sass}/parts/*.scss`]
+//   })
+
+//     .pipe(newer('*'))
+//     .pipe(gulpif(pathConfig.isDevelop, sourcemaps.init()))
+//     .pipe(sass.sync().on('error', sass.logError))
+//     .pipe(gulpif(pathConfig.isProd, gcmq()))
+//     .pipe(gulpif(pathConfig.isProd, autoprefixer()))
+//     .pipe(gulpif(pathConfig.isProd, cleanCSS({ level: 2 })))
+//     .pipe(gulpif(pathConfig.isDevelop, sourcemaps.write('./')))
+//     .pipe(gulp.dest(pathConfig.assets.css))
+
+//     .pipe(browser.reload({stream: true}));
+// }
 
 export const stylesBuild = () => {
-  return gulp.src(`${pathConfig.src.sass}/**/*.scss`, {
+  return gulp.src(`${pathConfig.src.sass}/**/*.scss`)
-    ignore: pathConfig.isProd && [`${pathConfig.src.sass}/parts/*.scss`]
-  })
-
-    .pipe(newer('*'))
     .pipe(gulpif(pathConfig.isDevelop, sourcemaps.init()))
     .pipe(sass.sync().on('error', sass.logError))
-    .pipe(gulpif(pathConfig.isProd, gcmq()))
+    .pipe(concat("bundle.css"))
-    .pipe(gulpif(pathConfig.isProd, autoprefixer()))
-    .pipe(gulpif(pathConfig.isProd, cleanCSS({ level: 2 })))
     .pipe(gulpif(pathConfig.isDevelop, sourcemaps.write('./')))
     .pipe(gulp.dest(pathConfig.assets.css))
 
-    .pipe(browser.reload({stream: true}));
+  // return sass(`${pathConfig.src.sass}/**/*.scss`)
+  // .pipe(sourcemaps.write())
+  // .pipe(sourcemaps.init({loadMaps: true}))
+  // .pipe(minifyCss({}))
+  // .pipe(sourcemaps.init({loadMaps: true}))
+  // .pipe(concat("app.min.css"))
+  // .pipe(sourcemaps.write())
+  // .pipe(gulp.dest( './build' ));
 }
 
 

header.php

@@ -30,11 +30,11 @@
               </div>
 
               <div class="col-4 col-sm-2 col-lg" style="justify-content: center; border-right: 1px solid #fff; height: 100%; display: flex; align-items: center">
-                <a href="<?php echo get_home_url()?>/form" class=""><button class="order-call btn btn-danger">Заказать звонок</button></a>
+                <a href="<?php echo get_home_url()?>/form" class=""><button class="header_order-call btn btn-danger">Заказать звонок</button></a>
               </div>
 
               <div class="col-4 col-sm-2 col-lg" style="border-right: 1px solid #fff; height: 100%; display: flex; align-items: center; justify-content: center">
-                  <a href="<?php echo get_home_url()?>/form"><button class="order-holiday btn btn-danger">Заказать праздник</button></a>
+                  <a href="<?php echo get_home_url()?>/form"><button class="header_order-holiday btn btn-danger">Заказать праздник</button></a>
               </div>
 
               <div class="col-4 col-sm-1 col-lg header-info__btns_right">

package.json

@@ -17,12 +17,16 @@
     "gulp-browserify": "^0.5.1",
     "gulp-changed": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-concat-css": "^3.1.0",
     "gulp-group-css-media-queries": "^1.2.2",
     "gulp-header": "^2.0.9",
     "gulp-if": "^3.0.0",
     "gulp-imagemin": "^7.1.0",
+    "gulp-minify-css": "^1.2.4",
     "gulp-newer": "^1.4.0",
     "gulp-rename": "^1.4.0",
+    "gulp-ruby-sass": "^4.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-uglify": "^3.0.2",

parts/home/main.php

@@ -2,28 +2,3 @@
 <div class="slider-desktop"><?php echo do_shortcode('[smartslider3 slider="3"]') ?></div>
   <div class="slider-mobile"><?php echo do_shortcode('[smartslider3 slider="4"]') ?></div>
 </div>
-
-<style>
-  .main{
-    height: 325px
-  }
-
-  #carousel {
-    max-height: 325px;
-  }
-
-  #carousel img {
-    max-height: 325px
-  }
-  
-  @media screen and (max-width: 425px){
-    .main{
-      height: 180px;
-      margin-bottom: 10px;
-    }
-    
-    #carousel{
-      display: none;
-    }
-  }
-</style>

php/wordpress/styles.php

@@ -12,6 +12,7 @@
 
     // Common styles
     wp_enqueue_style('armanty_style', $css . '/style.css', array(), $styleVersion);
+    wp_enqueue_style('bundle', $css . '/bundle.css', array(), $styleVersion);
 
     // Pages styles
     if (is_page_template('templates/about.php')) wp_enqueue_style('armanty_about', $pagesStyle . '/about.css', array(), $styleVersion);

src/js/script.js

@@ -19,7 +19,7 @@ $(document).ready(function(){
   const orderEmail = document.getElementById('orderEmail');
   const orderOthers = document.getElementById('orderOthers');
 
-  const callBackBtn = document.querySelector('.order-call');
+  const callBackBtn = document.querySelector('.header_order-call');
   const callBackForm = document.querySelector('.callback-modal form');
   const callBackModal = document.querySelector('.callback-modal');
   const callBackLayout = document.querySelector('.callback-modal__layout');

src/sass/pages/form.scss

@@ -5,9 +5,6 @@
 @import '../../libs/bootstrap_datetimepicker/css/bootstrap.min.css';
 @import '../../libs/bootstrap-select/bootstrap-select.min.css';
 
-.btn, body {
-  font-size: 16px !important;
-}
 
 .form-block {
   h1 {

src/sass/parts/header.scss

@@ -70,7 +70,7 @@
         margin-right: 10px;
       }
 
-      .order-holiday {
+      .header_order-holiday {
         &:hover {
           background-color: #ffffff;
           color: $main-color;
@@ -254,15 +254,10 @@
 
   button {
     padding: 3px 10px;
-    font-size: 18px !important;
+    font-size: 18px;
   }
 }
 
-.popover {
-  z-index: 999999;
-  margin-top: 20px !important;
-}
-
 .header-navmenu__container {
   overflow: visible !important;
   padding: 15px 350px;
@@ -282,6 +277,11 @@
   transition: 0.3s ease-in-out;
 }
 
+.popover {
+  z-index: 999999;
+  margin-top: 20px !important;
+}
+
 .sub-menu {
   .header-navmenu__item {
     background: none;
@@ -337,11 +337,11 @@
     }
   }
 
-  .header-navmenu__item a, .header-info__city span, .header button.order-holiday {
+  .header-navmenu__item a, .header-info__city span, .header button.header_header_order-holiday {
     font-size: 12px !important;
   }
 
-  .header button.order-holiday {
+  .header button.header_order-holiday {
     line-height: 1.15;
   }
 
@@ -477,7 +477,7 @@
       transform: translateY(-60px);
     }
 
-    button.order-holiday {
+    button.header_order-holiday {
       width: 125px;
       margin-right: 0 !important;
       transform: translateX(-10px);
@@ -566,3 +566,72 @@
     padding: 0;
   }
 }
+
+@media screen and (min-width: 576px) and (max-width: 1700px) {
+  .header-info__logo img {
+    height: 60px;
+  }
+
+  .header-container {
+    padding: 0 50px;
+  }
+
+  .header-navmenu__container {
+    padding: 15px 50px;
+  }
+
+  .header-phone-number-block {
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .header-navmenu__item {
+    &:first-child {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .header_order-call {
+    display: block;
+  }
+
+  .header_order-holiday {
+    width: 118px;
+    height: 30px !important;
+    margin: 0;
+    padding: 5px !important;
+    border-radius: 10px;
+    font-size: 12px !important;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .header_order-call {
+    display: none;
+  }
+}
+
+
+@media screen and (max-width: 1200px) {
+  .header_order-call {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .header_order-holiday {
+    height: 34px !important;
+    padding: 0 10px !important;
+  }
+}
+
+button.btn.holiday-header-btn {
+  z-index: 2 !important;
+  margin-top: 10px !important;
+  padding: 5px 10px !important;
+  font-size: 15px !important;
+  text-transform: none;
+}

src/sass/parts/main-block.scss

@@ -1,154 +1,50 @@
 @import '../constansts';
 
-.header-number {
+.main {
-  color: #ffffff;
+  height: 325px;
+}
 
-  &:hover {
+.main {
-    color: #ffffff;
+  margin-top: 35px;
+  margin-bottom: 35px;
+}
+
+.main .slider-mobile {
+  display: none;
+}
+
+@media screen and (max-width: 425px) {
+  .main {
+    height: 180px;
+    margin-bottom: 10px;
+  }
+
+}
+
+@media screen and (max-width: 576px) {
+  .main .slider-mobile {
+    display: block;
+  }
+
+  .main .slider-desktop{
+    display:none;
   }
 }
 
-.header {
+@media screen and (max-width: 576px) {
-  &-navmenu {
+  .main {
-    .sub-menu {
+    height: 200px !important;
-      li {
+    margin-top: 0;
-        margin: 0 0 10px;
+    padding: 0 !important;
-        padding: 5px 10px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-        background: #f2f2f2;
-        color: #606266;
-        list-style: none;
-        font-weight: 400;
 
-        &:hover {
+    img {
-          background: $main-color;
+      width: 100% !important;
-
-          a {
-            color: #f2f2f2 !important;
     }
   }
 }
 
-      a {
+@media screen and (max-width: 1024px) {
-        width: 100%;
+  .main {
-        color: #606266;
+    height: 250px !important;
-        font-size: 18px;
-      }
-    }
-  }
-
-  button {
-    padding: 3px 10px;
-    font-size: 18px !important;
-  }
-}
-
-.popover {
-  z-index: 999999;
-  margin-top: 20px !important;
-}
-
-.header-navmenu__item {
-  display: flex;
-  justify-content: center;
-  width: 16.6%;
-  border-right: 2px solid #ffffff;
-  background: #f2f2f2;
-  color: $main-color;
-  transition: 0.2s;
-
-  &:first-child {
-    border-top-left-radius: 12px;
-    border-bottom-left-radius: 12px;
-  }
-
-  &:last-child {
-    width: calc(100% - 16.6%*5);
-    border-right: 0;
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-  }
-
-  &.current-menu-item {
-    background: #f2f2f2;
-
-    a {
-      color: $main-color;
-    }
-  }
-
-  a {
-    width: 100%;
-    padding: 15px;
-    color: $main-color;
-    text-align: center;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  &:hover {
-    border-bottom-right-radius: 0;
-    background: $main-color;
-
-    a {
-      color: #f2f2f2;
-    }
-  }
-}
-
-.header-navmenu__list {
-  margin-bottom: 0;
-
-  &::before {
-    display: none !important;
-  }
-
-  &::after {
-    display: none !important;
-  }
-}
-
-.header-navmenu__container {
-  overflow: visible !important;
-  padding: 15px 350px;
-  background: #ffffff;
-
-  .header-navmenu {
-    box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.33);
-  }
-}
-
-.header-wrapper {
-  position: sticky;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 99;
-  transition: 0.3s ease-in-out;
-}
-
-.sub-menu {
-  .header-navmenu__item {
-    background: none;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 1700px) {
-  .header-info__logo img {
-    height: 60px;
-  }
-
-  .header-container {
-    padding: 0 50px;
-  }
-
-  .header-navmenu__container {
-    padding: 15px 50px;
-  }
-
-  .header-phone-number-block {
-    padding: 0;
   }
 }

src/sass/parts/order.scss

@@ -126,11 +126,6 @@
   }
 }
 
-@media screen and (max-width: 1200px) {
-  .order-call {
-    display: none;
-  }
-}
 
 @media screen and (max-width: 768px) {
   .order {
@@ -180,11 +175,6 @@
       padding: 20px;
     }
   }
-
-  .order-holiday {
-    height: 34px !important;
-    padding: 0 10px !important;
-  }
 }
 
 @media screen and (max-width: 480px) {
@@ -225,15 +215,6 @@
         font-size: 14px;
       }
     }
-
-    &-holiday {
-      width: 118px;
-      height: 30px !important;
-      margin: 0;
-      padding: 5px !important;
-      border-radius: 10px;
-      font-size: 12px !important;
-    }
   }
 
   .order-modal {
@@ -245,8 +226,4 @@
       }
     }
   }
-
-  .order-call {
-    display: block;
-  }
 }

src/sass/parts/packages.scss

@@ -126,11 +126,7 @@
   }
 }
 
-@media screen and (max-width: 1200px) {
+
-  .order-call {
-    display: none;
-  }
-}
 
 @media screen and (max-width: 768px) {
   .order {
@@ -180,11 +176,6 @@
       padding: 20px;
     }
   }
-
-  .order-holiday {
-    height: 34px !important;
-    padding: 0 10px !important;
-  }
 }
 
 @media screen and (max-width: 480px) {
@@ -225,15 +216,6 @@
         font-size: 14px;
       }
     }
-
-    &-holiday {
-      width: 118px;
-      height: 30px !important;
-      margin: 0;
-      padding: 5px !important;
-      border-radius: 10px;
-      font-size: 12px !important;
-    }
   }
 
   .order-modal {
@@ -246,7 +228,4 @@
     }
   }
   
-  .order-call {
-    display: block;
-  }
 }

src/sass/style.scss

@@ -10,6 +10,30 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Museo Regular', sans-serif;
+  font-size: 16px !important;
+}
+
+.btn {
+  font-size: 16px !important;
+}
+
+#carousel {
+  max-height: 325px;
+}
+
+#carousel img {
+  max-height: 325px;
+}
+
+@media screen and (max-width: 425px) {
+  #carousel {
+    display: none;
+  }
+}
+
+.popover {
+  z-index: 999999;
+  margin-top: 20px !important;
 }
 
 .full-page__border {
@@ -112,10 +136,7 @@ body {
   padding-top: 8px;
 }
 
-.main {
+
-  margin-top: 35px;
-  margin-bottom: 35px;
-}
 
 .contacts-image {
   transform: translateY(10px);
@@ -150,10 +171,6 @@ body {
 
 
 @media screen and (max-width: 1024px) {
-  .main {
-    height: 250px !important;
-  }
-
   .present .container {
     &::after {
       right: 0 !important;
@@ -208,28 +225,12 @@ body {
     padding: 15px !important;
   }
 
-  .main {
-    height: 200px !important;
-    margin-top: 0;
-    padding: 0 !important;
-
-    img {
-      width: 100% !important;
-    }
-  }
-
   .page-header {
     h1 {
       font-size: 28px;
       line-height: 1.2;
     }
   }
-
-  .header-navmenu__item {
-    &:first-child {
-      display: none;
-    }
-  }
 }
 
 
@@ -436,19 +437,8 @@ body {
   }
 }
 
-.main .slider-mobile {
-  display:none;
-}
 
 @media screen and (max-width: 576px) {
-  .main .slider-mobile {
-    display: block;
-  }
-
-  .main .slider-desktop{
-    display:none;
-  }
-
   .packages-item {
     padding: 25px 23px !important;
   }
@@ -472,10 +462,3 @@ body {
   margin-top: 15px;
 }
 
-button.btn.holiday-header-btn {
-  padding: 5px 10px !important;
-  font-size: 15px !important;
-  z-index: 2 !important;
-  margin-top: 10px !important;
-  text-transform: none;
-}