$c1: #aaa;
$c2: #fff;
$c3: #476;
$bg: #fcc;
$size: 6px;
$blocks:
(26 29 5 1 1 $c1)
(30 12 1 17 1 $c1)
(27 31 5 1 3 $c1)
(30 34 5 1 4 $c2)
(0 0 39 11 1 $c1)
(32 13 1 18 3 $c1)
(35 17 1 17 4 $c2)
(43 12 38 2 3 $c1)
(34 37 5 1 1 $c3)
(45 16 38 2 3 $c1)
(38 19 1 18 1 $c3)
(43 20 42 2 3 $c1)
(35 39 11 1 1 $c3)
(40 19 5 20 1 $c3)
(2 2 37 9 3 $c1)
(5 5 37 9 4 $c2)
(8 8 39 11 1 $c3)
(10 10 37 9 1 $c3)
(36 41 12 1 4 $c2)
(47 40 1 1 2 $c1)
(47 54 1 1 2 $c1)
(46 24 41 15 3 $c1)
(50 28 39 15 3 $c1)
(50 46 39 15 3 $c1)
(53 31 39 39 4 $c2)
(40 44 12 3 1 $c3)
(41 48 12 2 1 $c3)
(40 52 12 3 1 $c3)
(41 51 12 2 1 $c3)
(42 51 12 1 1 $c3)
(56 75 41 1 1 $c3)
(97 34 1 41 1 $c3)
(56 34 41 41 1 $c3)
(56 33 41 1 1 $c3)
(55 34 1 41 1 $c3)
(56 34 1 1 1 $c3)
(56 76 1 1 1 $c3)
(98 34 1 1 1 $c3)
(84 36 13 39 1 $c3)
(85 38 12 37 4 $c2)
(63 80 39 1 1 $c3)
(102 41 1 39 1 $c3)
(89 41 13 39 1 $c3)
(90 40 12 1 1 $c3)
(71 36 13 1 7 $c2)
(58 36 13 39 1 $c3)
(60 38 12 37 4 $c2)
(63 41 12 39 1 $c3)
(62 41 1 39 1 $c3)
(63 40 12 1 1 $c3)
(102 45 2 1 1 $c3)
(102 47 3 1 1 $c3)
(102 49 4 1 1 $c3)
(103 51 4 1 1 $c3)
(104 53 4 1 1 $c3)
(109 54 1 1 1 $c3)
(65 43 37 37 1 $c3)
(67 45 35 35 1 $c3)
(69 47 33 33 4 $c2)
(89 41 2 2 1 $c3)
(90 44 2 1 1 $c3)
(88 42 2 2 1 $c3)
(89 45 2 2 1 $c3)
(82 43 7 2 1 $c3)
(83 46 7 2 1 $c3)
(79 42 2 2 1 $c3)
(80 45 2 2 1 $c3)
(76 41 2 2 1 $c3)
(77 44 2 1 1 $c3)
(63 53 2 1 1 $c3)
(64 46 1 7 1 $c2)
(64 53 3 1 1 $c3)
(65 48 1 5 1 $c2)
(65 53 4 1 1 $c3)
(66 50 1 3 1 $c2)
(66 53 4 1 1 $c3)
(67 52 1 1 1 $c2)
(67 53 4 1 1 $c3)
(66 51 4 1 1 $c3)
(65 49 4 1 1 $c3)
(64 47 3 1 1 $c3)
(63 45 2 1 1 $c3)
(67 54 1 1 1 $c3)
(63 77 2 1 1 $c3)
(64 70 1 7 1 $c2)
(64 77 3 1 1 $c3)
(65 72 1 5 1 $c2)
(65 77 4 1 1 $c3)
(66 74 1 3 1 $c2)
(66 77 4 1 1 $c3)
(67 76 1 1 1 $c2)
(67 77 4 1 1 $c3)
(66 75 4 1 1 $c3)
(65 73 4 1 1 $c3)
(64 71 3 1 1 $c3)
(63 69 2 1 1 $c3)
(67 78 1 1 1 $c3)
(63 41 1 1 1 $c3)
(63 81 1 1 1 $c3)
(103 41 1 1 1 $c3)
(72 85 35 1 1 $c3)
(107 50 1 35 1 $c3)
(72 50 35 35 1 $c3)
(71 50 1 35 1 $c3)
(72 49 35 1 1 $c3)
(77 85 1 2 1 $c3)
(74 52 33 33 1 $c3)
(79 85 1 3 1 $c3)
(76 54 31 31 1 $c3)
(81 85 1 4 1 $c3)
(83 86 1 4 1 $c3)
(85 87 1 4 1 $c3)
(86 92 1 1 1 $c3)
(78 56 29 29 4 $c2)
(103 50 1 2 1 $c3)
(96 51 7 1 1 $c2)
(103 51 1 3 1 $c3)
(98 52 5 1 1 $c2)
(103 52 1 4 1 $c3)
(100 53 3 1 1 $c2)
(103 53 1 4 1 $c3)
(102 54 1 1 1 $c2)
(103 54 1 4 1 $c3)
(101 53 1 4 1 $c3)
(99 52 1 4 1 $c3)
(97 51 1 3 1 $c3)
(95 50 1 2 1 $c3)
(104 54 1 1 1 $c3)
(85 50 1 2 1 $c3)
(78 51 7 1 1 $c2)
(85 51 1 3 1 $c3)
(80 52 5 1 1 $c2)
(85 52 1 4 1 $c3)
(82 53 3 1 1 $c2)
(85 53 1 4 1 $c3)
(84 54 1 1 1 $c2)
(85 54 1 4 1 $c3)
(83 53 1 4 1 $c3)
(81 52 1 4 1 $c3)
(79 51 1 3 1 $c3)
(77 50 1 2 1 $c3)
(86 54 1 1 1 $c3)
(72 50 1 1 1 $c3)
(72 86 1 1 1 $c3)
(108 50 1 1 1 $c3)
(81 90 31 1 1 $c3)
(112 59 1 31 1 $c3)
(81 59 31 31 1 $c3)
(80 59 1 31 1 $c3)
(81 58 31 1 1 $c3)
(83 61 29 29 1 $c3)
(85 63 27 27 1 $c3)
(87 65 25 25 1 $c3)
(89 67 23 23 7 $c2)
(102 59 1 2 1 $c3)
(93 60 9 1 1 $c2)
(102 60 1 3 1 $c3)
(95 61 7 1 1 $c2)
(102 61 1 4 1 $c3)
(97 62 5 1 1 $c2)
(102 62 1 5 1 $c3)
(99 63 3 1 1 $c2)
(102 63 1 5 1 $c3)
(101 64 1 1 1 $c2)
(102 64 1 5 1 $c3)
(100 63 1 5 1 $c3)
(98 62 1 5 1 $c3)
(96 61 1 4 1 $c3)
(94 60 1 3 1 $c3)
(92 59 1 2 1 $c3)
(103 64 1 1 1 $c3)
(81 59 1 1 1 $c3)
(81 91 1 1 1 $c3)
(113 59 1 1 1 $c3)
(95 98 9 1 1 $c3)
(111 98 9 1 1 $c3)
(120 73 1 25 1 $c3)
(111 73 9 25 1 $c3)
(95 73 9 25 1 $c3)
(94 73 1 25 1 $c3)
(95 72 9 1 1 $c3)
(111 72 9 1 1 $c3)
(105 98 7 2 1 $c3)
(97 75 23 23 1 $c3)
(105 73 7 2 1 $c3)
(99 77 21 21 1 $c3)
(101 79 19 19 1 $c3)
(102 82 19 15 1 $c3)
(103 85 19 11 1 $c3)
(104 88 19 7 1 $c3)
(105 91 19 3 1 $c3)
(106 93 19 1 1 $c3)
(106 94 1 1 1 $c3)
(108 95 1 1 1 $c3)
(126 94 1 1 1 $c3)
(126 95 1 1 1 $c3)
(95 73 1 1 1 $c3)
(95 99 1 1 1 $c3)
(121 99 1 1 1 $c3)
(121 73 1 1 1 $c3)
(11 27 17 17 3 $c1)
(15 31 15 15 3 $c1)
(19 35 13 13 3 $c1)
(22 38 13 13 6 $c2)
(27 58 15 1 1 $c3)
(42 43 1 15 1 $c3)
(27 43 15 15 1 $c3)
(26 43 1 15 1 $c3)
(27 42 15 1 1 $c3)
(29 45 13 13 1 $c3)
(27 43 1 1 1 $c3)
(27 59 1 1 1 $c3)
(43 43 1 1 1 $c3)
(31 47 11 11 4 $c2)
(34 63 4 1 1 $c3)
(43 63 4 1 1 $c3)
(47 59 1 4 1 $c3)
(47 50 1 4 1 $c3)
(43 59 4 4 1 $c3)
(34 59 4 4 1 $c3)
(35 54 1 5 1 $c2)
(43 50 4 4 1 $c3)
(34 50 4 4 1 $c3)
(33 59 1 4 1 $c3)
(33 50 1 4 1 $c3)
(34 49 4 1 1 $c3)
(43 49 4 1 1 $c3)
(39 63 5 2 1 $c3)
(36 52 11 11 1 $c3)
(38 54 9 9 5 $c2)
(34 59 3 1 1 $c3)
(36 59 3 1 1 $c3)
(36 60 1 1 1 $c3)
(35 57 3 1 1 $c3)
(34 55 2 1 1 $c3)
(39 50 5 2 1 $c3)
(34 50 1 1 1 $c3)
(34 64 1 1 1 $c3)
(48 50 1 1 1 $c3)
(42 50 1 1 1 $c3)
(42 69 11 1 1 $c3)
(53 58 1 11 1 $c3)
(42 58 11 11 1 $c3)
(42 57 11 1 1 $c3)
(41 58 1 11 1 $c3)
(44 61 9 7 1 $c3)
(45 63 9 5 1 $c3)
(46 65 9 3 1 $c3)
(47 67 9 1 1 $c3)
(47 68 1 1 1 $c3)
(49 69 1 1 1 $c3)
(57 68 1 1 1 $c3)
(57 69 1 1 1 $c3)
(42 58 1 1 1 $c3)
(42 70 1 1 1 $c3)
(54 70 1 1 1 $c3)
(54 58 1 1 1 $c3);
$windows:
(8 6 1 2 false)
(12 6 1 2 false)
(16 6 1 2 false)
(20 6 1 2 false)
(24 6 1 2 false)
(28 6 1 2 false)
(32 6 1 2 false)
(36 6 1 2 false)
(40 6 1 2 false)
(36 32 1 2 true)
(36 28 1 2 true)
(36 24 1 2 true)
(36 20 1 2 true)
(33 35 1 2 false)
(42 42 1 1 false)
(44 42 1 2 false)
(33 41 2 1 false)
(28 41 2 1 false)
(40 48 1 2 false)
(37 48 1 2 false)
(34 48 1 1 false)
(41 55 2 2 false)
(44 55 2 2 false)
(25 44 2 1 true)
(25 49 2 1 true)
(32 50 1 1 true)
(32 53 1 2 true)
(32 56 1 2 true)
(57 32 1 1 false)
(59 32 1 1 false)
(63 32 1 1 false)
(65 32 1 1 false)
(69 32 1 1 false)
(71 32 1 1 false)
(75 32 1 1 false)
(77 32 1 1 false)
(81 32 1 1 false)
(83 32 1 1 false)
(87 32 1 1 false)
(89 32 1 1 false)
(63 39 1 1 false)
(65 39 1 1 false)
(69 39 1 1 false)
(71 39 1 1 false)
(73 37 11 2 false)
(76 40 11 2 false)
(87 39 1 2 false)
(89 39 1 1 false)
(93 39 1 1 false)
(95 39 1 1 false)
(73 48 1 1 false)
(75 48 1 1 false)
(79 48 1 1 false)
(81 48 1 1 false)
(91 48 1 1 false)
(93 48 1 1 false)
(97 48 1 1 false)
(99 48 1 1 false)
(83 52 1 2 false)
(101 52 1 2 false)
(89 57 1 1 false)
(91 57 1 1 false)
(95 57 1 1 false)
(97 57 1 1 false)
(97 61 1 1 false)
(99 61 1 2 false)
(95 69 3 3 false)
(99 69 3 3 false)
(103 69 3 3 false)
(107 69 3 3 false)
(54 35 1 1 true)
(54 37 1 1 true)
(54 41 1 1 true)
(54 43 1 1 true)
(54 47 1 1 true)
(54 49 1 1 true)
(54 53 1 1 true)
(54 55 1 1 true)
(61 41 1 1 true)
(61 43 1 1 true)
(61 47 1 1 true)
(61 49 1 1 true)
(61 53 1 1 true)
(61 55 1 1 true)
(61 59 1 1 true)
(61 61 1 1 true)
(61 65 1 1 true)
(61 67 1 1 true)
(61 71 1 1 true)
(61 73 1 1 true)
(65 51 1 2 true)
(65 75 1 2 true)
(70 57 1 1 true)
(70 59 1 1 true)
(70 63 1 1 true)
(70 65 1 1 true)
(70 69 1 1 true)
(70 71 1 1 true)
(79 61 1 1 true)
(79 63 1 1 true)
(79 67 1 1 true)
(79 69 1 1 true)
(79 73 1 1 true)
(79 75 1 1 true)
(79 79 1 1 true)
(79 81 1 1 true)
(91 73 3 3 true)
(91 77 3 3 true)
(91 81 3 3 true)
(91 85 3 3 true);
$pieces: length($blocks) + length($windows);
// (<piece> <z-index to move to>)
$windows2correct: (303 45) (316 134) (317 120) (326 154) (348 75) (349 89);
/*
// For working with grid
$gridColor: rgba(0,0,0,0.3);
$gridStop1H: calc(1em - 1px);
$gridStop2H: 1em;
$gridStop1V: calc((1em*#{1.414/2}) - 1px);
$gridStop2V: 1em*1.414/2;
$grid:
linear-gradient(transparent $gridStop1H, $gridColor $gridStop1H, $gridColor $gridStop2H),
linear-gradient(90deg, transparent $gridStop1H, $gridColor $gridStop1H, $gridColor $gridStop2H);
.ground, .ground > div {
background-image: $grid;
background-size: 1em 1em;
}
*/
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: $bg;
font-size: $size;
height: 100vh;
overflow-x: hidden;
}
main {
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
}
.ground {
width: 128em;
height: 101em;
position: relative;
transform: translateY(7em) rotateX(45deg) rotateZ(-45deg);
> div {
position: absolute;
bottom: 0;
left: 0;
@for $i from 1 through $pieces {
$isBadWindow: false;
&:nth-of-type(#{$i}) {
@if $i > length($blocks) {
// z-index corrections for windows with minor portion not covered by roof
@for $j from 1 through length($windows2correct) {
@if $i == nth(nth($windows2correct, $j), 1) {
$isBadWindow: true;
z-index: nth(nth($windows2correct, $j), 2);
}
}
}
@if $isBadWindow == false {
z-index: $i;
}
}
}
&::before, &::after {
content: "";
display: block;
position: absolute;
}
}
}
@mixin block($x, $y, $w, $d, $h, $c) {
// top
background: $c;
width: 1em*$w;
height: 1em*$d;
transform: translate(1em * ($x + $h),1em * -($y + $h));
// left
&::before {
background: darken($c,20%);
top: 0;
left: -1em*$h;
width: 1em*$h;
height: 1em*$d;
transform: skewY(-45deg) {
origin: 100% 0%;
};
}
// right
&::after {
background: darken($c,10%);
bottom: -1em*$h;
left: 0;
width: 1em*$w;
height: 1em*$h;
transform: skewX(-45deg) {
origin: 0% 0%;
};
}
}
@mixin window($x, $y, $w, $h, $onLeft) {
// deal with window placement on either side of block
@if $onLeft == false {
width: 1em*$w;
height: 1em*$h;
transform: translate(1em*$x,-1em*$y) skewX(-45deg);
}
@else {
width: 1em*$h;
height: 1em*$w;
transform: translate(1em*$x,-1em*$y) skewY(-45deg);
}
}
// render castle
@for $p from 1 through $pieces {
$b: $p;
$w: $p - length($blocks);
._#{$p} {
@if $p <= length($blocks) {
@include block(
nth(nth($blocks, $b), 1),
nth(nth($blocks, $b), 2),
nth(nth($blocks, $b), 3),
nth(nth($blocks, $b), 4),
nth(nth($blocks, $b), 5),
nth(nth($blocks, $b), 6)
);
}
@else {
background-color: #111;
transform-origin: 0 100%;
@include window(
nth(nth($windows, $w), 1),
nth(nth($windows, $w), 2),
nth(nth($windows, $w), 3),
nth(nth($windows, $w), 4),
nth(nth($windows, $w), 5)
);
}
}
}
!
