Блоки

Терминал

Статичное окно в виде терминала для пояснений и вывода команд; тёмная таблица параметров.

terminal с версии 0.1.0

Примеры

Окно с объяснением

<div class="term">
  <div class="term__bar"><i></i><i></i><i></i><span class="term__title">почему порядок именно такой</span></div>
  <div class="term__body">
    <p><span class="term__dim">$</span> <span class="term__green">explain</span> --order</p>
    <p><b>Иллюзия понимания.</b> Тема кажется закрытой, потому что вы её однажды настроили — по инструкции, где кто-то другой уже принял все решения. Разница видна на собеседовании, где спрашивают <span class="term__amber">«почему не поднялось»</span>, и на аварии, где инструкция кончилась.</p>
    <p><span class="term__dim"># отсюда правило курса:</span> до первого контейнера идут <b>68 уроков базы</b>.</p>
  </div>
</div>

Таблица требований

<div class="term">
  <div class="term__bar"><i></i><i></i><i></i><span class="term__title">требования к стенду</span></div>
  <div class="term__body">
    <table class="req">
      <tr><td>ОС</td><td>Linux, любой дистрибутив</td></tr>
      <tr><td>Память</td><td>от 4 ГБ</td></tr>
      <tr><td>Доступ</td><td>по ключу, без пароля</td></tr>
    </table>
  </div>
</div>

Установка

bukatchuk-ui add terminal

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

Файл	Назначение
`terminal.css`	стили
`example.html`	образец разметки, в проект не копируется
`terminal.jekyll.html`	вставка для Jekyll

Вставка для Jekyll

{%- comment -%}
  Статичный «терминал». Параметры: title (подпись в заголовке окна), paragraphs (список абзацев в HTML;
  для цвета используйте span с классами term__green, term__amber, term__dim).
  Пример: {% include ui/terminal.html title=site.data.program.terminal.title paragraphs=site.data.program.terminal.paragraphs %}
{%- endcomment -%}
<div class="term rv">
  <div class="term__bar"><i></i><i></i><i></i><span class="term__title">{{ include.title }}</span></div>
  <div class="term__body">
    {%- for p in include.paragraphs %}
    <p>{{ p }}</p>
    {%- endfor %}
  </div>
</div>