reworked the documentation design

Author: amaksimovv

docs/index.en.md

@@ -17,9 +17,7 @@ hide:
     <h1>CodeScoring Documentation</h1>
     <h2>
       In case of any questions please write to
-      <a href="mailto:support@codescoring.ru" style="color: #ff3d6c; text-decoration-color: #ff3d6c;">
-        support@codescoring.ru
-      </a>
+      <a href="mailto:support@codescoring.ru">support@codescoring.ru</a>
     </h2>
     <div class="hero-buttons">
       <a href="/admin-guide.en/" class="btn btn-primary">Admin guide</a>

docs/index.md

@@ -17,9 +17,7 @@ hide:
     <h1>Документация CodeScoring</h1>
     <h2>
       По всем вопросам пишите на
-      <a href="mailto:support@codescoring.ru" style="color: #ff3d6c; text-decoration-color: #ff3d6c;">
-        support@codescoring.ru
-      </a>
+      <a href="mailto:support@codescoring.ru">support@codescoring.ru</a>
     </h2>
     <div class="hero-buttons">
       <a href="/admin-guide/" class="btn btn-primary">Руководство администратора</a>

docs/stylesheets/extra.css

@@ -4,6 +4,8 @@
   --md-primary-fg-color: #2d2d2d;
   --md-primary-fg-color--light: #ff3d6c;
   --md-primary-fg-color--dark: #ff3d6c;
+  --md-footer-bg-color: #2d2d2d;
+  --md-footer-bg-color--dark: #2d2d2d;
 }
 
 /* Тёмная тема */
@@ -13,6 +15,12 @@
   --md-primary-fg-color--dark: #ff3d6c;
   --md-default-fg-color: #e0e0e0; /* основной текст чуть светлее */
   --md-default-fg-color--light: #f5f5f5; /* заголовки и второстепенный текст */
+  --md-default-bg-color: #1a1a1a;
+  --md-default-bg-color--light: #1a1a1a;
+  --md-default-bg-color--lighter: #1a1a1a;
+  --md-default-bg-color--lightest: #1a1a1a;
+  --md-footer-bg-color: #2d2d2d;
+  --md-footer-bg-color--dark: #2d2d2d;
 }
 
 .md-typeset a {
@@ -23,46 +31,166 @@
   color: #e03560;
 }
 
-/* Логотип в левый верхний угол */
+/* Header: inline tabs (JS-assisted) */
+:root {
+  --md-header-height: 64px;
+  --cs-header-pad-x: clamp(0.95rem, 2.2vw, 1.85rem);
+  --cs-logo-size: 64px;
+  --cs-logo-gap: 12px;
+  --cs-logo-shift: 0.28rem;
+  --cs-tabs-offset: 1.15rem;
+  --cs-tabs-text-pad: 0.35rem;
+  --cs-tabs-start: calc(
+    var(--cs-header-pad-x) + var(--cs-logo-shift) + var(--cs-logo-size) + var(--cs-logo-gap) + var(--cs-tabs-offset)
+  );
+  --cs-hero-offset: 0.3rem;
+  --cs-footer-pad-y: 0rem;
+}
 
-.md-header .md-header__button.md-logo {
-  position: absolute;
-  top: 0.2rem;      /* регулируй вертикальный отступ */
-  left: 1.5rem;     /* регулируй горизонтальный отступ */
-  margin: 0;
+@media (max-width: 720px) {
+  :root {
+    --md-header-height: 58px;
+    --cs-header-pad-x: 1rem;
+    --cs-logo-size: 44px;
+    --cs-logo-gap: 10px;
+    --cs-logo-shift: 0.22rem;
+    --cs-tabs-offset: 0.7rem;
+    --cs-tabs-text-pad: 0.3rem;
+    --cs-tabs-start: calc(
+      var(--cs-header-pad-x) + var(--cs-logo-shift) + var(--cs-logo-size) + var(--cs-logo-gap) + var(--cs-tabs-offset)
+    );
+    --cs-hero-offset: 0.1rem;
+    --cs-footer-pad-y: 0rem;
+  }
+}
+
+/* Header: inline tabs when JS moves tabs into header */
+.cs-tabs-inline .md-header {
+  box-shadow: none !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  pointer-events: auto;
+  overflow: visible;
+}
+
+.cs-tabs-inline .md-header__inner {
+  min-height: var(--md-header-height);
+  padding: 0 var(--cs-header-pad-x);
+  display: flex;
+  align-items: center;
+  gap: var(--cs-logo-gap);
+  pointer-events: auto;
+  overflow: visible;
+  width: 100%;
+  max-width: none;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.cs-tabs-inline .md-header__button,
+.cs-tabs-inline .md-search,
+.cs-tabs-inline .md-header__option {
+  position: relative;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+.cs-tabs-inline .md-header__button.md-logo {
+  position: static;
+  margin: 0 0 0 var(--cs-logo-shift);
   padding: 0;
-  height: auto;
-  z-index: 10;
+  height: var(--md-header-height);
+  display: flex;
+  align-items: center;
 }
 
-.md-header .md-header__button.md-logo img {
-  height: 80px !important;  /* подгони под высоту хедера */
+.cs-tabs-inline .md-header__button.md-logo img {
+  height: var(--cs-logo-size) !important;
   width: auto !important;
   max-width: none !important;
   display: block;
 }
 
-@media (max-width: 720px) {
-  .md-header .md-header__button.md-logo img {
-    height: 36px !important;
-  }
+.cs-tabs-inline .md-header__title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-/* Смещение текста site_name, чтобы выровнять с навигацией */
-.md-header .md-header__title {
-  margin-left: 0rem;  /* подгони под ширину логотипа */
+.cs-tabs-inline .cs-header-tabs {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  height: var(--md-header-height);
+  justify-content: flex-start;
+  min-width: 0;
+  padding-left: var(--cs-tabs-offset);
 }
 
-/* Мобильная версия */
-@media (max-width: 720px) {
-  .md-header .md-header__title {
-    margin-left: 3.2rem; /* уменьшаем, чтобы не прижималось */
-  }
+.cs-tabs-inline .cs-header-tabs .md-tabs__list {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0.6rem;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  justify-content: flex-start;
+}
+
+.cs-tabs-inline .cs-header-tabs .md-tabs__item {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex: 0 1 auto;
+  min-width: 0;
+  padding-left: var(--cs-tabs-text-pad);
+  padding-right: var(--cs-tabs-text-pad);
+}
+
+.cs-tabs-inline .cs-header-tabs .md-tabs__link {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin: 0;
+  padding: 0 0.4rem;
+  font-weight: 500;
+  line-height: 1;
+  font-size: 0.68rem;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.cs-tabs-inline .md-tabs__item--active .md-tabs__link,
+.cs-tabs-inline .md-tabs__link--active {
+  opacity: 1;
+  box-shadow: inset 0 -2px 0 #ff3d6c;
+}
+
+/* Footer: revert to theme defaults (remove custom padding hacks) */
+
+.cs-tabs-inline .md-tabs {
+  display: none !important;
 }
 
 
 /* ====== Навигация ====== */
 
+/* Убрать только верхний padding у статьи (вертикальное выравнивание заголовка) */
+body:not(.is-home) .md-content__inner {
+  padding-top: 0;
+}
+
 .md-nav__link--active,
 .md-nav__item .md-nav__link--active {
   color: #ff3d6c !important;  /* розовый */