min-content, а для main 1fr, т.е. все оставшееся пространство. grid-template-rows: min-content 1fr
translate элементу. А чтобы не делать отдельные обработчики клика всем кнопкам, можно записать им в data-атрибут информацию о том, на сколько какие координаты должна изменить данная кнопка.<button data-steps="1,0">right</button>
<button data-steps="-1,0">left</button>
<button data-steps="0,1">down</button>
<button data-steps="0,-1">up</button>
<button data-steps="1,1">right down</button>
<button data-steps="0,-2">double up</button>const coord = [ 0, 0 ];
const stepSize = 30;
const box = document.querySelector('#box');
const buttons = document.querySelectorAll('[data-steps]');
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick() {
this.dataset.steps.split(',').forEach((n, i) => coord[i] += n * stepSize);
box.style.transform = `translate(${coord.map(n => `${n}px`).join(',')})`;
}
<?php
function register() {
return add_menu_page( <...> );
}
$getted_hook_suffix = register();
[role="row"]:has(.fraud) {
background-color: #f1f7bc;
}[role="row"] {
position: relative;
background-color: transparent;
}
[role="row"] .fraud::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #f1f7bc;
}MutationObserver и следить за появлением новых [role="row"]. 
"2023-02-01 13:00:00".split(' ')[0].split('-')[2] // 01
// или
"2023-02-01 13:00:00".match(/\d{4}-\d{2}-(\d{2})\s\d{2}:\d{2}:\d{2}/)[1] // 01
// или
"2023-02-01 13:00:00".replace(/\d{4}-\d{2}-(\d{2})\s\d{2}:\d{2}:\d{2}/, '$1') // 01
// или
new Date("2023-02-01 13:00:00").getDate() // 1
// или
new Date("2023-02-01 13:00:00").getDate().toString().padStart(2,0) // 01
(min-width: 1024px)(max-width: 1023px)
<meta property="og:description" content="
<?php
if ( is_front_page() ) {
echo 'Main page';
} elseif ( is_404() ) {
echo 'Error 404';
} elseif ( is_search() ) {
echo 'Search page';
} else {
echo the_title();
} ?>
">appendChild у null". appendChild в данном месте? document.body, так? document.body === null? body нет на странице. body нет на странице? body ещё не прочитан. head и не ждёт загрузки документа.body и всё работало, а сейчас wp подключает его в head, как принято.body в wp, либо, что лучше, дожидаться в скрипте загрузки документа(DOMContentLoaded). 
А нужны ли вообще препроцессоры в 2к22, уже почти 2к23 году
Переменные давно реализованы в нативном CSS
$palette: (
light: (
1: "0deg 100% 99%",
2: "0deg 100% 98%",
3: "0deg 100% 96%",
),
dark: (
1: "0deg 0% 0%",
2: "0deg 0% 0%",
3: "0deg 0% 0%",
),
);вложенность также
.car {
color: red;
&--model {
background: black;
&-tesla {
color: blue;
}
}
}Какие преимущества остались у препроцессоров?
.palette--light-1 { color: hsl(0deg 100% 99%) }
.palette--light-2 { color: hsl(0deg 100% 98%) }
// ...
.palette--dark-3 { color: hsl(0deg 0% 0%) }
pet_1 = { name: "Шарик", age: 10 };
pet_2 = { name: "Жучка", age: 5 };
function getName() {
return [this.name, this.age].join(' ');
}
pet_1.getName = getName;
pet_2.getName = getName;
pet_1.getName(); // Шарик 10
pet_2.getName(); // Жучка 5pet_1 = { name: "Шарик", age: 10 };
pet_2 = { name: "Жучка", age: 5 };
function getName() {
return [this.name, this.age].join(' ');
}
const mixin = { getName };
Object.assign(pet_1, mixin);
Object.assign(pet_2, mixin);
pet_1.getName(); // Шарик 10
pet_2.getName(); // Жучка 5pet_1 и pet_2 с помощью Object.assign().