0_0_2 Нормальная сетка для внутрянки манги

templates/static/css/manga_view.css

@@ -1,93 +1,116 @@
 /* Основные стили */
-.centered-box {
-    width: 800px;
-    margin: 0 auto;  /* Автоматические отступы по бокам */
-    background: #f0f0f0;
+/* Центрируем основной контейнер */
+.main-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 900px;
+    margin: 20px auto;
     padding: 20px;
-    align-content: center;
-}
-.centered-box > *{
-    margin: 10px 15px;
+    background: #f9f9f9;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
 }
 
-.image-box {
-    display: none;
+/* Бокс с названием и каталогом */
+.info-box {
     width: 100%;
+    padding: 15px;
+    background: #e0e0e0;
+    border-radius: 5px;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
-#mangaImage {
-    max-width: 100%;
-    max-height: 90vh;
-    object-fit: contain;
-}
-
-.manga-grid-container {
+/* Блок с сеткой превью и изображением */
+.preview-box {
     width: 100%;
-    margin: 0 auto;
+    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);
 }
 
+/* Сетка манги */
 .manga-grid {
     display: grid;
-    grid-template-columns: repeat(9, 102px);
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     gap: 10px;
     justify-content: center;
-    margin: 0 auto;
-    max-width: calc(6 * 102px + 5 * 10px);
+    width: 100%;
+    max-width: 600px;
 }
 
+/* Превью картинок */
 .manga-preview {
-    width: 102px;
-    height: 142px;
+    width: 100px;
+    height: 140px;
     overflow: hidden;
-    border-radius: 3px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    border-radius: 5px;
     background: #eee;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: transform 0.2s;
 }
 
 .manga-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    object-position: center top;
-    cursor: pointer;
-    transition: transform 0.2s;
 }
 
-.manga-preview img:hover {
+.manga-preview:hover {
     transform: scale(1.05);
 }
 
-.breadcrumb {
-    font-weight: bold;
-    list-style: none;
-    text-decoration: none;
-
+/* Основное изображение */
+.image-box {
+    display: none;
+    width: 100%;
+    text-align: center;
+    margin-top: 15px;
 }
 
-li.breadcrumb > a {
-    text-decoration: none !important;
-    color: green;
+#mangaImage {
+    max-width: 100%;
+    max-height: 80vh;
+    object-fit: contain;
 }
 
+/* Блок с выпадающим списком */
+.select-box {
+    width: 100%;
+    margin-top: 15px;
+    text-align: center;
+}
 
+.select-box select {
+    padding: 8px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+}
 
 /* Адаптивность */
 @media (max-width: 768px) {
     .manga-grid {
-        grid-template-columns: repeat(4, 102px);
+        grid-template-columns: repeat(4, 1fr);
     }
 }
 
 @media (max-width: 480px) {
     .manga-grid {
-        grid-template-columns: repeat(3, 102px);
+        grid-template-columns: repeat(3, 1fr);
     }
 }
 
 @media (max-width: 360px) {
     .manga-grid {
-        grid-template-columns: repeat(2, 102px);
+        grid-template-columns: repeat(2, 1fr);
     }
-}
+}