Дизайн и стили

Ember жива и оранжева. Теперь давайте сделаем так, чтобы она ощущалась как Ember — тёплой, уютной и безошибочно своей. Вся эта страница — путь без кода: мы меняем только значения в двух файлах SCSS. Svelte не требуется.

Держите bun run dev запущенным с прошлой страницы и откройте bun run dev:ui во втором терминале, чтобы стили перекомпилировались в момент сохранения:

bun run dev:ui

Полный справочник по этим файлам — см. Цвета и стили. Здесь мы просто выстроим внешний вид Ember.

Два файла, которые вы трогаете

Файл	Для чего он
src/styles/tokens.scss	Меню каждого цвета, шрифта и радиуса, которые использует движок. Раскомментируйте строку, измените значение.
src/styles/style.scss	Ваш собственный дополнительный CSS, наложенный поверх стилей движка.

Шаг 1 — задайте палитру Ember

Откройте src/styles/tokens.scss. Он поставляется как закомментированное меню — каждая строка начинается с //, что означает «выключено». Чтобы использовать значение, удалите // и задайте его. Каждая переменная движка объявлена с !default, поэтому ваше значение всегда побеждает.

Мы уже включили $primary. Давайте завершим палитру костра:

// src/styles/tokens.scss
$primary: #ff6a3d;    // warm ember orange
$secondary: #ffb347;  // soft flame gold

Сохраните и смотрите, как акценты теплеют по всему сайту.

Не обязательно раскомментировать всё

Меняйте только те немногие значения, которые вам важны. Каждая строка, оставленная закомментированной, сохраняет разумное значение по умолчанию от движка.

Шаг 2 — скруглите углы

Ember уютная, так что давайте смягчим каждую карточку, кнопку и поле ввода. Найдите токен радиуса и задайте ему большее значение:

// src/styles/tokens.scss
$radius: 14px;

Сохраните и обновите — интерфейс сразу становится более округлым и дружелюбным.

Шаг 3 — дайте Ember шрифт

Задайте базовый шрифт, используемый по всему сайту. Используйте веб-безопасный шрифт или тот, что загружаете сами:

// src/styles/tokens.scss
$font-family-base: "Poppins", sans-serif;

Загрузка своего шрифта

Если вы используете шрифт, которого ещё нет на странице, положите файлы шрифта в static/ и добавьте его @font-face в style.scss (ниже импортов). Затем сошлитесь на него в токене выше.

Шаг 4 — добавьте финальный штрих в style.scss

Токены покрывают значения, о которых движок уже знает. Когда вам нужно что-то, для чего у движка нет переменной, поместите свой CSS в src/styles/style.scss, ниже импортов сверху.

Давайте придадим карточкам Ember тёплую, светящуюся тень:

// src/styles/style.scss — after the @use / @import lines

.section-card {
  box-shadow: 0 8px 28px rgba(255, 106, 61, 0.18);
}

Сохраните и обновите. Теперь вы должны увидеть, как карточки приподнимаются над страницей с мягким оранжевым свечением.

Добавляйте свой CSS ниже импортов, никогда выше

Стили движка должны загружаться первыми, чтобы ваши правила могли строиться поверх них. Всё, что вы поместите выше импортов, будет переопределено.

Где мы находимся

У Ember теперь есть палитра, скруглённые углы, шрифт и свечение — и всё это без единой строчки Svelte. Для большинства тем это уже готовый, пригодный к выпуску вид.

Но главная страница Ember всё ещё использует стандартный макет. Давайте изменим её.

Далее: Изменение страниц →