https://aavikko.space/index.php?action=history&feed=atom&title=%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%3AHome_navigation%2Fstyles.css 2026-08-24T05:44:36Z История изменений этой страницы в вики MediaWiki 1.46.0 https://aavikko.space/index.php?title=%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD:Home_navigation/styles.css&diff=4679&oldid=prev 2026-08-24T00:39:35Z

<p>Новая страница: «<span class="autocomment">============================================ Главная страница — навигация по секциям ВСЕ правила обёрнуты в .home-nav-sections, чтобы не затрагивать featured/editing/onthewiki ============================================: </span> .home-nav-sections { margin-top: 1.5rem; } <span class="autocomment">Заголовки секций: </span> .home-nav-sections .home-section-title { font-family: &#039;Segoe...»</p> <p><b>Новая страница</b></p><div>/* ============================================<br /> Главная страница — навигация по секциям<br /> ВСЕ правила обёрнуты в .home-nav-sections,<br /> чтобы не затрагивать featured/editing/onthewiki<br /> ============================================ */<br /> <br /> .home-nav-sections {<br /> margin-top: 1.5rem;<br /> }<br /> <br /> /* Заголовки секций */<br /> .home-nav-sections .home-section-title {<br /> font-family: &#039;Segoe UI&#039;, &#039;Inter&#039;, system-ui, sans-serif;<br /> font-size: 1.6rem;<br /> font-weight: 700;<br /> color: #ffffff;<br /> margin: 2rem 0 1rem 0;<br /> padding-bottom: 0.5rem;<br /> border-bottom: 2px solid #1981d5;<br /> display: flex;<br /> align-items: center;<br /> gap: 0.6rem;<br /> }<br /> <br /> /* Первая секция — без верхнего отступа */<br /> .home-nav-sections .home-section-title:first-child {<br /> margin-top: 0;<br /> }<br /> <br /> /* ============================================<br /> Сетка карточек (только в навигации)<br /> ============================================ */<br /> <br /> .home-nav-sections .home-grid {<br /> display: grid;<br /> grid-template-columns: repeat(4, 1fr);<br /> gap: 16px;<br /> margin: 1rem 0 2rem 0;<br /> }<br /> <br /> @media (max-width: 1200px) {<br /> .home-nav-sections .home-grid {<br /> grid-template-columns: repeat(3, 1fr);<br /> }<br /> }<br /> <br /> @media (max-width: 900px) {<br /> .home-nav-sections .home-grid {<br /> grid-template-columns: repeat(2, 1fr);<br /> }<br /> }<br /> <br /> @media (max-width: 600px) {<br /> .home-nav-sections .home-grid {<br /> grid-template-columns: 1fr;<br /> gap: 12px;<br /> }<br /> }<br /> <br /> /* ============================================<br /> Карточка навигации<br /> ============================================ */<br /> <br /> .home-nav-sections .home-card {<br /> position: relative;<br /> display: flex;<br /> flex-direction: column;<br /> background-color: #1B232A;<br /> border: 1px solid #2a3641;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> aspect-ratio: 16 / 10;<br /> transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;<br /> cursor: pointer;<br /> }<br /> <br /> /* Трюк для соотношения 16:10 (замена aspect-ratio) */<br /> .home-nav-sections .home-card::before {<br /> content: &#039;&#039;;<br /> display: block;<br /> padding-top: 62.5%; /* 10/16 = 0.625 → 16:10 */<br /> }<br /> <br /> /* Hover-эффект */<br /> .home-nav-sections .home-card:hover {<br /> transform: translateY(-4px);<br /> box-shadow: 0 8px 24px rgba(25, 129, 213, 0.35), 0 0 0 1px #1981d5;<br /> border-color: #1981d5;<br /> z-index: 5;<br /> }<br /> <br /> /* Фоновое изображение */<br /> .home-nav-sections .home-card__background {<br /> position: absolute;<br /> top: 0; right: 0; bottom: 0; left: 0;<br /> overflow: hidden;<br /> }<br /> <br /> .home-nav-sections .home-card__background img {<br /> width: 100%;<br /> height: 100%;<br /> object-fit: cover;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .home-nav-sections .home-card:hover .home-card__background img {<br /> transform: scale(1.05);<br /> }<br /> <br /> /* Затемнение фона для читаемости текста */<br /> .home-nav-sections .home-card__background::after {<br /> content: &#039;&#039;;<br /> position: absolute;<br /> top: 0; right: 0; bottom: 0; left: 0;<br /> background: linear-gradient(<br /> to bottom,<br /> rgba(27, 35, 42, 0.1) 0%,<br /> rgba(27, 35, 42, 0.6) 60%,<br /> rgba(27, 35, 42, 0.9) 100%<br /> );<br /> transition: opacity 0.2s ease;<br /> }<br /> <br /> .home-nav-sections .home-card:hover .home-card__background::after {<br /> opacity: 0.85;<br /> }<br /> <br /> /* Текст-подпись */<br /> .home-nav-sections .home-card__foreground {<br /> position: absolute;<br /> bottom: 0;<br /> left: 0;<br /> right: 0;<br /> z-index: 2;<br /> padding: 12px 16px;<br /> color: #ffffff;<br /> font-family: &#039;Segoe UI&#039;, &#039;Inter&#039;, system-ui, sans-serif;<br /> font-size: 1rem;<br /> font-weight: 600;<br /> text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);<br /> line-height: 1.3;<br /> display: flex;<br /> align-items: center;<br /> justify-content: flex-start;<br /> }<br /> <br /> .home-nav-sections .home-card__foreground span {<br /> display: inline-block;<br /> }<br /> <br /> .home-nav-sections .home-card:hover .home-card__foreground {<br /> color: #ff9933;<br /> }<br /> <br /> /* ============================================<br /> Анимация появления (опционально)<br /> ============================================ */<br /> <br /> .home-nav-sections .home-card {<br /> animation: fadeInUp 0.4s ease backwards;<br /> }<br /> <br /> .home-nav-sections .home-grid .home-card:nth-child(1) { animation-delay: 0.05s; }<br /> .home-nav-sections .home-grid .home-card:nth-child(2) { animation-delay: 0.10s; }<br /> .home-nav-sections .home-grid .home-card:nth-child(3) { animation-delay: 0.15s; }<br /> .home-nav-sections .home-grid .home-card:nth-child(4) { animation-delay: 0.20s; }<br /> .home-nav-sections .home-grid .home-card:nth-child(5) { animation-delay: 0.25s; }<br /> .home-nav-sections .home-grid .home-card:nth-child(6) { animation-delay: 0.30s; }<br /> <br /> @keyframes fadeInUp {<br /> from {<br /> opacity: 0;<br /> transform: translateY(10px);<br /> }<br /> to {<br /> opacity: 1;<br /> transform: translateY(0);<br /> }<br /> }<br /> <br /> /* Уважение к prefers-reduced-motion */<br /> @media (prefers-reduced-motion: reduce) {<br /> .home-nav-sections .home-card,<br /> .home-nav-sections .home-card:hover,<br /> .home-nav-sections .home-card__background img,<br /> .home-nav-sections .home-card__background::after {<br /> animation: none !important;<br /> transition: none !important;<br /> transform: none !important;<br /> }<br /> }<br /> <br /> /* ============================================<br /> Поддержка светлой темы Citizen<br /> ============================================ */<br /> <br /> @media (prefers-color-scheme: light) {<br /> .home-nav-sections .home-card {<br /> background-color: #f8f9fa;<br /> border-color: #dee2e6;<br /> }<br /> <br /> .home-nav-sections .home-section-title {<br /> color: #1a1a1a;<br /> }<br /> <br /> .home-nav-sections .home-card__background::after {<br /> background: linear-gradient(<br /> to bottom,<br /> rgba(248, 249, 250, 0.1) 0%,<br /> rgba(248, 249, 250, 0.6) 60%,<br /> rgba(248, 249, 250, 0.9) 100%<br /> );<br /> }<br /> }</div>

KoTiKo43