document.documentElement
.data-theme="dark"
localStorage
:localStorage.setItem('theme', isChecked ? 'dark' : 'light');
head
добавляйте скрипт, который применит атрибут:const theme = localStorage.getItem('theme');
if (mode === 'dark') {
document.documentElement.dataset.theme = 'dark';
}
<div className="reference-container">
<div className="reference-container-panel">
{isToolsVisible && <div className="tools"></div>}
{isSeracpPanleVisible && <div className="searchPanel"</div>}
</div>
<div className="mainContent"></div>
</div>
.reference-container {
height: 100%;
display: grid;
grid-template-rows: max-content 1fr;
}
.reference-container-panel {
display: grid;
grid-auto-rows: max-content;
}
.reference-container-panel:empty {
display: none;
}
.tools {
height: 100px;
}
.searchPanel {
height: 50px;
}
@keyframes bg-move
.@keyframes bg-move {
0% { background-position: -500px 0; }
100% { background-position: 1000px 0; }
}
- grid-template-columns: repeat(auto-fill, minmax(250px, auto));
+ grid-template-columns: repeat(auto-fill, 250px);
filter: drop-shadow(2px 4px 6px blue);
заменить на box-shadow: 2px 4px 6px blue;
. И можете добавить will-change: height;
. header > div:not(:first-child) {
width: calc(100% - 36%);
padding: 68px 0 68px 48px;
border-left: 14px solid #fecb00;
background-color: #ebebeb;
}
h1, p {
margin: 0;
}
.hint
) пересекается с блоком А (основным текстом), и после, с использованием полученного и порогового (задаёте сами), можно решить, что делать с блоком.const clamp = (min, max, value) => Math.max(min, Math.min(max, value));
const calculateIntersection = (a, b) => {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
const top = clamp(aRect.top, aRect.bottom, bRect.top);
const right = clamp(aRect.left, aRect.right, bRect.right);
const bottom = clamp(aRect.top, aRect.bottom, bRect.bottom);
const left = clamp(aRect.left, aRect.right, bRect.left);
const width = right - left;
const height = bottom - top;
const totalArea = bRect.width * bRect.height;
const intersectionArea = width * height;
const intersectionRatio = intersectionArea / totalArea;
return intersectionRatio;
};
@keyframes arrow {
0% {
width: 60px;
}
25% {
width: 260px;
transform: translateX(0px);
}
50%, 75% {
width: 60px;
transform: translateX(200px);
}
}
/
) указывает на директорию, которую «просматривает» сервер. Если же открыть HTML-файл в браузере, то /
будет указывать на корень диска, например в C:/
.