delf/agroexpert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add styles main rfo block

Browse Source
This commit is contained in:
AK Delfin
2025-06-23 01:48:48 +03:00
parent 952aaf80ae
commit 0ee471e833
6 changed files with 118 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/main.js
View File

@@ -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';

85
frontend/src/styles/rfo/article-main.css Normal file
View File

@@ -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; /* Обрезает изображение под пропорции блока (опционально) */
}
}

81
frontend/src/styles/rfo/article.css
View File

@@ -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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 789 409"><path fill-rule="evenodd" clip-rule="evenodd" d="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" fill="black"/></svg>');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 789 409"><path fill-rule="evenodd" clip-rule="evenodd" d="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" fill="black"/></svg>');
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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
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;

2
frontend/src/styles/rfo/rfo.css
View File

@@ -12,6 +12,7 @@
--article-mob-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 339" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79427 0L268.205 0C273.042 0 276.999 3.94988 276.999 8.77791V34.6476V304.353V330.222C276.999 335.05 273.042 339 268.205 339H115.707C109.54 339 108.385 335.144 105.499 330.222L99.3918 319.805C97.3825 316.378 93.1269 313.509 89.5588 313.13H8.79425C3.95664 313.13 0 309.181 0 304.352V8.77756C0 3.94952 3.95665 0 8.79427 0Z" fill="black"/></svg>');
--article-short-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373 205'><rect x='354.893' y='205' width='336.786' height='162' rx='10' transform='rotate(-180 354.893 205)' fill='black' fill-opacity='0.3'/><rect x='362.136' y='193' width='351.272' height='170' rx='10' transform='rotate(-180 362.136 193)' fill='black' fill-opacity='0.3'/><rect x='373' y='180' width='373' height='180' rx='10' transform='rotate(-180 373 180)' fill='black' fill-opacity='0.3'/></svg>");
--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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277 479" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.79429 1.53763e-06L268.205 4.68944e-05C273.042 4.77402e-05 276.999 3.94988 276.999 8.77791L276.999 34.6476L276.999 444.353L276.999 470.222C276.999 475.05 273.042 479 268.205 479L115.707 479C109.54 479 108.385 475.144 105.499 470.222L99.3918 459.805C97.3825 456.378 93.1269 453.509 89.5588 453.13L8.79428 453.13C3.95666 453.13 7.22891e-05 449.181 7.31333e-05 444.352L8.22163e-05 8.77756C8.30605e-05 3.94952 3.95668 6.91793e-07 8.79429 1.53763e-06Z" fill="black"/></svg>');
--video-play-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32.0001' r='32' fill='white' fill-opacity='0.5'/><path d='M26 22L44 32L26 42V22Z' fill='black'/></svg>");
}
@@ -68,6 +69,7 @@
display: flex;
flex-direction: column;
margin-top: -222px;
margin-bottom: 48px;
/**width: 1200px;
max-width: 1200px;**/
}