Ivan Bogachev

Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.

1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

---

Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.

Имеете в виду particles.js? (чувствую, что да, вы уже задавали сегодня этот вопрос).

Подскажите, может какие нюансы есть...

Полезно прочитать инструкцию по использованию.

P.S.: Описание "не хочет работать" не дает представления о вашей проблеме. Соответственно не ожидайте, что кто-то угадает, что именно у вас не так.

Как говорится, ябзаверстал (за магические числа в примере ответственности не несу, был пьян).

Можно взять базовую разметку:

.project-timeline
    .step
        .number 1
        .content Lorem ipsum dolor sit amet.
    .step
        .number 2
        .content Lorem ipsum dolor sit amet.
    ....

С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.


На маленьких экранах все повернуть еще раз.



---
CodePen

На главной странице в 728 строке stylesheet_custom.css подключается второй раз.

.generate-styles(3);

.generate-styles(@n, @i: 1) when (@i =< @n) {
  .style-@{i} {
    left: 50px + @i * 15px;
  }
  .generate-styles(@n, (@i + 1));
}

На выходе даст это:

.style-1 {
  left: 65px;
}
.style-2 {
  left: 80px;
}
.style-3 {
  left: 95px;
}

1. caniuse.com/#search=ttf, caniuse.com/#search=otf.
2. Я бы склонялся к woff. Ну или woff в сочетании с eot, если нужны старые IE.
3. Google PageSpeed Insight вообще много на что ругается. Такой уж у него характер. В первую очередь под сжатием обычно понимают удаление всех ненужных символов из шрифта (у вас на сайте редко когда будет больше 1-2 языков, так что и полный набор обычно не нужен).
4. Стоит ли вообще учитывать эти критерии , на которые ругается PageSpeed Insight? - Нет. Этот тест показывает вам узкие места, на которые стоит обратить внимание, но в первую очередь вы должны смотреть своими глазами. Я видел сайты, которые загружались меньше секунды и при этом имели 30-40 баллов по оценке этого теста, а то и меньше, а видел и такие, что они грузились 8-10 секунд при оценке в 95-100.

Ну вообще-то можно не только дочерний - rscss.io/css-structure.html#avoid-over-nesting, но если вы хотите избежать такой вложенности в CSS, то можно просто сделать ссылку с оберткой отдельным компонентом, как-нибудь так:

nav.main-navigation
    ul.links-list
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link
        li.wrapped-link: a.link(href='') Link

.main-navigation {
    // ...
}

.links-list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}


.wrapped-link {
    flex-basis: 20%;
	
    > .link {
        display: block;
        padding: 15px;
        text-align: center;
        text-decoration: none;
		
        &:hover,
        &:focus {
            text-decoration: none;
            background-color: #333;
        }
    }
}

И, разумеется, <br><br> тут совсем ни при чем. Быть может стоит их убрать?

Достаточно ли этого для кроссбраузерности?

Ну так можно посмотреть:
caniuse.com/#search=woff (спойлер: IE9+ и все нормальные браузеры)
caniuse.com/#search=eot (спойлер: решение для IE6-9)

Определитесь с вашими критериями кроссбраузерности и сделайте вывод сами.

/* There is no JS scripts! */

На чистом CSS - никак. Просто потому, что CSS не позволяет "чекнуть" input. Вообще на CSS много чего нельзя сделать, я уже как-то раз приводил список аргументов в пользу слайдеров на скриптах.

Первый вариант вполне неплох. Максимум, что можно еще попробовать добавить - это легкое размыливание (буквально 1px) для текста, который сереет и уходит на задний план. Я бы на вашем месте доделал возможность адекватно перемещаться по странице с помощью tab (а то фокус куда-то улетает постоянно) и подумал, что делать с этой красотой на touch-устройствах (кнопка "читать дальше" под ховером - плохая идея с точки зрения удобства использования).

Вероятно у кнопки display: inline-block. Дайте ей display: block и все схлопнется.