разделение сайта на 2 стр

templates/static/css/manga_view.css

@@ -1,116 +1,78 @@
 /* Основные стили */
-/* Центрируем основной контейнер */
 .main-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     max-width: 900px;
-    margin: 20px auto;
+    margin: 0 auto;
     padding: 20px;
-    background: #f9f9f9;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
 }
 
-/* Бокс с названием и каталогом */
-.info-box {
-    width: 100%;
-    padding: 15px;
-    background: #e0e0e0;
-    border-radius: 5px;
-    text-align: center;
-    margin-bottom: 15px;
-}
-
-/* Блок с сеткой превью и изображением */
-.preview-box {
-    width: 100%;
+/* Навигационная цепочка */
+.breadcrumb {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    background: #fff;
-    padding: 15px;
-    border-radius: 5px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    list-style: none;
+    padding: 0;
+    margin: 0 0 20px 0;
+    font-size: 16px;
 }
 
-/* Сетка манги */
+.breadcrumb span {
+    margin: 0 5px;
+    color: #666;
+}
+
+/* Сетка превью */
 .manga-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 10px;
-    justify-content: center;
-    width: 100%;
-    max-width: 600px;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 15px;
 }
 
-/* Превью картинок */
 .manga-preview {
     width: 100px;
     height: 140px;
     overflow: hidden;
     border-radius: 5px;
-    background: #eee;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    transition: transform 0.2s;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
 
 .manga-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    transition: transform 0.3s;
 }
 
-.manga-preview:hover {
+.manga-preview:hover img {
     transform: scale(1.05);
 }
 
-/* Основное изображение */
-.image-box {
-    display: none;
-    width: 100%;
+/* Страница манги */
+.image-navigation-container {
+    margin-top: 20px;
     text-align: center;
-    margin-top: 15px;
 }
 
-#mangaImage {
+.image-box img {
     max-width: 100%;
     max-height: 80vh;
     object-fit: contain;
 }
 
-/* Блок с выпадающим списком */
-.select-box {
-    width: 100%;
-    margin-top: 15px;
-    text-align: center;
+.page-navigation {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    gap: 15px;
 }
 
-.select-box select {
-    padding: 8px;
-    font-size: 16px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    cursor: pointer;
+.nav-button {
+    padding: 8px 15px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #333;
 }
 
-/* Адаптивность */
-@media (max-width: 768px) {
-    .manga-grid {
-        grid-template-columns: repeat(4, 1fr);
-    }
-}
-
-@media (max-width: 480px) {
-    .manga-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-@media (max-width: 360px) {
-    .manga-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
+.nav-button:hover {
+    background: #e0e0e0;
+}