Skip to content

Commit ea85e36

Browse files
amaksimovvamaksimovv
committed
Merge branch 'design' into 'master'
reworked the documentation design See merge request CodeScoring/docs!643
2 parents 7f3d4f7 + a4547c9 commit ea85e36

5 files changed

Lines changed: 371 additions & 92 deletions

File tree

‎docs/index.en.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,12 @@ hide:
88
---
99

1010
<div class="hero">
11-
<div class="blobs" aria-hidden="true">
12-
<div class="blob"></div>
13-
<div class="blob"></div>
14-
</div>
1511

1612
<div class="hero-content">
1713
<h1>CodeScoring Documentation</h1>
1814
<h2>
1915
In case of any questions please write to
20-
<a href="mailto:support@codescoring.ru" style="color: #ff3d6c; text-decoration-color: #ff3d6c;">
21-
support@codescoring.ru
22-
</a>
16+
<a href="mailto:support@codescoring.ru">support@codescoring.ru</a>
2317
</h2>
2418
<div class="hero-buttons">
2519
<a href="/admin-guide.en/" class="btn btn-primary">Admin guide</a>

‎docs/index.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,12 @@ hide:
88
---
99

1010
<div class="hero">
11-
<div class="blobs" aria-hidden="true">
12-
<div class="blob"></div>
13-
<div class="blob"></div>
14-
</div>
1511

1612
<div class="hero-content">
1713
<h1>Документация CodeScoring</h1>
1814
<h2>
1915
По всем вопросам пишите на
20-
<a href="mailto:support@codescoring.ru" style="color: #ff3d6c; text-decoration-color: #ff3d6c;">
21-
support@codescoring.ru
22-
</a>
16+
<a href="mailto:support@codescoring.ru">support@codescoring.ru</a>
2317
</h2>
2418
<div class="hero-buttons">
2519
<a href="/admin-guide/" class="btn btn-primary">Руководство администратора</a>

‎docs/stylesheets/extra.css‎

Lines changed: 159 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
--md-primary-fg-color: #2d2d2d;
55
--md-primary-fg-color--light: #ff3d6c;
66
--md-primary-fg-color--dark: #ff3d6c;
7+
--md-footer-bg-color: #2d2d2d;
8+
--md-footer-bg-color--dark: #2d2d2d;
79
}
810

911
/* Тёмная тема */
@@ -13,6 +15,12 @@
1315
--md-primary-fg-color--dark: #ff3d6c;
1416
--md-default-fg-color: #e0e0e0; /* основной текст чуть светлее */
1517
--md-default-fg-color--light: #f5f5f5; /* заголовки и второстепенный текст */
18+
--md-default-bg-color: #1a1a1a;
19+
--md-default-bg-color--light: #1a1a1a;
20+
--md-default-bg-color--lighter: #1a1a1a;
21+
--md-default-bg-color--lightest: #1a1a1a;
22+
--md-footer-bg-color: #2d2d2d;
23+
--md-footer-bg-color--dark: #2d2d2d;
1624
}
1725

1826
.md-typeset a {
@@ -23,46 +31,175 @@
2331
color: #e03560;
2432
}
2533

26-
/* Логотип в левый верхний угол */
34+
/* Header: inline tabs (JS-assisted) */
35+
:root {
36+
--md-header-height: 64px;
37+
--cs-header-pad-x: clamp(0.95rem, 2.2vw, 1.85rem);
38+
--cs-logo-size: 64px;
39+
--cs-logo-gap: 12px;
40+
--cs-logo-shift: 0.28rem;
41+
--cs-tabs-offset: 1.15rem;
42+
--cs-tabs-text-pad: 0.35rem;
43+
--cs-tabs-start: calc(
44+
var(--cs-header-pad-x) + var(--cs-logo-shift) + var(--cs-logo-size) + var(--cs-logo-gap) + var(--cs-tabs-offset)
45+
);
46+
--cs-hero-offset: 0.3rem;
47+
--cs-footer-pad-y: 0rem;
48+
}
2749

28-
.md-header .md-header__button.md-logo {
29-
position: absolute;
30-
top: 0.2rem; /* регулируй вертикальный отступ */
31-
left: 1.5rem; /* регулируй горизонтальный отступ */
32-
margin: 0;
50+
@media (max-width: 720px) {
51+
:root {
52+
--md-header-height: 58px;
53+
--cs-header-pad-x: 1rem;
54+
--cs-logo-size: 44px;
55+
--cs-logo-gap: 10px;
56+
--cs-logo-shift: 0.22rem;
57+
--cs-tabs-offset: 0.7rem;
58+
--cs-tabs-text-pad: 0.3rem;
59+
--cs-tabs-start: calc(
60+
var(--cs-header-pad-x) + var(--cs-logo-shift) + var(--cs-logo-size) + var(--cs-logo-gap) + var(--cs-tabs-offset)
61+
);
62+
--cs-hero-offset: 0.1rem;
63+
--cs-footer-pad-y: 0rem;
64+
}
65+
}
66+
67+
/* Header: inline tabs when JS moves tabs into header */
68+
.cs-tabs-inline .md-header {
69+
box-shadow: none !important;
70+
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
71+
position: sticky;
72+
top: 0;
73+
z-index: 4;
74+
pointer-events: auto;
75+
overflow: visible;
76+
}
77+
78+
.cs-tabs-inline .md-header__inner {
79+
min-height: var(--md-header-height);
80+
padding: 0 var(--cs-header-pad-x);
81+
display: flex;
82+
align-items: center;
83+
gap: var(--cs-logo-gap);
84+
pointer-events: auto;
85+
overflow: visible;
86+
width: 100%;
87+
max-width: none;
88+
margin-left: 0;
89+
margin-right: 0;
90+
}
91+
92+
.cs-tabs-inline .md-header__button,
93+
.cs-tabs-inline .md-search,
94+
.cs-tabs-inline .md-header__option {
95+
position: relative;
96+
z-index: 5;
97+
pointer-events: auto;
98+
}
99+
100+
.cs-tabs-inline .md-header__button.md-logo {
101+
position: static;
102+
margin: 0 0 0 var(--cs-logo-shift);
33103
padding: 0;
34-
height: auto;
35-
z-index: 10;
104+
height: var(--md-header-height);
105+
display: flex;
106+
align-items: center;
36107
}
37108

38-
.md-header .md-header__button.md-logo img {
39-
height: 80px !important; /* подгони под высоту хедера */
109+
.cs-tabs-inline .md-header__button.md-logo img {
110+
height: var(--cs-logo-size) !important;
40111
width: auto !important;
41112
max-width: none !important;
42113
display: block;
43114
}
44115

45-
@media (max-width: 720px) {
46-
.md-header .md-header__button.md-logo img {
47-
height: 36px !important;
48-
}
116+
.cs-tabs-inline .md-header__title {
117+
position: absolute;
118+
width: 1px;
119+
height: 1px;
120+
padding: 0;
121+
margin: -1px;
122+
overflow: hidden;
123+
clip: rect(0, 0, 0, 0);
124+
white-space: nowrap;
125+
border: 0;
49126
}
50127

51-
/* Смещение текста site_name, чтобы выровнять с навигацией */
52-
.md-header .md-header__title {
53-
margin-left: 0rem; /* подгони под ширину логотипа */
128+
.cs-tabs-inline .cs-header-tabs {
129+
flex: 1 1 auto;
130+
display: flex;
131+
align-items: center;
132+
height: var(--md-header-height);
133+
justify-content: flex-start;
134+
min-width: 0;
135+
padding-left: var(--cs-tabs-offset);
54136
}
55137

56-
/* Мобильная версия */
57-
@media (max-width: 720px) {
58-
.md-header .md-header__title {
59-
margin-left: 3.2rem; /* уменьшаем, чтобы не прижималось */
60-
}
138+
.cs-tabs-inline .cs-header-tabs .md-tabs__list {
139+
display: flex;
140+
align-items: center;
141+
flex: 1 1 auto;
142+
min-width: 0;
143+
gap: 0.6rem;
144+
padding: 0;
145+
margin: 0;
146+
height: 100%;
147+
justify-content: flex-start;
148+
}
149+
150+
.cs-tabs-inline .cs-header-tabs .md-tabs__item {
151+
display: flex;
152+
align-items: center;
153+
height: 100%;
154+
flex: 0 1 auto;
155+
min-width: 0;
156+
padding-left: var(--cs-tabs-text-pad);
157+
padding-right: var(--cs-tabs-text-pad);
158+
}
159+
160+
.cs-tabs-inline .cs-header-tabs .md-tabs__link {
161+
display: flex;
162+
align-items: center;
163+
height: 100%;
164+
margin: 0;
165+
padding: 0 0.4rem;
166+
font-weight: 500;
167+
line-height: 1;
168+
font-size: 0.68rem;
169+
min-width: 0;
170+
white-space: nowrap;
171+
overflow: hidden;
172+
text-overflow: ellipsis;
173+
}
174+
175+
.cs-tabs-inline .md-tabs__item--active .md-tabs__link,
176+
.cs-tabs-inline .md-tabs__link--active {
177+
opacity: 1;
178+
box-shadow: inset 0 -2px 0 #ff3d6c;
179+
}
180+
181+
/* Collapse tabs when search is focused to prevent overlap */
182+
.cs-search-open .cs-header-tabs {
183+
opacity: 0;
184+
pointer-events: none;
185+
transform: translateY(-4px);
186+
transition: opacity 0.15s ease, transform 0.15s ease;
187+
}
188+
189+
/* Footer: revert to theme defaults (remove custom padding hacks) */
190+
191+
.cs-tabs-inline .md-tabs {
192+
display: none !important;
61193
}
62194

63195

64196
/* ====== Навигация ====== */
65197

198+
/* Убрать только верхний padding у статьи (вертикальное выравнивание заголовка) */
199+
body:not(.is-home) .md-content__inner {
200+
padding-top: 0;
201+
}
202+
66203
.md-nav__link--active,
67204
.md-nav__item .md-nav__link--active {
68205
color: #ff3d6c !important; /* розовый */

0 commit comments

Comments
 (0)