Как изменить размеры шрифта в темах Discourse?

Глобальные изменения размера шрифта

Самый простой способ изменить размер шрифта всего сообщества - переопределить значение по умолчанию для элемента HTML в CSS вашей темы, например:

html {
  font-size: 16px; /* default is 15px */
}

Поскольку все наши font-size значения внутри <HTML> определены в единицах em, увеличение размера шрифта на <HTML> пропорционально увеличит размер шрифта всех других элементов (ems - относительные единицы ).

Discourse также поставляется с выбираемыми пользователем параметрами размера текста, которые можно изменить в предпочтениях каждого пользователя ( / my / preferences / interface ), по умолчанию это:

Smaller: 14px
Normal: 15px (default)
Larger: 17px
Largest: 19px

Когда вы меняете размер шрифта, <HTML> как показано выше, вы меняете только Normal значение. Поэтому, если вы хотите, чтобы настройки размера текста пользователя продолжали работать в вашей теме, вам также следует увеличить значение font-size для других параметров. Если вы хотите увеличить размер шрифта всех опций на 1 пиксель, это будет выглядеть так:

html {
    font-size: 16px; /* default 15px  */
    &.text-size-smaller {
      font-size: 15px; /* default 14px  */
    }
    &.text-size-larger {
      font-size: 18px; /* default 17px  */
    }
    &.text-size-largest {
      font-size: 20px; /* default 19px  */
    }
  }

Изменение размера шрифта отдельных компонентов

Возможно, вы не захотите увеличивать глобальный размер шрифта вашего сообщества, а просто изменить font-size конкретный компонент, такой как заголовок или сообщения. Если вы знакомы с CSS, вы можете ориентироваться на отдельные элементы, как и ожидалось.

Например, чтобы увеличить размер шрифта всего контента в сообщении, вы можете сделать это:

.topic-post {
  font-size: 1.2em;
}

Если вы хотите изменить размер текста содержимого публикации, но не имена пользователей и другие метаданные, вам нужно быть немного более конкретным (щелкните правой кнопкой мыши на элементе и воспользуйтесь инспектором браузера, если вам нужно выяснить, на какой элемент нацелиться) …

.topic-post .contents {
  font-size: 1.2em;
}

Обратите внимание, что в приведенных выше примерах я использую em единицы измерения. Здесь вы можете использовать px значения, но выгода ems в том, что они реляционные.

Если вы использовали пиксельные единицы в приведенных выше примерах, эти размеры шрифта остались бы такими же, даже если пользователь изменил настройку размера текста в своих настройках. Статическое значение, например 16px, всегда равно 16px. Но когда вы используете значение, такое как 1.2em, оно действует как множитель … поэтому, если кто-то выберет больший размер текста в своих настройках, размер шрифта всегда будет увеличиваться в 1,2 раза по сравнению с базовым значением.

Используя переменные масштабирования шрифта Discourse

В стилях Discourse по умолчанию мы используем набор переменных масштабирования шрифта. Вы также можете использовать эти переменные в своих темах:

$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
$font-up-3: 1.5157em;
$font-up-2: 1.3195em;
$font-up-1: 1.1487em; 
$font-0: 1em;
$font-down-1: 0.8706em; 
$font-down-2: 0.7579em; 
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

Эта система гарантирует, что мы используем ограниченный набор размеров шрифтов, которые масштабируются в зависимости от установленного глобального размера html (и избавляет вас от математических операций при вложении единиц em). Если для элемента установлено значение $font-up-3 , мы знаем, что он будет в 1,5 раза больше, чем $font-0 бы ни было конкретное значение px.

Если вы чувствуете себя немного растерянным, это может помочь визуализировать эти переменные как лестницу. Если у вас есть элемент с font-size: $font-up-3 дочерним элементом этого элемента $font-0 , и вам нужен его эквивалент , вам нужно будет пройти 3 шага вниз по лестнице, чтобы добраться туда (так что вы будете использовать $font-down-3 ). Вот оно в действии:

.topic-post {
  font-size: $font-up-3; // 3 steps up
  .topic-meta-data {
    font-size: $font-down-3; // 3 steps back down; equivalent to $font-0 (1em)
  }
}

Оригинал:

Связанные темы:

Изменение дизайна в Discourse (Часть 1)

Изменение дизайна в Discourse (Часть 2) - Темы

Темы, плагины от сайта Toxu (plugins, themes)

wiki…

6 симпатий