Обновления стиля

Реализация улучшений пользовательских опытов в моем блоге, включая Dark Mode и строка чтения.

Чтение на dev.to? Смотрите фактические эффекты здесь: hambly.dev/style-updates.html

Мигающий курсор

Я подумал, что было бы здорово сделать ссылку в заголовке выглядеть так, как будто у нее есть мигающий курсор. Итак, я хлопнул Набейте это! Шучу, метка мигана устаревший Поэтому я нашел анимацию CSS и настроил ее по мере необходимости. Просто оживляйте цвет текста прозрачным и обратно каждую секунду бесконечно.

// SCSS

.blink {
  color: $grey-color;
  animation: 1s blink step-end infinite;
}

@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: $grey-color;
  }
}

Оценка времени чтения

Я добавил оценку времени чтения рядом с опубликованной датой, со следующей жидкостью. Он работает, считая количество слов в содержании и деляя его на среднюю скорость чтения. Мне пришлось обернуть фрагмент ниже в сырые теги так что это не оценивается Джекиллом во время сборки!

{{
  content
    | number_of_words
    | plus: 200
    | divided_by: 200
    | prepend: "⏱️ "
    | append: " min read"
}}

Чтение в баре прогресса

Мне нравится косметический эффект анимированной панели прогресса во время чтения, достаточно, чтобы пожертвовать моим правилом «JavaScript только для аналитики». Сайт по -прежнему отлично работает с отключенным JavaScript, что действительно имеет значение – в любом случае для технической толпы. Минимизация JavaScript хороша для мобильных сайтов в целом, так как все это должно быть загружен, анализируется и скомпилировано Анкет Это увеличивает нагрузку ЦП и использует больше энергии из вашей драгоценной батареи.

Бар прогресса работает, добавив <Прогресс> элемент на страницу и обновление его значение атрибут при прокрутке. Слушатель событий добавлен в Свиток событие, но мы Разделяйте анимацию Из событий ввода с помощью requestAnimationFrame Чтобы поднять анимацию для следующего перекраски браузера.

// add a  element to the page, style and position it to taste
// 

window.addEventListener("load", setup);
window.addEventListener("resize", setup);
var listening = false;

function setup() {
  var scrollPosition = 0,
    ticking = false,
    progress = document.getElementById("progress"),
    body = document.body,
    html = document.documentElement,
    width = 0;

  var height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );

  var maxScroll = height - html.clientHeight;

  function update() {
    scrollPosition = window.scrollY || window.pageYOffset;
    if (!ticking) {
      window.requestAnimationFrame(function() {
        progress.value = (100 * scrollPosition) / maxScroll;
        ticking = false;
      });
      ticking = true;
    }
  }
  update();
  if (!listening) {
    // only add the scrolling event listener once!
    window.addEventListener("scroll", update);
    listening = true;
  }
}

Темный режим

Я недавно узнал о Предпочитает цветочный схм Функция CSS Media после просмотра Этот пост Тома Броу , и я должен был иметь это. Что -то в краже великих художников, и все такое. 🔪

Первоначально я искал опцию Dark Mode в настройках браузера, прежде чем выяснить, что это общая настройка операционной системы. Вот как это выглядит в Windows 10 Анкет

Это приятно и легко сделать, просто добавьте еще один @Media Объявление о вашем CSS, а затем перезаписывайте свой стиль по мере необходимости. Действительно приятный кусочек из статьи Тома – применить небольшой серогойский состав фильтр к изображениям в темном режиме, поэтому они тонко менее яркие.

// SCSS

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #eee;
  }
  pre,
  code {
    background-color: #444;
  }
  img {
    filter: grayscale(20%);
  }
  a {
    color: #fff;
    text-decoration: none;
    border-bottom: 2px $orange-color solid;
    transition: color 1s;

    &:hover {
      color: $orange-color;
    }
  }
  p {
    color: #ddd;
  }
}

Вот как включить темный режим на Macos , ios и Android Анкет

На данный момент с обновлениями стиля я могу сосредоточиться на написании чего -то более технического. До скорого!

Оригинал: “https://dev.to/delta1/style-updates-33ec”