InDecks Card · v2

Карта одна на все колоды

В первой версии тема настраивалась четырнадцатью токенами, и колоды разъехались по цвету, шрифту и формату. Во второй версии карта — фиксированный объект. Колода различается содержанием, глифом и кодом; всё остальное на карте одинаково, чтобы её узнавали независимо от темы колоды и страницы, на которой она лежит.

Одна карта на разных фонах

Слева разговорная колода на зелёном сукне, справа обучающая на клетчатой бумаге. Различаются только текст, глиф и глубина тени. Картон, красный акцент, рамка и шрифты совпадают до пикселя.

Разговорная колода · вариант «только вопрос»

Каждый день

Какую сумму можно потратить, не спрашивая друг друга?

InDecks1.03

Одна карта — один разговор

Обучающая колода · полный вариант

Инвестиции

Доходности без риска не существует

Повышенная доходность — плата за принятый риск, а не за вашу сообразительность. Если обещают высокий доход и гарантию одновременно, значит, риск просто не назвали вслух.

Сделайте:Спросите: за какой именно риск мне здесь платят?

InDecks5.01

Тезис, объяснение, действие

Что зафиксировано

Эти значения зашиты в компонент. Переопределять их на стороне колоды нельзя — именно они делают карту узнаваемой.

Формат карты90 × 125 мм · 90/125
Картон лицевой#F2EDE3
Картон подложек#E6DFD1
Акцент InDecks#B4402C
Основной текст#1A1916
Объяснение / подвал#4A463E · #6B6659
Скругление · рамка8px · inset 9px
Поля карты26px 24px
Тезис и вопросLiterata 600 / 500
Служебный текстIBM Plex Sans 500–600
Код картыIBM Plex Mono 400
Углы веера−6° · +3,5°

Что можно настроить

Четыре токена на .idk-deck. Тень вынесена наружу вынужденно: на тёмном сукне карта требует более глубокой тени, иначе выглядит наклейкой.

ТокенЗачемЗначение по умолчанию
--idk-wШирина стопки под макет страницы, ограничена 86vw340px
--idk-shadowТень лицевой карты под фон страницы0 16px 34px rgba(0,0,0,.22)
--idk-shadow-backТень подложек0 10px 24px rgba(0,0,0,.18)
--idk-hintЦвет подписи под стопкой — она принадлежит странице, не карте#6B6659

Разметка

Полная карта содержит тезис, объяснение и действие. Для колод, где на карте только вопрос, к .idk-face добавляется --ask: вопрос центрируется и набирается крупнее.

<div class="idk-deck" style="--idk-w:340px; --idk-shadow:…">
  <div class="idk-stack">
    <div class="idk-back idk-back--1"></div>
    <div class="idk-back idk-back--2"></div>
    <article class="idk-face">                    + --ask, если только вопрос
      <div class="idk-face__head"><svg>глиф</svg><span>Раздел</span></div>
      <div class="idk-face__main">
        <p class="idk-face__q">Тезис или вопрос</p>
        <p class="idk-face__x">Объяснение</p>             необязательно
        <p class="idk-face__do"><b>Сделайте:</b><span>…</span></p>  необязательно
      </div>
      <div class="idk-face__foot"><span>InDecks</span><span class="idk-face__code">5.01</span></div>
    </article>
  </div>
</div>

Правила

const IDK = {
  reduce: matchMedia('(prefers-reduced-motion: reduce)').matches,
  turn(face, update){
    if (IDK.reduce) { update(); return; }
    face.classList.add('is-turning');
    setTimeout(() => { update(); face.classList.remove('is-turning'); }, 190);
  }
};