Ivanq

jsfiddle.net/w1hq9rpp/1

IE не поддерживает background-size: cover / contain

padding-top для li?

При нажатии не на точку - скрывать всё. А по-хорошему - нужно сверстать так, чтобы не перекрывало.

Да, можно и так. Только border-left не первой, а второй!

Какие адекватные css парсеры на php, js или jquery существуют и какой из них выбрать?
И еще куча подобных.

На 9 строке
li a:first-child:before

Шрифт вам не нужен. Все шрифты поддерживают Unicode, а в Unicode есть и цветные иконки. Как вам уже подсказал 0leg5ergeev, посмотрите emojisymbols.com

Я сейчас тщетно пытался сделать это на чистом CSS, не получилось. По мне, нужно сделать разные CSS-классы с transition'ами, а потом добавлять и удалять классы на JS

Мой вариант:

<link rel="stylesheet" href="css/light.css" id="css">
<script language="javascript">
    $.ready(function() {
        if(is_dark()) {
            $("#css").attr("href", "css/dark.css");
        }
    });
</script>

1. Картинка не нажимается
2. Весь блок лучше сделать кликабельным
3. Указатель места здесь не очень подходит
4. Тег <i> нужен для форматирования текста, а не для иконок
5. Лучше сделать для <article> margin со всех сторон, а не только справа и снизу

В том числе и из-за box-sizing: border-box. Но просто, на сколько я помню, margin криво работает с ячейками. Но я могу ошибаться.