/* * Тема витрины «Лог терминала». Своя, без Bootstrap и покупной темы. * Тёмная палитра по умолчанию, светлая — по системной настройке или переключателю (data-theme на ). */ /* ---------- Шрифты (variable, кириллица + латиница) ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('../fonts/jetbrains-mono-cyrillic-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Токены ---------- */ :root { color-scheme: dark; --bg: #11151c; --surface: #171c25; --border: #262c38; --text: #c3cad6; --heading: #eef1f5; --secondary: #9aa1ac; --muted: #7d8594; --accent: #6ee7c8; --accent-hover: #8ff0d6; --amber: #e8b76c; --code-inline-bg: #1e2530; --code-inline-color: #e8b76c; /* блоки кода тёмные в обеих темах */ --code-bg: #0d1117; --code-bar: #161b22; --code-border: #262c38; --code-text: #e6edf3; --code-muted: #8b949e; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-body: 1.0625rem; --fs-h3: 1.2rem; --fs-h2: 1.45rem; --fs-h1: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); --radius: 6px; --gutter: 16px; --content-width: 720px; } /* светлая палитра: блок продублирован для системной настройки и для явного выбора */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f6f7f9; --surface: #ffffff; --border: #dfe3e8; --text: #2b313b; --heading: #0f141b; --secondary: #4d5562; --muted: #5f6773; --accent: #0b7a61; --accent-hover: #075c49; --amber: #8a5200; --code-inline-bg: #eceff3; --code-inline-color: #9b2c55; } } :root[data-theme="light"] { color-scheme: light; --bg: #f6f7f9; --surface: #ffffff; --border: #dfe3e8; --text: #2b313b; --heading: #0f141b; --secondary: #4d5562; --muted: #5f6773; --accent: #0b7a61; --accent-hover: #075c49; --amber: #8a5200; --code-inline-bg: #eceff3; --code-inline-color: #9b2c55; } /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--heading); line-height: 1.3; font-weight: 700; margin: 0; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 8px; top: -48px; z-index: 10; padding: 8px 12px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); } .skip-link:focus { top: 8px; } .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Шапка ---------- */ .log-header { border-bottom: 1px solid var(--border); } .log-header-inner { display: flex; align-items: center; gap: 16px; min-height: 56px; } .log-logo { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; min-width: 0; margin: 0; font-size: inherit; } .log-logo a { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--heading); white-space: nowrap; } .log-logo a:hover { color: var(--heading); } .log-logo .prompt { color: var(--accent); } .log-tagline { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; color: var(--muted); } .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: none; color: var(--secondary); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { color: var(--heading); border-color: var(--muted); } .theme-toggle svg { width: 18px; height: 18px; } /* в тёмной теме показываем солнце (переключить на светлую), в светлой — луну */ .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; } } /* ---------- Раскладка ---------- */ .log-main { flex: 1; } .log-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); } .log-rail-col { border-right: 1px solid var(--border); } .log-content-col { min-width: 0; padding: 28px 0 48px clamp(20px, 4vw, 48px); } @media (max-width: 991.98px) { .log-layout { grid-template-columns: minmax(0, 1fr); } .log-rail-col { border-right: none; border-bottom: 1px solid var(--border); } .log-content-col { padding: 20px 0 40px; } /* на главной список сразу под рельсой: вторая линия не нужна */ .log-content-col > div > .log-list:first-child { border-top: none; } } /* ---------- Рельса тем ---------- */ .log-rail { position: sticky; top: 0; padding: 20px 0; } .log-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px 0; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--fs-sm); } .log-search:focus-within { border-color: var(--accent); } .log-search-prompt { color: var(--accent); } .log-search input { flex: 1; min-width: 0; height: 38px; padding: 0; border: none; background: none; color: var(--heading); font: inherit; } .log-search input:focus { outline: none; } .log-search input::placeholder { color: var(--muted); } .log-topics { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: var(--fs-sm); } .log-topics a { padding: 6px 12px 6px 0; color: var(--secondary); } .log-topics a:hover { color: var(--heading); } .log-topics a.is-active { color: var(--accent); } .log-topics a.is-active::before { content: '>\00a0'; } @media (max-width: 991.98px) { .log-rail { position: static; padding: 14px 0 0; } .log-search { margin: 0 0 6px; } .log-search input { height: 44px; } /* темы — горизонтальная лента с прокруткой */ .log-topics { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); } .log-topics::-webkit-scrollbar { display: none; } .log-topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; white-space: nowrap; } .log-topics a:first-child { padding-left: 0; } } /* ---------- Списки статей ---------- */ .log-list-head { padding-bottom: 18px; margin-bottom: 4px; } .log-list-head h1 { font-size: 1.35rem; margin-bottom: 6px; } .log-list-head p { color: var(--secondary); } .log-list-count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); } .log-tag-hash { color: var(--tag-color, var(--accent)); } .log-list { border-top: 1px solid var(--border); } .log-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } .log-row-link { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } .log-row-thumb { display: block; width: 96px; height: 64px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); } .log-row-thumb.is-empty { display: flex; align-items: center; justify-content: center; border-left: 3px solid var(--row-color, var(--border)); background: color-mix(in srgb, var(--row-color, var(--muted)) 12%, var(--surface)); color: var(--row-color, var(--muted)); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; } .log-row-link:hover .log-row-thumb { border-color: var(--accent); } .log-row-date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); width: 64px; flex-shrink: 0; white-space: nowrap; } .log-row-date time.updated { display: none; } .log-row-heading { font-size: var(--fs-base); font-weight: 500; color: var(--heading); } .log-row-link:hover .log-row-heading { color: var(--accent); } .log-row .tags { flex-shrink: 0; } @media (max-width: 600px) { .log-row { flex-direction: column; align-items: stretch; gap: 8px; } /* постер слева, дата и заголовок столбиком справа */ .log-row-link { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; } .log-row-thumb { grid-row: 1 / span 2; width: 72px; height: 48px; } .log-row-date { width: auto; } .log-row .tags { padding-left: 84px; } } .log-empty { padding: 28px 0; color: var(--secondary); } .load-more { padding: 24px 0 0; text-align: center; } .load-more-holder { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--heading); font-family: var(--font-mono); font-size: var(--fs-sm); } .load-more-holder:hover { border-color: var(--accent); color: var(--accent); } .load-more-holder[data-loading] { opacity: .6; pointer-events: none; } .log-related-heading { font-size: 1.05rem; margin: 48px 0 12px; } /* ---------- Подписка на Telegram под статьёй ---------- */ .post-subscribe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding: 16px 20px; border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 6px; background: var(--surface); } .post-subscribe p { margin: 0; } .post-subscribe-prompt { color: var(--accent); font-family: var(--font-mono); margin-right: 4px; } .post-subscribe-link { padding: 6px 14px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-family: var(--font-mono); text-decoration: none; white-space: nowrap; } .post-subscribe-link:hover { background: var(--accent); color: var(--bg); } /* ---------- Теги ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .tags .tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-left: 2px solid var(--tag-color, var(--amber)); border-radius: 4px; background: var(--code-inline-bg); color: var(--secondary); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: lowercase; } .tags .tag:hover { color: var(--heading); } .tags .tag > span { color: var(--tag-color, var(--amber)); font-weight: 700; } /* ---------- Статья ---------- */ .post { max-width: var(--content-width); } .log-back { display: inline-block; margin-bottom: 20px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); } .log-back:hover { color: var(--accent); } .log-back ol { display: flex; flex-wrap: wrap; gap: 0 .5em; margin: 0; padding: 0; list-style: none; } .log-back li + li::before { content: "/"; margin-right: .5em; } .log-back li:empty, .log-back li:not(:has(a)) { display: none; } .log-back a { color: inherit; } .log-back a:hover { color: var(--accent); } .post-title { font-size: var(--fs-h1); letter-spacing: -.01em; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 26px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); } .post-cover { margin: 0 0 32px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* ---------- Оглавление ---------- */ .post-toc { margin: 0 0 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-sm); } .post-toc-title { padding: 10px 14px; font-family: var(--font-mono); color: var(--muted); cursor: pointer; } .post-toc-title::before { content: '## '; content: '## ' / ''; } .post-toc ul { list-style: none; margin: 0; padding: 0 14px 12px; } .post-toc li.is-sub { padding-left: 14px; } .post-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--border); color: var(--secondary); line-height: 1.4; } .post-toc a:hover { color: var(--heading); } .post-toc a.is-active { border-left-color: var(--accent); color: var(--accent); } /* на широком экране оглавление — колонка справа от текста, прилипает при прокрутке */ @media (min-width: 1280px) { .post.has-toc { display: grid; grid-template-columns: minmax(0, var(--content-width)) 220px; column-gap: 56px; max-width: none; } .post.has-toc > * { grid-column: 1; } .post.has-toc > .post-toc { grid-column: 2; grid-row: 1 / span 5; align-self: start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; margin: 0; border: none; background: none; } .post-toc-title { padding: 6px 0 10px; list-style: none; cursor: default; pointer-events: none; } .post-toc-title::-webkit-details-marker { display: none; } .post-toc ul { padding: 0; } } /* ---------- Текст статьи ---------- */ .np-post { font-size: var(--fs-body); line-height: 1.7; overflow-wrap: break-word; } .np-post > * + * { margin-top: 1.1em; } .np-post h1, .np-post h2, .np-post h3, .np-post h4 { margin-top: 2em; scroll-margin-top: 16px; } .np-post h1 { font-size: var(--fs-h2); } .np-post h2 { font-size: var(--fs-h2); } .np-post h3 { font-size: var(--fs-h3); } .np-post h4 { font-size: 1rem; } .np-post h2 + *, .np-post h3 + *, .np-post h4 + * { margin-top: .6em; } /* терминальные префиксы заголовков скрыты от скринридеров (альтернативный текст "") */ .np-post h2::before { content: '## '; content: '## ' / ''; } .np-post h3::before { content: '### '; content: '### ' / ''; } .np-post h2::before, .np-post h3::before { color: var(--muted); font-family: var(--font-mono); font-weight: 400; } .np-post ul, .np-post ol { padding-left: 1.4em; } .np-post li + li { margin-top: .35em; } .np-post li > ul, .np-post li > ol { margin-top: .35em; } .np-post a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; } .np-post a:hover { text-decoration-color: currentColor; } .np-post strong { color: var(--heading); } .np-post hr { border: none; border-top: 1px solid var(--border); margin: 2.2em 0; } .np-post blockquote { margin-left: 0; margin-right: 0; padding: 12px 18px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); color: var(--secondary); } .np-post blockquote > * + * { margin-top: .7em; } .np-post img { border-radius: var(--radius); } .np-post :not(pre) > code { padding: .1em .35em; border-radius: 4px; background: var(--code-inline-bg); color: var(--code-inline-color); font-family: var(--font-mono); font-size: .86em; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0; overflow-wrap: anywhere; } /* таблицы прокручиваются по горизонтали, а не растягивают страницу */ .np-post table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-base); line-height: 1.5; } .np-post th, .np-post td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; } .np-post th { background: var(--surface); color: var(--heading); font-weight: 600; } .np-post td code { overflow-wrap: normal; white-space: nowrap; } /* ---------- Код ---------- */ .np-post pre { margin: 1.4em 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--code-border); border-radius: var(--radius); background: var(--code-bg); color: var(--code-text); font-family: var(--font-mono); font-size: .875rem; line-height: 1.6; white-space: pre; tab-size: 4; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0; } .np-post pre code { padding: 0; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0; background: none; color: inherit; font: inherit; } .log-code { margin: 1.4em 0; border: 1px solid var(--code-border); border-radius: var(--radius); overflow: hidden; background: var(--code-bg); } .log-code pre { margin: 0; border: none; border-radius: 0; } .log-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 14px; min-height: 36px; background: var(--code-bar); border-bottom: 1px solid var(--code-border); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--code-muted); } .log-code-copy { padding: 6px 10px; border: none; border-radius: 4px; background: none; color: var(--code-muted); font: inherit; cursor: pointer; } .log-code-copy:hover { color: var(--code-text); background: rgba(255, 255, 255, .06); } /* подсветка highlight.js — палитра GitHub Dark, контраст ≥ 4.5 на --code-bg */ .hljs-comment, .hljs-quote, .hljs-meta { color: #8b949e; } .hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-template-tag, .hljs-type, .hljs-variable.language_ { color: #ff7b72; } .hljs-string, .hljs-regexp, .hljs-meta .hljs-string { color: #a5d6ff; } .hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-section { color: #d2a8ff; } .hljs-number, .hljs-literal, .hljs-attr, .hljs-attribute, .hljs-built_in, .hljs-symbol, .hljs-selector-class, .hljs-selector-id, .hljs-operator { color: #79c0ff; } .hljs-variable, .hljs-params, .hljs-template-variable { color: #ffa657; } .hljs-name, .hljs-selector-pseudo, .hljs-bullet { color: #7ee787; } .hljs-addition { color: #aff5b4; background: #033a16; } .hljs-deletion { color: #ffdcd7; background: #67060c; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } /* ---------- Подвал ---------- */ .log-footer { border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); } .log-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; } .log-footer a { color: var(--secondary); } .log-footer a:hover { color: var(--accent); } .log-footer-links { display: flex; gap: 16px; } /* ---------- Печать ---------- */ @media print { :root { color-scheme: light; --bg: #fff; --surface: #fff; --border: #ccc; --text: #111; --heading: #000; --secondary: #333; --muted: #555; --accent: #000; --code-inline-bg: #f0f0f0; --code-inline-color: #000; } .log-header, .log-rail-col, .log-back, .log-footer, .log-code-bar, .load-more, .log-related-heading, .log-related { display: none !important; } .log-layout { display: block; } .log-content-col { padding: 0; } .post { max-width: none; } .np-post pre, .log-code { border-color: #ccc; background: #fff; white-space: pre-wrap; break-inside: avoid; } .np-post pre, .np-post pre * { color: #000 !important; } .np-post a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: var(--muted); } }