ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Added ./libs/ direcroty (and the pages).

Browse Source
This commit is contained in:
ByteDice
2025-11-14 19:43:15 +01:00
parent d4ad6a62d1
commit ef3088c3f1
20 changed files with 444 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/return_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

assets/icons/testtube_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 B

assets/js.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

data/loadingScreenTips.json
+1 -1
View File
@@ -48,7 +48,7 @@
"When you clean out a vacuum cleaner, you become the vacuum cleaner.", "When you clean out a vacuum cleaner, you become the vacuum cleaner.",
"Bread is just a loaf of edible sponge.", "Bread is just a loaf of edible sponge.",
"Sponge is just a piece of inedible bread.", "Sponge is just a piece of inedible bread.",
"If you ever feel useless, remember that 'queue' can be spellt as 'Q'. The 4 vowels next to eachother are utterly useless.", "When life gives you lemons, hand them back and ask for chocolate instead.",
"[Under review for potential treason.]", "[Under review for potential treason.]",
"Tomatoes are fruit, which makes ketchup a smoothie.", "Tomatoes are fruit, which makes ketchup a smoothie.",
"Do penguins have knees? I don't know, but now you're thinking about it.", "Do penguins have knees? I don't know, but now you're thinking about it.",
data/navBar.json
+24 -4
View File
@@ -25,15 +25,35 @@
"disabled": false "disabled": false
} }
}, },
{
"hidden": true,
"alt": {
"name": "testtube",
"icon": "testtube_8x8.png",
"action": "navigate",
"actionValue": "/libs/test",
"disabled": false
}
},
{
"hidden": true,
"alt": {
"name": "return",
"icon": "return_8x8.png",
"action": "navigate",
"actionValue": "../",
"disabled": false
}
},
{ {
"icon": "pauseAnimation_8x8.png", "icon": "pauseAnimation_8x8.png",
"action": "function", "action": "function",
"actionValue": "pauseAnimBtn('auto')", "actionValue": "pauseAnimBtn('auto')",
"iconId": "animationToggle", "iconId": "animationToggle",
"disabled": false, "hidden": false,
"alt": { "alt": {
"name": "playDisabled", "name": "noAnim",
"disabled": true "hidden": true
} }
} }
] ]
global/globalScript.js
+4 -2
View File
@@ -4,8 +4,8 @@ const PAGES = {
SYNTHWAVE: 1, SYNTHWAVE: 1,
TOYS: 2, TOYS: 2,
LICENSE: 3, LICENSE: 3,
SC_TRACKER: 4, LOADING: 4,
LOADING: 5 LIBS: 5
} }
const CONSOLE_COLORS = { const CONSOLE_COLORS = {
red: "color: #FF0000;", red: "color: #FF0000;",
@@ -126,6 +126,7 @@ function pauseAnimBtn(state) {
} }
let pauseBtn = document.getElementById("animationToggle") let pauseBtn = document.getElementById("animationToggle")
if (pauseBtn == undefined) { return; }
if (state == "true") { if (state == "true") {
isAnimating = true isAnimating = true
@@ -181,6 +182,7 @@ document.addEventListener("DOMContentLoaded", async function() {
if (CURRENT_PAGE == PAGES.LOADING) { if (CURRENT_PAGE == PAGES.LOADING) {
clearLoadingScreenClutter() clearLoadingScreenClutter()
setLoadingProgress("")
setInterval(periodicallyChangeTips, 60 * 1000) setInterval(periodicallyChangeTips, 60 * 1000)
return return
} }
global/globalStyle.css
+1 -1
View File
@@ -63,7 +63,7 @@ canvas {
padding: calc(1px * var(--pxDensity)); padding: calc(1px * var(--pxDensity));
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%; margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
width: round(auto, var(--pxDensity)); width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity)); /*height: calc(6px * var(--pxDensity));*/
} }
.switch { .switch {
position: relative; position: relative;
global/navBar.js
+2 -2
View File
@@ -6,9 +6,9 @@ navBarPresent = true
function onLoadNavBar() { function onLoadNavBar() {
const container = document.getElementById("navBarContainer") const container = document.getElementById("navBarContainer")
const altString = container.dataset.alt || "" const altString = container.dataset.alt || ""
alts = altString.replace(" ", "").split(",") alts = altString.replaceAll(" ", "").split(",")
debugPrint("Navbar alts", alts); debugPrint("Navbar alts", alts.join(", "));
if (!container) { return } if (!container) { return }
libs/index.html
+62
View File
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Libs</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/libs">
<meta name="description" content="A list of JS libraries made by Byte Dice.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, library">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="A list of JS libraries made by Byte Dice.">
<meta property="og:url" content="https://bytedice.net/libs">
<meta property="og:type" content="website">
</head>
<body>
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte, noAnim, testtube"></div>
<ul class="libUl">
<li class="libLi">
<div class="libContainer borderedRect">
<img class="libImg" src="/assets/js.png" style="border-radius: 16px;">
<div class="libTextContainer">
<h1>Test</h1>
<p class="desc">Nothing here yet</p>
</div>
<div class="libSrcContainer">
&lt;script src="nothing here yet"&gt;&lt;/script&gt;
</div>
</div>
</li>
</ul>
</div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<script src="script.js"></script>
</body>
</html>
libs/script.js
+1
View File
@@ -0,0 +1 @@
CURRENT_PAGE = PAGES.LIBS
libs/style.css
+68
View File
@@ -0,0 +1,68 @@
.libContainer {
border: none;
display: grid;
width: 100%;
max-height: calc(39px * var(--pxDensity));
grid-template-columns: calc(24px * var(--pxDensity)) 1fr;
grid-template-rows: 1fr auto;
color: inherit;
}
.libImg {
image-rendering: pixelated;
overflow: hidden;
width: 100%;
height: 100%;
object-fit: contain;
margin: auto auto;
}
.libSrcContainer {
background-color: var(--navBar_SecondInner);
padding: calc(1px * var(--pxDensity));
border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border);
text-align: left;
overflow-x: hidden;
grid-column: 1 / -1;
grid-row: 2;
}
.libTextContainer {
background-color: var(--navBar_SecondInner);
padding: calc(1px * var(--pxDensity));
border-left: calc(1px * var(--pxDensity)) solid var(--navBar_Border);
text-align: left;
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - (2px * var(--pxDensity)));
}
h1 {
font-size: max(1.2em, 2.5vmin);
margin: 0%;
margin-bottom: calc(1px * var(--pxDensity));
}
.desc {
font-size: max(1em, 2vmin);
margin: 0%;
}
button:hover {
filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer;
}
button:active {
filter: brightness(0.85);
transform: translateY(calc(1px * var(--pxDensity)));
}
.libUl {
padding: calc(3px * var(--pxDensity));
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(6px * var(--pxDensity))
}
@media (max-width: 1024px) {
.libUl { grid-template-columns: 1fr !important; }
}
.libLi {
margin: 0;
}
ul {
margin: 0%;
padding: 0%;
}
libs/test/calendar_test.js
+168
View File
@@ -0,0 +1,168 @@
//const libCCss = `//#file { ./lib_style.css }`
const libCss = `
:root {
--c-a-cell-width: 0px; /* automatically set */
--c-a-cell-height: 0px; /* automatically set */
--c-width: 700px;
--c-height: 400px;
--c-cell-x-count: 7;
--c-cell-y-count: 7;
--c-time-width: 50px;
--c-date-height: 1.5em;
--c-s-grid-line-width: 2px;
--c-s-grid-line-color: #000000;
}
div.c-base {
background-color: darkgray;
display: grid;
grid-template-columns: var(--c-time-width) 1fr;
grid-template-rows: var(--c-date-height) 1fr;
width: var(--c-width);
height: var(--c-height);
padding-bottom: 0.5em;
}
ul.c-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.c-times {
display: grid;
grid-template-rows: repeat(var(--c-cell-y-count), 1fr);
grid-template-columns: 1fr;
margin: -0.5em 0;
}
ul.c-dates {
display: grid;
grid-template-columns: repeat(var(--c-cell-x-count), 1fr);
grid-template-rows: 1fr;
text-align: center;
}
div.c-grid {
background: /* Grid lines */
repeating-linear-gradient(
0deg,
var(--c-s-grid-line-color),
var(--c-s-grid-line-color) var(--c-s-grid-line-width),
transparent var(--c-s-grid-line-width),
transparent calc((var(--c-height) / var(--c-cell-y-count)))
),
repeating-linear-gradient(
90deg,
var(--c-s-grid-line-color),
var(--c-s-grid-line-color) var(--c-s-grid-line-width),
transparent var(--c-s-grid-line-width),
transparent calc((var(--c-width) / var(--c-cell-x-count)))
);
background-size: calc(100% / var(--c-cell-x-count))
calc(100% / var(--c-cell-y-count));
display: grid;
grid-template-columns: repeat(var(--c-cell-x-count), 1fr);
grid-template-rows: 1fr;
}
`;
class CalendarSettings {
// Not implemented
}
/**
* A calendar-style element.
*/
class Calendar {
debug = false;
/**
* Creates a calendar object.
*
* @param {number} cellCountX How many cells on the X axis
* @param {number} cellCountY How many cells on the Y axis
* @param {[string]} timeItems A list of strings that is rendered to the left of the grid (usually timestamps)
* @param {[string]} dateItems A list of strings that is rendered above the grid (usually dates)
*/
constructor(cellCountX, cellCountY, timeItems, dateItems) {
this.cellCount = { x: cellCountX, y: cellCountY };
this.timeItems = timeItems;
this.dateItems = dateItems;
}
/**
* Adds the calendar element to the document. This method also generates the calendar element.
*
* @param {HTMLElement} child An optional HTML element where the calendar resides in. No value makes it use the <body>.
*/
attachElement(child = null) {
console.log("Attached calendar to HTML page.");
child.appendChild(this.#generateElement());
}
/**
* Adds pre-made CSS to the document. This CSS can be partially overridden or can be skipped completely.
*/
attachCss() {
let s = document.createElement("style");
s.textContent = libCss;
document.head.insertBefore(s, document.head.firstChild);
}
#generateElement() {
let c = document.createElement("div");
c.className = "c-base";
let cEmpty = document.createElement("div");
cEmpty.style.display = "inline-block";
let cDates = document.createElement("ul");
cDates.className = "c-dates c-ul";
let cTimes = document.createElement("ul");
cTimes.className = "c-times c-ul";
let cGrid = document.createElement("div");
cGrid.className = "c-grid";
if (this.debug) {
let s = "red solid 1px";
cDates.style.outline = s;
cTimes.style.outline = s;
cGrid.style.outline = "blue solid 1px";
}
let all = [cEmpty, cDates, cTimes, cGrid];
for (let el of all) { c.appendChild(el); }
this.#generateDates(cDates);
this.#generateTimes(cTimes);
return c;
}
#generateDates(el) {
for (let i of this.dateItems) {
let li = document.createElement("li");
li.innerText = i;
el.appendChild(li);
}
}
#generateTimes(el) {
for (let i of this.timeItems) {
let li = document.createElement("li");
li.className = "c-time";
li.innerText = i;
el.appendChild(li);
}
}
}
libs/test/index.html
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Libs [EXPERIMENTAL]</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/libs/test">
<meta name="description" content="A list of JS libraries made by Byte Dice. [EXPERIMENTAL]">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, library">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="A list of JS libraries made by Byte Dice. [EXPERIMENTAL]">
<meta property="og:url" content="https://bytedice.net/libs/test">
<meta property="og:type" content="website">
</head>
<body>
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte, noAnim, return"></div>
<div class="encased" style="margin: calc(3px * var(--pxDensity)); max-width: 30em">
<h1 style="margin-bottom: calc(1px * var(--pxDensity)); font-size: 2em; color: red; text-decoration: underline;">
WARNING
</h1>
These are experimental/testing libraries. Do not expect them to function. Do not expect them to stay functioning. Do not expect them stay as a whole. Do not expect their advertising to be correct. Do not expect anything from them.
</div>
<div style="height: calc(1px * var(--pxDensity)); margin: 0 calc(3px * var(--pxDensity)); background-color: var(--navBarBtn_Border);"></div>
<ul class="libUl">
<li class="libLi">
<div class="libContainer borderedRect">
<img class="libImg" src="/assets/js.png" style="border-radius: 16px;">
<div class="libTextContainer">
<h1>Calendar Library</h1>
<p class="desc">A fully customizable calendar library. So customizable that you can barely call it a calendar library.</p>
</div>
<div class="libSrcContainer">
&lt;script src="https://www.bytedice.net/libs/test/calendar_test.js"&gt;&lt;/script&gt;
</div>
</div>
</li>
</ul>
</div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<script src="../script.js"></script>
</body>
</html>
sitemap.xml
+18 -3
View File
@@ -3,21 +3,36 @@
<url> <url>
<loc>https://www.bytedice.net</loc> <loc>https://www.bytedice.net</loc>
<priority>1.00</priority> <priority>1.00</priority>
<lastmod>2025-01-28</lastmod> <lastmod>2025-09-08</lastmod>
</url> </url>
<url> <url>
<loc>https://www.bytedice.net/toys</loc> <loc>https://www.bytedice.net/toys</loc>
<priority>0.67</priority> <priority>0.67</priority>
<lastmod>2025-01-28</lastmod> <lastmod>2025-11-14</lastmod>
</url>
<url>
<loc>https://www.bytedice.net/libs</loc>
<priority>0.67</priority>
<lastmod>2025-11-14</lastmod>
</url> </url>
<url> <url>
<loc>https://www.bytedice.net/404.html</loc> <loc>https://www.bytedice.net/404.html</loc>
<priority>0.67</priority> <priority>0.67</priority>
<lastmod>2025-01-25</lastmod> <lastmod>2025-01-25</lastmod>
</url> </url>
<url>
<loc>https://www.bytedice.net/toys/loading</loc>
<priority>0.33</priority>
<lastmod>2025-11-14</lastmod>
</url>
<url> <url>
<loc>https://www.bytedice.net/toys/license</loc> <loc>https://www.bytedice.net/toys/license</loc>
<priority>0.33</priority> <priority>0.33</priority>
<lastmod>2025-07-02</lastmod> <lastmod>2025-11-14</lastmod>
</url>
<url>
<loc>https://www.bytedice.net/libs/test</loc>
<priority>0.33</priority>
<lastmod>2025-11-14</lastmod>
</url> </url>
</urlset> </urlset>
toys/index.html
+11 -11
View File
@@ -28,9 +28,9 @@
<body> <body>
<div id="mainDiv"> <div id="mainDiv">
<div id="navBarContainer" data-alt="byte, playDisabled"></div> <div id="navBarContainer" data-alt="byte, noAnim"></div>
<ul> <ul class="toyUl">
<li class="toyLi"> <li class="toyLi">
<button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect"> <button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/boykisserLicense.png"> <img class="toyImg" src="/assets/boykisserLicense.png">
@@ -40,15 +40,6 @@
</div> </div>
</button> </button>
</li> </li>
<!-- <li class="toyLi">
<button onclick="slideTransition('/toys/sc-tracker', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/backgrounds/embedImage.png">
<div class="toyTextContainer">
<h1>Helldivers 2 Super Credit Tracker</h1>
<p class="desc">Tracks your Helldivers 2 Super Credit farming sessions.</p>
</div>
</button>
</li> -->
<li class="toyLi"> <li class="toyLi">
<button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect"> <button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/byte_dice_fancy_64x64.png"> <img class="toyImg" src="/assets/byte_dice_fancy_64x64.png">
@@ -57,6 +48,15 @@
<p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p> <p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p>
</div> </div>
</button> </button>
</li>
<li class="toyLi">
<button onclick="slideTransition('/libs', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/js.png" style="border-radius: 16px;">
<div class="toyTextContainer">
<h1>Libraries</h1>
<p class="desc">A few JS libraries that I have made.</p>
</div>
</button>
</li> </li>
</ul> </ul>
</div> </div>
toys/license/index.html
+1 -1
View File
@@ -191,7 +191,7 @@
<p id="credits_600x400">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p> <p id="credits_600x400">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
</div> </div>
<div id="navBarContainer" data-alt="byte, playDisabled"></div> <div id="navBarContainer" data-alt="byte, noAnim"></div>
</div> </div>
<div id="loadingScreen"></div> <div id="loadingScreen"></div>
toys/sc-tracker/index.html
-80
View File
@@ -1,80 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Super Credit Tracker</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys/sc-tracker">
<meta name="description" content="Tracks your Helldivers 2 Super Credit farming sessions.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, Helldivers, Super Credits">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="Tracks your Helldivers 2 Super Credit farming sessions.">
<meta property="og:url" content="https://bytedice.net/toys/sc-tracker">
<meta property="og:type" content="website">
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<!-- Only recommended for solo farming since it can be hard to get teammates to announce every detail about POIs -->
<!--
TODO: Output these stats:
* Total SC gained
* Average SC per POI
* Average SC per mission
* Average time in mission
* Average time between missions
* Average SC per minute (and per hour)
* Squad size
* Planet/Biome
TODO: Get these inputs.
* Buttons to [add / undo the last] 10 SC or 100 SC
* Button to Start/Stop timer
* Button to Lap timer (lap mission complete & mission start)
* Loadout selector (1 for each player)
* Only includes:
* [jump pack / warp pack / none]
* [explosive weapon or grenade / AMR-like weapon / both]
* Boosters: [stamina / muscle / infusion / HSO / dead sprint]
* Squad size slider
* Biome picker (mega-city toggle too)
-->
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte, playDisabled"></div>
</div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<script src="script.js"></script>
</body>
</html>
toys/sc-tracker/script.js
-1
View File
@@ -1 +0,0 @@
CURRENT_PAGE = PAGES.SC_TRACKER
toys/sc-tracker/style.css
View File
toys/style.css
+12 -6
View File
@@ -1,8 +1,7 @@
.toyContainer { .toyContainer {
border: none; border: none;
width: calc(64px * var(--pxDensity));
/* height: calc(48px * var(--pxDensity)); */
display: grid; display: grid;
width: 100%;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: calc(32px * var(--pxDensity)) 1fr; grid-template-rows: calc(32px * var(--pxDensity)) 1fr;
color: inherit; color: inherit;
@@ -10,9 +9,10 @@
.toyImg { .toyImg {
image-rendering: pixelated; image-rendering: pixelated;
overflow: hidden; overflow: hidden;
max-width: calc(62px * var(--pxDensity)); width: 100%;
height: calc(32px * var(--pxDensity)); height: 100%;
margin: 0% auto; object-fit: contain;
margin: auto auto;
} }
.toyTextContainer { .toyTextContainer {
background-color: var(--navBar_SecondInner); background-color: var(--navBar_SecondInner);
@@ -40,8 +40,14 @@ button:active {
filter: brightness(0.85); filter: brightness(0.85);
transform: translateY(calc(1px * var(--pxDensity))); transform: translateY(calc(1px * var(--pxDensity)));
} }
.toyUl {
padding: calc(3px * var(--pxDensity));
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(6px * var(--pxDensity))
}
.toyLi { .toyLi {
margin: calc(3px * var(--pxDensity)); margin: 0;
} }
ul { ul {
margin: 0%; margin: 0%;