минимальный набор типографики, посвященной Medium.com
Содержание статьи
Установка
npm install --save medium.css
Если вы не используете бандлер, скачайте файл medium.css
и свяжите его в своем HTML
Демонстрация
жить:
https://codepen.io/lucagez/full/bQObBe/
Если вы хотите запустить демо локально, просто клонируйте репозиторий и запустите npm install
а затем npm start
внутри / demo directory
Почему
Я обнаружил, что всегда боролся за базовый набор правил, чтобы получить достойный опыт чтения. Я считаю, что этот минимальный шаблон полезен для начальной загрузки проекта с использованием типографики, созданной на основе лучших знаний: Medium.com .
Использование
Эта таблица стилей должна быть только отправной точкой. Таким образом, он охватывает только основные элементы HTML.
Охватываемые элементы:
-
h1
-
h2
-
р
-
а
-
я
-
BLOCKQUOTE
-
код
Существует три пользовательских класса:
-
. Выделено
выделяет цвет текста для фона -
.first-letter
большая первая буква, которая занимает две строки -
.subtitle
для субтитров
Использованные шрифты
Шрифты Google, которые я нашел, лучше всего имитируют ощущения от чтения Medium.com:
- Шрифт содержимого :
Lora
засечек - Шрифт UI :
Монтсеррат
без засечек - Фирменный шрифт :
Playfair Display
засечек
Вклад
Все PR приветствуются! Если у вас есть идеи о том, как расширить эту таблицу стилей, не стесняйтесь
Лицензия
MIT