diff --git a/content-post-main-rfo.php b/content-post-main-rfo.php index efe4741..c1ba490 100644 --- a/content-post-main-rfo.php +++ b/content-post-main-rfo.php @@ -1,24 +1,25 @@
- - - -
-
- -
- - +
+
+ + + +
+
+
+ +
+

- -
+
+
-
Подробнее
- -
-
+
Подробнее
+
+
+ \ No newline at end of file diff --git a/content-post-rfo.php b/content-post-rfo.php index a115b26..abd19e9 100644 --- a/content-post-rfo.php +++ b/content-post-rfo.php @@ -32,11 +32,8 @@ $has_video = isset($args['has_video']) ? $args['has_video'] : false;
-
Подробнее
- - - -
+
Подробнее
+
\ No newline at end of file diff --git a/frontend/src/main.js b/frontend/src/main.js index 08e116e..53a1073 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -29,6 +29,7 @@ import './styles/rfo/search-rfo.css'; import './styles/rfo/featured.css'; import './styles/rfo/social.css'; import './styles/rfo/article.css'; +import './styles/rfo/article-main.css'; import './styles/rfo/breadcrumbs.css'; import './styles/rfo/landing.css'; import './styles/rfo/interview.css'; diff --git a/frontend/src/styles/rfo/article-main.css b/frontend/src/styles/rfo/article-main.css new file mode 100644 index 0000000..6de43a3 --- /dev/null +++ b/frontend/src/styles/rfo/article-main.css @@ -0,0 +1,85 @@ +.article-item-main__rfo { + position: relative; + flex-shrink: 0; + height: 409px; + width: 790px; /* Новый размер по ширине SVG */ + background: #f1f3eb; /* пример фона */ + + clip-path: path('M8.79428 0.00442659L780.206 0.000136415C785.043 0.000137261 789 3.94997 789 8.778L789 34.6477L789 374.353L789 400.222C789 405.05 785.043 409 780.206 409L627.708 409C621.541 409 620.386 405.144 617.5 400.222L611.393 389.805C609.383 386.378 605.128 383.509 601.56 383.13L8.79426 383.135C3.95665 383.135 6.00491e-05 379.185 6.08933e-05 374.357L6.99763e-05 8.78198C7.08205e-05 3.95395 3.95667 0.00442574 8.79428 0.00442659Z'); + +} + +.article-main-content{ + display: flex; + gap: 10px; +} + +.article-main-images{ + flex: 1; + min-width: 0; +} + +.article-main-images picture, +.article-main-images img{ + display: block; /* Убирает лишние отступы у inline-элементов */ + height: 383px; /* Занимает 100% ширины родителя (.article-main-images) */ + width: 387px; + object-fit: cover; /* Обрезает изображение под пропорции блока (опционально) */ +} + +.article-main-text{ + flex: 1; + min-width: 0; + padding-top: 22px; +} + + + + + +@media (max-width: 768px) { + + .article-item-main__rfo { + position: relative; + flex-shrink: 0; + width: 100%; /* или любой нужный вам размер */ + aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */ + background: #f1f3eb; + + clip-path: none; + + /* Маска с сохранением пропорций */ + -webkit-mask-image: var(--article-main-mob); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-image: var(--article-main-mob); + mask-repeat: no-repeat; + mask-size: 100% 100%; + } + + + .article-main-content{ + display: flex; + flex-direction: column; + padding: 1rem 0.7rem 0 0.7rem + + } + + .article-main-text{ + width: 100%; + } + + .article-main-images{ + width: 100%; + } + + .article-main-images picture, + .article-main-images img{ + height: 21rem; + width: 100%; + object-fit: cover; /* Обрезает изображение под пропорции блока (опционально) */ + } + + + +} \ No newline at end of file diff --git a/frontend/src/styles/rfo/article.css b/frontend/src/styles/rfo/article.css index 1f208e6..e0ba0f2 100644 --- a/frontend/src/styles/rfo/article.css +++ b/frontend/src/styles/rfo/article.css @@ -52,22 +52,6 @@ } -.article-short-rfo{ - position: relative; - flex-shrink: 0; - height: 205px; - width: 373px; - background: #D4D4D4; /* пример фона */ - -webkit-mask-image: var(--article-short-mask); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: cover; - mask-image: var(--article-short-mask); - mask-repeat: no-repeat; - mask-size: cover; - /*clip-path: path('M0 0H373V180H0V0Z'); /* Простой прямоугольник с скруглёнными углами - clip-path: inset(0 round 10px); Скругление углов (поддержка хуже) */ -} - .item-rfo-zh{ fill: var(--zheltyy); @@ -80,23 +64,6 @@ } -.item-rfo-orange{ - position: relative; - flex-shrink: 0; - height: 409px; - width: 397px; - - background: #f1f3eb; /* пример фона */ - -webkit-mask-image: url('/wp-content/themes/agroexpert/frontend/img/orange-article.svg'); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: cover; - - mask-image: url('/wp-content/themes/agroexpert/frontend/img/orange-article.svg'); - mask-repeat: no-repeat; - mask-size: cover; - -} - .post-title__rfo{ font-family: var(--second-family); font-weight: 700; @@ -112,22 +79,6 @@ line-height: 150%; } -.article-item-main__rfo { - position: relative; - flex-shrink: 0; - height: 409px; - width: 816px; /* Новый размер по ширине SVG */ - background: #f1f3eb; /* пример фона */ - - /* Новая МАСКА через встроенный data URI */ - -webkit-mask-image: url('data:image/svg+xml;utf8,'); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: cover; - - mask-image: url('data:image/svg+xml;utf8,'); - mask-repeat: no-repeat; - mask-size: cover; -} .article-section-title__rfo{ font-family: var(--second-family); @@ -202,6 +153,16 @@ pointer-events: none; /* не блокирует клик по ссылке */ z-index: 2; } + + +.article-rfo-details-icon { + display: inline-block; + width: 25px; + height: 25px; + background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.57157 16.4283H16.4287M16.4287 16.4283V8.5712M16.4287 16.4283L8.57157 8.5712' stroke='%23006842' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; +} @@ -215,23 +176,7 @@ width: 100%; /* На мобильных - на всю ширину */ } - .article-item-main__rfo { - width: 100%; /* или любой нужный вам размер */ - aspect-ratio: 277/339; /* сохраняем пропорции оригинальной маски */ - background: #f1f3eb; - - - - /* Маска с сохранением пропорций */ - -webkit-mask-image: url('data:image/svg+xml;utf8,'); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - - mask-image: url('data:image/svg+xml;utf8,'); - mask-repeat: no-repeat; - mask-size: 100% 100%; - } - + .article-item-rfo { position: relative; @@ -270,10 +215,6 @@ clip-path: inset(0 round 10px); Скругление углов (поддержка хуже) */ } - - - - .article-single--rfo{ flex-direction: column; gap: 4px; diff --git a/frontend/src/styles/rfo/rfo.css b/frontend/src/styles/rfo/rfo.css index 5feafdd..60827c5 100644 --- a/frontend/src/styles/rfo/rfo.css +++ b/frontend/src/styles/rfo/rfo.css @@ -12,6 +12,7 @@ --article-mob-mask: url('data:image/svg+xml;utf8,'); --article-short-mask: url("data:image/svg+xml;utf8,"); --article-short-mob-mask: url("data:image/svg+xml,%3Csvg width='257' height='141' viewBox='0 0 257 141' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='244.097' y='141' width='231.643' height='111.424' rx='10' transform='rotate(-180 244.097 141)' fill='black' fill-opacity='0.3' /%3E%3Crect x='249.079' y='132.746' width='241.606' height='116.927' rx='10' transform='rotate(-180 249.079 132.746)' fill='black' fill-opacity='0.3' /%3E%3Crect x='256.551' y='123.805' width='256.551' height='123.805' rx='10' transform='rotate(-180 256.551 123.805)' fill='black' fill-opacity='0.3' /%3E%3C/svg%3E"); + --article-main-mob: url('data:image/svg+xml;utf8,'); --video-play-icon: url("data:image/svg+xml;utf8,"); } @@ -68,6 +69,7 @@ display: flex; flex-direction: column; margin-top: -222px; + margin-bottom: 48px; /**width: 1200px; max-width: 1200px;**/ }