Redisine

.gitignore

@@ -41,3 +41,5 @@ bower_components
 node_modules
 npm-debug.log
 .happypack/
+Будет удалено app/sprites/
+app/sprites/

app/blocks/articles/articles.jade

@@ -7,11 +7,23 @@ mixin articles()
             +b.article
                 +b.article-item
                     +e.A.link(href='/') Все об устройстве блокировки люка стиральной машины
+                    +e.IMG.img(src='http://via.placeholder.com/257x201')
+                    +e.A.read(href='/') Читать
                 +b.article-item
                     +e.A.link(href='/') Все об устройстве блокировки люка стиральной машины
+                    +e.IMG.img(src='http://via.placeholder.com/257x201')
+                    +e.A.read(href='/') Читать
                 +b.article-item
                     +e.A.link(href='/') Все об устройстве блокировки люка стиральной машины
+                    +e.IMG.img(src='http://via.placeholder.com/257x201')
+                    +e.A.read(href='/') Читать
                 +b.article-item
                     +e.A.link(href='/') Все об устройстве блокировки люка стиральной машины
+                    +e.IMG.img(src='http://via.placeholder.com/257x201')
+                    +e.A.read(href='/') Читать
                 +b.article-item
-                    +e.A.link(href='/') Все об устройстве блокировки люка стиральной машины
+                    +e.A.link(href='/') Сервисный центр по ремонту водонагревателей, детали, запчасти, вызвать мастера
+                    +e.IMG.img(src='http://via.placeholder.com/257x201')
+                    +e.A.read(href='/') Читать
+            +e.BUTTON.button._left(href='#')
+            +e.BUTTON.button._right(href='#')

app/blocks/articles/articles.styl

@@ -1,3 +1,25 @@
+.articles
+  position relative
+
+.articles__button
+  position absolute
+  width 1.5rem
+  height 2.875rem
+  top 50%
+  border none
+  display block
+  content ''
+  background url('../img/arrow.svg')
+  +below($desktop)
+    display none
+
+.articles__button_left
+  left -2.25rem
+
+.articles__button_right
+  right -2.25rem
+  transform scale(-1, 1)
+
 .articles__title
   position relative
   font-size 2.25rem
@@ -12,23 +34,69 @@
     height 0.1875rem
     content ''
     background-color  rgb(153, 153, 153)
+  +below($tablet-landspace)
+    text-align center
+    &:after
+      display none
 
 .article
-  /*display flex
-  justify-content space-between*/
+  margin-top 1.75rem
+  margin-bottom 4.75rem
 
 .article-item
+  position relative
   width 16.1875rem
+  height 18.375rem
+  margin-x(auto)
   border solid 1px #979797
+  background $white
 
 .article-item__link
+  position relative
+  height 66px
   margin-x(auto)
   padding-top 1.125rem
+  padding-bottom 0.75rem
+  padding-x(10px)
   font-size 1.125rem
   display block
   font-weight 700
   text-align center
   text-decoration none
   color rgb(34, 34, 34)
   &:hover
-      text-decoration underline
+      text-decoration underline
+  &:after
+    position absolute
+    bottom -15px
+    left 0
+    right 0
+    width 4.125rem
+    height 3px
+    margin-x(auto)
+    content ''
+    background-color rgb(34, 34, 34)
+
+.article-item__img
+  position absolute
+  bottom 0
+  left 0
+  right 0
+  max-width 100%
+  display block
+  opacity .6
+
+.article-item__read
+  position absolute
+  right 0
+  left 0
+  bottom 1.5rem
+  width 9.125rem
+  height 2rem
+  margin-x(auto)
+  line-height 2rem
+  display block
+  text-align center
+  text-decoration none
+  color $white
+  background-color rgb(255,109,75)

app/blocks/banner/banner.jade

@@ -1,11 +1,10 @@
-include ../row/row
-
 mixin banner
-    +row
-        +b.banner
-            +e.item
-                +e.IMG.image(src='../assets/img/banner.png' width='1200')
-                +e.A.button(href='') Перейти
-            +e.item
-                +e.IMG.image(src='../assets/img/banner.png' width='1200')
-                +e.A.button(href='') Перейти
+    +b.container-fullwidth
+        +b.row
+            +b.banner
+                +e.item
+                    +e.IMG.image(src='../assets/img/banner.png' width='1280')
+                    +e.A.button(href='/service.html') Перейти
+                +e.item
+                    +e.IMG.image(src='../assets/img/banner_orange.png' width='1280')
+                    +e.A.button(href='/service.html') Перейти

app/blocks/banner/banner.styl

@@ -1,22 +1,37 @@
 .banner
   position relative
   z-index 1
-  margin-bottom 2.5rem
+  +below($phone)
+    display none
 
 .banner__item
   position relative
 
+.banner__image
+  width 100%
+  max-width 100%
+  display block
+
 .banner__button
   position absolute
   left 5.625rem
   bottom 3.125rem
   width 15rem
   height 3.125rem
   line-height 3.125rem
-  font-size 1.75rem
-  font-weight 500
+  font-size 1.1rem
   display block
-  background-color rgb(255, 166, 77)
+  border-radius 3px
+  background rgb(255,109,75)
   text-align center
   text-decoration none
-  color rgb(1, 1, 1)
+  text-transform uppercase
+  color $white
+  will-change box-shadow, transform
+  transition box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)
+  &:hover
+    box-shadow 0 15px 10px -8px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1)
+    outline none
+    text-decoration none
+  +below($tablet-landspace)
+    display none

app/blocks/box/box.styl

@@ -0,0 +1,3 @@
+.main
+  flex: 1 0 auto;
+

app/blocks/cart/cart.jade

@@ -1,8 +1,10 @@
 mixin cart()
-    +b.cart&attributes(attributes)
-        +e.A.link(href='/cart')&attributes(attributes)
-            +e.count&attributes(attributes)
-                +e.SPAN&attributes(attributes) 1
-            +e.IMG(src='../assets/img/cart.svg')&attributes(attributes)
-        +e.price&attributes(attributes)
-            +e.SPAN&attributes(attributes) 16 945 руб.
+        +b.cart
+            +e.A.link(href='/cart')
+                +b.I.icon.icon-24 shopping_cart
+                +e.count
+                    +e.SPAN 1
+                +e.IMG(src='../assets/img/cart.svg')
+            +e.prices
+                +e.text Корзина
+                +e.price всего 16 945 руб.

app/blocks/cart/cart.styl

@@ -1,13 +1,29 @@
 .cart
-  margin-left 4.5rem
+  padding-y(0.5rem)
+  padding-left 0.5rem
+  border-left 1px solid rgb(221,221,221)
   display inline-block
-  vertical-align middle
+  vertical-align top
+  +below($tablet-landspace)
+    border-left none
+    transform: translateY(-50%);
+
 .cart__link,
-.cart__price
+.cart__prices
   display inline-block
-  vertical-align middle
+  vertical-align top
+
 .cart__link
   position relative
+
+.cart__link .icon
+  +above($tablet-landspace)
+    display none
+
+.cart__link img
+  +below($tablet-landspace)
+    display none
+
 .cart__count
   position absolute
   top -6px
@@ -18,13 +34,31 @@
   border-radius 50%
   background-color rgb(255, 166, 77)
   text-align center
+  +below($tablet-landspace)
+    width 1rem
+    height 1rem
+
 .cart__count span
   font-size 10px
   font-weight 700
   line-height 21px
   color rgb(255, 255, 255)
+  +below($tablet-landspace)
+    font-weight 400
+    line-height 1rem
+    vertical-align middle
+
+
+
+.cart__prices
+  margin-left 0.8rem
+  font-size 14px
+  color rgb(1, 1, 1)
+  +below($tablet-landspace)
+    display none
+
+.cart__text
+  margin-bottom 0.5rem
+
 .cart__price
-  margin-left 0.3rem
-  font-size 18px
-  font-weight 700
-  color rgb(34, 34, 34)
+  font-size 0.6875rem

app/blocks/catalog-page/catalog-main/catalog-main.jade

@@ -0,0 +1,53 @@
+mixin catalog-main()
+    +b.catalog-main
+        +b.UL.catalog-list
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.button(href='product.html') Купить
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product-out.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.button(href='product.html') Купить
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.button(href='product.html') Купить
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.button(href='product.html') Купить
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.opt-info(href='#')
+                +e.A.button(href='product.html') Купить
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.button(href='product.html') Купить
+            +b.LI.catalog-item
+                +e.A.image
+                    +e.IMG(src='../assets/img/product.png')
+                +e.A.title(href='product.html') Амортизатор для стиральной машины INDESIT 100H L183-225mm d10mm M5 097259
+                +e.price 1 326 руб.
+                +e.price._opt 1 526 руб.
+                +e.A.button(href='product.html') Купить