From b23582c94939ee95a75124e1d0f7087128a80905 Mon Sep 17 00:00:00 2001 From: Amanmyrat Date: Wed, 26 Jul 2023 16:44:12 +0500 Subject: [PATCH] New assets --- .../assets/css/components/1-main/mixin.scss | 2 +- .../css/components/2-layout/breadcrumb.scss | 2 +- .../css/components/2-layout/footer.scss | 122 +++- .../css/components/2-layout/header.scss | 148 +++- .../css/components/2-layout/responsive.scss | 456 +++++++----- .../css/components/2-layout/slick-theme.scss | 20 + .../assets/css/components/3-page/home.scss | 24 +- .../assets/css/components/3-page/post.scss | 2 +- themes/berkarar/assets/css/main.css | 650 +++++++++++------- .../assets/images/svg/post-slider-arrow.png | Bin 0 -> 253 bytes .../assets/images/svg/post-slider-arrow.svg | 3 + themes/berkarar/assets/js/slider.js | 36 +- 12 files changed, 966 insertions(+), 499 deletions(-) create mode 100644 themes/berkarar/assets/images/svg/post-slider-arrow.png create mode 100644 themes/berkarar/assets/images/svg/post-slider-arrow.svg diff --git a/themes/berkarar/assets/css/components/1-main/mixin.scss b/themes/berkarar/assets/css/components/1-main/mixin.scss index 1068c23..b64d39e 100755 --- a/themes/berkarar/assets/css/components/1-main/mixin.scss +++ b/themes/berkarar/assets/css/components/1-main/mixin.scss @@ -89,7 +89,7 @@ @mixin md-xlg { - @media (max-width: 1000px) { + @media (max-width: 1024px) { @content; } } diff --git a/themes/berkarar/assets/css/components/2-layout/breadcrumb.scss b/themes/berkarar/assets/css/components/2-layout/breadcrumb.scss index c99f27d..baff4ac 100755 --- a/themes/berkarar/assets/css/components/2-layout/breadcrumb.scss +++ b/themes/berkarar/assets/css/components/2-layout/breadcrumb.scss @@ -1,6 +1,6 @@ // Breadcrumb ======================== .crumb { - padding: 40px 0 60px; + padding: 40px 0 0; &_row { display: flex; diff --git a/themes/berkarar/assets/css/components/2-layout/footer.scss b/themes/berkarar/assets/css/components/2-layout/footer.scss index 67755a6..c4c80ea 100755 --- a/themes/berkarar/assets/css/components/2-layout/footer.scss +++ b/themes/berkarar/assets/css/components/2-layout/footer.scss @@ -62,70 +62,118 @@ } } } -} -.copy { - background: $black; - padding: 25px 0; - - &_row { + &_navs { display: flex; - align-items: center; justify-content: space-between; - } + border-top: 1px solid #fff; + margin-top: 50px; + padding-top: 50px; - &_txt { - font-weight: 400; - font-size: 14px; - line-height: 17px; - color: #FFFFFF; - } + &-col { + width: calc(25% - 50px); + max-width: 245px; + color: #fff; + } - &_info { - display: flex; - align-items: center; - - &-item { + &-link { display: flex; - align-items: center; - - font-weight: 400; - font-size: 14px; - line-height: 17px; - color: #FFFFFF; - - margin-right: 50px; - + margin-bottom: 24px; + &:last-child { - margin-right: 0; + margin-bottom: 0; + } + + p { + font-size: 12px; + font-weight: 400; + line-height: 1.3; + color: #fff; + + width: calc(100% - 26px); } &:hover { - color: $yellow; + p { + color: $yellow; + } - span { - path { - fill: $yellow; - } + path { + fill: $yellow; } } span { - width: 24px; - height: 24px; display: block; + width: 16px; + height: 16px; margin-right: 10px; svg { + display: block; @include ImgCon; + } + } + } + + &-txt { + font-size: 12px; + font-weight: 400; + line-height: 1.3; + } + + .copyright { + font-size: 12px; + font-weight: 700; + line-height: 1.3; + margin-bottom: 24px; + } + + ul { + li { + margin-bottom: 24px; + + &:last-child { + margin-bottom: 0; + } + } + + a { + font-size: 12px; + font-weight: 400; + line-height: 1.3; + color: #fff; + + display: flex; + align-items: center; + @include transition; + + &:hover { + color: $yellow; path { - @include transition; + fill: $yellow; + } + } + + span { + display: block; + width: 16px; + height: 16px; + margin-right: 10px; + + svg { + display: block; + @include ImgCon; } } } } + + } + + } // Footer end ================= \ No newline at end of file diff --git a/themes/berkarar/assets/css/components/2-layout/header.scss b/themes/berkarar/assets/css/components/2-layout/header.scss index 905d040..0245417 100755 --- a/themes/berkarar/assets/css/components/2-layout/header.scss +++ b/themes/berkarar/assets/css/components/2-layout/header.scss @@ -1,6 +1,6 @@ // Header ======================= .header { - padding: 40px 0; + padding: 30px 0; background: $gray; display: block; position: relative; @@ -72,8 +72,8 @@ } .burger { - width: 50px; - height: 50px; + width: 40px; + height: 40px; border-radius: 50%; background: #fff; display: flex; @@ -165,20 +165,20 @@ align-items: center; justify-content: center; cursor: pointer; - padding: 15px 25px; + padding: 12px 15px; background: #fff; border-radius: 10px; font-weight: 700; - font-size: 14px; + font-size: 13px; line-height: 1.2; color: $black; } &_flag { - width: 20px; - height: 20px; + width: 16px; + height: 16px; margin-right: 10px; img { @@ -187,8 +187,8 @@ } &_arrow { - width: 15px; - height: 15px; + width: 12px; + height: 12px; margin-left: 10px; svg { @@ -222,14 +222,14 @@ @include transition; font-weight: 700; - font-size: 14px; + font-size: 13px; line-height: 1.2; color: #fff; span { display: block; - width: 20px; - height: 20px; + width: 16px; + height: 16px; margin-right: 10px; img { @@ -338,12 +338,12 @@ // Nav ======================= .nav { - padding: 30px 0; + padding: 20px 0; background: $black; &.active { position: fixed; - top: 131px; + top: 110px; left: 0; width: 100%; // height: 100%; @@ -377,12 +377,32 @@ text-transform: uppercase; color: #FFFFFF; cursor: pointer; - display: block; + display: flex; + align-items: center; @include transition; + span { + display: block; + width: 20px; + height: 20px; + margin-right: 10px; + + svg { + @include ImgCon; + + path { + @include transition; + } + } + } + &:hover { color: $yellow; + + path { + fill: $yellow; + } } } @@ -483,17 +503,24 @@ top: -150%; left: 0; width: 100%; - height: calc(100% - 210px); + height: calc(100% - 168px); background: url("../images/menu-bg.png") no-repeat center; background-size: cover; z-index: 100; overflow-y: auto; + display: flex; + flex-direction: column; + &.active { - top: 210px; + top: 169px; animation: header .3s linear; } + &_wrap { + margin-bottom: 20px; + } + .mobile_buttons { display: none; } @@ -511,7 +538,7 @@ &-title { font-weight: 700; - font-size: 40px; + font-size: 26px; line-height: 1.6; color: #fff; width: 100%; @@ -523,17 +550,17 @@ } &-input { - width: calc(100% - 190px); - max-width: 1200px; + width: calc(100% - 176px); + // max-width: 1200px; margin-right: 30px; input { background: #fff; font-weight: 700; - font-size: 18px; + font-size: 16px; line-height: 22px; color: $gray; - padding: 20px 25px; + padding: 15px 25px; width: calc(100% - 50px); border-radius: 5px; @@ -545,11 +572,11 @@ &-btn { display: inline-block; - padding: 20px 45px; + padding: 15px 45px; background: $yellow; color: $gray; font-weight: 700; - font-size: 18px; + font-size: 16px; line-height: 22px; color: #000000; border-radius: 5px; @@ -623,10 +650,8 @@ } - &_footer { - background: $black; - padding: 25px 0; - margin-top: 65px; + .footer_navs { + padding-bottom: 40px; } &_row { @@ -689,4 +714,69 @@ } } -// Menu end =================== \ No newline at end of file +// Menu end =================== + +// Mobile ==================== +.mobile { + &_navs { + display: flex; + justify-content: space-between; + margin-bottom: 70px; + + &-list { + width: calc(50% - 50px); + background: #292929; + padding: 20px; + border-radius: 5px; + + display: flex; + flex-wrap: wrap; + + li { + margin: 0 30px 20px 0; + } + + a { + font-size: 13px; + font-weight: 400; + line-height: 1.3; + color: #fff; + text-transform: uppercase; + } + } + } + + &_profile { + background: #292929; + width: calc(50% - 50px); + padding: 20px; + border-radius: 5px; + + // display: flex; + // flex-wrap: wrap; + + &-title { + width: 100%; + color: #FFF; + font-size: 13px; + font-weight: 700; + line-height: 1.3; + padding-bottom: 15px; + margin-bottom: 25px; + border-bottom: 1px solid #fff; + text-align: center; + } + + &-link { + text-align: center; + color: #FFF; + font-size: 13px; + font-weight: 400; + line-height: 1.3; + display: block; + margin-bottom: 25px; + } + } +} + +// Mobile end ================ \ No newline at end of file diff --git a/themes/berkarar/assets/css/components/2-layout/responsive.scss b/themes/berkarar/assets/css/components/2-layout/responsive.scss index ea82c7b..12dbdb6 100755 --- a/themes/berkarar/assets/css/components/2-layout/responsive.scss +++ b/themes/berkarar/assets/css/components/2-layout/responsive.scss @@ -2,15 +2,15 @@ @include xlg-xxlg { // Nav ============================ - .nav { - &_list { - li { - &:nth-last-child(2) { - display: none; - } - } - } - } + // .nav { + // &_list { + // li { + // &:nth-last-child(2) { + // display: none; + // } + // } + // } + // } // Nav end ======================== } @@ -41,15 +41,6 @@ } // Header end ============ - - // Nav end ================ - .nav { - &.active { - top: 133px; - } - } - - // Nav end ================ } // 1400 ============================================ @@ -88,161 +79,40 @@ // Header end ============ - // Nav end ================ + // Navs ================ .nav { - display: none; + &.active { + top: 90px; + } } - // Nav end ================ + // Navs end ============ - // Menu ==================== + // Menu ================ .menu { &.active { - top: 130px; - height: calc(100% - 130px); + top: 149px; + height: calc(100% - 148px); } - .mobile { - &_buttons { - display: block; - margin-bottom: 60px; - - .row { - display: flex; - align-items: center; - justify-content: space-around; - padding: 40px; - background: $black; - border-radius: 5px; - } - - &-link { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - margin-right: 10px; - display: block; - - &:last-child { - margin-right: 0; - } - - a { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - margin-right: 10px; - display: block; - margin: 40px 0 0 0; - - display: none; - - &.active { - display: block; - } - } - } - - - } - - &_user { - &-link { - width: calc(100% - 40px); - text-align: center; - margin-top: 20px; - - padding: 30px 20px; - background: $black; - display: block; - position: relative; - - &.active { - span { - &::after { - transform: rotate(180deg); - top: 20%; - } - } - } - - span { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - display: inline-block; - cursor: pointer; - position: relative; - - &::after { - content: ''; - background: url("../images/svg/mouse-arrow.svg") no-repeat center; - background-size: contain; - width: 15px; - height: 15px; - position: absolute; - top: 50%; - right: -40px; - @include transformY; - @include transition; - } - } - - a { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - display: block; - margin: 40px 0 0 0; - display: none; - - &.active { - display: block; - } - } - } - } - } - - &_search { - &-title { - font-size: 30px; - } - } - - &_box { - flex-wrap: wrap; - } - - &_col { - width: calc(33.33% - 50px); - margin: 0 50px 30px 0; - - &::after { - right: -10px; - } - - &:nth-child(3) { - margin-right: 0; - - &::after { - display: none; - } + .footer { + &_navs { + border-top: 1px solid #fff; + margin-top: 50px; + padding-top: 50px; } } } - // Menu end ================ + // Menu end ============ // Hero ==================== .hero { &_item { + height: calc(100vh - 110px); + &-photo { - height: 650px; + height: calc(100vh - 110px); } } @@ -341,12 +211,16 @@ &-title, &-genre { - font-size: 18px; + font-size: 16px; } &-link { padding: 12px 10px; } + + &-photo { + height: 320px; + } } .slick { @@ -395,23 +269,31 @@ // Footer ================ .footer { + padding: 40px 0; + &_box { - flex-wrap: wrap; + display: none; } - &_col { - width: calc(33.33% - 34px); - // margin-right: 50px; - margin: 0 50px 30px 0; - - &:nth-child(3) { - margin-right: 0; - } - - &::after { - display: none; - } + &_navs { + margin-top: 0; + padding-top: 0; + border-top: none; } + + // &_col { + // width: calc(33.33% - 34px); + // // margin-right: 50px; + // margin: 0 50px 30px 0; + + // &:nth-child(3) { + // margin-right: 0; + // } + + // &::after { + // display: none; + // } + // } } // Footer end ============ @@ -535,7 +417,6 @@ &_photo { width: 300px; - height: 300px; margin-left: 30px; } @@ -757,15 +638,181 @@ } -// 1000 ======================================= +// 1024 ======================================= @include md-xlg { - // Crumb ==================== - .crumb { - padding-bottom: 40px; + // Nav end ================ + .nav { + display: none; } - // Crumb end ================ + // Nav end ================ + + // Menu ==================== + .menu { + &.active { + top: 90px; + height: calc(100% - 90px); + } + + .mobile { + &_buttons { + display: block; + margin-bottom: 25px; + + .row { + display: flex; + align-items: center; + justify-content: space-around; + padding: 20px; + background: $black; + border-radius: 5px; + } + + &-link { + font-weight: 700; + font-size: 18px; + line-height: 1.4; + color: #fff; + margin-right: 10px; + display: block; + + &:last-child { + margin-right: 0; + } + + a { + font-weight: 700; + font-size: 18px; + line-height: 1.4; + color: #fff; + margin-right: 10px; + display: block; + margin: 40px 0 0 0; + + display: none; + + &.active { + display: block; + } + } + } + + + } + + &_user { + &-link { + width: calc(100% - 40px); + text-align: center; + margin-top: 20px; + + padding: 30px 20px; + background: $black; + display: block; + position: relative; + + &.active { + span { + &::after { + transform: rotate(180deg); + top: 20%; + } + } + } + + span { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: inline-block; + cursor: pointer; + position: relative; + + &::after { + content: ''; + background: url("../images/svg/mouse-arrow.svg") no-repeat center; + background-size: contain; + width: 15px; + height: 15px; + position: absolute; + top: 50%; + right: -40px; + @include transformY; + @include transition; + } + } + + a { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: block; + margin: 40px 0 0 0; + display: none; + + &.active { + display: block; + } + } + } + } + } + + &_box { + flex-wrap: wrap; + } + + &_col { + width: calc(33.33% - 50px); + margin: 0 50px 30px 0; + + &::after { + right: -10px; + } + + &:nth-child(3) { + margin-right: 0; + + &::after { + display: none; + } + } + } + } + + // Menu end ================ + + // Mobile ==================== + .mobile { + &_navs { + flex-direction: column; + + &-list { + width: calc(100% - 40px); + margin-bottom: 25px; + } + } + + &_profile { + width: calc(100% - 40px); + + &-title { + font-size: 16px; + margin-bottom: 30px; + padding-bottom: 15px; + } + + &-link { + font-size: 16px; + margin-bottom: 15px; + } + } + } + + // Mobile end ================ // Shops ====================== .shops { @@ -810,6 +857,25 @@ // About end ================== + // Footer ====================== + .footer { + &_navs { + flex-wrap: wrap; + + &-col { + width: calc(50% - 20px); + max-width: unset; + margin-bottom: 30px; + + &:nth-child(3) { + order: 1; + } + } + } + } + + // Footer end ================== + } @@ -895,8 +961,10 @@ // Hero ====================== .hero { &_item { + height: calc(100vh - 90px); + &-photo { - height: 600px; + height: calc(100vh - 90px); } &-link { @@ -1019,6 +1087,10 @@ margin-bottom: 40px; } + .shop_slider-item { + height: 300px; + } + &_info { width: 100%; } @@ -1039,6 +1111,9 @@ // Result end ============= + .slick-list { + height: unset !important; + } } // 720 ============================================== @@ -1071,6 +1146,13 @@ text-align: center; } } + + .footer { + &_navs { + margin-top: 30px; + padding-top: 30px; + } + } } // Menu end ============ @@ -1535,8 +1617,6 @@ } // Result end ============= - - } // 520 ========================================== @@ -1645,6 +1725,8 @@ // Hero ==================== .hero { &_item { + height: 500px; + &-photo { height: 500px; } @@ -1755,8 +1837,7 @@ &_item { &-photo { height: 180px; - padding: 15px; - width: calc(100% - 30px); + width: 100%; } } } @@ -1782,6 +1863,13 @@ margin-right: 20px; } } + + &_navs { + &-col { + width: 100%; + margin-right: 0; + } + } } // Footer end ============ @@ -1862,9 +1950,9 @@ } } - &_photo { - height: 300px; - } + // &_photo { + // height: 300px; + // } &_info { &-title { diff --git a/themes/berkarar/assets/css/components/2-layout/slick-theme.scss b/themes/berkarar/assets/css/components/2-layout/slick-theme.scss index 94139e1..ab113e3 100755 --- a/themes/berkarar/assets/css/components/2-layout/slick-theme.scss +++ b/themes/berkarar/assets/css/components/2-layout/slick-theme.scss @@ -310,6 +310,26 @@ $slick-opacity-not-active: 0.25 !default; } } +.shop_slider { + .slick-next { + background: url("../images/svg/post-slider-arrow.svg"); + bottom: -53px; + } + + .slick-prev { + background: url("../images/svg/post-slider-arrow.svg"); + bottom: -40px; + } + + .slick-dots { + bottom: -40px; + + li button { + background-color: #171717; + } + } +} + .slick-next { right: -25px; diff --git a/themes/berkarar/assets/css/components/3-page/home.scss b/themes/berkarar/assets/css/components/3-page/home.scss index ef65543..ec37650 100755 --- a/themes/berkarar/assets/css/components/3-page/home.scss +++ b/themes/berkarar/assets/css/components/3-page/home.scss @@ -5,7 +5,7 @@ } &_item { - height: 800px; + height: calc(100vh - 160px); width: 100%; position: relative; @@ -16,7 +16,7 @@ } &-photo { - height: 800px; + height: calc(100vh - 160px); width: 100%; img { @@ -350,6 +350,13 @@ font-size: 24px; line-height: 1.4; color: #fff; + + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; } } } @@ -486,7 +493,7 @@ width: 100%; img { - @include ImgCov; + @include ImgCon; } } @@ -703,16 +710,11 @@ // overflow: hidden; &-photo { - width: calc(100% - 50px); - height: 240px; - padding: 25px; - - display: flex; - align-items: center; - justify-content: center; + width: 100%; + height: 290px; img { - @include ImgCon; + @include ImgCov; } } diff --git a/themes/berkarar/assets/css/components/3-page/post.scss b/themes/berkarar/assets/css/components/3-page/post.scss index 0c74d9b..645e584 100755 --- a/themes/berkarar/assets/css/components/3-page/post.scss +++ b/themes/berkarar/assets/css/components/3-page/post.scss @@ -90,7 +90,7 @@ &_photo { width: 500px; - height: 500px; + // height: 500px; margin-left: 60px; img { diff --git a/themes/berkarar/assets/css/main.css b/themes/berkarar/assets/css/main.css index 7243bcc..540611d 100755 --- a/themes/berkarar/assets/css/main.css +++ b/themes/berkarar/assets/css/main.css @@ -140,7 +140,7 @@ input[type=date]::-webkit-calendar-picker-indicator { } .header { - padding: 40px 0; + padding: 30px 0; background: #292929; display: block; position: relative; @@ -223,8 +223,8 @@ input[type=date]::-webkit-calendar-picker-indicator { -moz-transition: all 0.2s ease-in-out 0s; } .header .burger { - width: 50px; - height: 50px; + width: 40px; + height: 40px; border-radius: 50%; background: #fff; display: -webkit-box; @@ -325,17 +325,17 @@ input[type=date]::-webkit-calendar-picker-indicator { -ms-flex-pack: center; justify-content: center; cursor: pointer; - padding: 15px 25px; + padding: 12px 15px; background: #fff; border-radius: 10px; font-weight: 700; - font-size: 14px; + font-size: 13px; line-height: 1.2; color: #171717; } .header .lang_flag { - width: 20px; - height: 20px; + width: 16px; + height: 16px; margin-right: 10px; } .header .lang_flag img { @@ -345,8 +345,8 @@ input[type=date]::-webkit-calendar-picker-indicator { -o-object-fit: contain; } .header .lang_arrow { - width: 15px; - height: 15px; + width: 12px; + height: 12px; margin-left: 10px; } .header .lang_arrow svg { @@ -385,14 +385,14 @@ input[type=date]::-webkit-calendar-picker-indicator { transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; font-weight: 700; - font-size: 14px; + font-size: 13px; line-height: 1.2; color: #fff; } .header .lang_box a span { display: block; - width: 20px; - height: 20px; + width: 16px; + height: 16px; margin-right: 10px; } .header .lang_box a span img { @@ -489,12 +489,12 @@ input[type=date]::-webkit-calendar-picker-indicator { } .nav { - padding: 30px 0; + padding: 20px 0; background: #171717; } .nav.active { position: fixed; - top: 131px; + top: 110px; left: 0; width: 100%; z-index: 100; @@ -531,7 +531,29 @@ input[type=date]::-webkit-calendar-picker-indicator { text-transform: uppercase; color: #FFFFFF; cursor: pointer; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; +} +.nav_list li a span { display: block; + width: 20px; + height: 20px; + margin-right: 10px; +} +.nav_list li a span svg { + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} +.nav_list li a span svg path { -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; @@ -539,6 +561,9 @@ input[type=date]::-webkit-calendar-picker-indicator { .nav_list li a:hover { color: #FFB100; } +.nav_list li a:hover path { + fill: #FFB100; +} .nav_list li .more { font-weight: 700; font-size: 12px; @@ -623,17 +648,27 @@ input[type=date]::-webkit-calendar-picker-indicator { top: -150%; left: 0; width: 100%; - height: calc(100% - 210px); + height: calc(100% - 168px); background: url("../images/menu-bg.png") no-repeat center; background-size: cover; z-index: 100; overflow-y: auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .menu.active { - top: 210px; + top: 169px; -webkit-animation: header 0.3s linear; animation: header 0.3s linear; } +.menu_wrap { + margin-bottom: 20px; +} .menu .mobile_buttons { display: none; } @@ -652,7 +687,7 @@ input[type=date]::-webkit-calendar-picker-indicator { } .menu_search-title { font-weight: 700; - font-size: 40px; + font-size: 26px; line-height: 1.6; color: #fff; width: 100%; @@ -662,17 +697,16 @@ input[type=date]::-webkit-calendar-picker-indicator { color: #FFB100; } .menu_search-input { - width: calc(100% - 190px); - max-width: 1200px; + width: calc(100% - 176px); margin-right: 30px; } .menu_search-input input { background: #fff; font-weight: 700; - font-size: 18px; + font-size: 16px; line-height: 22px; color: #292929; - padding: 20px 25px; + padding: 15px 25px; width: calc(100% - 50px); border-radius: 5px; } @@ -693,11 +727,11 @@ input[type=date]::-webkit-calendar-picker-indicator { } .menu_search-btn { display: inline-block; - padding: 20px 45px; + padding: 15px 45px; background: #FFB100; color: #292929; font-weight: 700; - font-size: 18px; + font-size: 16px; line-height: 22px; color: #000000; border-radius: 5px; @@ -763,10 +797,8 @@ input[type=date]::-webkit-calendar-picker-indicator { .menu_col-link:hover { color: #FFB100; } -.menu_footer { - background: #171717; - padding: 25px 0; - margin-top: 65px; +.menu .footer_navs { + padding-bottom: 40px; } .menu_row { display: -webkit-box; @@ -833,8 +865,65 @@ input[type=date]::-webkit-calendar-picker-indicator { -moz-transition: all 0.2s ease-in-out 0s; } +.mobile_navs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 70px; +} +.mobile_navs-list { + width: calc(50% - 50px); + background: #292929; + padding: 20px; + border-radius: 5px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.mobile_navs-list li { + margin: 0 30px 20px 0; +} +.mobile_navs-list a { + font-size: 13px; + font-weight: 400; + line-height: 1.3; + color: #fff; + text-transform: uppercase; +} +.mobile_profile { + background: #292929; + width: calc(50% - 50px); + padding: 20px; + border-radius: 5px; +} +.mobile_profile-title { + width: 100%; + color: #FFF; + font-size: 13px; + font-weight: 700; + line-height: 1.3; + padding-bottom: 15px; + margin-bottom: 25px; + border-bottom: 1px solid #fff; + text-align: center; +} +.mobile_profile-link { + text-align: center; + color: #FFF; + font-size: 13px; + font-weight: 400; + line-height: 1.3; + display: block; + margin-bottom: 25px; +} + .crumb { - padding: 40px 0 60px; + padding: 40px 0 0; } .crumb_row { display: -webkit-box; @@ -1153,81 +1242,114 @@ input[type=date]::-webkit-calendar-picker-indicator { .footer_col-link:hover { color: #FFB100; } - -.copy { - background: #171717; - padding: 25px 0; -} -.copy_row { +.footer_navs { display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; + border-top: 1px solid #fff; + margin-top: 50px; + padding-top: 50px; } -.copy_txt { - font-weight: 400; - font-size: 14px; - line-height: 17px; - color: #FFFFFF; +.footer_navs-col { + width: calc(25% - 50px); + max-width: 245px; + color: #fff; } -.copy_info { +.footer_navs-link { display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + margin-bottom: 24px; } -.copy_info-item { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.footer_navs-link:last-child { + margin-bottom: 0; +} +.footer_navs-link p { + font-size: 12px; font-weight: 400; - font-size: 14px; - line-height: 17px; - color: #FFFFFF; - margin-right: 50px; + line-height: 1.3; + color: #fff; + width: calc(100% - 26px); } -.copy_info-item:last-child { - margin-right: 0; -} -.copy_info-item:hover { +.footer_navs-link:hover p { color: #FFB100; } -.copy_info-item:hover span path { +.footer_navs-link:hover path { fill: #FFB100; } -.copy_info-item span { - width: 24px; - height: 24px; +.footer_navs-link span { display: block; + width: 16px; + height: 16px; margin-right: 10px; } -.copy_info-item span svg { +.footer_navs-link span svg { + display: block; width: 100%; height: 100%; object-fit: contain; -o-object-fit: contain; } -.copy_info-item span svg path { +.footer_navs-txt { + font-size: 12px; + font-weight: 400; + line-height: 1.3; +} +.footer_navs .copyright { + font-size: 12px; + font-weight: 700; + line-height: 1.3; + margin-bottom: 24px; +} +.footer_navs ul li { + margin-bottom: 24px; +} +.footer_navs ul li:last-child { + margin-bottom: 0; +} +.footer_navs ul a { + font-size: 12px; + font-weight: 400; + line-height: 1.3; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; } +.footer_navs ul a:hover { + color: #FFB100; +} +.footer_navs ul a:hover path { + fill: #FFB100; +} +.footer_navs ul a span { + display: block; + width: 16px; + height: 16px; + margin-right: 10px; +} +.footer_navs ul a span svg { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + -o-object-fit: contain; +} .hero_slider { position: relative; } .hero_item { - height: 800px; + height: calc(100vh - 160px); width: 100%; position: relative; } @@ -1235,7 +1357,7 @@ input[type=date]::-webkit-calendar-picker-indicator { opacity: 1; } .hero_item-photo { - height: 800px; + height: calc(100vh - 160px); width: 100%; } .hero_item-photo img { @@ -1566,6 +1688,12 @@ input[type=date]::-webkit-calendar-picker-indicator { font-size: 24px; line-height: 1.4; color: #fff; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; } @-webkit-keyframes fadeInUp { @@ -1699,8 +1827,8 @@ input[type=date]::-webkit-calendar-picker-indicator { .movie_item-photo img { width: 100%; height: 100%; - object-fit: cover; - -o-object-fit: cover; + object-fit: contain; + -o-object-fit: contain; } .movie_item-title { margin: 15px 0 8px; @@ -1908,24 +2036,14 @@ input[type=date]::-webkit-calendar-picker-indicator { -moz-transition: all 0.2s ease-in-out 0s; } .rest_item-photo { - width: calc(100% - 50px); - height: 240px; - padding: 25px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + width: 100%; + height: 290px; } .rest_item-photo img { width: 100%; height: 100%; - object-fit: contain; - -o-object-fit: contain; + object-fit: cover; + -o-object-fit: cover; } .rest_item-info { background: #171717; @@ -2883,7 +3001,6 @@ input[type=date]::-webkit-calendar-picker-indicator { } .post_photo { width: 500px; - height: 500px; margin-left: 60px; } .post_photo img { @@ -3345,6 +3462,21 @@ input[type=date]::-webkit-calendar-picker-indicator { border-radius: 27px; } +.shop_slider .slick-next { + background: url("../images/svg/post-slider-arrow.svg"); + bottom: -53px; +} +.shop_slider .slick-prev { + background: url("../images/svg/post-slider-arrow.svg"); + bottom: -40px; +} +.shop_slider .slick-dots { + bottom: -40px; +} +.shop_slider .slick-dots li button { + background-color: #171717; +} + .slick-next { right: -25px; } @@ -3410,11 +3542,6 @@ input[type=date]::-webkit-calendar-picker-indicator { border-radius: 27px; } -@media (max-width: 1665px) { - .nav_list li:nth-last-child(2) { - display: none; - } -} @media (max-width: 1500px) { .auto_container { padding: 0 30px; @@ -3428,9 +3555,6 @@ input[type=date]::-webkit-calendar-picker-indicator { .header .lang_current { padding: 15px; } - .nav.active { - top: 133px; - } } @media (max-width: 1400px) { .header { @@ -3453,129 +3577,23 @@ input[type=date]::-webkit-calendar-picker-indicator { .header .user { display: none; } - .nav { - display: none; + .nav.active { + top: 90px; } .menu.active { - top: 130px; - height: calc(100% - 130px); + top: 149px; + height: calc(100% - 148px); } - .menu .mobile_buttons { - display: block; - margin-bottom: 60px; + .menu .footer_navs { + border-top: 1px solid #fff; + margin-top: 50px; + padding-top: 50px; } - .menu .mobile_buttons .row { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: distribute; - justify-content: space-around; - padding: 40px; - background: #171717; - border-radius: 5px; - } - .menu .mobile_buttons-link { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - margin-right: 10px; - display: block; - } - .menu .mobile_buttons-link:last-child { - margin-right: 0; - } - .menu .mobile_buttons-link a { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - margin-right: 10px; - display: block; - margin: 40px 0 0 0; - display: none; - } - .menu .mobile_buttons-link a.active { - display: block; - } - .menu .mobile_user-link { - width: calc(100% - 40px); - text-align: center; - margin-top: 20px; - padding: 30px 20px; - background: #171717; - display: block; - position: relative; - } - .menu .mobile_user-link.active span::after { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - top: 20%; - } - .menu .mobile_user-link span { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - display: inline-block; - cursor: pointer; - position: relative; - } - .menu .mobile_user-link span::after { - content: ""; - background: url("../images/svg/mouse-arrow.svg") no-repeat center; - background-size: contain; - width: 15px; - height: 15px; - position: absolute; - top: 50%; - right: -40px; - transform: translateY(-50%); - -moz-ransform: translateY(-50%); - -o-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - -webkit-transition: all 0.2s ease-in-out 0s; - transition: all 0.2s ease-in-out 0s; - -moz-transition: all 0.2s ease-in-out 0s; - } - .menu .mobile_user-link a { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - display: block; - margin: 40px 0 0 0; - display: none; - } - .menu .mobile_user-link a.active { - display: block; - } - .menu_search-title { - font-size: 30px; - } - .menu_box { - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .menu_col { - width: calc(33.33% - 50px); - margin: 0 50px 30px 0; - } - .menu_col::after { - right: -10px; - } - .menu_col:nth-child(3) { - margin-right: 0; - } - .menu_col:nth-child(3)::after { - display: none; + .hero_item { + height: calc(100vh - 110px); } .hero_item-photo { - height: 650px; + height: calc(100vh - 110px); } .hero .slider__counter { font-size: 18px; @@ -3637,11 +3655,14 @@ input[type=date]::-webkit-calendar-picker-indicator { font-size: 18px; } .movie_item-title, .movie_item-genre { - font-size: 18px; + font-size: 16px; } .movie_item-link { padding: 12px 10px; } + .movie_item-photo { + height: 320px; + } .movie .slick-dots li button { height: 6px; width: 20px; @@ -3667,20 +3688,17 @@ input[type=date]::-webkit-calendar-picker-indicator { .rest_item-link { font-size: 12px; } + .footer { + padding: 40px 0; + } .footer_box { - -ms-flex-wrap: wrap; - flex-wrap: wrap; - } - .footer_col { - width: calc(33.33% - 34px); - margin: 0 50px 30px 0; - } - .footer_col:nth-child(3) { - margin-right: 0; - } - .footer_col::after { display: none; } + .footer_navs { + margin-top: 0; + padding-top: 0; + border-top: none; + } .intro { min-height: 550px; } @@ -3749,7 +3767,6 @@ input[type=date]::-webkit-calendar-picker-indicator { } .post_photo { width: 300px; - height: 300px; margin-left: 30px; } .post_info { @@ -3890,9 +3907,146 @@ input[type=date]::-webkit-calendar-picker-indicator { width: calc(33.33% - 28px); } } -@media (max-width: 1000px) { - .crumb { - padding-bottom: 40px; +@media (max-width: 1024px) { + .nav { + display: none; + } + .menu.active { + top: 90px; + height: calc(100% - 90px); + } + .menu .mobile_buttons { + display: block; + margin-bottom: 25px; + } + .menu .mobile_buttons .row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + padding: 20px; + background: #171717; + border-radius: 5px; + } + .menu .mobile_buttons-link { + font-weight: 700; + font-size: 18px; + line-height: 1.4; + color: #fff; + margin-right: 10px; + display: block; + } + .menu .mobile_buttons-link:last-child { + margin-right: 0; + } + .menu .mobile_buttons-link a { + font-weight: 700; + font-size: 18px; + line-height: 1.4; + color: #fff; + margin-right: 10px; + display: block; + margin: 40px 0 0 0; + display: none; + } + .menu .mobile_buttons-link a.active { + display: block; + } + .menu .mobile_user-link { + width: calc(100% - 40px); + text-align: center; + margin-top: 20px; + padding: 30px 20px; + background: #171717; + display: block; + position: relative; + } + .menu .mobile_user-link.active span::after { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + top: 20%; + } + .menu .mobile_user-link span { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: inline-block; + cursor: pointer; + position: relative; + } + .menu .mobile_user-link span::after { + content: ""; + background: url("../images/svg/mouse-arrow.svg") no-repeat center; + background-size: contain; + width: 15px; + height: 15px; + position: absolute; + top: 50%; + right: -40px; + transform: translateY(-50%); + -moz-ransform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + } + .menu .mobile_user-link a { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: block; + margin: 40px 0 0 0; + display: none; + } + .menu .mobile_user-link a.active { + display: block; + } + .menu_box { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .menu_col { + width: calc(33.33% - 50px); + margin: 0 50px 30px 0; + } + .menu_col::after { + right: -10px; + } + .menu_col:nth-child(3) { + margin-right: 0; + } + .menu_col:nth-child(3)::after { + display: none; + } + .mobile_navs { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .mobile_navs-list { + width: calc(100% - 40px); + margin-bottom: 25px; + } + .mobile_profile { + width: calc(100% - 40px); + } + .mobile_profile-title { + font-size: 16px; + margin-bottom: 30px; + padding-bottom: 15px; + } + .mobile_profile-link { + font-size: 16px; + margin-bottom: 15px; } .shops_item { width: calc(50% - 16px); @@ -3921,6 +4075,20 @@ input[type=date]::-webkit-calendar-picker-indicator { width: 100%; margin-bottom: 40px; } + .footer_navs { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .footer_navs-col { + width: calc(50% - 20px); + max-width: unset; + margin-bottom: 30px; + } + .footer_navs-col:nth-child(3) { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } } @media (max-width: 900px) { .menu .mobile_buttons { @@ -3988,8 +4156,11 @@ input[type=date]::-webkit-calendar-picker-indicator { .menu_col:nth-child(2)::after, .menu_col:nth-child(4)::after { display: none; } + .hero_item { + height: calc(100vh - 90px); + } .hero_item-photo { - height: 600px; + height: calc(100vh - 90px); } .hero_item-link { right: unset; @@ -4068,12 +4239,18 @@ input[type=date]::-webkit-calendar-picker-indicator { margin-left: 0; margin-bottom: 40px; } + .post .shop_slider-item { + height: 300px; + } .post_info { width: 100%; } .result.page .rest_item { width: calc(50% - 28px); } + .slick-list { + height: unset !important; + } } @media (max-width: 720px) { .header .logo { @@ -4097,6 +4274,10 @@ input[type=date]::-webkit-calendar-picker-indicator { margin: 15px 10px; text-align: center; } + .menu .footer_navs { + margin-top: 30px; + padding-top: 30px; + } .shops_tab { -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -4502,6 +4683,9 @@ input[type=date]::-webkit-calendar-picker-indicator { .menu_search-input input { font-size: 14px; } + .hero_item { + height: 500px; + } .hero_item-photo { height: 500px; } @@ -4561,8 +4745,7 @@ input[type=date]::-webkit-calendar-picker-indicator { } .rest_item-photo { height: 180px; - padding: 15px; - width: calc(100% - 30px); + width: 100%; } .pag { -webkit-box-orient: vertical; @@ -4581,6 +4764,10 @@ input[type=date]::-webkit-calendar-picker-indicator { .footer_col:nth-child(3) { margin-right: 20px; } + .footer_navs-col { + width: 100%; + margin-right: 0; + } .intro { min-height: 300px; } @@ -4621,9 +4808,6 @@ input[type=date]::-webkit-calendar-picker-indicator { .post .rest_item-info { text-align: center; } - .post_photo { - height: 300px; - } .post_info-title { font-size: 20px; } diff --git a/themes/berkarar/assets/images/svg/post-slider-arrow.png b/themes/berkarar/assets/images/svg/post-slider-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..6df841b7499db7f2b7dd0db7af5de62c74910bc2 GIT binary patch literal 253 zcmeAS@N?(olHy`uVBq!ia0vp^l0YoL!3HEBKfAITNO2Z;L>4nJa0`PlBg3pY55jgR3=A9lx&I`x0{N3XT^vIy824T=l9gx z9Oo2EPe0QgCD7!QlFY~=wBef7(kYv?KC!G+ET5otscFLU#Z9?I-%IwMG(XPTWw^iM wv!GdhkAK6G>Rl2N?-{n9@b__XUR}>rXP=mL{MEAkK-V#Ny85}Sb4q9e06TG7cK`qY literal 0 HcmV?d00001 diff --git a/themes/berkarar/assets/images/svg/post-slider-arrow.svg b/themes/berkarar/assets/images/svg/post-slider-arrow.svg new file mode 100644 index 0000000..3c522c8 --- /dev/null +++ b/themes/berkarar/assets/images/svg/post-slider-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/berkarar/assets/js/slider.js b/themes/berkarar/assets/js/slider.js index eac4bed..f5aa1c1 100755 --- a/themes/berkarar/assets/js/slider.js +++ b/themes/berkarar/assets/js/slider.js @@ -3,7 +3,7 @@ // Slider ======================================= $(".hero_slider").slick({ - dots: false, + dots: true, slidesToShow: 1, slidesToScroll: 1, arrows: true, @@ -24,6 +24,38 @@ $(".hero_slider").slick({ draggable: true, }); +$(".shop_slider").slick({ + dots: true, + slidesToShow: 1, + slidesToScroll: 1, + arrows: true, + autoplay: false, + autoplaySpeed: 8000, + pauseOnHover: false, + + + infinite: true, + speed: 800, + fade: false, + adaptiveHeight: true, + lazyLoad: 'ondemand', + + cssEase: 'linear', + swipeToSlide: true, + waitForAnimate: false, + draggable: true, + + responsive: [ + { + breakpoint: 1300, + settings: { + dots: false, + arrows: false, + } + }, + ] +}); + $(".movie_slider").slick({ dots: true, slidesToShow: 6, @@ -47,7 +79,7 @@ $(".movie_slider").slick({ responsive: [ { - breakpoint: 1400, + breakpoint: 1300, settings: { slidesToShow: 4, }