Внутри записи есть вторая ссылка — на музей, а ссылку в ссылку вкладывать нельзя. Поэтому кликабельность всей карточки даёт растянутая .card-link. ========================================================================== */ .card { position: relative; } .card-link { text-decoration: none; color: inherit; } .card-link::after { content: ''; position: absolute; inset: 0; z-index: 0; } .card-link:focus-visible::after { outline: 2px solid var(--active); outline-offset: -2px; } /* Ссылка на музей должна оказаться поверх растянутой ссылки карточки */ .card-museum a { position: relative; z-index: 1; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); } .card-museum a:hover { color: var(--link); border-bottom-color: currentColor; } /* В описи 81 строка, и постоянное подчёркивание под каждым музеем превращало список в частокол. Линия появляется при наведении. */ .card-museum a { border-bottom-color: transparent; } /* ========================================================================== ФИЛЬТР ПО ГОДАМ Столбики — распределение работ по десятилетиям. Один ряд данных, поэтому легенды нет: что именно выбрано, сказано словами под гистограммой. ========================================================================== */ .year-filter { padding: var(--s2) 0 0; } .dec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } /* Строка десятилетия: год, полоса, число работ. Устроена как строки на странице статистики и как соседние разделы сайдбара — это тот же элемент, а не ещё один. Раньше здесь стояли столбики гистограммы шириной в восемнадцать пикселей: пальцем в такой не попасть. */ .dec-row { width: 100%; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 2.6ch; align-items: center; gap: var(--s3); padding: 8px 0; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); text-align: left; } .dec-year { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--text-2); letter-spacing: .02em; } .dec-track { height: 10px; background: var(--panel); border-radius: 2px; } .dec-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--active); border-radius: 0 2px 2px 0; min-width: 3px; opacity: .62; transition: opacity .15s; } .dec-n { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .dec-row:hover .dec-fill, .dec-row[aria-pressed="true"] .dec-fill { opacity: 1; } .dec-row[aria-pressed="true"] .dec-year { color: var(--text); } .dec-row.dim .dec-fill { opacity: .18; } .dec-row.dim .dec-year, .dec-row.dim .dec-n { opacity: .5; } .dec-row:focus-visible { outline: 2px solid var(--active); outline-offset: 1px; } .year-range { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); } .year-dash { color: var(--muted); } .year-select, .sort-select { font-family: var(--ff-data); font-size: var(--fs-xs); padding: var(--s1) var(--s2); border: 1px solid var(--input-border); border-radius: 2px; background: var(--card-bg); color: var(--text); cursor: pointer; min-width: 0; } .year-select { flex: 1 1 0; } .sort-select { font-size: var(--fs-xs); padding: var(--s1) var(--s3); } .year-caption { margin: var(--s2) 0 0; font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .bar-controls { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } /* ========================================================================== КНОПКА «НАВЕРХ» Кольцо вокруг стрелки показывает, сколько страницы пройдено. На телефонах кнопки нет: там для этого есть системный жест. ========================================================================== */ .scroll-top { position: fixed; right: var(--s5); bottom: var(--s5); width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: conic-gradient(var(--active) calc(var(--progress, 0) * 1%), var(--border) 0); display: grid; place-items: center; cursor: pointer; z-index: 999; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; box-shadow: 0 4px 16px -6px var(--shadow-strong); } .scroll-top::before { content: ''; position: absolute; inset: 2px; background: var(--card-bg); border-radius: 50%; transition: background .15s; } .scroll-top:hover::before { background: var(--panel); } .scroll-top.visible { visibility: visible; opacity: 1; transform: none; } .scroll-top .icon-arrow-up { position: relative; z-index: 1; } /* Стрелка берёт цвет текста: раньше она была белой и на светлой кнопке пропадала */ .icon-arrow-up { background-image: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 900px) { .scroll-top { display: none !important; } .bar-controls { width: 100%; justify-content: space-between; } } /* Ссылка на официальный сайт музея */ .museum-site { margin: var(--s2) 0 0; font-size: var(--fs-sm); } .museum-site a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; } .museum-site a:hover { border-bottom-color: currentColor; } /* ========================================================================== ВЫПАДАЮЩИЕ СПИСКИ Без appearance:none браузер рисует select системным стилем: на Windows это серый градиент со скруглением, на Linux — плоская рамка. Из-за этого один и тот же сайт выглядел по-разному на разных машинах и выпадал из оформления. Рисуем сами: та же рамка, тот же моношрифт, свой шеврон. ========================================================================== */ .sort-select, .year-select { appearance: none; -webkit-appearance: none; font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .04em; line-height: 1.4; color: var(--text); background-color: var(--card-bg); border: 1px solid var(--border); border-radius: 2px; padding: var(--s2) 1.6rem var(--s2) var(--s3); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235b6675' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s3) center; background-size: 9px; transition: border-color .15s, background-color .15s; } [data-theme="dark"] .sort-select, [data-theme="dark"] .year-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23939dab' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); } .sort-select:hover, .year-select:hover { border-color: var(--active); } .sort-select:focus-visible, .year-select:focus-visible { outline: 2px solid var(--active); outline-offset: 1px; } /* Поле поиска и списки должны быть одной высоты */ .search-box { font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .04em; padding: var(--s2) var(--s3); } /* Подпись перед выбором порядка — как ярлык поля в таблице сведений */ .bar-label { font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .view-switch button { padding: var(--s2) var(--s3); line-height: 1.4; } /* Почтовый адрес музея в карточке */ .museum-address { margin: var(--s1) 0 0; font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .02em; } /* ========================================================================== СТРАНИЦЫ ХУДОЖНИКОВ, УКАЗАТЕЛЬ, СТАТИСТИКА ========================================================================== */ /* Заголовок страницы художника, указателя и статистики. Ширину и поля задаёт .tag-page, поэтому здесь только вертикальный ритм; жирную черту из общего правила .tag-page h1 снимаем — под ней стоят свои сведения. */ .artist-head { display: block; margin: 0 0 var(--s4); padding: var(--s6) 0 var(--s4); border-bottom: 1px solid var(--border); } .artist-head h1 { font-size: var(--fs-2xl); margin: 0 0 var(--s3); padding: 0; border: 0; line-height: 1.1; text-align: left; } .eyebrow { font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); } .artist-facts { max-width: 34rem; } .artist-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--s5); align-items: start; } @media (max-width: 900px) { .artist-layout { grid-template-columns: 1fr; } .artist-layout .post-aside { position: static; } } .plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .plain-list a { text-decoration: none; } .plain-list a:hover { text-decoration: underline; } /* ---------- рядом в собрании ---------- */ .near { max-width: 1280px; margin: var(--s6) auto 0; padding: var(--s5) var(--s5) 0; border-top: 1px solid var(--border); } .near h3 { font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 var(--s3); } .near-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); } .near-card { display: grid; grid-template-rows: auto auto; gap: var(--s2); text-decoration: none; color: inherit; border: 1px solid var(--border); background: var(--card-bg); padding: var(--s2); } .near-card:hover { border-color: var(--active); } .near-card:focus-visible { outline: 2px solid var(--active); outline-offset: 2px; } .near-img { display: block; height: 96px; background: var(--panel); overflow: hidden; } .near-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .near-body { display: grid; gap: 2px; min-width: 0; } .near-artist { font-size: var(--fs-sm); line-height: 1.25; } .near-title { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; } .near-why { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); opacity: .8; letter-spacing: .02em; } /* ---------- указатель ---------- */ .idx-lede { color: var(--muted); max-width: 46ch; margin: 0; } .idx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5); align-items: start; } .idx-col h2 { font-size: var(--fs-lg); margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: var(--s2); } .idx-total { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .idx-list { list-style: none; margin: 0; padding: 0; } .idx-list li { display: flex; align-items: baseline; gap: var(--s2); padding: 3px 0; border-bottom: 1px solid var(--hairline, transparent); } .idx-list li a { text-decoration: none; flex: 1; min-width: 0; } .idx-list li a:hover { text-decoration: underline; } .idx-letter { font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .14em; color: var(--muted); margin-top: var(--s3); padding-bottom: 2px; border-bottom: 1px solid var(--border); } .idx-list li.idx-letter:first-child { margin-top: 0; } .idx-n { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- статистика ---------- Одна мера — число работ, поэтому один цвет и никаких легенд: цвет здесь ничего не кодирует, он только рисует длину. Число всегда написано рядом, так что таблица читается и без цвета. */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); margin-top: var(--s3); } .stat-tile b { display: block; font-family: var(--ff-data); font-size: var(--fs-xl); font-weight: 500; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; } .stat-tile span { display: block; font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; } .stat-block { padding: var(--s5) 0 0; } .stat-block h2 { font-size: var(--fs-lg); margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); } .stat-note { color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0 0; max-width: 60ch; } .stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .stat-row { display: grid; grid-template-columns: minmax(8rem, 18rem) minmax(0, 1fr) 3ch; align-items: center; gap: var(--s3); padding: 3px 0; } .stat-name { min-width: 0; overflow-wrap: anywhere; } .stat-name a { text-decoration: none; } .stat-name a:hover { text-decoration: underline; } .stat-track { height: 12px; background: var(--panel); border-radius: 2px; } .stat-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--active); border-radius: 0 2px 2px 0; min-width: 2px; } .stat-row:hover .stat-fill { filter: brightness(1.12); } .stat-n { font-family: var(--ff-data); font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .stat-row { grid-template-columns: minmax(0, 1fr) 3ch; } .stat-track { grid-column: 1 / -1; } } /* столбцы по десятилетиям */ .dec-chart { display: flex; align-items: flex-end; gap: 2px; height: 190px; padding-top: var(--s3); overflow-x: auto; } .dec-col { flex: 1 0 18px; min-width: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .dec-bar { width: 100%; height: var(--hgt, 0%); background: var(--active); border-radius: 2px 2px 0 0; min-height: 1px; } .dec-col:hover .dec-bar { filter: brightness(1.12); } .dec-cap { font-family: var(--ff-data); font-size: 10px; color: var(--muted); writing-mode: vertical-rl; line-height: 1; } .dec-cap-hidden { visibility: hidden; } /* ========================================================================== ЗНАК САЙТА И ПОДВАЛ ========================================================================== */ /* Знак рядом с названием — тот же, что во вкладке браузера (см. mark_svg() в site_common.py). Раньше здесь стоял синий кружок в рамке цвета #0366d6, оставшийся от вёрстки по умолчанию: к оформлению сайта он отношения не имел. Знак цветной, поэтому не через mask, а картинкой; на тёмном фоне поле рамы светлее, иначе тёмно-синий сливается с фоном. */ .icon-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%231f3a6b'/%3E%3Crect x='4' y='6' width='24' height='20' fill='%23f2ede3'/%3E%3Crect x='4' y='20' width='24' height='6' fill='%23c9a35e'/%3E%3Ccircle cx='22' cy='12' r='3' fill='%231f3a6b'/%3E%3C/svg%3E"); border-radius: 2px; } [data-theme="dark"] .icon-logo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%233a5c96'/%3E%3Crect x='4' y='6' width='24' height='20' fill='%23f2ede3'/%3E%3Crect x='4' y='20' width='24' height='6' fill='%23c9a35e'/%3E%3Ccircle cx='22' cy='12' r='3' fill='%233a5c96'/%3E%3C/svg%3E"); } .icon-telegram { display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.8 19c-.2 1-.9 1.3-1.7.8l-4.7-3.5-2.3 2.2c-.3.3-.5.5-.9.5l.3-4.7 8.6-7.8c.4-.3-.1-.5-.6-.2L6.9 13.1 2.3 11.6c-1-.3-1-1 .2-1.5l18.1-7c.8-.3 1.5.2 1.3 1.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.8 19c-.2 1-.9 1.3-1.7.8l-4.7-3.5-2.3 2.2c-.3.3-.5.5-.9.5l.3-4.7 8.6-7.8c.4-.3-.1-.5-.6-.2L6.9 13.1 2.3 11.6c-1-.3-1-1 .2-1.5l18.1-7c.8-.3 1.5.2 1.3 1.2z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Подвал — единственное место на сайте, где сказано, откуда собрание. Держим его тихим: это подпись, а не призыв подписаться. */ .site-footer { max-width: 1280px; margin: var(--s7) auto 0; padding: var(--s5) var(--s5) var(--s6); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; justify-content: space-between; font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--muted); } .site-footer p { margin: 0; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--link); text-decoration: underline; } .footer-source a { color: var(--link); display: inline-flex; align-items: center; } .footer-links { display: flex; flex-wrap: wrap; gap: var(--s2); } @media (max-width: 640px) { .site-footer { padding: var(--s4) var(--s3) var(--s5); gap: var(--s3); } } /* ========================================================================== ПАЛЕЦ ВМЕСТО МЫШИ Ссылки в шапке, подвале и теги набраны мелким моноширинным — по высоте строки это цель в 17–22 пикселя, а палец накрывает вчетверо больше. Расширяем область нажатия отступами и тут же снимаем их отрицательными полями, чтобы вёрстка не разъехалась. ========================================================================== */ @media (pointer: coarse) { .back, .topbar-back, .site-footer a, .tag, .error-links a, .idx-list a, .stat-row a, .museum-visit-list a { padding-block: 9px; margin-block: -9px; } .tag { padding-block: 7px; margin-block: -3px; } } /* ========================================================================== ПОСЕЩЕНИЯ Выставки и походы в музеи — те же карточки описи, только вместо каталожного номера в первой колонке стоит, что это было. Отдельной вёрстки у раздела нет намеренно: посещение в каталоге такая же запись, как картина, и выглядеть должно так же. ========================================================================== */ .visit-bar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-top: var(--s3); } .visit-switch, .visit-view { display: inline-flex; } /* Подпись раздела в одну строку: 46 знаков хватало указателю, а здесь строка короче ширины колонки и слово «снимками» уезжало вниз. */ .visits-lede { max-width: 70ch; } .visit-count { font-variant-numeric: tabular-nums; opacity: .6; margin-left: .4em; } /* Скрытая карточка обязана исчезнуть и в описи, и в плитках: у .card раскладка задана через display, а он бьёт [hidden] по умолчанию. */ .visit-card[hidden] { display: none !important; } /* Каталожного номера у посещения нет, поэтому первой колонки в строке тоже нет — остальные держат ту же ширину, что в описи картин. */ .grid.list .visit-card { grid-template-columns: 132px minmax(0, 1fr) minmax(0, 16rem); } /* В плитке подписи сведений скрыты, поэтому оставляем только дату похода: «17.01.2026 · 12.12.2025 — 21.06.2026 · 7» не прочесть. */ .grid:not(.list) .visit-card .card-facts .f-run, .grid:not(.list) .visit-card .card-facts .f-shots { display: none; } /* Точка-разделитель ставится всем, кроме последнего, а последние два скрыты — и после даты повисала точка в никуда. */ .grid:not(.list) .visit-card .card-facts .f-when b::after { content: none; } .visit-kind { font-family: var(--ff-data); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; } /* Шапка страницы посещения: подпись «Выставка» стоит над названием, как «Художник» на странице автора. */ .visit-page .post-head .eyebrow { margin-bottom: var(--s2); } .visit-page .post-head h2 { font-size: var(--fs-lg); font-weight: normal; color: var(--muted); } @media (max-width: 1000px) { .grid.list .visit-card { grid-template-columns: 108px minmax(0, 1fr); } .grid.list .visit-card .card-facts { grid-column: 1 / -1; } } /* Снимки с похода: сетка, а не колонка. Их бывает десяток, и во всю ширину страница растягивалась на несколько экранов — рассматривают всё равно в лупе, а здесь нужен обзор. */ .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3); align-items: start; } /* Пропорцию держит сама ссылка, а снимок её заполняет. Если оставить пропорцию на картинке, высота ряда считается по ней, и первый снимок вставал на полстроки выше соседей. */ .shots .painting-link { display: block; position: relative; margin: 0; line-height: 0; aspect-ratio: 4 / 3; } .shots .painting { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--panel); } @media (max-width: 640px) { .visit-switch, .visit-view { width: 100%; } .visit-switch button, .visit-view button { flex: 1; } .shots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); } } @media (max-width: 620px) { .grid.list .visit-card { grid-template-columns: 84px minmax(0, 1fr); } } @media (max-width: 380px) { .grid.list .visit-card { grid-template-columns: 66px minmax(0, 1fr); } } /* ========================================================================== ПЕЧАТЬ Каталог печатают: страницу работы — чтобы взять с собой в музей, опись — чтобы свериться. На бумаге не нужны ни сайдбар, ни кнопки, ни тёмная тема; нужны картина, сведения и адрес страницы, с которой это взято. ========================================================================== */ @media print { :root { --bg: #fff; --card-bg: #fff; --panel: #fff; --text: #000; --text-2: #222; --muted: #444; --border: #999; --link: #000; --active: #000; } html, body { background: #fff !important; color: #000 !important; } /* всё, что на бумаге бессмысленно */ .sidebar, .post-topbar, .tag-topbar, .scroll-top, .theme-toggle, .topbar-btn, .map-shell, .museums-panel, .controls, .view-switch, .hist, .year-range, .near, .post-nav, .painting-hint, .lupa, .color-palette, .site-footer .footer-links, .auth-modal, #auth-btn { display: none !important; } .post-layout, .artist-layout, .idx-grid { display: block !important; } .post-aside { position: static !important; margin-top: 1em; } .painting { max-height: 15cm; width: auto; border: 1px solid #999; box-shadow: none; } /* строки описи не должны разрываться между страницами */ .card, .stat-row, .idx-list li, .spec-table div { break-inside: avoid; page-break-inside: avoid; } .card { border-bottom: 1px solid #ccc; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } /* имя художника в заголовке — ссылка; на бумаге подчёркивание лишнее */ h1 a, h2 a, h3 a { text-decoration: none; color: inherit; } /* адрес страницы — иначе распечатка ни на что не ссылается */ .site-footer { border-top: 1px solid #999; } .site-footer::after { content: "Old Picture Art — denchest.github.io/Site-Oldpictureart"; display: block; width: 100%; margin-top: .3em; } .post-main a[href^="http"]::after, .description a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; } @page { margin: 1.5cm; } }