Danil Namaste

https://ru.archivarix.com/ - система сама оптимизирует скаченный сайт, убирает битые ссылки, неработающие скрипты и прочий мусор.

Проблема решилась самым простым образом.
Сначала нужно писать псевдокласс :hover, а затем псевдоэлемент :before, таким образом:
div:hover:after{}

все же нормально работает (.copy:hover:before) jsfiddle.net/AYB26/

заводите директорию template, туда складываете 2 шаблона вывода post-big.php, post-small.php

дальше цикл и счетчик цикла.

На bootstrap это выглядело бы примерно так.

if ( have_posts() ) : $n = 1;
		while ( have_posts() ) : the_post();

			$template = 1 === $n ? 'big' : 'small';

			if ( 1 === $n ) {
				echo '<div class="row"><div class="col-lg-6">';
			}

			if ( 2 === $n ) {
				echo '<div class="col-lg-6">';
			}

			get_template_part( 'templates/post', $template );

			if ( 3 === $n ) {
				echo '</div>'; //<div class="col-lg-6"> - close $n = 2
			}

			if ( 1 === $n ) {
				echo '</div>'; //<div class="col-lg-6"> - close $n = 1
			}
			if ( 3 === $n ) {
				echo '</div>'; //<div class="row"> - close $n = 1
			}

			$n ++;
		endwhile;
	else :
	endif;

Код можно причесать и предусмотреть случаи когда записей меньше. Но расписал максимально подробно, для понимания, как оно работает, под себя подгоните сами

Все работает, просто вы полоску сделали слишком маленькой и по ней сложно попасть. Сделайте ее побольше:

.irs-line {
    /* height: 2px; */
    /* background: #bababa; */
    height: 22px;
    background: 0 0 / 100% 2px linear-gradient(to right, #bababa, #bababa) no-repeat;
}

https://sindresorhus.com/screenfull.js/

Можно запустить только без звука

<video id="video_background" preload="auto" no-controls autoplay loop playsinline muted >
      <source src="video/bt-1400.mp4" type='video/mp4' />
    </video>

Лучше всего сделать разбивку согласно стандартным расширениям экрана на несколько групп, аналогично как это сделано в bootstrap по ширине (https://bootstrap-4.ru/docs/4.1/layout/overview/)

Потом в эту разбивку по высоте проще будет подгонять все страницы и элементы дизайна

например:

Некий блок в верху главной страницы, например с менюшкой или главным слоганом должен красиво смотреться имея разный шрифт, отступ и ширину - будет выглядеть примерно так:

@media screen and (max-height: 600px) { 
	.div{
		font-size:10px;
		height:40px;
		margin-top:30px;
	}
}
@media screen and (min-height: 600px) and (max-height: 768px) { 
	.div{
		font-size:10px;
		height:50px;
		margin-top:50px;
	}
}
@media screen and (min-height: 768px) and (max-height: 960px) { 
	.div{
		font-size:14px;
		height:100px;
		margin-top:70px;
	}
}
@media screen and (min-height: 960px) and (max-height: 1024px) { 
	.div{
		font-size:16px;
		height:150px;
		margin-top:100px;
	}
}
@media screen and (min-height: 1024px) { 
	.div{
		font-size:18px;
		height:180px;
		margin-top:150px;
	}
}

Как правило, чтобы не путаться с плавающими по высоте блоками делают их: position:absolute; width:100% и задают им top или margin-top а уже внутри делают контейнер с плавающей шириной и margin: 0 auto;. Под эти блоки как правило делают див с фоновой картинкой в размер экрана

section {
	position:absolute;
	width: 100%; /* ширина секции равна ширине области просмотра */
	height: 100vh; /* высота секции равна высоте области просмотра */
}

Из важного: не ленитесь писать screen, чтобы эти правила распространялись только на экранную разбивку и делайте в конце отдельно printверсию с совершенно другим дизайном под А4 ;)

Вот пример разбивки блоков по высоте (шапка на главной) https://cf-dynamite.ru/

Если плавающих по высоте элементов не много (например какойто текст призывающий к действию и кнопка на фоне картинки с весь экран), то можно использовать проценты от высоты экрана height: XXXvh; и распределить элементы относительными блоками внутри блока с размерами экрана.