Отображение каталога

templates/static/css/manga_catalog.css

@@ -7,7 +7,7 @@ body {
 }
 
 .catalog-container {
-    max-width: 1200px;
+    max-width: 50%;
     margin: 0 auto;
     padding: 20px;
 }
@@ -23,11 +23,17 @@ body {
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
-/* Изображение слева (фиксированная ширина) */
-.manga-cover {
+/* Контейнер для обложки и кнопки */
+.manga-cover-container {
     width: 200px;
-    height: 280px;
     flex-shrink: 0;
+    position: relative;
+}
+
+/* Изображение */
+.manga-cover {
+    width: 100%;
+    height: 280px;
 }
 
 .manga-cover img {
@@ -37,38 +43,45 @@ body {
     display: block;
 }
 
-/* Информация справа */
-.manga-info {
-    padding: 25px;
-    flex-grow: 1;
+/* Кнопка "Читать" поверх изображения */
+.read-button {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 12px 0;
+    background: rgba(74, 137, 220, 0.9);
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background 0.3s;
 }
 
-.manga-info h2 {
+.read-button:hover {
+    background: rgba(59, 125, 216, 0.95);
+}
+
+/* Информация справа */
+.manga-details {
+    padding: 20px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.manga-title h3 {
     margin: 0 0 8px 0;
     color: #333;
-    font-size: 24px;
-}
-
-.alt-title {
-    color: #666;
-    margin: 0 0 15px 0;
-    font-size: 16px;
-}
-
-.meta-data {
-    margin-top: 20px;
-}
-
-.pages {
-    display: block;
-    color: #888;
-    margin-bottom: 12px;
+    font-size: 20px;
 }
 
+/* Теги под заголовком */
 .tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    margin: 10px 0 15px 0;
 }
 
 .tag {
@@ -79,29 +92,40 @@ body {
     color: #555;
 }
 
-.read-button {
-    display: inline-block;
-    padding: 10px 25px;
-    background: #4a89dc;
-    color: white;
-    text-decoration: none;
-    border-radius: 5px;
-    margin-top: 15px;
-    transition: background 0.3s;
+/* Мета-информация внизу блока */
+.manga-meta {
+    margin-top: auto;
 }
 
-.read-button:hover {
-    background: #3b7dd8;
+.meta-item {
+    margin-bottom: 10px;
+}
+
+.meta-label {
+    font-weight: bold;
+    color: #555;
+    margin-right: 5px;
 }
 
 /* Адаптивность */
 @media (max-width: 768px) {
+    .catalog-container {
+        max-width: 90%;
+    }
+
     .manga-item {
         flex-direction: column;
     }
 
-    .manga-cover {
+    .manga-cover-container {
         width: 100%;
-        height: 300px;
+    }
+
+    .manga-cover {
+        height: 350px;
+    }
+
+    .manga-details {
+        padding: 15px;
     }
 }