diff --git a/templates/base_manga.html b/templates/base_manga.html
index 9c6b2c5..b277523 100644
--- a/templates/base_manga.html
+++ b/templates/base_manga.html
@@ -7,11 +7,20 @@
{% block title %}{{ manga.original_title }}{% endblock %}
-
+
diff --git a/templates/static/css/manga_view.css b/templates/static/css/manga_view.css
index f77c21b..38ea7b0 100644
--- a/templates/static/css/manga_view.css
+++ b/templates/static/css/manga_view.css
@@ -46,6 +46,15 @@ body {
flex-direction: column;
}
+
+
+/* Контейнер сетки */
+.manga-grid-container {
+ width: 100%;
+ padding: 10px 0;
+ overflow-x: auto; /* На случай узких экранов */
+}
+
/* Сетка превью */
.grid-container {
width: 100%;
@@ -54,14 +63,20 @@ body {
.manga-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
- gap: 15px;
+ grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+ gap: var(--grid-gap); /* Фиксированный отступ */
justify-items: center;
+ margin: 0 auto;
+ max-width: calc(
+ (var(--preview-base-width) * var(--preview-scale) * var(--grid-columns)) +
+ (var(--grid-gap) * (var(--grid-columns) - 1))
+ );
}
+/* Элементы превью */
.manga-preview {
- width: 100px;
- height: 140px;
+ width: calc(var(--preview-base-width) * var(--preview-scale));
+ height: calc(var(--preview-base-height) * var(--preview-scale));
overflow: hidden;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
@@ -78,25 +93,22 @@ body {
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;
+ width: calc(100% * var(--page-scale));
height: auto;
+ max-width: 100%;
object-fit: contain;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
-
/* Футер */
.footer-navigation {
margin-top: auto;
@@ -140,16 +152,20 @@ body {
}
/* Адаптивность */
+@media (max-width: 1200px) {
+ :root { --grid-columns: 4; }
+}
+
@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;
+ --grid-columns: 3;
+ --preview-scale: 0.7;
+ }
+}
+
+@media (max-width: 480px) {
+ :root {
+ --grid-columns: 2;
+ --grid-gap: 10px; /* Можно уменьшить для мобилок */
}
}
\ No newline at end of file