diff --git a/src/styles/card.css b/src/styles/card.css index ea88fa8..d239848 100644 --- a/src/styles/card.css +++ b/src/styles/card.css @@ -91,3 +91,28 @@ .f-like-btn:hover, .f-like-btn.liked { border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08); } + +@media (max-width: 600px) { + /* Карточка становится вертикальной */ + .f-card-inner { + flex-direction: column; + min-height: unset; + } + + /* Картинка — горизонтальная полоса сверху */ + .f-card-img { + width: 100%; + min-width: unset; + height: 160px; + } + + /* Убираем кнопку карты на мобилке — занимает много места */ + .f-card-map { + display: none; + } + + /* Чуть меньше паддинг в теле карточки */ + .f-card-body { + padding: 12px; + } +} \ No newline at end of file diff --git a/src/styles/layout.css b/src/styles/layout.css index 474be74..c0ed41c 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -45,3 +45,36 @@ .f-feed::-webkit-scrollbar { width: 4px; } .f-feed::-webkit-scrollbar-track { background: transparent; } .f-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } + +@media (max-width: 768px) { + /* Лента занимает весь экран без отступов */ + .f-feed { + padding: 10px; + gap: 10px; + } + + /* Топбар компактнее */ + .f-topbar { + padding: 10px 12px; + } + + /* Кнопка создания объявления — меньше */ + .f-post-btn { + padding: 10px 16px; + font-size: 0.85rem; + } +} + +@media (max-width: 600px) { + .f-post-btn { + padding: 8px 14px; + font-size: 0.8rem; + gap: 6px; + } + + .f-post-btn span { + width: 18px; + height: 18px; + font-size: 1rem; + } +} diff --git a/src/styles/modal.css b/src/styles/modal.css index 1e48465..989771f 100644 --- a/src/styles/modal.css +++ b/src/styles/modal.css @@ -110,3 +110,16 @@ border: 2px solid rgba(8,35,32,.3); border-top-color: #082320; border-radius: 50%; animation: spin .7s linear infinite; } + +@media (max-width: 600px) { + .f-modal-bg { + align-items: flex-end; + } + + .f-modal { + width: 100%; + max-height: 92vh; + border-radius: 20px 20px 0 0; + padding: 20px 16px 32px; /* 32px снизу — отступ от home indicator */ + } +} \ No newline at end of file