Летопись on chgkstatshttps://chgknews.github.io/stats/info/chronicle/Recent content in Летопись on chgkstatsHugoenPowered by [Hugo](https://gohugo.io/), theme – [Hugo Book](https://github.com/alex-shpak/hugo-book/tree/main).2026https://chgknews.github.io/stats/info/chronicle/2026/Mon, 01 Jan 0001 00:00:00 +0000https://chgknews.github.io/stats/info/chronicle/2026/<h1 id="2026">2026<a class="anchor" href="#2026">#</a></h1> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Expandable text · date & details table</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } <pre><code>body { background: white; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 2rem 1.5rem; } table { width: 100%; border-collapse: collapse; table-layout: fixed; border-style: hidden; overflow: hidden; } th { text-align: left; padding: 1rem 1.2rem; background: white; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; } td { padding: 0.9rem 1.2rem; background-color: white; vertical-align: middle; transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* fixed column widths: date column narrower, text column expands */ th:first-child, td:first-child { width: 130px; white-space: nowrap; font-weight: 500; } th:last-child, td:last-child { width: auto; } .date-cell { font-variant-numeric: tabular-nums; background: white; font-weight: 100; letter-spacing: 0.2px; } /* ----- expandable row styles ----- */ .summary-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .summary-text { font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: all 0.2s; } /* when expanded we allow wrapping */ .summary-text.expanded { white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; } .toggle-btn { background: none; border: none; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: black; background: white; padding: 0.3rem 0.9rem; border-radius: 2rem; display: inline-flex; align-items: center; gap: 0.25rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s; white-space: nowrap; letter-spacing: 0.2px; border: 1px solid transparent; } .toggle-btn:hover { background: white; color: #083358; border-color: #b6cef0; } .toggle-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; } .arrow-icon { display: inline-block; transition: transform 0.25s ease; font-size: 0.85rem; line-height: 1; } .arrow-icon.rotated { transform: rotate(90deg); } .extra-details { margin-top: 0.7rem; padding: 0.8rem 1rem; background: white; color: #1f3a57; font-size: 0.95rem; line-height: 1.5; border-left: 4px solid white; word-break: break-word; display: none; animation: fadeSlide 0.2s ease; } .extra-details.visible { display: block; } @keyframes fadeSlide { 0% { opacity: 0.6; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .text-wrapper { width: 100%; } /* small screens adaptation */ @media (max-width: 550px) { body { padding: 1rem; } .table-container { padding: 1.2rem 1rem; } th:first-child, td:first-child { width: 95px; } .toggle-btn { padding: 0.3rem 0.7rem; font-size: 0.8rem; } } </code></pre> <p></style></p>2025https://chgknews.github.io/stats/info/chronicle/2025/Mon, 01 Jan 0001 00:00:00 +0000https://chgknews.github.io/stats/info/chronicle/2025/<h1 id="2025">2025<a class="anchor" href="#2025">#</a></h1> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Expandable text · date & details table</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } <pre><code>body { background: white; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 2rem 1.5rem; } table { width: 100%; border-collapse: collapse; table-layout: fixed; border-style: hidden; overflow: hidden; } th { text-align: left; padding: 1rem 1.2rem; background: white; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; } td { padding: 0.9rem 1.2rem; background-color: white; vertical-align: middle; transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* fixed column widths: date column narrower, text column expands */ th:first-child, td:first-child { width: 130px; white-space: nowrap; font-weight: 500; } th:last-child, td:last-child { width: auto; } .date-cell { font-variant-numeric: tabular-nums; background: white; font-weight: 100; letter-spacing: 0.2px; } /* ----- expandable row styles ----- */ .summary-line { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .summary-text { font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: all 0.2s; } /* when expanded we allow wrapping */ .summary-text.expanded { white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; } .toggle-btn { background: none; border: none; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: black; background: white; padding: 0.3rem 0.9rem; border-radius: 2rem; display: inline-flex; align-items: center; gap: 0.25rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s; white-space: nowrap; letter-spacing: 0.2px; border: 1px solid transparent; } .toggle-btn:hover { background: white; color: #083358; border-color: #b6cef0; } .toggle-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; } .arrow-icon { display: inline-block; transition: transform 0.25s ease; font-size: 0.85rem; line-height: 1; } .arrow-icon.rotated { transform: rotate(90deg); } .extra-details { margin-top: 0.7rem; padding: 0.8rem 1rem; background: white; color: #1f3a57; font-size: 0.95rem; line-height: 1.5; border-left: 4px solid white; word-break: break-word; display: none; animation: fadeSlide 0.2s ease; } .extra-details.visible { display: block; } @keyframes fadeSlide { 0% { opacity: 0.6; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .text-wrapper { width: 100%; } /* small screens adaptation */ @media (max-width: 550px) { body { padding: 1rem; } .table-container { padding: 1.2rem 1rem; } th:first-child, td:first-child { width: 95px; } .toggle-btn { padding: 0.3rem 0.7rem; font-size: 0.8rem; } } </code></pre> <p></style></p>