skopcaak/skopec.dev
1
1
Fork 0
mirror of https://github.com/pepaskopec-blip/skopec.dev.git synced 2026-10-27 07:04:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

Match Snake and BatchGym previews to the light theme.

Browse source 
The arcade and terminal cards were stuck on dark colors after switching theme.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pepaskopec-blip 2026-10-18 22:52:26 +02:00
commit 287471ea39
3 changed files with 62 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
projects.html
View file

@ -34,7 +34,7 @@
}
})();
</script>
<link rel="stylesheet" href="style.css?v=20261025">
<link rel="stylesheet" href="style.css?v=20261026">
<script type="application/ld+json">
{
"@context": "https://schema.org",
@ -633,6 +633,6 @@
</div>
</footer>
<script src="script.js?v=20261022" defer></script>
<script src="script.js?v=20261026" defer></script>
</body>
</html>

28
script.js
View file

@ -218,11 +218,29 @@
}
};
const snakePalette = () => {
const light = document.documentElement.dataset.theme === "light";
return light
? {
grid: "rgba(17, 21, 28, 0.08)",
food: "#dc3c11",
head: "#11151c",
body: "179, 47, 8",
}
: {
grid: "rgba(238, 242, 246, 0.04)",
food: "#ff4a1c",
head: "#eef2f6",
body: "255, 122, 82",
};
};
const drawSnake = () => {
if (!ctx) return;
const palette = snakePalette();
ctx.clearRect(0, 0, snakeCanvas.width, snakeCanvas.height);
ctx.strokeStyle = "rgba(238, 242, 246, 0.04)";
ctx.strokeStyle = palette.grid;
ctx.lineWidth = 1;
for (let x = 0; x <= cols; x++) {
ctx.beginPath();
@ -237,14 +255,14 @@
ctx.stroke();
}
ctx.fillStyle = "#ff4a1c";
ctx.fillStyle = palette.food;
ctx.beginPath();
ctx.arc(food.x * cell + cell / 2, food.y * cell + cell / 2, 4.5, 0, Math.PI * 2);
ctx.fill();
snake.forEach((seg, idx) => {
const alpha = Math.max(0.28, 1 - idx * 0.09);
ctx.fillStyle = idx === 0 ? "#eef2f6" : `rgba(255, 122, 82, ${alpha})`;
ctx.fillStyle = idx === 0 ? palette.head : `rgba(${palette.body}, ${alpha})`;
ctx.fillRect(seg.x * cell + 2, seg.y * cell + 2, cell - 4, cell - 4);
});
};
@ -296,6 +314,10 @@
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
setInterval(stepSnake, 180);
}
new MutationObserver(drawSnake).observe(document.documentElement, {
attributes: true,
attributeFilter: ["data-theme"],
});
}
const revealItems = document.querySelectorAll(".reveal");

35
style.css
View file

@ -1590,6 +1590,17 @@ a:hover {
color: var(--accent-ink);
}
:root[data-theme="light"] .mock-arcade {
background: #f4f6f8;
box-shadow: 0 14px 30px rgba(17, 21, 28, 0.08);
}
:root[data-theme="light"] .mock-arcade-hud {
color: var(--ink-soft);
background: rgba(17, 21, 28, 0.04);
border-bottom-color: var(--line);
}
.snake-canvas {
display: block;
width: 100%;
@ -1658,6 +1669,30 @@ a:hover {
background: var(--accent);
}
:root[data-theme="light"] .mock-terminal {
background: #f7f8fa;
box-shadow: 0 14px 30px rgba(17, 21, 28, 0.08);
}
:root[data-theme="light"] .mock-terminal-bar {
color: var(--muted);
background: #eef1f4;
border-bottom-color: var(--line);
}
:root[data-theme="light"] .mock-terminal-body {
color: var(--ink-soft);
}
:root[data-theme="light"] .term-stats,
:root[data-theme="light"] .term-log {
color: var(--muted);
}
:root[data-theme="light"] .term-prompt {
color: var(--ink);
}
/* Terra challenge preview */
.mock-terra {
width: 100%;