erjemin/2020-dq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sergei Erjemin
2026-02-22 12:12:49 +03:00
parent a608dea61f
commit d4624e7761
1 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/static/css/dicquo.css
View File

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