erjemin
5bfd50efd5
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m27s
312 lines
7.5 KiB
CSS
312 lines
7.5 KiB
CSS
@charset "utf-8";
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
min-width: 100vw;
|
||
background-color: #111; /* Изначально темный фон */
|
||
opacity: 0; /* Скрываем контент до расчета цвета */
|
||
transition: opacity 0.9s ease-in-out; /* Очень плавное появление */
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1vh 4vw;
|
||
}
|
||
|
||
header > #logo {
|
||
margin-top: 1vh;
|
||
float: left;
|
||
}
|
||
|
||
header > #logo a {
|
||
border: none;
|
||
text-decoration: none;
|
||
}
|
||
|
||
header > #logo a > img {
|
||
width:50px;
|
||
height:46px;
|
||
}
|
||
|
||
header > nav {
|
||
border: #555555;
|
||
min-height: 50px;
|
||
}
|
||
|
||
header > nav > a { /* бургер */
|
||
color: silver;
|
||
text-decoration: none;
|
||
font-size: 1.2em;
|
||
padding: 0 0.5em;
|
||
margin-right: -0.5em;
|
||
border: solid 1px transparent;
|
||
transition: border-color 0.8s ease, color 0.8s ease;
|
||
vertical-align: top;
|
||
}
|
||
|
||
header > nav > a:hover {
|
||
color: white;
|
||
border: solid 1px silver;
|
||
transition: border-color 0.8s ease, color 0.8s ease;
|
||
}
|
||
|
||
header > nav > #stats-menu {
|
||
display: none;
|
||
color: silver;
|
||
font-size: 0.9em;
|
||
margin-right: 15px;
|
||
text-align: right;
|
||
vertical-align: top;
|
||
}
|
||
|
||
header > nav > #stats-menu > b {
|
||
font-weight: normal;
|
||
margin: 0 1ex;
|
||
}
|
||
|
||
header > nav > #stats-menu > p {
|
||
font-style: italic; display: inline-block;
|
||
margin: 0 1vw;
|
||
padding-right: 1vw;
|
||
border-right: 1px dotted silver;
|
||
}
|
||
|
||
header > nav > #stats-menu > i.stats-icon {
|
||
display: inline-block;
|
||
width: 0.9em;
|
||
height: 0.9em;
|
||
vertical-align: middle;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
margin-right: .2em;
|
||
opacity: 0.7; /* Slight transparency for subtle look */
|
||
}
|
||
|
||
header > nav > #stats-menu > i.stats-icon.icon-views {
|
||
margin-left: .2em;
|
||
}
|
||
|
||
|
||
header > nav > #stats-menu > a {
|
||
color: silver;
|
||
text-decoration: none;
|
||
border: solid 1px gray;
|
||
border-radius: 2em;
|
||
padding: 1.5px 0.2em 0 0.2em;
|
||
margin-left: 1em;
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
header > nav > #stats-menu > a:hover {
|
||
background-color: tan;
|
||
color: black;
|
||
border: solid 1px white;
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
/* --- Icons for Header Stats (SVG in Base64) --- */
|
||
/* Clock Icon (Time) */
|
||
.icon-time {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='silver' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* Eye Icon (Views) */
|
||
.icon-views {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='silver' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* MAIN ARTICLE CONTENT */
|
||
main {
|
||
/*justify-content: space-between;*/
|
||
/*align-items: center;*/
|
||
padding: 1vh 8vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
min-height: 60vh;
|
||
/*width: 90%;*/
|
||
/*max-width: 1200px;*/
|
||
/*margin: 0 auto;*/
|
||
}
|
||
|
||
main > article {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2vw;
|
||
}
|
||
|
||
main > article > figure {
|
||
flex: 1;
|
||
}
|
||
|
||
main > article > figure > p { /* Интро/Вступление */
|
||
color: silver;
|
||
font-size: 3vmin;
|
||
line-height: 3.5vmin;
|
||
padding-bottom: 2vmin;
|
||
font-style: italic;
|
||
}
|
||
|
||
main > article > figure > blockquote { /* Цитата */
|
||
color: whitesmoke;
|
||
font-size: 4.5vmin;
|
||
line-height: 5vmin;
|
||
border:none;
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
|
||
main > article > figure > cite { /* Автор цитаты */
|
||
color: silver;
|
||
font-size: 3.5vmin;
|
||
line-height: 4vmin;
|
||
text-align: right;
|
||
padding-top: 4vmin;
|
||
font-style: italic;
|
||
}
|
||
|
||
main > article > div {
|
||
flex: 0 0 30vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 30vw;
|
||
text-align: right;
|
||
margin-bottom: 10vh;
|
||
}
|
||
|
||
main > article > div > div {
|
||
width: 26vmax;
|
||
height: 26vmax;
|
||
padding: 0.5vw;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
main > article > div > div > div {
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
main > article > div > div > div > img {
|
||
width: auto;
|
||
height: 26vmax;
|
||
}
|
||
|
||
/* НАВИГАЦИЯ (ТЕГИ И ДАЛЕЕ) В КОНЦЕ */
|
||
nav {
|
||
padding: 1vh 4vw;
|
||
}
|
||
nav > div {
|
||
color: silver;
|
||
font-size: 1.5vmin;
|
||
line-height: 1.9vmin;
|
||
padding-top: 7vh;
|
||
}
|
||
nav > div a {
|
||
text-decoration: none;
|
||
position: relative;
|
||
padding: 0 0.5ex;
|
||
display: inline-block;
|
||
color: white;
|
||
border-bottom: dotted 1px silver;
|
||
/* градиент для цвета ссылки */
|
||
background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 40%, slategray, silver, lightyellow 50%, rgba(255, 255, 255, 0.4));
|
||
/* обрезка градиента */
|
||
background-clip: initial;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-size: 250% 100%;
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||
background-position: 100%;
|
||
/* плавное позиионирование градиента */
|
||
transition: background-position 0.65s ease;
|
||
margin-right: 2vmin;
|
||
}
|
||
|
||
nav > div a:hover {
|
||
color: white;
|
||
background-position: 0 100%;
|
||
border-bottom: solid 1px white;
|
||
}
|
||
|
||
nav > div > div {
|
||
float: right;
|
||
}
|
||
|
||
nav > div > div a {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* --- ПОДВАЛ-КУКИ (ДЗЕН-СТИЛЬ) --- */
|
||
footer {
|
||
font-family: 'Roboto', sans-serif;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
padding: 2vh 4vw;
|
||
color: silver; /* Мягкий серый цвет текста */
|
||
background-color: rgba(30, 30, 30, 0.8); /* Темный полупрозрачный фон */
|
||
backdrop-filter: blur(5px); /* Эффект матового стекла (современно и медитативно) */
|
||
text-align: center;
|
||
border-top: 1px solid #444; /* Тонкая грань */
|
||
font-size: 0.9em;
|
||
z-index: 1000; /* Чтобы точно было поверх всего */
|
||
}
|
||
|
||
footer small {
|
||
display: inline-block;
|
||
margin-right: 2vw;
|
||
letter-spacing: 0.05em; /* Немного воздуха в тексте */
|
||
}
|
||
|
||
footer button {
|
||
padding: 0.5vh 1.5vw;
|
||
background: transparent;
|
||
color: silver;
|
||
border: 1px solid silver;
|
||
border-radius: 2em; /* Округлые, мягкие формы */
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-size: 0.9em;
|
||
transition: all 0.4s ease;
|
||
}
|
||
|
||
footer button:hover {
|
||
background: silver;
|
||
color: #111;
|
||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Легкое свечение при наведении */
|
||
}
|
||
|
||
/* Отзывчивость: для мобильных устройств колонки свапаются */
|
||
@media (max-width: 768px) {
|
||
main > article {
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
main > article > div {
|
||
flex: 0 0 auto;
|
||
margin-bottom: 2vh;
|
||
}
|
||
}
|
||
|
||
/* --- ВЫРАВНИВАНИЕ СИМВОЛОВ ВИСЯЧЕЙ ПУНКТУАЦИИ (Hanging Punctuation) ТИПОГРАФА ETPGRF --- */
|
||
/* --- В ПРОЕКТЕ ТОЛЬКО ЛЕВЫЕ ВИСЯЧИЕ СИМВОЛЫ (выравнивание по левому краю) --- */
|
||
.etp-laquo {margin-left: -0.44em;} /* « */
|
||
.etp-ldquo, .etp-bdquo { margin-left: -0.4em;} /* “ „ */
|
||
.etp-lsquo {margin-left: -0.22em;} /* ‘ */
|
||
.etp-lpar, .etp-lsqb, .etp-lcub {margin-left: -0.25em;}/* ( [ { */
|
||
|
||
/* --- СЧЕТЧИКИ (СКРЫТЫЙ ПИКСЕЛЬ) --- */
|
||
.counter-pixel {
|
||
border: 0;
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|