Merge pull request #12 from SlimusMinus/mobile-version

added mobile version

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;
+  }
+}

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;
+  }
+}

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 */
+  }
+}