From 9fb1d719de34136c642149e4a54cd75a933032fa Mon Sep 17 00:00:00 2001 From: = <=> Date: Mon, 10 May 2021 18:27:01 +0500 Subject: [PATCH] psuhed --- .../components/advertisement/carousel.htm | 21 +- .../css/components/2-layout/subheader.scss | 2 + .../assets/css/components/3-page/home.scss | 667 +++++++++--------- themes/modern2/assets/css/main.css | 9 + themes/modern2/pages/index.htm | 7 +- 5 files changed, 364 insertions(+), 342 deletions(-) diff --git a/plugins/tps/reklama/components/advertisement/carousel.htm b/plugins/tps/reklama/components/advertisement/carousel.htm index 635f84bbf..eb05f0387 100644 --- a/plugins/tps/reklama/components/advertisement/carousel.htm +++ b/plugins/tps/reklama/components/advertisement/carousel.htm @@ -1,18 +1,21 @@
{% for reklama in __SELF__.group.adds %} - + {{reklama.title}} {% endfor %} @@ -118,4 +121,4 @@ // ================================================ {% endput %} -{% endif %} +{% endif %} \ No newline at end of file diff --git a/themes/modern2/assets/css/components/2-layout/subheader.scss b/themes/modern2/assets/css/components/2-layout/subheader.scss index 655d76a0d..c7910b8e2 100755 --- a/themes/modern2/assets/css/components/2-layout/subheader.scss +++ b/themes/modern2/assets/css/components/2-layout/subheader.scss @@ -1,5 +1,7 @@ .subheader { background: $text-light-black; + position: relative; + z-index: 1; .close { display: none; } diff --git a/themes/modern2/assets/css/components/3-page/home.scss b/themes/modern2/assets/css/components/3-page/home.scss index 7397eccf7..8b861f94e 100755 --- a/themes/modern2/assets/css/components/3-page/home.scss +++ b/themes/modern2/assets/css/components/3-page/home.scss @@ -1,370 +1,377 @@ .marquee { - width: 100%; - margin: 10px 0; - overflow: hidden; - position: relative; - height: 40px; - &::after { - position: absolute; - right: 0; - top: 0; - width: 260px; - height: 100%; - content: ""; - background: rgb(255, 255, 255); - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 1) 100% - ); - } - &__link { - position: absolute; - top: 0; - left: 0; - width: 120px; - height: 100%; - background: #00822c; - display: flex; - align-items: center; - justify-content: center; - z-index: 1; - font-size: 14px; - color: $text-color-white; - line-height: 16px; - font-weight: 700; - text-transform: uppercase; - &::before { - clip-path: polygon(100% 46%, 0 0, 0 100%); - background: #00822c; - position: absolute; - top: 0; - left: 100%; - height: 100%; - width: 25px; - content: ""; + width: 100%; + margin: 10px 0; + overflow: hidden; + position: relative; + height: 40px; + &::after { + position: absolute; + right: 0; + top: 0; + width: 260px; + height: 100%; + content: ""; + background: rgb(255, 255, 255); + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 100% + ); + } + &__link { + position: absolute; + top: 0; + left: 0; + width: 120px; + height: 100%; + background: #00822c; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + font-size: 14px; + color: $text-color-white; + line-height: 16px; + font-weight: 700; + text-transform: uppercase; + &::before { + clip-path: polygon(100% 46%, 0 0, 0 100%); + background: #00822c; + position: absolute; + top: 0; + left: 100%; + height: 100%; + width: 25px; + content: ""; + } } - } } .marquee div { - display: block; - width: 200%; - height: 30px; - position: absolute; - overflow: hidden; - animation: marquee 25s linear infinite; + display: block; + width: 200%; + height: 30px; + position: absolute; + overflow: hidden; + animation: marquee 25s linear infinite; } .marquee span { - float: left; - width: 50%; - font-size: 14px; - line-height: 40px; - font-weight: 400; - color: $text-black; + float: left; + width: 50%; + font-size: 14px; + line-height: 40px; + font-weight: 400; + color: $text-black; } @keyframes marquee { - 0% { - left: 0; - } - 100% { - left: -100%; - } + 0% { + left: 0; + } + 100% { + left: -100%; + } } /* Make it move */ @keyframes marquee { - 0% { - transform: translate(0, 0); - } - 100% { - transform: translate(-100%, 0); - } + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(-100%, 0); + } } // banner start .banner { - margin: 80px 0; - &__inner { - width: 100%; - height: auto; - img { - width: 100%; - } - } -} -// banner end - -// main start -.main { - margin-top: 70px; - &__inner { - display: flex; - align-items: stretch; - } - &__content { - width: calc(70% - 25px); - margin-right: 25px; - } - &__body { - &-row { - margin: 0 -20px 80px -20px; - display: flex; - align-items: stretch; - flex-wrap: wrap; - } - &-column { - width: calc(50% - 42px); - margin: 0 20px; - a.progressive { - position: relative; - display: block; - overflow: hidden; - outline: none; - height: 300px; - } - a.progressive:not(.replace) { - cursor: default; - } - a.progressive img { - @include fullImage; - } - a.progressive img.preview { - filter: blur(2vw); - transform: scale(1.05); - } - a.progressive img.reveal { - position: absolute; - left: 0; - top: 0; - will-change: transform, opacity; - animation: reveal 1s ease-out; - } - &.border { - border: 1px solid #dcdcdc; - } - } - &-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 80px; - position: relative; - &::before { - position: absolute; - content: ""; - top: 50%; - left: 50%; - width: 80%; - height: 1px; - background: #e6e6e6; - @include transform; - z-index: -1; - } - &-title { - font-size: $h3-size; - line-height: $h3-height; - font-weight: 700; - color: $text-light-black; - background: $text-color-white; - } - &-link { - font-size: $h5-size; - line-height: $h5-height; - font-weight: 400; - color: $text-color-grey; - background: $text-color-white; - display: block; - } - } - &-card { - margin: -100px 30px 0 30px; - } - &-title { - font-size: $h3-size; - line-height: $h3-height; - font-weight: 700; - color: $text-light-black; - margin-bottom: 20px; - } - } - &__banner { - width: 100%; - height: auto; - margin-bottom: 80px; - img { - width: 100%; - } - } - &__sidebar { - margin-left: 25px; - width: calc(30% - 25px); - &-title { - font-size: $h4-size; - line-height: $h4-height; - font-weight: 700; - text-transform: uppercase; - margin-bottom: 80px; - color: $text-light-black; - } - a.progressive { - position: relative; - display: block; - overflow: hidden; - outline: none; - margin-bottom: 80px; - &:not(.replace) { - cursor: default; - } - & img { + margin: 80px 0; + &__inner { width: 100%; height: auto; - } - & img.preview { - filter: blur(2vw); - transform: scale(1.05); - } - & img.reveal { - position: absolute; - left: 0; - top: 0; - will-change: transform, opacity; - animation: reveal 1s ease-out; - } + img { + width: 100%; + } } - &-tag { - display: flex; - align-items: center; - flex-wrap: wrap; - margin: -30px -5px 80px -5px; - &-link { - padding: 8px 9px; - border-right: 5px; - background: #f7f7f6; - font-size: 16px; - line-height: 16px; - color: $text-light-black; - margin: 5px; - } +} +// banner end +.advertisiment__item { + img { + width: 100%; + } +} +// main start +.main { + margin-top: 70px; + &__inner { + display: flex; + align-items: stretch; + } + &__content { + width: calc(70% - 25px); + margin-right: 25px; + } + &__body { + &-row { + margin: 0 -20px 80px -20px; + display: flex; + align-items: stretch; + flex-wrap: wrap; + } + &-column { + width: calc(50% - 42px); + margin: 0 20px; + a.progressive { + position: relative; + display: block; + overflow: hidden; + outline: none; + height: 300px; + } + a.progressive:not(.replace) { + cursor: default; + } + a.progressive img { + @include fullImage; + } + a.progressive img.preview { + filter: blur(2vw); + transform: scale(1.05); + } + a.progressive img.reveal { + position: absolute; + left: 0; + top: 0; + will-change: transform, opacity; + animation: reveal 1s ease-out; + } + &.border { + border: 1px solid #dcdcdc; + } + } + &-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 80px; + position: relative; + &::before { + position: absolute; + content: ""; + top: 50%; + left: 50%; + width: 80%; + height: 1px; + background: #e6e6e6; + @include transform; + z-index: -1; + } + &-title { + font-size: $h3-size; + line-height: $h3-height; + font-weight: 700; + color: $text-light-black; + background: $text-color-white; + } + &-link { + font-size: $h5-size; + line-height: $h5-height; + font-weight: 400; + color: $text-color-grey; + background: $text-color-white; + display: block; + } + } + &-card { + margin: -100px 30px 0 30px; + } + &-title { + font-size: $h3-size; + line-height: $h3-height; + font-weight: 700; + color: $text-light-black; + margin-bottom: 20px; + } + } + &__banner { + width: 100%; + height: auto; + margin-bottom: 80px; + img { + width: 100%; + } + } + &__sidebar { + margin-left: 25px; + width: calc(30% - 25px); + &-adv { + margin-bottom: 40px; + } + &-title { + font-size: $h4-size; + line-height: $h4-height; + font-weight: 700; + text-transform: uppercase; + margin-bottom: 80px; + color: $text-light-black; + } + a.progressive { + position: relative; + display: block; + overflow: hidden; + outline: none; + margin-bottom: 80px; + &:not(.replace) { + cursor: default; + } + & img { + width: 100%; + height: auto; + } + & img.preview { + filter: blur(2vw); + transform: scale(1.05); + } + & img.reveal { + position: absolute; + left: 0; + top: 0; + will-change: transform, opacity; + animation: reveal 1s ease-out; + } + } + &-tag { + display: flex; + align-items: center; + flex-wrap: wrap; + margin: -30px -5px 80px -5px; + &-link { + padding: 8px 9px; + border-right: 5px; + background: #f7f7f6; + font-size: 16px; + line-height: 16px; + color: $text-light-black; + margin: 5px; + } + } } - } } // main end // event start .event { - margin: 80px 0; - &__header { - margin-bottom: 80px; - display: flex; - align-items: center; - justify-content: space-between; - position: relative; - &-title { - font-size: $h3-size; - line-height: $h3-height; - font-weight: 700; - color: $text-light-black; - background: $text-color-white; - } - &-link { - font-size: $h5-size; - line-height: $h5-height; - font-weight: 400; - color: $text-color-grey; - background: $text-color-white; - } - &::before { - position: absolute; - content: ""; - top: 50%; - left: 50%; - width: 80%; - height: 1px; - background: #e6e6e6; - @include transform; - z-index: -1; - } - } - &__body { - &-row { - display: flex; - align-items: stretch; - margin: 0 -20px; - } - &-image { - width: calc(50% - 40px); - margin: 0 20px; - position: relative; - a.progressive { + margin: 80px 0; + &__header { + margin-bottom: 80px; + display: flex; + align-items: center; + justify-content: space-between; position: relative; - display: block; - overflow: hidden; - outline: none; - height: 330px; - } - a.progressive:not(.replace) { - cursor: default; - } - a.progressive img { - @include fullImage; - } - a.progressive img.preview { - filter: blur(2vw); - transform: scale(1.05); - } - a.progressive img.reveal { - position: absolute; - left: 0; - top: 0; - will-change: transform, opacity; - animation: reveal 1s ease-out; - } - } - &-card { - position: absolute; - bottom: -30px; - left: 30px; - width: calc(100% - 60px); - border: 1px solid #707070; - } - &-column { - width: calc(50% - 100px); - margin: 0 20px; - padding: 15px 30px; - border: 1px solid #dcdcdc; - .card { - padding: 30px 0; - border-bottom: 1px solid #dcdcdc; - &:nth-last-child(1) { - border-bottom: none; + &-title { + font-size: $h3-size; + line-height: $h3-height; + font-weight: 700; + color: $text-light-black; + background: $text-color-white; + } + &-link { + font-size: $h5-size; + line-height: $h5-height; + font-weight: 400; + color: $text-color-grey; + background: $text-color-white; + } + &::before { + position: absolute; + content: ""; + top: 50%; + left: 50%; + width: 80%; + height: 1px; + background: #e6e6e6; + @include transform; + z-index: -1; + } + } + &__body { + &-row { + display: flex; + align-items: stretch; + margin: 0 -20px; + } + &-image { + width: calc(50% - 40px); + margin: 0 20px; + position: relative; + a.progressive { + position: relative; + display: block; + overflow: hidden; + outline: none; + height: 330px; + } + a.progressive:not(.replace) { + cursor: default; + } + a.progressive img { + @include fullImage; + } + a.progressive img.preview { + filter: blur(2vw); + transform: scale(1.05); + } + a.progressive img.reveal { + position: absolute; + left: 0; + top: 0; + will-change: transform, opacity; + animation: reveal 1s ease-out; + } + } + &-card { + position: absolute; + bottom: -30px; + left: 30px; + width: calc(100% - 60px); + border: 1px solid #707070; + } + &-column { + width: calc(50% - 100px); + margin: 0 20px; + padding: 15px 30px; + border: 1px solid #dcdcdc; + .card { + padding: 30px 0; + border-bottom: 1px solid #dcdcdc; + &:nth-last-child(1) { + border-bottom: none; + } + } } - } } - } } // event end // partner start .partner { - margin-bottom: 80px; - &__title { - font-size: $h3-size; - line-height: $h3-height; - font-weight: 700; - color: $text-light-black; margin-bottom: 80px; - } + &__title { + font-size: $h3-size; + line-height: $h3-height; + font-weight: 700; + color: $text-light-black; + margin-bottom: 80px; + } } // partner end /* progressive image CSS */ @keyframes reveal { - 0% { - transform: scale(1.05); - opacity: 0; - } - 100% { - transform: scale(1); - opacity: 1; - } + 0% { + transform: scale(1.05); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } } diff --git a/themes/modern2/assets/css/main.css b/themes/modern2/assets/css/main.css index 003262a3d..9717ac13d 100755 --- a/themes/modern2/assets/css/main.css +++ b/themes/modern2/assets/css/main.css @@ -222,6 +222,8 @@ li { .subheader { background: #242424; + position: relative; + z-index: 1; } .subheader .close { display: none; @@ -1257,6 +1259,10 @@ li { width: 100%; } +.advertisiment__item img { + width: 100%; +} + .main { margin-top: 70px; } @@ -1367,6 +1373,9 @@ li { margin-left: 25px; width: calc(30% - 25px); } +.main__sidebar-adv { + margin-bottom: 40px; +} .main__sidebar-title { font-size: 16px; line-height: 25px; diff --git a/themes/modern2/pages/index.htm b/themes/modern2/pages/index.htm index 7fdc0ee61..f5b93c330 100644 --- a/themes/modern2/pages/index.htm +++ b/themes/modern2/pages/index.htm @@ -117,11 +117,12 @@ random = 0 {% partial 'index/partner_news' %}
- {% component 'right_top' %} - {% component 'right_middle' css_class = 'primary progressive replace' %} - {% component 'right_bottom' %} + + {% component 'right_top' css_class= 'main__sidebar-adv' %} {% partial 'tags' %} + {% component 'right_middle' css_class = 'main__sidebar-adv' %} {% partial 'calendar' %} + {% component 'right_bottom' css_class= 'main__sidebar-adv' %}