Адаптивный футтер\хедер, увеличили размер пикч через root

templates/static/css/manga_view.css

@@ -1,86 +1,26 @@
-/* Основные стили */
+/* Базовые стили */
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #f8f9fa;
+}
+
 .main-container {
-    max-width: 900px;
+    max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
-}
-
-/* Навигационная цепочка */
-.breadcrumb {
+    flex: 1;
     display: flex;
-    align-items: center;
-    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-fill, minmax(100px, 1fr));
-    gap: 15px;
-}
-
-.manga-preview {
-    width: 100px;
-    height: 140px;
-    overflow: hidden;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-}
-
-.manga-preview img {
+    flex-direction: column;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.3s;
-}
-
-.manga-preview:hover img {
-    transform: scale(1.05);
-}
-
-/* Страница манги */
-.image-navigation-container {
-    margin-top: 20px;
-    text-align: center;
-}
-
-.image-box img {
-    max-width: 100%;
-    max-height: 80vh;
-    object-fit: contain;
-}
-
-.page-navigation {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-    gap: 15px;
-}
-
-.nav-button {
-    padding: 8px 15px;
-    background: #f0f0f0;
-    border-radius: 4px;
-    text-decoration: none;
-    color: #333;
-}
-
-.nav-button:hover {
-    background: #e0e0e0;
 }
 
 /* Хедер */
 .navigation-box {
     padding: 15px 0;
-    border-bottom: 1px solid #eee;
     margin-bottom: 20px;
 }
 
@@ -91,21 +31,82 @@
     padding: 0;
     margin: 0;
     font-size: 16px;
+    flex-wrap: wrap;
 }
 
 .breadcrumb a, .breadcrumb span {
     margin: 0 5px;
+    white-space: nowrap;
+}
+
+/* Основное содержимое */
+.content-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Сетка превью */
+.grid-container {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.manga-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 15px;
+    justify-items: center;
+}
+
+.manga-preview {
+    width: 100px;
+    height: 140px;
+    overflow: hidden;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    transition: transform 0.3s;
+}
+
+.manga-preview:hover {
+    transform: scale(1.05);
+}
+
+.manga-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Страница манги */
+.image-scaling-container {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.scalable-image {
+    max-width: var(--manga-page-width);
+    max-height: var(--manga-page-height);
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
 }
 
 /* Футер */
 .footer-navigation {
-    margin-top: 30px;
-    padding-top: 20px;
+    margin-top: auto;
+    padding: 20px 0;
     border-top: 1px solid #eee;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
+    width: 100%;
 }
 
 .dropdown-box select {
@@ -113,11 +114,14 @@
     border-radius: 4px;
     border: 1px solid #ccc;
     min-width: 200px;
+    max-width: 100%;
 }
 
 .page-buttons {
     display: flex;
     gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .nav-button {
@@ -126,16 +130,26 @@
     border-radius: 4px;
     text-decoration: none;
     color: #333;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
 }
 
 .nav-button:hover {
     background: #e0e0e0;
 }
 
-/* Контент */
-.manga-page {
-    max-width: 100%;
-    max-height: 70vh;
-    display: block;
-    margin: 0 auto;
+/* Адаптивность */
+@media (max-width: 768px) {
+    .manga-grid {
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    }
+    .manga-preview {
+        width: 80px;
+        height: 112px;
+    }
+    :root {
+        --manga-page-width: 95vw;
+        --manga-page-height: 60vh;
+    }
 }