Archive of Our Own ^beta

Chapter Text

Начнем установку с основной части.

1. кликаем на Dashboard, потом Skins;
2. жмём Create Site Skin;
   • не меняем Type - оставляем Site Skin;
   • назовем, например Dracula for AO3 - [ваш ник], потому что название должно быть уникальным в пределах сайта;
   • копируем и вставляем содержимое файла ao3ready_core.css в поле CSS;
   • жмём Submit.
3. AO3 перенаправит нас на страницу только что созданного скина. Жмём Use в самом низу и на этом установка основной части завершена.

Но если вы читаете с мобильного устройства? Что-то может выглядеть поломанным, текст слишком вытянут по вертикали... Починим это! AO3 умеет загружaть дополнительные стили CSS на узких экранах.

1. создаём новый скин, даём ему название, например Dracula for AO3 max 42 - [ваш ник] - всё ещё должно быть уникальным в пределах сайта;
2. копируем и вставляем содержимое файла ao3ready_max42.css в поле CSS;
3. жмём Advanced Show ↓;
4. в группе Conditions прокручиваем Media вниз и отмечаем only screen and (max-width: 42em), опционально можно отметить Parent Only; после жмём Submit;
5. опционально - в основном для планшетов - создаём новый скин как описано в шагах 1-4, но копируем содержимое файла ao3ready_max62.css и отмечаем only screen and (max-width: 62em);
6. объединяем все созданные скины;
   • создаём новый скин с названием, например, Dracula for AO3 combined - [ваш ник];
   • ничего не вставляем в поле CSS, прокручиваем до Advanced, и жмём Show ↓;
   • в группе Parent Skins, жмём Add parent skin, в поле вписываем название скина, созданного первым, потом опять жмём Add parent skin и вписываем название второго и (если создавали) третьего;
   • жмём Submit и потом Use после перенаправления.

Можно добавить и больше скинов :)

(Опционально) Шрифты

Я прописала шрифт IBM Plex Sans в качестве основного шрифта для текста работ, элементов управления, кнопок и т.д. CSS в скинах ограничено, поэтому для отображения шрифта его надо добавить отдельно. Это совершенно необязательно - были добавлены другие шрифты как резервные. Я знаю о двух способах установки шрифтов:

1. использовать расширение для браузера Stylus;

   • добавить стиль для archiveofourown.org и вставить туда код:

     
     @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
2. скачать и установить шрифты локально;
   • IBM Plex Sans

В следующей главе я расскажу, как подсветила теги (Tag Highlight skin) и изменила начертание шрифта (font settings skin).

Chapter Text

Настройки шрифта

#modal .userstuff,
#outer .userstuff {
font-family: 'IBM Plex Sans', 'DejaVu Sans', 'Helvetica Neue', 'Trebuchet MS', Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.375;
font-weight: 300;
}
.userstuff p {
margin: 0 auto;
line-height: 1.375;
text-indent: 1rem;
text-align: justify;
}
.userstuff p img {
margin-left: -1rem;
}

Этот код задает шрифт, стиль и форматирование текста в элементах HTML, отображающих содержимое, введенное пользователем (текст фика, саммари, комментарий и т.д.). Первая часть кода определяет семейство шрифтов, размер и начертание.

Размер текста немного больше стандартного размера AO3 (0,875rem); попробуйте изменять его понемногу, на font-size: 0,9rem или font-size: 1,1rem. Напротив, начертание изменяется по сотням; font-weight по умолчанию в AO3 равен 400.

Вторая часть кода определяет форматирование текста внутри абзацев, например, высоту строки, отступ текста и выравнивание текста.

margin: 0 auto; - верхний и нижний отступы установлены на 0, а правый и левый отступы рассчитываются браузером. Вы можете указать отступ вместо auto, чтобы сузить текст.

AO3 добавляет пустую строку между абзацами, установив верхний и нижний отступы на 1,286em. Мне нравится визуально разделять абзацы с помощью красной строки, поэтому я использовала text-indent: 1rem и компенсировала этот отступ у изображений в третьей части кода.

Подсветка тегов

a.tag[href*="Light"]:not([href*="Dark"]),
a.tag[href*="Helsing%20*a*"], a.tag[href*="Helsinng%20*a*"], a.tag[href*="*a*%20Gabriel"],
a.tag[href*="*s*Dracula"], a.tag[href*="Dracula*s*"] {
color: #ff9580;
background: rgba(255,149,128,.1);
}

Дракула не выносит свет, поэтому все теги, содержащие слово "Light" (но не "Dark") будут подсвечены. Цвет текста будет #ff9580, а фон rgba(255,149,128,.1).

Теперь подсветим Хельсинга в платонических отношениях (Gabriel Van Helsing & OC) и Дракулу в романтических. Заметьте, что пробел стал %20, & стал *a* и / стал *s*.