Палитра в CSS, размер консоли и другие правки редактора

За неделю после запуска в редакторе накопилось несколько небольших изменений. Ни одно из них не тянет на отдельный пост, поэтому собрали их вместе.

Цвета в CSS

Посмотрим на обычный кусок стилей:

.card {
  background: #1f2937;
  border-color: rgb(59 130 246 / 0.4);
  color: hsl(210 40% 96%);
}

Чтобы понять, какие здесь цвета, приходится либо помнить hex-коды, либо смотреть в превью и угадывать, какое значение за что отвечает. Теперь перед каждым значением цвета в коде стоит маленький квадратик с этим цветом. Он появляется у hex, rgb(), hsl(), hwb() и именованных цветов вроде tomato — в панели CSS и в стилях внутри HTML.

По клику на квадратик открывается палитра: поле насыщенности и яркости, полоса оттенка и полоса непрозрачности. Мы двигаем ползунок — значение в коде и превью меняются сразу, без ручного подбора цифр.

Тут есть нюанс: палитра не переписывает код под себя. Был hex — останется hex, был hsl() — останется hsl(). Если нужна другая запись, она переключается кликом по значению в шапке палитры: hex, rgb, hsl по кругу.

Квадратики отключаются в настройках — пункт «Образцы цвета в CSS». Это на случай, если в файле много цветов и значки мешают читать код.

Размер текста консоли

Размер шрифта редактора настраивался и раньше, а консоль оставалась мелкой — 12 пикселей. На большом мониторе или на проекторе во время занятия вывод читался с трудом.

В настройках появился отдельный пункт «Размер шрифта консоли»: от 12 до 22 пикселей, по умолчанию 14. Он не связан с размером шрифта редактора — код можно оставить компактным, а вывод сделать крупным. Выбор хранится в браузере.

Чужой пен без кнопки «Сохранить»

Раньше на чужом пене были две кнопки — «Форк» и «Сохранить». Сохранить чужой пен нельзя, поэтому вторая кнопка тоже делала форк. Две кнопки с одним результатом только добавляли вопрос, чем они отличаются.

Теперь на чужом пене остаётся одна кнопка — «Форк». Привычное сочетание Ctrl+S (⌘S) там тоже создаёт копию: правки не пропадут, они уйдут в ваш форк.

Куда ведёт вход

После входа сайт теперь возвращает туда, где это обычно нужно:

• «Войти» в шапке — в профиль, к своим пенам;
• вход из редактора — обратно к пену, который был открыт;
• «Сохранить», «Форк» или лайк без аккаунта — обратно в редактор, и действие выполняется само, код при этом не теряется.

Если в редакторе что-то работает неудобно — напишите нам на penlab.info@yandex.com.