@@ -159,6 +170,14 @@

CSS Minecraft

+

@@ -222,6 +241,14 @@

CSS Minecraft

+

@@ -285,6 +312,14 @@

CSS Minecraft

+

@@ -348,6 +383,14 @@

CSS Minecraft

+

@@ -411,6 +454,14 @@

CSS Minecraft

+

@@ -474,6 +525,14 @@

CSS Minecraft

+

@@ -537,6 +596,14 @@

CSS Minecraft

+

diff --git a/index.pug b/index.pug index 5305b84..dc55b01 100644 --- a/index.pug +++ b/index.pug @@ -1,6 +1,6 @@ //- pug index.pug -w -- const blocks = ["air", "stone", "grass", "dirt", "log", "wood", "leaves", "glass"]; +- const blocks = ["air", "stone","brick", "grass", "dirt", "log", "wood", "leaves", "glass"]; - const layers = 9; - const rows = 9; - const columns = 9; @@ -8,11 +8,11 @@ - + - + @@ -25,6 +25,7 @@ + - const sourceMap = { version: 3, sources: ["./index.pug"], mappings: "" }; @@ -36,7 +37,7 @@

CSS Minecraft

| There is no JavaScript on this page. All the logic is made 100% with pure HTML & CSS. For the best performance, please close other tabs and running programs.
- | View on GitHub, CodePen, benjaminaster.com + | View on GitHub.

| ⚠︎ Your browser does not support the CSS :has() pseudo-class, which is needed for this site to work. diff --git a/main.css b/main.css index 270f2a9..4bfbb97 100644 --- a/main.css +++ b/main.css @@ -10,6 +10,7 @@ sass main.scss:main.css -w --air-image: none; --pickaxe-image: url("./assets/pickaxe.png"); --stone-image: url("./assets/stone.png"); + --brick-image: url("./assets/brick.png"); --grass-image: url("./assets/grass_side_carried.png"); --grass-top-image: url("./assets/grass_carried.png"); --dirt-image: url("./assets/dirt.png"); @@ -154,6 +155,9 @@ a { .controls .block-chooser > label.stone { background-image: var(--stone-image); } +.controls .block-chooser > label.brick { + background-image: var(--brick-image); +} .controls .block-chooser > label.grass { background-image: var(--grass-image); } @@ -192,6 +196,9 @@ a { .controls:has(> .block-chooser > .stone > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.stone) { display: none; } +.controls:has(> .block-chooser > .brick > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.brick) { + display: none; +} .controls:has(> .block-chooser > .grass > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.grass) { display: none; } @@ -396,6 +403,9 @@ main, main * { .content .blocks .cubes-container:has(> .cube.stone > input[type=radio]:checked) { --background-image: var(--stone-image); } +.content .blocks .cubes-container:has(> .cube.brick > input[type=radio]:checked) { + --background-image: var(--brick-image); +} .content .blocks .cubes-container:has(> .cube.grass > input[type=radio]:checked) { --background-image: var(--grass-image); } diff --git a/main.scss b/main.scss index 166d351..174d5fd 100644 --- a/main.scss +++ b/main.scss @@ -8,6 +8,7 @@ sass main.scss:main.css -w $blocks: ( "air", "stone", + "brick", "grass", "dirt", "log", @@ -24,6 +25,7 @@ $blocks: ( --air-image: none; --pickaxe-image: url("./assets/pickaxe.png"); --stone-image: url("./assets/stone.png"); + --brick-image: url("./assets/brick.png"); --grass-image: url("./assets/grass_side_carried.png"); --grass-top-image: url("./assets/grass_carried.png"); --dirt-image: url("./assets/dirt.png");