mod: Улучшения для мобильных устройств.

public/static/css/dicquo.css

@@ -1,8 +1,8 @@
 @charset "utf-8";
 body {
   margin: 0;
-  min-height: 100vh;
-  min-width: 100vw;
+  min-height: 100vmin;
+  min-width: 100vmin;
   background-color: #111; /* Изначально темный фон */
   opacity: 0; /* Скрываем контент до расчета цвета */
   transition: opacity 0.9s ease-in-out; /* Очень плавное появление */
@@ -13,11 +13,11 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1vh 4vw;
+  padding: 1vmin 4vmin;
 }
 
 header > #logo {
-  margin-top: 1vh;
+  margin-top: 1vmin;
   float: left;
 }
 
@@ -69,8 +69,8 @@ header > nav > #stats-menu > b {
 
 header > nav > #stats-menu > p {
   font-style: italic; display: inline-block;
-  margin: 0 1vw;
-  padding-right: 1vw;
+  margin: 0 1vmin;
+  padding-right: 1vmin;
   border-right: 1px dotted silver;
 }
 
@@ -120,18 +120,18 @@ header > nav > #stats-menu > a:hover {
 
 /* MAIN ARTICLE CONTENT */
 main {
-  padding: 1vh 8vw;
+  padding: 1vmin 8vmin;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 60vh;
+  min-height: 60vmin;
 }
 
 main > article {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 2vw;
+  gap: 2vmin;
 }
 
 main > article > figure {
@@ -165,18 +165,18 @@ main > article > figure > cite { /* Автор цитаты */
 }
 
 main > article > div {
-  flex: 0 0 30vw;
+  flex: 0 0 30vmax;
   display: flex;
   justify-content: center;
-  width: 30vw;
+  width: 30vmax;
   text-align: right;
-  margin-bottom: 10vh;
+  margin-bottom: 10vmin;
 }
 
 main > article > div >  div {
   width: 26vmax;
   height: 26vmax;
-  padding: 0.5vw;
+  padding: 0.5vmin;
   border-radius: 50%;
 }
 
@@ -195,13 +195,13 @@ main > article > div > div > div > img {
 
 /* НАВИГАЦИЯ (ТЕГИ И ДАЛЕЕ) В КОНЦЕ */
 nav {
-  padding: 1vh 4vw;
+  padding: 1vmin 4vmin;
 }
 nav > div {
   color: silver;
   font-size: 1.5vmin;
   line-height: 1.9vmin;
-  padding-top: 7vh;
+  padding: 7vmin 0 4vmin 0;
 }
 nav > div a {
   text-decoration: none;
@@ -245,7 +245,7 @@ footer {
   bottom: 0;
   left: 0;
   width: 100%;
-  padding: 2vh 4vw;
+  padding: 2vmin 4vmin;
   color: silver; /* Мягкий серый цвет текста */
   background-color: rgba(30, 30, 30, 0.8); /* Темный полупрозрачный фон */
   backdrop-filter: blur(5px); /* Эффект матового стекла (современно и медитативно) */
@@ -257,12 +257,12 @@ footer {
 
 footer small {
   display: inline-block;
-  margin-right: 2vw;
+  margin-right: 2vmin;
   letter-spacing: 0.05em; /* Немного воздуха в тексте */
 }
 
 footer button {
-  padding: 0.5vh 1.5vw;
+  padding: 0.5vmin 1.5vmin;
   background: transparent;
   color: silver;
   border: 1px solid silver;
@@ -287,7 +287,20 @@ footer button:hover {
 
   main > article > div {
     flex: 0 0 auto;
-    margin-bottom: 2vh;
+    margin: 8vmin 0 2vmin 0;
+  }
+
+  main > article > div {
+  width: 80vmin;
+  }
+
+  main > article > div >  div {
+    width: 36vmax;
+    height: 36vmax;
+  }
+
+  main > article > div > div > div > img {
+    height: 36vmax;
   }
 }