add styles main rfo block

2025-06-23 01:48:48 +03:00
parent 952aaf80ae
commit 0ee471e833
6 changed files with 118 additions and 91 deletions
--- a/frontend/src/styles/rfo/article-main.css
+++ 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; /* Обрезает изображение под пропорции блока (опционально) */
+    }
+
+
+
+}