100% CSS. No artificial colours or ingredients.
First person to screenshot a lighthouse wins!
Find me @ https://twitter.com/ivorjetski https://www.instagram.com/benevansdesign https://www.youtube.com/c/BenEvanski https://www.tinydesign.co.uk
This version is slightly cut down to fit in CodePen which still struggles a little. So there are a few bugs... I guess I need to refactor the code a little :) Here's the full version: https://www.tinydesign.co.uk/css-town/
| <input type="checkbox" id="gfxmenu" /> | |
| <input type="radio" name="gfx" id="good" checked /> | |
| <input type="radio" name="gfx" id="poor" /> | |
| <x id="graphics"> | |
| <label class="gfx" for="gfxmenu">Graphics Quality</label> | |
| <label class="gfx" for="good">Very Pretty</label> | |
| <label class="gfx" for="poor">Quite Pretty</label> | |
| </x> | |
| <sky><time> | |
| <sun></sun> | |
| </time></sky> | |
| <stars><i></i></stars> | |
| <sunset></sunset> | |
| <colour> | |
| <input type="radio" name="r23" id="cb23" class="hs house row4 col1" /> | |
| <input type="radio" name="r23" id="cb23s" class="hs shed row4 col1" /> | |
| <input type="radio" name="r24" id="cb24" class="hs house row4 col2" /> | |
| <input type="radio" name="r24" id="cb24s" class="hs shed row4 col2" /> | |
| <input type="radio" name="r25" id="cb25" class="hs house row4 col3" /> | |
| <input type="radio" name="r23" id="cb25s" class="hs shed row4 col3" /> | |
| <input type="radio" name="r26" id="cb26" class="hs house row4 col4" /> | |
| <input type="radio" name="r26" id="cb26s" class="hs shed row4 col4" /> | |
| <br /> | |
| <input type="radio" name="r19" id="cb19" class="hs house row3 col1" /> | |
| <input type="radio" name="r19" id="cb19s" class="hs shed row3 col1" /> | |
| <input type="radio" name="r20" id="cb20" class="hs house row3 col2" /> | |
| <input type="radio" name="r20" id="cb20s" class="hs shed row3 col2" /> | |
| <input type="radio" name="r21" id="cb21" class="hs house row3 col3" /> | |
| <input type="radio" name="r21" id="cb21s" class="hs shed row3 col3" /> | |
| <input type="radio" name="r22" id="cb22" class="hs house row3 col4" /> | |
| <input type="radio" name="r22" id="cb22s" class="hs shed row3 col4" /> | |
| <br /> | |
| <input type="radio" name="r15" id="cb15" class="hs house row2 col1" /> | |
| <input type="radio" name="r15" id="cb15s" class="hs shed row2 col1" /> | |
| <input type="radio" name="r16" id="cb16" class="hs house row2 col2" /> | |
| <input type="radio" name="r16" id="cb16s" class="hs shed row2 col2" /> | |
| <input type="radio" name="r17" id="cb17" class="hs house row2 col3" /> | |
| <input type="radio" name="r17" id="cb17s" class="hs shed row2 col3" checked /> | |
| <input type="radio" name="r18" id="cb18" class="hs house row2 col4" /> | |
| <input type="radio" name="r18" id="cb18s" class="hs shed row2 col4" /> | |
| <br /> | |
| <input type="radio" name="r11" id="cb11" class="hs house row1 col1" /> | |
| <input type="radio" name="r11" id="cb11s" class="hs shed row1 col1" /> | |
| <input type="radio" name="r12" id="cb12" class="hs house row1 col2" /> | |
| <input type="radio" name="r12" id="cb12s" class="hs shed row1 col2" /> | |
| <input type="radio" name="r13" id="cb13" class="hs house row1 col3" /> | |
| <input type="radio" name="r13" id="cb13s" class="hs shed row1 col3" /> | |
| <input type="radio" name="r14" id="cb14" class="hs house row1 col4" /> | |
| <input type="radio" name="r14" id="cb14s" class="hs shed row1 col4" /> | |
| <br /> | |
| <input type="radio" name="r23" id="ncb23" class="row4 col1" title="ncb23" /> | |
| <input type="radio" name="r24" id="ncb24" class="row4 col2" title="ncb24" /> | |
| <input type="radio" name="r25" id="ncb25" class="row4 col3" title="ncb25" /> | |
| <input type="radio" name="r26" id="ncb26" class="row4 col4" title="ncb26" /> | |
| <br /> | |
| <input type="radio" name="r19" id="ncb19" class="row3 col1" title="ncb19" /> | |
| <input type="radio" name="r20" id="ncb20" class="row3 col2" title="ncb20" /> | |
| <input type="radio" name="r21" id="ncb21" class="row3 col3" title="ncb21" /> | |
| <input type="radio" name="r22" id="ncb22" class="row3 col4" title="ncb22" /> | |
| <br /> | |
| <input type="radio" name="r15" id="ncb15" class="row2 col1" title="ncb15" /> | |
| <input type="radio" name="r16" id="ncb16" class="row2 col2" title="ncb16" /> | |
| <input type="radio" name="r17" id="ncb17" class="row2 col3" title="ncb17" /> | |
| <input type="radio" name="r18" id="ncb18" class="row2 col4" title="ncb18" /> | |
| <br /> | |
| <input type="radio" name="r11" id="ncb11" class="row1 col1" title="ncb11" /> | |
| <input type="radio" name="r12" id="ncb12" class="row1 col2" title="ncb12" /> | |
| <input type="radio" name="r13" id="ncb13" class="row1 col3" title="ncb13" /> | |
| <input type="radio" name="r14" id="ncb14" class="row1 col4" title="ncb14" /> | |
| <br /> | |
| <input type="radio" id="done" /> | |
| <div class="lh"> | |
| <light></light> | |
| </div> | |
| <div> | |
| <div class="main"> | |
| <island></island> | |
| <tree><i></i><i></i></tree> | |
| <tree><i></i><i></i></tree> | |
| <shed> | |
| <label class="row1 col1 shedlabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row1 col2 shedlabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row1 col3 shedlabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row1 col4 shedlabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col1 shedlabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col2 shedlabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col3 shedlabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col4 shedlabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col1 shedlabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col2 shedlabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col3 shedlabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col4 shedlabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| </shed> | |
| <house> | |
| <label class="row1 col1 houselabel" for="ncb11" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row1 col2 houselabel" for="ncb12" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row1 col3 houselabel" for="ncb13" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row1 col4 houselabel" for="ncb14" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col1 houselabel" for="ncb15" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col2 houselabel" for="ncb16" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col3 houselabel" for="ncb17" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row2 col4 houselabel" for="ncb18" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col1 houselabel" for="ncb19" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col2 houselabel" for="ncb20" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col3 houselabel" for="ncb21" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row3 col4 houselabel" for="ncb22" title="Tap to build"><i></i><i></i><i></i><i></i><i></i></label> | |
| <label class="row4 col1 houselabel" for="ncb23" title="Tap to build"><i></i><i></i><i></i><i></i></label> | |
| <label class="row4 col2 houselabel" for="ncb24" title="Tap to build"><i></i><i></i><i></i><i></i></label> | |
| <label class="row4 col3 houselabel" for="ncb25" title="Tap to build"><i></i><i></i><i></i><i></i></label> | |
| <label class="row4 col4 houselabel" for="ncb26" title="Tap to build"><i></i><i></i><i></i><i></i></label> | |
| </house> | |
| <hbtn> | |
| <label class="row1 col1 buttons" for="cb11" title="Tap to build"></label> | |
| <label class="row1 col2 buttons" for="cb12" title="Tap to build"></label> | |
| <label class="row1 col3 buttons" for="cb13" title="Tap to build"></label> | |
| <label class="row1 col4 buttons" for="cb14" title="Tap to build"></label> | |
| <label class="row2 col1 buttons" for="cb15" title="Tap to build"></label> | |
| <label class="row2 col2 buttons" for="cb16" title="Tap to build"></label> | |
| <label class="row2 col3 buttons" for="cb17" title="Tap to build"></label> | |
| <label class="row2 col4 buttons" for="cb18" title="Tap to build"></label> | |
| <label class="row3 col1 buttons" for="cb19" title="Tap to build"></label> | |
| <label class="row3 col2 buttons" for="cb20" title="Tap to build"></label> | |
| <label class="row3 col3 buttons" for="cb21" title="Tap to build"></label> | |
| <label class="row3 col4 buttons" for="cb22" title="Tap to build"></label> | |
| <label class="row4 col1 buttons" for="cb23" title="Tap to build"></label> | |
| <label class="row4 col2 buttons" for="cb24" title="Tap to build"></label> | |
| <label class="row4 col3 buttons" for="cb25" title="Tap to build"></label> | |
| <label class="row4 col4 buttons" for="cb26" title="Tap to build"></label> | |
| </hbtn> | |
| <sbtn> | |
| <label class="row1 col1 buttons" for="cb11s" title="Tap to build"></label> | |
| <label class="row1 col2 buttons" for="cb12s" title="Tap to build"></label> | |
| <label class="row1 col3 buttons" for="cb13s" title="Tap to build"></label> | |
| <label class="row1 col4 buttons" for="cb14s" title="Tap to build"></label> | |
| <label class="row2 col1 buttons" for="cb15s" title="Tap to build"></label> | |
| <label class="row2 col2 buttons" for="cb16s" title="Tap to build"></label> | |
| <label class="row2 col3 buttons" for="cb17s" title="Tap to build"></label> | |
| <label class="row2 col4 buttons" for="cb18s" title="Tap to build"></label> | |
| <label class="row3 col1 buttons" for="cb19s" title="Tap to build"></label> | |
| <label class="row3 col2 buttons" for="cb20s" title="Tap to build"></label> | |
| <label class="row3 col3 buttons" for="cb21s" title="Tap to build"></label> | |
| <label class="row3 col4 buttons" for="cb22s" title="Tap to build"></label> | |
| </sbtn> | |
| <grass></grass> | |
| </div> | |
| </div> | |
| <water><i></i></water> | |
| <div class="lh"> | |
| <lens></lens> | |
| </div> | |
| <text> | |
| <welldone> | |
| <label for="done">✕</label> | |
| <p>NICE ONE!</p> | |
| <p>You built a lighthouse before nightfall!</p> | |
| <p>The ships and islanders are safe!</p> | |
| </welldone> | |
| </text> | |
| <text> | |
| <gameover> | |
| <label for="done">✕</label> | |
| <p>GAME OVER!</p> | |
| <p>I'm afraid I have some very bad news...</p> | |
| <p>A ship has crashed into your beautiful island.</p> | |
| <p>Everybody is dead!</p> | |
| <p>Soz! You should build a lighthouse.</p> | |
| <a href="" title="Try Again">Try Again</a> | |
| </gameover> | |
| </text> | |
| </colour> | |
| <div class="ss"> | |
| <lens></lens> | |
| </div> | |
| <sig><i></i></sig> |
| // 100% CSS. No artificial colours or ingredients. | |
| // First person to screenshot a lighthouse wins! | |
| // Your time starts now... |
| // ## setup | |
| $timer: 400s; | |
| $none: rgba(#fff, 0); | |
| $light: #fcf6a5; | |
| $sun: #ff7700; | |
| $base: #bc2f2f; | |
| $shadow: #4f010e; | |
| $smoke: #252529; | |
| $smoke2: #6f6f7a; | |
| $sky: #608b88; | |
| $stone: #a19372; | |
| $tre1: #683f44; | |
| $tre2: #20112a; | |
| .house.row3:checked, | |
| .shed.row3:checked { | |
| & ~ div { | |
| filter: hue-rotate(-20deg); | |
| } | |
| } | |
| .house.row2:checked, | |
| .shed.row2:checked { | |
| & ~ div { | |
| filter: hue-rotate(-35deg); | |
| } | |
| } | |
| .house.row1:checked, | |
| .shed.row1:checked { | |
| & ~ div { | |
| filter: hue-rotate(-50deg); | |
| } | |
| } | |
| $r1: adjust-hue($base, random(50) + 5); | |
| $r15: adjust-hue($base, random(50) + 10); | |
| $r2: adjust-hue($base, random(50) - 30); | |
| $r3: darken($r2, 20%); | |
| $r4: adjust-hue($base, random(50) + 50); | |
| $r41: adjust-hue($base, random(50) + 51); | |
| $r42: adjust-hue($base, random(50) + 49); | |
| $r43: darken($r42, 10%); | |
| $shadow: rgba($shadow, 0.75); | |
| $ls: rgba($shadow, 0.3); | |
| $ds: rgba($shadow, 0.9); | |
| $dark: darken($r2, 20%); | |
| $background: lighten($base, 42%); | |
| $b1: lighten($base, 4%); | |
| $b2: lighten($r1, 4%); | |
| $b3: lighten($r2, 4%); | |
| $s1: lighten($stone, 4%); | |
| $sd: darken($stone, 10%); | |
| $tre3: lighten($tre1, 10%); | |
| $vls: rgba($tre1, 0.1); | |
| html { | |
| font-size: 0.97vh; | |
| width: 100%; | |
| height: 100%; | |
| background: $background; | |
| overflow: hidden; | |
| } | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba($sky, 0.5), rgba(#fff, 0.75), $none); | |
| box-shadow: inset 0 0 5rem 0 $smoke; | |
| &, | |
| *, | |
| *:before, | |
| *:after { | |
| display: block; | |
| top: 0; | |
| left: 0; | |
| box-sizing: border-box; | |
| position: absolute; | |
| content: ""; | |
| } | |
| } | |
| div, | |
| house, | |
| shed, | |
| hbtn, | |
| sbtn { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| margin: auto; | |
| width: 50rem; | |
| height: 50rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-content: flex-start; | |
| label { | |
| width: calc(50rem / 4); | |
| height: calc(50rem / 4); | |
| position: relative; | |
| border: none; | |
| background: none; | |
| padding: 0; | |
| margin: 0; | |
| display: inline; | |
| cursor: pointer; | |
| box-shadow: 0 0 0 2rem $none; | |
| *, | |
| *:before, | |
| *:after { | |
| transform: translate3d(0, 0, 0); | |
| z-index: 1; | |
| left: 0; | |
| top: 0; | |
| background: none; | |
| border: none; | |
| box-shadow: none; | |
| pointer-events: none; | |
| } | |
| & > i:nth-of-type(1) { | |
| &:before, | |
| &:after { | |
| filter: blur(0.5rem); | |
| border: 1rem solid rgba($smoke2, 0.75); | |
| width: 5rem; | |
| height: 5rem; | |
| background: $smoke2; | |
| opacity: 0; | |
| border-radius: 50%; | |
| box-shadow: 2rem -1.5rem 0 1rem rgba($smoke2, 0.75), | |
| // | |
| 3rem -2rem 0 1.5rem rgba($smoke2, 0.5); | |
| } | |
| } | |
| } | |
| } | |
| colour { | |
| width: 100%; | |
| height: 100%; | |
| input, | |
| br { | |
| position: relative; | |
| display: inline-block; | |
| opacity: 0.2; | |
| top: 1rem; | |
| left: 1rem; | |
| transform: scale(0.75); | |
| margin: -0.2rem; | |
| @media (max-width: 900px) { | |
| display: none; | |
| } | |
| } | |
| input:checked { | |
| opacity: 1; | |
| } | |
| br { | |
| display: block; | |
| } | |
| } | |
| input { | |
| display: none; | |
| } | |
| div.main { | |
| -webkit-box-reflect: below 4rem; | |
| } | |
| div.ss { | |
| pointer-events: none; | |
| } | |
| sbtn { | |
| height: calc(50rem - (50rem / 4)); | |
| bottom: auto; | |
| label { | |
| border: solid 1px rgba(#747474, 0.1); | |
| &:nth-of-type(1) { | |
| border-radius: 3rem 0 0 0; | |
| } | |
| &:nth-of-type(4) { | |
| border-radius: 0 3rem 0 0; | |
| } | |
| &:hover { | |
| border-color: #555; | |
| } | |
| } | |
| } | |
| hbtn label:nth-of-type(n + 12) { | |
| border: solid 1px rgba(#747474, 0.1); | |
| &:hover { | |
| border-color: #555; | |
| } | |
| } | |
| @keyframes smoke { | |
| 0% { | |
| transform: scale(0.2) translate3d(0, 0, 0) rotate(-15deg); | |
| opacity: 0.075; | |
| } | |
| 50% { | |
| transform: scale(1) translate3d(2rem, -4rem, 0) rotate(0); | |
| opacity: 0.15; | |
| } | |
| 100% { | |
| transform: scale(2) translate3d(5rem, -5rem, 0) rotate(10deg); | |
| opacity: 0; | |
| } | |
| } | |
| //pretty | |
| island { | |
| position: absolute; | |
| top: 76rem; | |
| top: 49.25rem; | |
| left: -50%; | |
| right: -50%; | |
| margin: auto; | |
| width: 80rem; | |
| height: 5rem; | |
| background: $r42; | |
| border-radius: 55% 55% 45% 45%; | |
| } | |
| grass { | |
| position: absolute; | |
| z-index: 500; | |
| top: 76rem; | |
| top: 49.25rem; | |
| left: -50%; | |
| right: -50%; | |
| margin: auto; | |
| width: 80rem; | |
| height: 5rem; | |
| -webkit-box-reflect: below -5rem; | |
| transform: skewX(0); | |
| &:after, | |
| &:before { | |
| top: 0.75rem; | |
| left: 0.6rem; | |
| z-index: 100; | |
| width: 0.5rem; | |
| height: 1.75rem; | |
| transform: skewY(60deg); | |
| background: $r42; | |
| box-shadow: 1rem -1.6rem 0 $r42, | |
| // | |
| 2.1rem -3.6rem 0 $r42, | |
| // | |
| 2.9rem -4.8rem 0 $r42, | |
| // | |
| 4rem -7rem 0 $r42; | |
| filter: drop-shadow(5rem -8.3rem 0 $r42) // | |
| drop-shadow(10rem -17.3rem 0 $r42) // | |
| drop-shadow(20rem -34.5rem 0 $r42) // | |
| drop-shadow(40rem -69rem 0 $r42); | |
| } | |
| &:before { | |
| transform: skewY(-60deg); | |
| box-shadow: 1rem 1.6rem 0 $r42, | |
| // | |
| 2.1rem 3.6rem 0 $r42, | |
| // | |
| 2.9rem 4.8rem 0 $r42, | |
| // | |
| 4rem 7rem 0 $r42; | |
| filter: drop-shadow(5rem 8.3rem 0 $r42) // | |
| drop-shadow(10rem 17.3rem 0 $r42) // | |
| drop-shadow(20rem 34.5rem 0 $r42) // | |
| drop-shadow(40rem 69rem 0 $r42); | |
| left: 0; | |
| top: 1.5rem; | |
| } | |
| } | |
| @keyframes grass { | |
| 100% { | |
| transform: skewX(5deg); | |
| } | |
| } | |
| input:focus ~ div > div { | |
| animation: thud 0.1s linear; | |
| } | |
| @keyframes thud { | |
| 0% { | |
| transform: translate3d(0, 1rem, 0); | |
| } | |
| 60% { | |
| transform: translate3d(0, -0.5rem, 0); | |
| } | |
| 80% { | |
| transform: translate3d(0, 0.25rem, 0); | |
| } | |
| } | |
| sig { | |
| z-index: 500; | |
| opacity: 0.2; | |
| &, | |
| * { | |
| height: 9.25em; | |
| overflow: hidden; | |
| border-radius: 0.5em; | |
| } | |
| font-size: 0.5rem; | |
| color: #000; | |
| width: 10em; | |
| top: auto; | |
| left: auto; | |
| bottom: 1em; | |
| right: 1em; | |
| transform: skewX(10deg) scaleY(0.45) rotate(2deg); | |
| &:before, | |
| *:before { | |
| width: 5em; | |
| height: 5em; | |
| background: currentColor; | |
| transform: translate3d(-2.5em, 0, 0) rotate(-45deg); | |
| box-shadow: -3em 3em 0 0 currentColor; | |
| border-radius: 0.5em 2em 0.5em 2em; | |
| } | |
| * { | |
| width: 5em; | |
| transform: translate3d(3.75em, 0, 0) scaleY(0.95); | |
| display: block !important; | |
| &:before { | |
| transform: translate3d(-3em, -2em, 0) rotate(-45deg); | |
| box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor; | |
| border-radius: 0.5em; | |
| } | |
| } | |
| } | |
| text { | |
| width: 95%; | |
| max-width: 70rem; | |
| bottom: 25%; | |
| color: lighten($r1, 30%); | |
| right: 0; | |
| margin: auto; | |
| height: 1rem; | |
| font-size: 2.5rem; | |
| text-align: center; | |
| font-family: Telefon, Sans-Serif; | |
| z-index: -1; | |
| transform: scale(0); | |
| font-weight: 100; | |
| letter-spacing: 0.1rem; | |
| opacity: 0; | |
| welldone, | |
| gameover { | |
| box-shadow: 0 0 5rem $sun, inset 0 0 0 0.5rem #fff; | |
| background: rgba($tre2, 0.95); | |
| padding: 5rem; | |
| border-radius: 5rem; | |
| border: 1rem solid $tre2; | |
| } | |
| welldone { | |
| display: none; | |
| } | |
| & * { | |
| position: static; | |
| } | |
| p:nth-of-type(1) { | |
| font-size: 4rem; | |
| } | |
| p:nth-of-type(odd) { | |
| color: $r2; | |
| } | |
| label { | |
| position: absolute; | |
| left: auto; | |
| right: 3rem; | |
| top: 3rem; | |
| color: $r2; | |
| padding: 2rem; | |
| border-radius: 2rem; | |
| box-shadow: 0 0 1rem $none; | |
| cursor: pointer; | |
| transition: box-shadow 0.25s ease-in-out; | |
| box-sizing: border-box; | |
| line-height: 1; | |
| &:hover, | |
| &:focus { | |
| box-shadow: 0 0 0.15rem #fff; | |
| } | |
| } | |
| a { | |
| padding: 0.5rem 1rem; | |
| border-radius: 1rem; | |
| text-decoration: none; | |
| background: $r2; | |
| color: $tre2; | |
| box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2); | |
| transition: all 0.2s ease-in-out; | |
| &:hover, | |
| &:focus { | |
| box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 3rem rgba(#fff, 0.2); | |
| } | |
| } | |
| } | |
| #done:checked ~ text { | |
| transform: scale(0) !important; | |
| transition: all 0.5s ease-in-out; | |
| opacity: 0; | |
| } | |
| // ## sun | |
| colour > *:not(.lh):not(text) { | |
| filter: hue-rotate(0deg) brightness(100%); | |
| animation: set $timer linear infinite; | |
| } | |
| @media screen and (max-device-width: 480px) { | |
| colour > *:not(.lh):not(text) { | |
| animation: none; | |
| } | |
| } | |
| @keyframes set { | |
| 15%, | |
| 85% { | |
| filter: hue-rotate(0deg) brightness(100%); | |
| } | |
| 30%, | |
| 70% { | |
| filter: hue-rotate(-20deg) brightness(10%); | |
| } | |
| 40%, | |
| 60% { | |
| filter: hue-rotate(-40deg) brightness(50%); | |
| } | |
| } | |
| @function stars($a) { | |
| $random2: #f9b9c8; | |
| $value: "#{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2; | |
| @for $i from 2 through $a { | |
| $random2: adjust-hue(#8beffc, random(360)); | |
| $value: "#{$value} , #{random(100 + 100)}vmin #{random(60)}vmin 0 -.#{random(2)}rem "+$random2; | |
| } | |
| @return unquote($value); | |
| } | |
| $stars: stars(50); | |
| stars { | |
| width: 220rem; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| animation: stars $timer linear infinite; | |
| -webkit-box-reflect: below -50rem; | |
| opacity: 0; | |
| z-index: 0; | |
| &:before { | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| box-shadow: $stars; | |
| border-radius: 50%; | |
| content: ""; | |
| position: absolute; | |
| top: 5rem; | |
| left: 5rem; | |
| } | |
| i { | |
| &:before, | |
| &:after { | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| top: 40rem; | |
| left: 40rem; | |
| background: #fff; | |
| border-radius: 50%; | |
| animation: stars 1s linear infinite; | |
| opacity: 0.5; | |
| box-shadow: 0 0 1rem #fff; | |
| } | |
| &:after { | |
| top: 20rem; | |
| left: 180rem; | |
| animation: stars 1s 0.5s linear infinite; | |
| background: #f9b9c8; | |
| } | |
| } | |
| } | |
| sky { | |
| width: 100%; | |
| height: 78.5rem; | |
| overflow: hidden; | |
| -webkit-box-reflect: below 0; | |
| z-index: 0; | |
| &:before, | |
| &:after { | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(#323248 10%, #fbd447, #d8480f); | |
| opacity: 0; | |
| animation: sky $timer linear infinite; | |
| } | |
| &:after { | |
| background: linear-gradient(#19043f, #1a0f6c); | |
| } | |
| } | |
| time { | |
| pointer-events: none; | |
| &, | |
| sun { | |
| width: 170rem; | |
| height: 170rem; | |
| left: -100%; | |
| right: -100%; | |
| top: -100%; | |
| bottom: -170%; | |
| margin: auto; | |
| } | |
| & sun { | |
| bottom: -100%; | |
| transform: rotate(0deg); | |
| z-index: 1; | |
| animation: sun $timer linear infinite; | |
| filter: blur(1rem) brightness(400%); | |
| &:before { | |
| width: 25rem; | |
| height: 25rem; | |
| border-radius: 50%; | |
| background: radial-gradient($r1, $base); | |
| right: 0; | |
| margin: auto; | |
| transform: rotate(0deg); | |
| } | |
| //moon | |
| &:after { | |
| width: 10rem; | |
| height: 10rem; | |
| border-radius: 50%; | |
| box-shadow: inset 0 2rem 0 #5a4e38; | |
| background: rgba(#000, 0.1); | |
| left: 60%; | |
| top: auto; | |
| bottom: 0; | |
| transform: rotate(0deg); | |
| z-index: 1; | |
| } | |
| } | |
| } | |
| @media (max-width: 500px) { | |
| time, | |
| input { | |
| display: none; | |
| } | |
| } | |
| div.ss lens { | |
| top: 20rem; | |
| left: 70rem; | |
| animation: lensflair $timer linear infinite; | |
| width: 60rem; | |
| height: 60rem; | |
| filter: brightness(150%); | |
| transform: rotate(0); | |
| opacity: 0; | |
| &:before { | |
| width: 60rem; | |
| height: 60rem; | |
| border-radius: 50%; | |
| top: 0; | |
| right: -50%; | |
| left: -50%; | |
| margin: auto; | |
| box-shadow: 0 70rem 0 -20rem yellow, | |
| // | |
| 0 50rem 0 -25rem yellow, | |
| // | |
| 0 100rem 0 5rem #f437c5, | |
| // | |
| inset 0 0 3rem $sun; | |
| border: 1rem solid $sun; | |
| } | |
| &:after { | |
| width: 100rem; | |
| height: 100rem; | |
| border-radius: 50%; | |
| top: 140rem; | |
| right: -50%; | |
| left: -50%; | |
| margin: auto; | |
| border: 1rem solid yellow; | |
| box-shadow: 0 0 3rem red, inset 0 0 3rem blue; | |
| } | |
| } | |
| @keyframes lensflair { | |
| 20%, | |
| 30%, | |
| 70%, | |
| 80% { | |
| opacity: 0; | |
| } | |
| 25%, | |
| 75% { | |
| opacity: 0.05; | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes sun { | |
| 20%, | |
| 80% { | |
| filter: blur(1rem) brightness(390%); | |
| } | |
| 27%, | |
| 73% { | |
| filter: blur(1rem) brightness(200%); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes stars { | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes sky { | |
| 20%, | |
| 85% { | |
| filter: brightness(100%); | |
| opacity: 0; | |
| } | |
| 30%, | |
| 70% { | |
| filter: brightness(100%); | |
| opacity: 1; | |
| } | |
| 40%, | |
| 60% { | |
| filter: brightness(20%); | |
| opacity: 1; | |
| } | |
| } | |
| sunset { | |
| width: 150%; | |
| height: 20rem; | |
| left: -25%; | |
| top: 60rem; | |
| background: radial-gradient(farthest-side at 70% 100%, #ff6400, $none); | |
| filter: blur(1rem); | |
| -webkit-box-reflect: below 0; | |
| animation: sunset $timer linear infinite; | |
| opacity: 0; | |
| transform: translate3d(0, 20rem, 0); | |
| &:before { | |
| width: 100rem; | |
| height: 50rem; | |
| left: 55%; | |
| top: -10rem; | |
| border-radius: 50%; | |
| background: radial-gradient(#ff6400, $none); | |
| opacity: 0.1; | |
| } | |
| &:after { | |
| width: 50rem; | |
| height: 25rem; | |
| left: 65%; | |
| top: 5rem; | |
| border-radius: 50%; | |
| background: radial-gradient(#fffd91, $none); | |
| opacity: 0.1; | |
| } | |
| } | |
| @keyframes sunset { | |
| 28%, | |
| 75% { | |
| opacity: 1; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| 20%, | |
| 35%, | |
| 70%, | |
| 80% { | |
| opacity: 0; | |
| transform: translate3d(0, 20rem, 0); | |
| } | |
| } | |
| text:nth-of-type(2) { | |
| animation: gameover $timer linear; | |
| } | |
| @keyframes gameover { | |
| 34.8% { | |
| transform: scale(0); | |
| z-index: 0; | |
| display: block; | |
| opacity: 0; | |
| } | |
| 35%, | |
| 100% { | |
| transform: scale(1); | |
| z-index: 410; | |
| transition: all 0.5s 1.5s ease-in-out; | |
| opacity: 1; | |
| } | |
| } | |
| // ## trees | |
| tree:nth-of-type(1) { | |
| width: 10rem; | |
| height: 60.5rem; | |
| top: -10rem; | |
| transform: skew(-2deg); | |
| border-radius: 0 50% 2rem 0; | |
| box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2; | |
| &:before { | |
| left: 16rem; | |
| width: 10rem; | |
| height: 60.5rem; | |
| box-shadow: -2rem 0 0 $tre2, -3rem 0 0 $tre1, -4rem 0 0 $tre2; | |
| border-radius: 50% 0 0 2rem; | |
| transform: skew(4deg); | |
| } | |
| &:after { | |
| top: -4rem; | |
| width: 10rem; | |
| height: 5rem; | |
| border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%; | |
| background: $r4; | |
| box-shadow: inset -1rem -1rem 1rem $vls, | |
| // | |
| 13rem 0 0 -0.2rem $vls, | |
| // | |
| 9rem 1rem 0 -1rem $vls, | |
| // | |
| -2rem -3rem 0 1rem $vls, | |
| // | |
| 5rem -5rem 0 -0.5rem $vls, | |
| // | |
| 7rem -4rem 0 $vls, | |
| // | |
| 11rem -2rem 0 -0.5rem $vls, | |
| // | |
| // | |
| 12rem 0 0 -0.2rem $r42, | |
| // | |
| 8rem 1rem 0 -1rem $r42, | |
| // | |
| -3rem -3rem 0 1rem $r41, | |
| // | |
| 4rem -5rem 0 -0.5rem $r42, | |
| // | |
| 6rem -4rem 0 $r41, | |
| // | |
| 10rem -2rem 0 -0.5rem $r42; // | |
| } | |
| } | |
| tree:nth-of-type(2) { | |
| width: 10rem; | |
| height: 50.5rem; | |
| top: 0; | |
| left: 25rem; | |
| transform: skew(-3deg); | |
| border-radius: 0 50% 2rem 0; | |
| box-shadow: 0.5rem 0 0 $tre1, 1rem 0 0 $tre3, 3rem 0 0 $tre1, 5rem 0 0 $tre2; | |
| &:before { | |
| left: 16rem; | |
| width: 10rem; | |
| height: 50.5rem; | |
| box-shadow: -1.5rem 0 0 $tre2, -2.5rem 0 0 $tre1, -3rem 0 0 $tre2; | |
| border-radius: 50% 0 0 2rem; | |
| transform: skew(4deg); | |
| } | |
| &:after { | |
| top: -4rem; | |
| left: 17rem; | |
| width: 10rem; | |
| height: 5rem; | |
| border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%; | |
| background: $r4; | |
| box-shadow: inset -1rem -1rem 1rem $vls, | |
| // | |
| -19rem 1rem 0 -0.2rem $vls, | |
| // | |
| -14rem -4rem 0 -1rem $vls, | |
| // | |
| -13rem -1rem 0 1rem $vls, | |
| // | |
| -1rem -4rem 0 -0.5rem $vls, | |
| // | |
| -4rem -1rem 0 $vls, | |
| // | |
| -21rem -2rem 0 -0.5rem $vls, | |
| // | |
| -7rem -5rem 0 1rem $vls, | |
| // | |
| // | |
| -20rem 1rem 0 -0.2rem $r42, | |
| // | |
| -15rem -4rem 0 -1rem $r42, | |
| // | |
| -15rem -1rem 0 1rem $r41, | |
| // | |
| -2rem -4rem 0 -0.5rem $r42, | |
| // | |
| -5rem -1rem 0 $r41, | |
| // | |
| -22rem -2rem 0 -0.5rem $r42, | |
| // | |
| -8rem -5rem 0 1rem $r41; // | |
| } | |
| } | |
| tree i:nth-of-type(1) { | |
| &, | |
| &:before, | |
| &:after { | |
| width: 2.5rem; | |
| height: 0.5rem; | |
| background: lighten($r4, 10%); | |
| border-radius: 0 0 100% 100%; | |
| top: -5rem; | |
| filter: drop-shadow(3rem 1.5rem 0 $r43) drop-shadow(1.5rem 2.5rem 0 $r43); | |
| z-index: 1; | |
| left: -3rem; | |
| opacity: 0.5; | |
| } | |
| &:before { | |
| left: 6rem; | |
| top: -1rem; | |
| filter: drop-shadow(2rem 1.5rem 0 $r43); | |
| } | |
| &:after { | |
| left: 15rem; | |
| top: -1.5rem; | |
| filter: drop-shadow(2.5rem 0.5rem 0 $r43) drop-shadow(1rem 2rem 0 $r43); | |
| } | |
| } | |
| tree:nth-of-type(2) i:nth-of-type(1) { | |
| &:after { | |
| left: 20rem; | |
| } | |
| } | |
| tree i:nth-of-type(2) { | |
| &, | |
| &:before, | |
| &:after { | |
| width: 0.5rem; | |
| height: 0.25rem; | |
| background: $r41; | |
| border-radius: 100% 0 100% 0; | |
| top: -2rem; | |
| } | |
| &:before { | |
| left: 8rem; | |
| top: -1rem; | |
| } | |
| &:after { | |
| left: 20rem; | |
| top: 1.5rem; | |
| } | |
| } | |
| [type="radio"]:focus ~ div > div > tree { | |
| i:nth-of-type(1), | |
| &:after { | |
| animation: shake 0.3s ease-in-out; | |
| } | |
| } | |
| [type="radio"]:focus ~ div > div > tree > i:nth-of-type(2) { | |
| & { | |
| animation: fall 5s ease-in-out; | |
| } | |
| &:before { | |
| animation: fall 10s ease-in-out; | |
| } | |
| &:before { | |
| animation: fall 5s ease-in-out; | |
| } | |
| } | |
| @keyframes shake { | |
| 40% { | |
| transform: translate3d(0, 0.5rem, 0); | |
| } | |
| 60% { | |
| transform: translate3d(0, -0.25rem, 0); | |
| } | |
| 80% { | |
| transform: translate3d(0, 0.15rem, 0); | |
| } | |
| } | |
| @keyframes fall { | |
| 100% { | |
| transform: translate3d(0, 15rem, 0); | |
| opacity: 0; | |
| } | |
| } | |
| // ## water | |
| $w: #040b27; | |
| water { | |
| position: absolute; | |
| top: 78.5rem; | |
| bottom: 0; | |
| left: -100%; | |
| right: -100%; | |
| margin: auto; | |
| width: 100%; | |
| height: 25rem; | |
| background: linear-gradient(rgba($sky, 0.5), $background); | |
| z-index: 99; | |
| overflow: hidden; | |
| box-shadow: inset 0 0 5rem 0 rgba($smoke, 0.5); | |
| &:before, | |
| &:after, | |
| i { | |
| width: 80rem; | |
| height: 3rem; | |
| border-radius: 50%; | |
| opacity: 0.2; | |
| right: 0; | |
| margin: auto; | |
| transform: scaleX(1) scaleY(0); | |
| top: -1.5rem; | |
| border: 0.5rem solid #fff; | |
| box-shadow: 0 0 1rem 0.5rem $w, inset 0 0 1rem 1rem $w, inset 0 0 1rem #fff; | |
| } | |
| &:before { | |
| animation: waves 6s ease-in-out infinite; | |
| } | |
| &:after { | |
| animation: waves 8s 2s ease-in-out infinite; | |
| } | |
| } | |
| input:focus ~ water > i { | |
| animation: waves 3s 0.25s ease-out; | |
| } | |
| @keyframes waves { | |
| 100% { | |
| transform: scaleX(1.5) scaleY(7); | |
| opacity: 0; | |
| } | |
| } | |
| // ## shed | |
| //treehouse | |
| shed > label { | |
| & > i:nth-of-type(5) { | |
| width: 100%; | |
| height: 100%; | |
| //ladder | |
| &:after { | |
| width: 2rem; | |
| border-left: 0.5rem solid $smoke; | |
| border-right: 0.5rem solid $smoke; | |
| background: repeating-linear-gradient( | |
| $none, | |
| $none 1.5rem, | |
| $smoke 1.5rem, | |
| $smoke 2rem | |
| ); | |
| height: 325%; | |
| left: -1.5rem; | |
| transform: rotate(-1deg); | |
| top: 10.5rem; | |
| display: none; | |
| } | |
| //bridge | |
| &:before { | |
| width: 13rem; | |
| height: 3rem; | |
| top: 10.5rem; | |
| left: 12.5rem; | |
| border: 0.5rem dashed $none; | |
| border-bottom-color: $tre1; | |
| box-shadow: 0 0.25rem 0 $tre1; | |
| transform: rotate(-3deg); | |
| border-radius: 50%; | |
| display: none; | |
| } | |
| } | |
| &:nth-of-type(n + 5) > i:nth-of-type(5):after { | |
| height: 225%; | |
| } | |
| &:nth-of-type(n + 9) > i:nth-of-type(5):after { | |
| height: 15rem; | |
| } | |
| &:nth-of-type(even) > i:nth-of-type(5):after { | |
| left: 10rem; | |
| transform: rotate(2deg); | |
| } | |
| } | |
| $row: 1, 2, 3; | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| .hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} { | |
| //back | |
| &:before { | |
| background: repeating-linear-gradient($r1 1rem, $tre1 2.3rem); | |
| width: 90%; | |
| height: 98%; | |
| left: 1.25rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 0.5rem 0 0 $tre2; | |
| } | |
| //roof | |
| &:after { | |
| width: 105%; | |
| height: 5rem; | |
| background: repeating-linear-gradient( | |
| to right, | |
| $tre1 1rem, | |
| $tre2 2.1rem | |
| ); | |
| top: -2rem; | |
| border-bottom: solid 0.5rem $smoke; | |
| box-shadow: 0 1.5rem 0.5rem -1rem $ds; | |
| border-radius: 0.5rem; | |
| left: auto; | |
| right: -1rem; | |
| } | |
| //window | |
| & > i:nth-of-type(4) { | |
| width: 4rem; | |
| height: 4rem; | |
| right: 0; | |
| margin: auto; | |
| background: $ls; | |
| top: 3rem; | |
| border-radius: 0.5rem; | |
| box-shadow: inset 0 0.5rem 1rem $shadow; | |
| transform: scale(0.5); | |
| &:before { | |
| width: 3.4rem; | |
| height: 0.5rem; | |
| background: $smoke; | |
| left: 0.3rem; | |
| top: 0.4rem; | |
| border-radius: 0.25rem; | |
| box-shadow: 0 1.5rem 0 $smoke, | |
| // | |
| 0 | |
| 3rem | |
| 0 | |
| $smoke, | |
| // | |
| 0 | |
| 0.5rem | |
| 0 | |
| #000, | |
| // | |
| 0 | |
| 1rem | |
| 0 | |
| $ds, | |
| // | |
| 0 | |
| 2rem | |
| 0 | |
| $ds, | |
| // | |
| 0 | |
| 2.5rem | |
| 0 | |
| $shadow; // | |
| } | |
| &:after { | |
| width: 0.5rem; | |
| height: 3.4rem; | |
| background: $smoke; | |
| left: 0.3rem; | |
| top: 0.4rem; | |
| border-radius: 0.25rem; | |
| box-shadow: 1.5rem 0 0 $smoke, | |
| // | |
| 3rem | |
| 0 | |
| 0 | |
| $smoke; // | |
| } | |
| } | |
| //door / chimney / fence | |
| & > i:nth-of-type(3) { | |
| //door | |
| width: 4rem; | |
| height: 9rem; | |
| right: 0; | |
| margin: auto; | |
| background: $r1; | |
| top: 3rem; | |
| border-radius: 0.5rem; | |
| box-shadow: inset 0 0.5rem 1rem $shadow; | |
| //chimney | |
| &:after { | |
| left: -4rem; | |
| border: 1rem solid $none; | |
| top: -11rem; | |
| border-bottom-color: $smoke; | |
| transform: rotate(-3deg); | |
| height: 4rem; | |
| box-shadow: 0 3.7rem 0 -0.5rem $smoke; | |
| border-radius: 0 0 1rem 1rem; | |
| } | |
| //fence | |
| &:before { | |
| width: 14.5rem; | |
| height: 4.5rem; | |
| border-top: 0.5rem solid $tre2; | |
| border-bottom: 0.5rem solid $tre2; | |
| top: 5rem; | |
| left: -5rem; | |
| background: repeating-linear-gradient( | |
| to right, | |
| $tre1, | |
| $tre2 0.5rem, | |
| $none 0.5rem, | |
| $none 1.4rem | |
| ); | |
| border-radius: 0.5rem; | |
| } | |
| } | |
| //props | |
| & > i:nth-of-type(2) { | |
| &:before { | |
| width: 1rem; | |
| height: 9rem; | |
| background: $tre2; | |
| top: -7rem; | |
| } | |
| } | |
| &:nth-of-type(odd) > i:nth-of-type(2) { | |
| width: 1rem; | |
| background: $tre2; | |
| height: 3rem; | |
| border-radius: 0.25rem; | |
| top: 18.5rem; | |
| left: 10rem; | |
| transform: rotate(5deg); | |
| &:before { | |
| transform: rotate(-45deg); | |
| left: -3rem; | |
| border-radius: 0 1rem 0 0; | |
| } | |
| &:after { | |
| width: 1rem; | |
| height: 4rem; | |
| transform: rotate(45deg); | |
| background: $tre2; | |
| top: -6.5rem; | |
| left: -2rem; | |
| border-radius: 1rem 0 0 0; | |
| } | |
| } | |
| &:nth-of-type(even) > i:nth-of-type(3) { | |
| //chimney | |
| &:after { | |
| left: 7rem; | |
| transform: rotate(3deg); | |
| } | |
| } | |
| //smoke | |
| &:nth-of-type(even) > i:nth-of-type(1) { | |
| left: 11rem; | |
| } | |
| &:nth-of-type(even) > i:nth-of-type(2) { | |
| &:before { | |
| transform: rotate(45deg); | |
| left: 5rem; | |
| border-radius: 1rem 0 0 0; | |
| top: 11rem; | |
| } | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| &:before, | |
| &:after { | |
| top: -7.5rem; | |
| left: -1rem; | |
| animation: smoke 8s linear infinite; | |
| } | |
| &:before { | |
| animation: smoke 7.25s 3.75s linear infinite; | |
| } | |
| } | |
| //ladder | |
| & > i:nth-of-type(5):after { | |
| display: block; | |
| } | |
| } | |
| //no roof | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > shed > .row#{$i + 1}.col#{$x} { | |
| &:after, | |
| & > i:nth-of-type(3):after, | |
| & > i:nth-of-type(1) { | |
| display: none; | |
| } | |
| } | |
| } | |
| //no fence / door / window | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > shed > .row#{$i - 1}.col#{$x} { | |
| & > i:nth-of-type(3):before, | |
| & > i:nth-of-type(2), | |
| & > i:nth-of-type(5):after { | |
| display: none; | |
| } | |
| & > i:nth-of-type(3) { | |
| height: 0; | |
| } | |
| & > i:nth-of-type(4) { | |
| transform: scale(1); | |
| right: #{random(2)}rem; | |
| left: #{random(2)}rem; | |
| } | |
| } | |
| } | |
| //chimney | |
| .hs.shed.row#{$i}.col#{$x | |
| - | |
| 3}:not(:checked) | |
| ~ .hs.row#{$i}.col#{$x}:checked | |
| ~ .shed.hs.row#{$i}.col#{$x | |
| + 1}:not(:checked) | |
| ~ { | |
| .hs.row#{$i - 2}.col#{$x}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(3) { | |
| //chimney | |
| &:after { | |
| left: 7rem; | |
| transform: rotate(3deg); | |
| } | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: 11rem; | |
| } | |
| } | |
| } | |
| } | |
| //tall back | |
| .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i - 1}.col#{$x}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| &:before { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| } | |
| div > div > shed > .row#{$i - 1}.col#{$x} { | |
| &:before { | |
| height: 12.5rem; | |
| box-shadow: none; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; | |
| } | |
| } | |
| } | |
| //random door | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| .hs.row#{$i}.col#{$x + 1}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(3) { | |
| height: 0; | |
| } | |
| & > i:nth-of-type(4) { | |
| transform: scale(1); | |
| right: #{random(2)}rem; | |
| left: #{random(2)}rem; | |
| } | |
| & > i:nth-of-type(5):after { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| //ladder control | |
| .hs.row#{$i + 2}.col#{$x}:checked ~ { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(5):after { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row2.col3:checked ~ .hs.row1.col2:checked ~ { | |
| div > div > shed > .row1.col2 { | |
| & > i:nth-of-type(5):after { | |
| display: none; | |
| } | |
| } | |
| } | |
| .hs.row#{$i + 1}.col#{$x - 1}:checked ~ { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(5):after { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| .hs.row#{$i - 1}.col#{$x + 1}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(1), | |
| & > i:nth-of-type(3):after { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| //extended roof | |
| .hs.row#{$i}.col#{$x}:checked ~, | |
| .hs.row#{$i}.col#{$x + 1}:checked ~ { | |
| .hs.row#{$i - 1}.col#{$x + 1}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| &:after { | |
| width: 110%; | |
| right: -1.25rem; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //long back | |
| $house: 1, 2, 3; | |
| @each $x in $house { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| .hs.row#{$i}.col#{$x + 1}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| &:before { | |
| width: 110%; | |
| } | |
| } | |
| div > div > shed > .row#{$i}.col#{$x + 1} { | |
| //roof | |
| &:after { | |
| width: 120%; | |
| left: -1.25rem; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ///////////////////////////// | |
| //chimney | |
| $house: 2, 4; | |
| @each $x in $house { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| .hs.shed.row#{$i}.col#{$x + 1}:not(:checked) ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(3) { | |
| //chimney | |
| &:after { | |
| left: 7rem; | |
| transform: rotate(3deg); | |
| } | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: 11rem; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| $house: 2, 3; | |
| @each $x in $house { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| .hs.row#{$i}.col#{$x + 1}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| //chimney // smoke | |
| & > i:nth-of-type(3):after, | |
| & > i:nth-of-type(1) { | |
| display: none; | |
| } | |
| & > i:nth-of-type(3):before { | |
| width: 10.25rem; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| .hs.row#{$i}.col#{$x - 1}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(3) { | |
| //chimney | |
| &:after { | |
| left: 6rem; | |
| transform: rotate(3deg); | |
| } | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: 10rem; | |
| } | |
| & > i:nth-of-type(5):after { | |
| left: -2.5rem; | |
| transform: rotate(-3deg); | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~, | |
| .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 5}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| //chimney // smoke | |
| & > i:nth-of-type(3):after, | |
| & > i:nth-of-type(1) { | |
| display: none; | |
| } | |
| } | |
| } | |
| //ladder | |
| .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x - 3}:checked ~ { | |
| div > div > shed > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(5):after { | |
| left: 10rem; | |
| transform: rotate(2deg); | |
| } | |
| } | |
| } | |
| } | |
| //bridge | |
| .hs.shed.row#{$i}.col1:checked | |
| ~ .hs.shed.row#{$i}.col2:not(:checked) | |
| ~ .hs.shed.row#{$i}.col3:not(:checked) | |
| ~ .hs.shed.row#{$i}.col4:checked | |
| ~ { | |
| div > div > shed > .row#{$i}.col1 { | |
| & > i:nth-of-type(5):before { | |
| display: block; | |
| width: 210%; | |
| } | |
| } | |
| } | |
| .hs.shed.row#{$i}.col1:checked | |
| ~ .hs.shed.row#{$i}.col2:not(:checked) | |
| ~ .hs.shed.row#{$i}.col3:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col1, | |
| .hs.shed.row#{$i}.col2:checked | |
| ~ .hs.shed.row#{$i}.col3:not(:checked) | |
| ~ .hs.shed.row#{$i}.col4:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col2 { | |
| & > i:nth-of-type(5):before { | |
| display: block; | |
| width: 110%; | |
| } | |
| } | |
| // change bridge to rope | |
| .hs.row#{$i | |
| + 1}.col2:checked | |
| ~ .hs.shed.row#{$i}.col1:checked | |
| ~ .hs.shed.row#{$i}.col2:not(:checked) | |
| ~ .hs.shed.row#{$i}.col3:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col1, | |
| .hs.row#{$i | |
| + 1}.col3:checked | |
| ~ .hs.shed.row#{$i}.col2:checked | |
| ~ .hs.shed.row#{$i}.col3:not(:checked) | |
| ~ .hs.shed.row#{$i}.col4:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col2, | |
| .hs.row#{$i | |
| + 1}.col3:checked | |
| ~ .hs.shed.row#{$i}.col1:checked | |
| ~ .hs.shed.row#{$i}.col2:not(:checked) | |
| ~ .hs.shed.row#{$i}.col3:not(:checked) | |
| ~ .hs.shed.row#{$i}.col4:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col1, | |
| .hs.row#{$i | |
| + 1}.col2:checked | |
| ~ .hs.shed.row#{$i}.col1:checked | |
| ~ .hs.shed.row#{$i}.col2:not(:checked) | |
| ~ .hs.shed.row#{$i}.col3:not(:checked) | |
| ~ .hs.shed.row#{$i}.col4:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col1, | |
| .hs.shed.row#{$i | |
| + 1}.col1:checked | |
| ~ .hs.shed.row#{$i}.col1:checked | |
| ~ .hs.shed.row#{$i}.col2:not(:checked) | |
| ~ .hs.shed.row#{$i}.col3:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col1, | |
| .hs.shed.row#{$i | |
| + 1}.col2:checked | |
| ~ .hs.shed.row#{$i}.col2:checked | |
| ~ .hs.shed.row#{$i}.col3:not(:checked) | |
| ~ .hs.shed.row#{$i}.col4:checked | |
| ~ div | |
| > div | |
| > shed | |
| > .row#{$i}.col2 { | |
| & > i:nth-of-type(5):before { | |
| top: 1rem; | |
| border: none; | |
| } | |
| } | |
| } | |
| // ## house | |
| //house | |
| div > div > house > label { | |
| & > i:nth-of-type(5) { | |
| width: 13rem; | |
| height: 3rem; | |
| top: 1rem; | |
| border-bottom-color: $tre1; | |
| box-shadow: 0 0.25rem 0 $tre1; | |
| border-radius: 50%; | |
| left: -0.5rem; | |
| z-index: 1; | |
| display: none; | |
| &:after { | |
| border: 0.5rem solid $none; | |
| border-top: 1rem solid $r1; | |
| top: 2.75rem; | |
| left: 1rem; | |
| transform: rotate(5deg); | |
| z-index: -1 !important; | |
| filter: drop-shadow(2rem 0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1); | |
| } | |
| &:before { | |
| border: 0.5rem solid $none; | |
| border-top: 1rem solid $r4; | |
| top: 3.25rem; | |
| left: 7rem; | |
| transform: rotate(-5deg); | |
| z-index: -1 !important; | |
| filter: drop-shadow(2rem -0.25rem 0 $r2) drop-shadow(2rem 0rem 0 $r1); | |
| } | |
| } | |
| } | |
| $row: 1, 2, 3, 4; | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| //back | |
| &:before { | |
| width: 1.5rem; | |
| height: 1rem; | |
| background: currentColor; | |
| border-radius: 0.25rem; | |
| top: -1.35rem; | |
| left: 3rem; | |
| box-shadow: 2rem 2rem 0 currentColor; | |
| filter: hue-rotate(-10deg) brightness(1.1); | |
| opacity: 0.7; | |
| } | |
| //bricks | |
| &:after { | |
| filter: hue-rotate(-10deg) brightness(1.1); | |
| width: 2rem; | |
| height: 1rem; | |
| background: currentColor; | |
| border-radius: 0.25rem; | |
| top: 0.5rem; | |
| left: -0.15rem; | |
| box-shadow: 0 2rem 0 currentColor, | |
| // | |
| 0 | |
| 4rem | |
| 0 | |
| currentColor, | |
| // | |
| 0 | |
| 6rem | |
| 0 | |
| currentColor, | |
| // | |
| 0 | |
| 8rem | |
| 0 | |
| currentColor, | |
| // | |
| 0 | |
| 10rem | |
| 0 | |
| currentColor, | |
| // | |
| // | |
| 10.75rem | |
| 0 | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 2rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 4rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 6rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 8rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 10rem | |
| 0 | |
| currentColor; | |
| } | |
| //window | |
| & > i:nth-of-type(4) { | |
| //window | |
| width: 5rem; | |
| right: 0; | |
| margin: auto; | |
| top: 3.5rem; | |
| background: $ds; | |
| height: 5rem; | |
| border-radius: 0.3rem; | |
| box-shadow: inset 0 0 0 0.5rem $ls, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 0.5rem | |
| $ds, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 0 | |
| 0.5rem | |
| currentColor, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 1rem | |
| 1rem | |
| $ds, | |
| // | |
| inset | |
| 1rem | |
| 0 | |
| 0 | |
| $r1, | |
| // | |
| inset -1.25rem | |
| 0 | |
| 0 | |
| $r1, | |
| // | |
| inset | |
| 0 -2rem | |
| 0 | |
| #000, | |
| // | |
| inset | |
| 0 -3.5rem | |
| 0 | |
| $tre2; | |
| &:after { | |
| width: 4.5rem; | |
| height: 0.25rem; | |
| left: 0.25rem; | |
| top: 2.4rem; | |
| background: currentColor; | |
| border-radius: 0.0001rem; | |
| box-shadow: inset 0 0 0 0.5rem $ls, | |
| // | |
| 0 | |
| 3rem | |
| 0 | |
| 0.3rem | |
| lighten($r15, 20%), | |
| // | |
| 0 | |
| 3.5rem | |
| 0.35rem | |
| 0.25rem | |
| $ds; | |
| } | |
| &:before { | |
| width: 0.25rem; | |
| height: 4.5rem; | |
| left: 2.4rem; | |
| top: 0.25rem; | |
| background: currentColor; | |
| box-shadow: inset 0 0 0 0.5rem $ls; | |
| } | |
| } | |
| //random window | |
| &.col#{random(4)} > i:nth-of-type(4) { | |
| border-radius: 2.25rem 2.25rem 0.3rem 0.3rem; | |
| } | |
| //roof | |
| & > i:nth-of-type(2) { | |
| border: solid $none 1rem; | |
| border-bottom: solid $r3 4rem; | |
| width: calc(100% + 2.1rem); | |
| left: -1rem; | |
| top: -2.5rem; | |
| box-shadow: 0 0.25rem 0 $tre2, 0 1.5rem 1rem -1rem $shadow; | |
| &:before { | |
| width: 100%; | |
| height: 3rem; | |
| border-radius: 50%; | |
| background: repeating-linear-gradient( | |
| $none, | |
| $none 0.75rem, | |
| rgba($ds, 0.4), | |
| $none 1rem | |
| ); | |
| } | |
| //chimney | |
| &:after { | |
| width: 3rem; | |
| height: 4rem; | |
| border: 0.5rem solid $none; | |
| border-top: 0.5rem solid $base; | |
| top: -2rem; | |
| box-shadow: inset 0 4rem 0 $base, | |
| // | |
| 0 -0.5rem | |
| 0 -0.2rem | |
| $dark, | |
| // | |
| 0 -3rem | |
| 0 -1rem | |
| $smoke; | |
| border-radius: 0.5rem; | |
| left: -0.25rem; | |
| filter: drop-shadow(-0.25rem 2rem 0.5rem rgba(#000, 0.15)); | |
| } | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| &:before, | |
| &:after { | |
| top: -8.5rem; | |
| left: -1rem; | |
| animation: smoke 8s linear infinite; | |
| } | |
| &:before { | |
| animation: smoke 7.25s 3.75s linear infinite; | |
| } | |
| } | |
| &:nth-of-type(even) { | |
| i:nth-of-type(2):after { | |
| left: 9.5rem; | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: 10rem; | |
| } | |
| } | |
| } | |
| //no roof | |
| div > div > house > .row#{$i + 1}.col#{$x} { | |
| i:nth-of-type(2), | |
| i:nth-of-type(1) { | |
| display: none; | |
| } | |
| } | |
| } | |
| //shedhouse | |
| .hs.house.row#{$i | |
| + 1}.col#{$x}:checked | |
| ~ .hs.shed.row#{$i}.col#{$x}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| border-bottom: 0.25rem dashed $base; | |
| } | |
| div > div > house > .row#{$i + 1}.col#{$x} { | |
| &:before { | |
| background: $r1; | |
| } | |
| } | |
| } | |
| .hs.shed.row#{$i | |
| + 1}.col#{$x}:checked | |
| ~ .hs.house.row#{$i}.col#{$x}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| border-bottom: 0.25rem dashed $r1; | |
| } | |
| div > div > house > .row#{$i + 1}.col#{$x} { | |
| &:before { | |
| background: $base; | |
| } | |
| } | |
| } | |
| //chimney | |
| .hs.house.row#{$i}.col#{$x | |
| - | |
| 3}:not(:checked) | |
| ~ .hs.house.row#{$i}.col#{$x}:checked | |
| ~ .hs.house.row#{$i}.col#{$x | |
| + 1}:not(:checked) | |
| ~ .hs.house.row#{$i | |
| - | |
| 2}.col#{$x}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(2):after { | |
| //chimney | |
| left: 9.5rem; | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: 11rem; | |
| } | |
| } | |
| } | |
| //center chimney | |
| .hs.row#{$i | |
| - | |
| 1}.col#{$x | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$i | |
| - | |
| 1}.col#{$x}:not(:checked) | |
| ~, | |
| .hs.house.row#{$i | |
| - | |
| 1}.col#{$x}:not(:checked) | |
| ~ .hs.house.row#{$i | |
| - | |
| 2}.col#{$x}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(2):after { | |
| //chimney | |
| left: 4.75rem; | |
| height: 3rem; | |
| box-shadow: inset 0 6rem 0 $base, | |
| // | |
| 0 -0.5rem | |
| 0 -0.2rem | |
| $dark, | |
| // | |
| 0 -2.25rem | |
| 0 -1rem | |
| $smoke; | |
| border-radius: 0 0 1rem 1rem; | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: 5rem; | |
| } | |
| } | |
| } | |
| //small roof | |
| .hs.row#{$i}.col#{$x | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$i}.col#{$x}:checked | |
| ~ .hs.house.row#{$i | |
| - | |
| 1}.col#{$x | |
| - | |
| 1}:not(:checked) | |
| ~ .hs.shed.row#{$i | |
| - | |
| 1}.col#{$x | |
| - | |
| 1}:not(:checked) | |
| ~ .hs.row#{$i | |
| - | |
| 1}.col#{$x}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| i:nth-of-type(2) { | |
| display: block; | |
| left: -42%; | |
| width: 50%; | |
| } | |
| i:nth-of-type(1), | |
| i:nth-of-type(2):after { | |
| display: none; | |
| } | |
| } | |
| } | |
| // no chimney | |
| .row#{$i}.col2:checked ~ .row#{$i}.col3:checked ~ { | |
| div > div > house > .row#{$i}.col2 { | |
| i:nth-of-type(1), | |
| i:nth-of-type(2):after { | |
| display: none; | |
| } | |
| } | |
| div > div > house > .row#{$i}.col3 { | |
| & > i:nth-of-type(2):after { | |
| //chimney | |
| left: -1.5rem; | |
| } | |
| //smoke | |
| & > i:nth-of-type(1) { | |
| left: -1rem; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ///////////////////////////// | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| //bunting | |
| .hs.row#{$i}.col#{$x}:checked | |
| ~ .hs.house.row#{$i}.col#{$x | |
| + 1}:not(:checked) | |
| ~ .hs.row#{$i}.col#{$x | |
| + 2}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x + 1} { | |
| & > i:nth-of-type(5) { | |
| display: block; | |
| width: 105%; | |
| } | |
| } | |
| } | |
| //house to shed bunting | |
| .hs.row#{$i}.col#{$x}:checked | |
| ~ .hs.house.row#{$i}.col#{$x | |
| + 1}:not(:checked) | |
| ~ .hs.shed.row#{$i}.col#{$x | |
| + 2}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x + 1} { | |
| & > i:nth-of-type(5) { | |
| display: block; | |
| width: 115%; | |
| } | |
| } | |
| } | |
| } | |
| //bunting | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| .hs.row#{$i}.col#{$x}:checked | |
| ~ .hs.house.row#{$i}.col#{$x | |
| + 1}:not(:checked) | |
| ~ .hs.house.row#{$i}.col#{$x | |
| + 2}:not(:checked) | |
| ~ .hs.row#{$i}.col#{$x | |
| + 3}:checked | |
| ~ { | |
| div > div > house > .row#{$i}.col#{$x + 1} { | |
| & > i:nth-of-type(5) { | |
| display: block; | |
| width: 205%; | |
| &:after { | |
| border: 0.5rem solid $none; | |
| border-top: 1rem solid $r1; | |
| top: 2.75rem; | |
| left: 3.5rem; | |
| transform: rotate(4deg); | |
| z-index: -1 !important; | |
| filter: drop-shadow(2.5rem 0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1); | |
| } | |
| &:before { | |
| border: 0.5rem solid $none; | |
| border-top: 1rem solid $r4; | |
| top: 3.25rem; | |
| left: 13.5rem; | |
| transform: rotate(-4deg); | |
| z-index: -1 !important; | |
| filter: drop-shadow(2.5rem -0.1rem 0 $r2) drop-shadow(5rem 0 0 $r1); | |
| } | |
| } | |
| } | |
| } | |
| //bricks | |
| .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| //bricks | |
| &:after { | |
| box-shadow: 0 2rem 0 currentColor, | |
| // | |
| 0 | |
| 4rem | |
| 0 | |
| currentColor, | |
| // | |
| 0 | |
| 6rem | |
| 0 | |
| currentColor, | |
| // | |
| 0 | |
| 8rem | |
| 0 | |
| currentColor, | |
| // | |
| 0 | |
| 10rem | |
| 0 | |
| currentColor; | |
| } | |
| } | |
| } | |
| //fixed | |
| .hs.row#{$i}.col#{$x - 1}:checked ~ { | |
| .hs.row#{$i}.col#{$x}:checked ~ .hs.row#{$i}.col#{$x + 1}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| //bricks | |
| &:after { | |
| box-shadow: -2rem #{random(3) + 3}rem 0 rgba($b1, 0.5), | |
| // | |
| 0 | |
| #{random(3) + | |
| 5}rem | |
| 0 | |
| currentColor; | |
| } | |
| } | |
| } | |
| } | |
| //bricks | |
| .hs.row#{$i}.col#{$x - 1}:checked ~ { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| &:after { | |
| box-shadow: -2rem 3rem 0 rgba($b1, 0.5), | |
| // | |
| 0 | |
| 5rem | |
| 0 | |
| currentColor, | |
| // | |
| // | |
| 10.75rem | |
| 0 | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 2rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 4rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 6rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 8rem | |
| 0 | |
| currentColor, | |
| // | |
| 10.75rem | |
| 10rem | |
| 0 | |
| currentColor; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| $row: 1, 2, 3; | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| //prop | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| border-bottom: 0.75rem solid $tre2; | |
| & > i:nth-of-type(3) { | |
| //prop | |
| width: 2rem; | |
| height: 325%; | |
| border-left: 0.75rem solid $tre2; | |
| border-right: 0.75rem solid $tre2; | |
| top: 12rem; | |
| background: repeating-linear-gradient( | |
| $none, | |
| $none 4rem, | |
| $tre2, | |
| $tre2 4.5rem | |
| ); | |
| z-index: -200; | |
| &:before { | |
| width: 12rem; | |
| height: 12rem; | |
| border: 1.15rem dashed $none; | |
| border-bottom-color: $tre2; | |
| box-shadow: 0 0.75rem 0 $tre2, inset 0 -0.75rem 0 $tre2; | |
| top: 0.5rem; | |
| border-radius: 5rem; | |
| left: -0.5rem; | |
| transform: scaleY(-1); | |
| } | |
| &:after { | |
| width: 2rem; | |
| height: 100%; | |
| border-left: 0.75rem solid $tre2; | |
| border-right: 0.75rem solid $tre2; | |
| left: 9.8rem; | |
| background: repeating-linear-gradient( | |
| $none, | |
| $none 4rem, | |
| $tre2, | |
| $tre2 4.5rem | |
| ); | |
| } | |
| } | |
| &:nth-of-type(n + 5) > i:nth-of-type(3) { | |
| height: 225%; | |
| } | |
| &:nth-of-type(n + 9) > i:nth-of-type(3) { | |
| height: 13.5rem; | |
| } | |
| } | |
| } | |
| .hs.row#{$i + 1}.col#{$x}:checked ~ { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| border-bottom: none; | |
| & > i:nth-of-type(3) { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //bottom row | |
| @for $i from 23 through 26 { | |
| [id^="cb#{$i}"]:checked ~ div > div > house > [for="ncb#{$i}"] { | |
| box-shadow: 0 0.5rem 0 $base; | |
| & > i:nth-of-type(3) { | |
| //door | |
| width: 4rem; | |
| height: 9rem; | |
| right: 0; | |
| margin: auto; | |
| top: 3.5rem; | |
| border-radius: 0.5rem; | |
| //bushes | |
| &:before { | |
| width: 7rem; | |
| height: 4rem; | |
| left: -8em; | |
| top: 6rem; | |
| border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem; | |
| background: $r4; | |
| box-shadow: 3rem 1rem 0 -1rem $r41, | |
| // | |
| 14rem | |
| 0.5rem | |
| 0 -0.5rem | |
| $r42, | |
| // | |
| 10rem | |
| 1rem | |
| 0 -1.25rem | |
| $r4; | |
| } | |
| //flowers | |
| &:after { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| background: #fff; | |
| border-radius: 50%; | |
| left: -5rem; | |
| top: 7rem; | |
| box-shadow: 2rem 0.5rem 0 -0.1rem #fff, | |
| // | |
| 1rem | |
| 1.5rem | |
| 0 -0.05rem | |
| #fff, | |
| // | |
| 15rem | |
| 1.5rem | |
| 0 -0.05rem | |
| #fff, | |
| // | |
| 16rem | |
| 1rem | |
| 0 -0.1rem | |
| #fff; | |
| } | |
| } | |
| //differences | |
| &.col3 > i:nth-of-type(3) { | |
| //bushes | |
| &:before { | |
| height: 3rem; | |
| left: -8.5em; | |
| top: 7rem; | |
| background: $r4; | |
| box-shadow: 3rem 0.75rem 0 -1rem $r41, | |
| // | |
| 14rem | |
| 1rem | |
| 0 | |
| 0.5rem | |
| $r4, | |
| // | |
| 10rem | |
| 0.5rem | |
| 0 -0.5rem | |
| $r42; | |
| } | |
| //flowers | |
| &:after { | |
| left: -7rem; | |
| } | |
| } | |
| &.col2 > i:nth-of-type(3) { | |
| //bushes | |
| &:before { | |
| height: 3.5rem; | |
| width: 6rem; | |
| left: -7em; | |
| top: 6.5rem; | |
| background: $r4; | |
| box-shadow: 3rem 0.75rem 0 -1rem $r41, | |
| // | |
| 13rem | |
| 1rem | |
| 0 | |
| 0.5rem | |
| $r42, | |
| // | |
| 9rem | |
| 0.5rem | |
| 0 -0.5rem | |
| $r41; | |
| } | |
| //flowers | |
| &:after { | |
| left: -7rem; | |
| } | |
| } | |
| &.col1 > i:nth-of-type(3) { | |
| //bushes | |
| &:before { | |
| width: 6rem; | |
| height: 3rem; | |
| left: -6.5em; | |
| top: 7rem; | |
| border-radius: 50% 50% 1rem 1rem / 80% 80% 1rem 1rem; | |
| background: $r41; | |
| box-shadow: 3rem 0.5rem 0 -0.75rem $r4, | |
| // | |
| 9rem | |
| 0.5rem | |
| 0 -0.5rem | |
| $r4, | |
| // | |
| 12rem -0.25rem | |
| 0 | |
| 0.5rem | |
| $r42; | |
| } | |
| //flowers | |
| &:after { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| background: #fff; | |
| border-radius: 50%; | |
| left: -5rem; | |
| top: 7rem; | |
| box-shadow: 2rem 0.5rem 0 -0.1rem #fff, | |
| // | |
| 1rem | |
| 0.75rem | |
| 0 -0.05rem | |
| #fff, | |
| // | |
| 16rem | |
| 1.5rem | |
| 0 -0.05rem | |
| #fff, | |
| // | |
| 15rem | |
| 1rem | |
| 0 -0.1rem | |
| #fff; | |
| } | |
| } | |
| } | |
| #cb#{$i}:checked | |
| ~ #cb#{$i | |
| + 1}:not(:checked) | |
| ~ div | |
| > div | |
| > house | |
| > [for="ncb#{$i}"], | |
| #cb23:checked | |
| ~ #cb24:checked | |
| ~ #cb25:checked | |
| ~ #cb26:checked | |
| ~ div | |
| > div | |
| > house | |
| > [for="ncb24"], | |
| #cb26:checked ~ div > div > house > [for="ncb26"] { | |
| & > i:nth-of-type(3) { | |
| //door | |
| background: radial-gradient( | |
| circle at 80% center, | |
| $r2 0.25rem, | |
| $none 0.25rem | |
| ), | |
| radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $r3; | |
| box-shadow: inset 0 0.5rem 1rem $shadow; | |
| } | |
| &.col#{random(2 + 2)} > i:nth-of-type(3) { | |
| //door | |
| background: radial-gradient( | |
| circle at 80% center, | |
| $r2 0.25rem, | |
| $none 0.25rem | |
| ), | |
| radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), $tre1; | |
| } | |
| &.col#{random(2)} > i:nth-of-type(3) { | |
| //door | |
| background: radial-gradient( | |
| circle at 80% center, | |
| $r2 0.25rem, | |
| $none 0.25rem | |
| ), | |
| radial-gradient(circle at 81% 52%, $shadow 0.25rem, $none 0.4rem), | |
| $smoke; | |
| } | |
| & > i:nth-of-type(4) { | |
| transform: scale(0.5); | |
| //window | |
| box-shadow: inset 0 0 0 0.5rem $ls, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 0.5rem | |
| $ds, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 0 | |
| 0.5rem | |
| $r3, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 1rem | |
| 1rem | |
| $ds, | |
| // | |
| inset | |
| 0 -2rem | |
| 0 | |
| #000, | |
| // | |
| inset | |
| 0 -3.5rem | |
| 0 | |
| $tre2; | |
| &:after { | |
| height: 0.5rem; | |
| top: 2.3rem; | |
| background: $r3; | |
| box-shadow: inset 0 0 0 0.5rem $ls; | |
| } | |
| &:before { | |
| width: 0.5rem; | |
| left: 2.3rem; | |
| background: $r3; | |
| } | |
| } | |
| } | |
| } | |
| //castle | |
| .hs.house.row4.col2:not(:checked) | |
| ~ .hs.row4.col3:checked | |
| ~ .hs.house.row4.col4:not(:checked) | |
| ~ .hs.house.row3.col2:not(:checked) | |
| ~ .hs.row3.col3:checked | |
| ~ .hs.house.row3.col4:not(:checked) | |
| ~ .hs.house.row2.col2:not(:checked) | |
| ~ .hs.row2.col3:checked | |
| ~ .hs.house.row2.col4:not(:checked) | |
| ~ .hs.house.row1.col2:not(:checked) | |
| ~ .hs.row1.col3:checked | |
| ~ .hs.house.row1.col4:not(:checked) | |
| ~ { | |
| div > div > house > .row1.col3, | |
| div > div > house > .row2.col3, | |
| div > div > house > .row3.col3, | |
| div > div > house > .row4.col3 { | |
| background: $stone; | |
| color: $stone; | |
| z-index: 310; | |
| & > i:nth-of-type(4), | |
| & > i:nth-of-type(3) { | |
| border-radius: 50% 50% 0.3rem 0.3rem; | |
| } | |
| & > i:nth-of-type(3) { | |
| height: 10rem; | |
| width: 4.5rem; | |
| top: 2.5rem; | |
| &:before { | |
| top: 8rem; | |
| } | |
| &:after { | |
| top: 8rem; | |
| } | |
| } | |
| & > i:nth-of-type(4) { | |
| &:after { | |
| box-shadow: inset 0 0 0 0.5rem $ls; | |
| } | |
| } | |
| } | |
| div > div > house > .row1.col3 { | |
| & > i:nth-of-type(1) { | |
| display: none; | |
| } | |
| & > i:nth-of-type(2) { | |
| border: 1rem solid $none; | |
| border-left: 3rem solid $r1; | |
| top: -8.5rem; | |
| left: 4.25rem; | |
| box-shadow: none; | |
| &:before { | |
| top: 3.25rem; | |
| left: -8.25rem; | |
| background: $stone; | |
| width: 2.75rem; | |
| height: 5rem; | |
| border-radius: 0.25rem 0.25rem 50% 50%; | |
| box-shadow: 4rem 0 0 $stone, | |
| // | |
| 8rem 0 0 $stone, | |
| // | |
| 12rem 0 0 $stone; | |
| } | |
| &:after { | |
| width: 14.5rem; | |
| height: 3rem; | |
| top: 6.25rem; | |
| border-radius: 0 0 2rem 2rem; | |
| background: $stone; | |
| left: -8.25rem; | |
| filter: none; | |
| border: none; | |
| box-shadow: none; | |
| } | |
| } | |
| & > i:nth-of-type(4) { | |
| &:before { | |
| box-shadow: inset 0 0 0 0.5rem $ls, | |
| // | |
| -2rem -12.5rem 0 $tre2; | |
| } | |
| } | |
| } | |
| } | |
| //lighthouse | |
| .hs.house.row4.col1:not(:checked) | |
| ~ .hs.house.row4.col2:checked | |
| ~ .hs.house.row4.col3:not(:checked) | |
| ~ .hs.house.row3.col1:not(:checked) | |
| ~ .hs.shed.row3.col2:checked | |
| ~ .hs.house.row3.col3:not(:checked) | |
| ~ .hs.house.row2.col1:not(:checked) | |
| ~ .hs.house.row2.col2:checked | |
| ~ .hs.house.row2.col3:not(:checked) | |
| ~ .hs.house.row1.col1:not(:checked) | |
| ~ .hs.shed.row1.col2:checked | |
| ~ .hs.house.row1.col3:not(:checked) | |
| ~ { | |
| div > div > house > .row1.col2, | |
| div > div > house > .row2.col2, | |
| div > div > house > .row3.col2, | |
| div > div > house > .row4.col2 { | |
| z-index: 310; | |
| background: none; | |
| border: none; | |
| //back | |
| &:before, | |
| &:after { | |
| width: 80%; | |
| height: 105%; | |
| background: linear-gradient(to right, $s1, currentColor); | |
| transform: skewX(-2deg); | |
| border-radius: 0.1rem 0.1rem 50% 50% / 50% 50% 0.25rem 0.25rem; | |
| top: 0; | |
| left: -1rem; | |
| box-shadow: none; | |
| filter: none; | |
| opacity: 1; | |
| } | |
| &:after { | |
| left: auto; | |
| right: -1rem; | |
| transform: skewX(2deg); | |
| background: linear-gradient(to right, $none, currentColor, $sd); | |
| } | |
| & > i:nth-of-type(4) { | |
| border-radius: 50%; | |
| } | |
| & > i:nth-of-type(3) { | |
| border-radius: 2rem 2rem 0.5rem 0.5rem; | |
| } | |
| & > i:nth-of-type(4) { | |
| &:after { | |
| box-shadow: inset 0 0 0 0.5rem $ls; | |
| } | |
| } | |
| } | |
| //light | |
| div > div > house > .row1.col2 { | |
| & > i:nth-of-type(1) { | |
| display: none; | |
| } | |
| & > i:nth-of-type(2) { | |
| width: 8rem; | |
| height: 12rem; | |
| border: 0.5rem solid $none; | |
| border-top: 1rem solid $smoke; | |
| border-bottom: 6rem solid $dark; | |
| border-radius: 0.5rem 0.5rem 0 0; | |
| top: -12rem; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| background: repeating-linear-gradient( | |
| to right, | |
| $smoke 0.5rem, | |
| $smoke 1rem, | |
| $none 1rem, | |
| $none 3.25rem | |
| ), | |
| // | |
| repeating-linear-gradient( | |
| 45deg, | |
| $dark, | |
| $dark 0.2rem, | |
| $none 0.5rem, | |
| $none 1rem | |
| ), | |
| // | |
| repeating-linear-gradient( | |
| -45deg, | |
| $dark, | |
| $dark 0.2rem, | |
| $none 0.5rem, | |
| $none 1rem | |
| ); | |
| box-shadow: inset 0 -1rem 0 $smoke; | |
| background-size: cover; | |
| &:before { | |
| border: 3rem solid $none; | |
| width: 6.5rem; | |
| box-shadow: inset 0 3rem 0 $dark; | |
| border-bottom-color: $tre2; | |
| top: -10rem; | |
| right: 0; | |
| margin: auto; | |
| height: 9rem; | |
| border-radius: 0; | |
| background: none; | |
| } | |
| &:after { | |
| width: 12.5rem; | |
| background: repeating-linear-gradient( | |
| to right, | |
| $smoke, | |
| $smoke 0.5rem, | |
| $none 0.5rem, | |
| $none 1.32rem | |
| ); | |
| height: 5rem; | |
| top: 6rem; | |
| border-radius: 0.5rem; | |
| border: none; | |
| border-bottom: 1rem solid $smoke; | |
| border-top: 0.5rem solid $smoke; | |
| left: -10rem; | |
| right: -10rem; | |
| margin: auto; | |
| box-shadow: none; | |
| display: block; | |
| } | |
| } | |
| } | |
| div > div > house > .row3.col2 { | |
| //back | |
| color: $stone; | |
| &:before, | |
| &:after { | |
| left: -0.5rem; | |
| } | |
| &:after { | |
| left: auto; | |
| right: -0.5rem; | |
| } | |
| } | |
| div > div > house > .row2.col2 { | |
| //back | |
| &:before, | |
| &:after { | |
| left: 0; | |
| } | |
| &:after { | |
| left: auto; | |
| right: 0; | |
| } | |
| } | |
| div > div > house > .row1.col2 { | |
| color: $stone; | |
| //back | |
| &:before, | |
| &:after { | |
| left: 0.5rem; | |
| } | |
| &:after { | |
| left: auto; | |
| right: 0.5rem; | |
| } | |
| } | |
| text { | |
| transform: scale(1) !important; | |
| z-index: 410; | |
| transition: all 0.5s 1s ease-in-out; | |
| opacity: 1; | |
| welldone { | |
| display: block; | |
| } | |
| gameover { | |
| display: none; | |
| } | |
| } | |
| } | |
| .hs.row2.col2:checked ~ { | |
| div > div > house > .row2.col2 { | |
| & > i:nth-of-type(4) { | |
| border-radius: 50% !important; | |
| } | |
| & > i:nth-of-type(4) { | |
| &:after { | |
| box-shadow: inset 0 0 0 0.5rem $ls; | |
| } | |
| } | |
| } | |
| } | |
| .hs.house.row4.col2:checked ~ .hs.shed.row3.col2:checked ~ { | |
| div > div > house > .row3.col2 { | |
| & > i:nth-of-type(4) { | |
| border-radius: 50%; | |
| } | |
| & > i:nth-of-type(4) { | |
| &:after { | |
| box-shadow: inset 0 0 0 0.5rem $ls; | |
| } | |
| } | |
| } | |
| } | |
| // ## logic | |
| // | |
| // | |
| // | |
| // | |
| house label, | |
| shed label { | |
| opacity: 0; | |
| & *, | |
| &:after, | |
| &:before { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| @keyframes pop { | |
| 0% { | |
| opacity: 0; | |
| transform: translate3d(0, -12rem, 0); | |
| } | |
| 99% { | |
| opacity: 1; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| @keyframes popup { | |
| 0% { | |
| opacity: 0; | |
| transform: translate3d(0, 12rem, 0); | |
| } | |
| 99% { | |
| opacity: 1; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| } | |
| $row: 1, 2, 3, 4; | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| //shed or house | |
| @each $x in $col { | |
| .shed.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x}, | |
| .house.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} { | |
| opacity: 1; | |
| &:after, | |
| & *:after { | |
| animation: pop 0.1s linear forwards; | |
| } | |
| &:before, | |
| & *:before { | |
| animation: popup 0.1s linear forwards; | |
| } | |
| } | |
| .shed.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} { | |
| & > i:nth-of-type(5) { | |
| display: none !important; | |
| } | |
| } | |
| //right | |
| .house.row#{$i}.col#{$x}:checked | |
| ~ div | |
| > div | |
| > hbtn | |
| > .row#{$i}.col#{$x | |
| - | |
| 1} { | |
| z-index: 100; | |
| } | |
| //left | |
| .house.row#{$i}.col#{$x}:checked | |
| ~ div | |
| > div | |
| > hbtn | |
| > .row#{$i}.col#{$x | |
| + 1} { | |
| z-index: 100; | |
| } | |
| //down | |
| .house.row#{$i}.col#{$x}:checked | |
| ~ div | |
| > div | |
| > hbtn | |
| > .row#{$i | |
| + 1}.col#{$x} { | |
| z-index: 100; | |
| } | |
| //up | |
| .house.row#{$i}.col#{$x}:checked | |
| ~ div | |
| > div | |
| > hbtn | |
| > .row#{$i | |
| - | |
| 1}.col#{$x} { | |
| z-index: 100; | |
| } | |
| } | |
| } | |
| $row: 1, 2, 3, 4; | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| .hs.row#{$i}.col#{$x}:checked ~ div > div > shed > .row#{$i}.col#{$x} { | |
| z-index: 300; | |
| } | |
| .hs.row#{$i}.col#{$x}:checked ~ div > div > house > .row#{$i}.col#{$x} { | |
| background: $base; | |
| z-index: 300; | |
| color: $base; | |
| } | |
| .hs.shed.row#{$i}.col#{$x}:checked | |
| ~ div | |
| > div | |
| > house | |
| > .row#{$i}.col#{$x} { | |
| background: $r1; | |
| color: $r1; | |
| } | |
| } | |
| } | |
| $col: 1, 2, 3, 4; | |
| @each $c in $col { | |
| $row: 1, 2, 3; | |
| @each $r in $row { | |
| $hs: ( | |
| 0: "shed", | |
| 1: "house" | |
| ); | |
| @each $y, $z in $hs { | |
| //down fix | |
| .house.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //sh | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| //..s | |
| //.ssh | |
| //..s | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| //.s | |
| //sssh | |
| //.s | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| //s | |
| //sssh | |
| //s | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 2}:checked ~ { | |
| //s | |
| //s | |
| //ssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r - 2}.col#{$c - 3}:checked ~ { | |
| //ss | |
| //s | |
| //sssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ { | |
| //sss | |
| //s | |
| //sssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //ssss | |
| //s | |
| //sssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r - 2}.col#{$c - 2}:checked ~ { | |
| //sss | |
| //.s | |
| //.ssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //.sss | |
| //.s | |
| //.ssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| //..ss | |
| //..s | |
| //..sh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //sss | |
| //s.s | |
| //..sh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //sss | |
| //s.s | |
| //s.sh | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| //..sh | |
| //..s | |
| //..s | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //.ssh | |
| //.s. | |
| //.s. | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //sssh | |
| //s | |
| //s | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r + 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //sssh | |
| //s | |
| //ss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //sssh | |
| //s | |
| //sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //sssh | |
| //s | |
| //ssss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r + 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //.ssh | |
| //.s | |
| //sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //.ssh | |
| //.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r + 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //..sh | |
| //..s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //..sh | |
| //..s | |
| //sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //..sh | |
| //s.s | |
| //sss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //s.sh | |
| //s.s | |
| //sss | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| //..sh | |
| //.ss | |
| //ss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r | |
| + 1}.col#{$c}:checked | |
| ~ { | |
| //s | |
| //s.sh | |
| //sss | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 3}:checked ~ { | |
| //ss | |
| //s.sh | |
| //sss | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c - 1}:checked ~ { | |
| //.ss | |
| //..sh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r - 2}.col#{$c - 2}:checked ~ { | |
| //ss | |
| //.ss | |
| //..sh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r - 3}.col#{$c - 2}:checked ~ { | |
| //ss | |
| //.ss | |
| //..ss | |
| //...h | |
| div > div > #{$z} > .row#{$r - 3}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r - 3}.col#{$c + 2}:checked ~ { | |
| //..ss | |
| //sss | |
| //s | |
| //h | |
| div > div > #{$z} > .row#{$r - 3}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 3}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //s | |
| //sss | |
| //s.sh | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 3}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| //s | |
| //sss | |
| //s.ss | |
| //...h | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 3}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //sss | |
| //s.sh | |
| //S | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| //sss | |
| //s.sh | |
| //ss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| //sss | |
| //s.s | |
| //s.h | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| //sss | |
| //s.h | |
| //s | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| //ssss | |
| //s..h | |
| //s | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ { | |
| .hs.row#{$r}.col#{$c - 3}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| //ssss | |
| //s..h | |
| //sss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .house.row#{$r}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| //ssss | |
| //s..s | |
| //ssh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c - 1}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| //ssss | |
| //s | |
| //sh | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| //ssss | |
| //s..s | |
| //sh.s | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //sss | |
| //h.ss | |
| //..s | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //ssss | |
| //h.ss | |
| //...s | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //ssss | |
| //h..s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //sss | |
| //h.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| //hs | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //.sss | |
| //hs | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //...s | |
| //hs.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //.sss | |
| //hs.s | |
| //...s | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| //..ss | |
| //hs.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //.sss | |
| //hs.s | |
| //..ss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //ssss | |
| //s..s | |
| //h.ss | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //sss | |
| //s.s | |
| //h.ss | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //.sss | |
| //ss.s | |
| //h.ss | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c - 2}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| //sss | |
| //s.h | |
| //ss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| //..sh | |
| //sss | |
| //.s. | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .house.row#{$r}.col#{$c}:checked ~ { | |
| //s.sh | |
| //sss | |
| //s.. | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .house.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .house.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h..s | |
| //s..s | |
| //ssss | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h.s. | |
| //s.s. | |
| //sss. | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h.ss | |
| //s..s | |
| //ssss | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 2}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h.ss | |
| //s.s. | |
| //sss. | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h... | |
| //s.ss | |
| //sss. | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h..s | |
| //s.ss | |
| //sss. | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //h... | |
| //ss.. | |
| //.ss. | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .house.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //h... | |
| //ss.. | |
| //.sss | |
| .hs.row#{$r}.col#{$c}:checked ~ .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .house.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //h... | |
| //ss.s | |
| //.sss | |
| .hs.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .house.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //h..s | |
| //ss.s | |
| //.sss | |
| .hs.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .house.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //h.ss | |
| //ss.s | |
| //.sss | |
| .hs.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .house.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //h.ss | |
| //sss | |
| //..ss | |
| //not done yet | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .house.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| //experiment | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| //hs | |
| div > div > #{$z} > .row#{$r}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| //.s | |
| //hss | |
| //.s | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| //..s | |
| //hsss | |
| //..s | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| //...s | |
| //hsss | |
| //...s | |
| .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c + 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| //hs | |
| //.ss | |
| //.s | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c + 1}:checked ~ { | |
| .hs.row#{$r + 1}.col#{$c + 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| //hs | |
| //.s | |
| //sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c + 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| //hs | |
| //.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c + 1}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| //hs | |
| //.s.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r | |
| + 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .house.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| //hs.s | |
| //.s.s | |
| //.sss | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //hss | |
| //..ss | |
| //..s | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c + 2}:checked ~ { | |
| .hs.row#{$r + 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //hss | |
| //..s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c + 2}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| //hss | |
| //..s | |
| //sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //hsss | |
| //...s | |
| //...s | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r + 2}.col#{$c + 3}:checked ~ { | |
| .hs.row#{$r + 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //hsss | |
| //...s | |
| //..ss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //hsss | |
| //...s | |
| //.sss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| + 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| + 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r + 1}.col#{$c + 3}:checked ~ { | |
| .house.row#{$r}.col#{$c}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| //hsss | |
| //...s | |
| //ssss | |
| div > div > #{$z} > .row#{$r + 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //////////////////////////////// | |
| //UP | |
| //x... | |
| //x... | |
| //x... | |
| //x... | |
| .house.row#{$r + 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c} { | |
| opacity: $y; | |
| } | |
| //RIGHT | |
| //xxx. | |
| //x.xx | |
| //xx.x | |
| //...x | |
| .hs.row#{$r}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //xxx. | |
| //x.xx | |
| //xx.x | |
| //...x | |
| .hs.row#{$r}.col#{$c - 3}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.... | |
| //.xxx | |
| //xx.x | |
| //...x | |
| .hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.xxx | |
| //.x.x | |
| //xx.x | |
| //...x | |
| .hs.row#{$r}.col#{$c - 2}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| //RIGHT | |
| //.... | |
| //xxxx | |
| //x..x | |
| //...x | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| //RIGHT | |
| //.... | |
| //.xxx | |
| //.x.x | |
| //...x | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| //RIGHT | |
| //.xxx | |
| //.x.x | |
| //...x | |
| //...x | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.xxx | |
| //.x.x | |
| //.x.x | |
| //...x | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.xxx | |
| //.x.x | |
| //xx.x | |
| //...x | |
| .hs.row#{$r - 2}.col#{$c - 2}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 4} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.xxx | |
| //xx.x | |
| //x..x | |
| //...x | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //xxxx | |
| //x..x | |
| //...x | |
| //...x | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //xxxx | |
| //x..x | |
| //x..x | |
| //...x | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //LEFT | |
| //.... | |
| //.... | |
| //xxxx | |
| //x... | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| //new bit | |
| .hs.row#{$r}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| //silly down | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| //backwards | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 1}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //> | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~, | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.... | |
| //.... | |
| //xxxx | |
| //...x | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c - 1}:checked ~ .hs.row#{$r}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r - 1}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 1}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //^ | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c - 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c - 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //^ | |
| /////// | |
| /////// | |
| /////// | |
| .hs.row#{$r}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c} { | |
| opacity: $y; | |
| } | |
| //weirddown | |
| //.... | |
| //xxx. | |
| //x.xx | |
| //x... | |
| .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ div | |
| > div | |
| > #{$z} | |
| > .row#{$r}.col#{$c | |
| + 3} { | |
| opacity: $y; | |
| } | |
| //wierd down | |
| //xxxx | |
| //x..x | |
| //x.xx | |
| //x... | |
| .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| //wierd down | |
| //xxx. | |
| //x.x. | |
| //x.xx | |
| //x... | |
| .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| } | |
| //LEFT | |
| //.... | |
| //xxxx | |
| //x... | |
| //x... | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r + 1}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| //DOWN | |
| //.... | |
| //xxx. | |
| //x.x. | |
| //x... | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| //DOWN | |
| //.... | |
| //xxxx | |
| //x..x | |
| //x... | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ div | |
| > div | |
| > #{$z} | |
| > .row#{$r}.col#{$c | |
| + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //.... | |
| //xxxx | |
| //...x | |
| //...x | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 2}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c - 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| /////// | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c - 3}, | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| ///////// | |
| .hs.row#{$r - 1}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c} { | |
| opacity: $y; | |
| } | |
| //wierd down | |
| //xxx. | |
| //x.x. | |
| //x.x. | |
| //x... | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 2}, | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 1}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| //wierd down | |
| //xxx. | |
| //x.x. | |
| //x.xx | |
| //x... | |
| .hs.row#{$r}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| //wierd down | |
| //xxxx | |
| //x..x | |
| //x..x | |
| //x... | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c | |
| + 3}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| + 3}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| //LEFT | |
| //xxxx | |
| //x... | |
| //x... | |
| //x... | |
| .hs.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 1} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 1}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| .hs.row#{$r - 2}.col#{$c + 2}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| //DOWN | |
| //xxx. | |
| //x.x. | |
| //x... | |
| //x... | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 2} { | |
| opacity: $y; | |
| } | |
| //DOWN | |
| //xxxx | |
| //x..x | |
| //x... | |
| //x... | |
| .hs.row#{$r - 2}.col#{$c + 3}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c + 3} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //RIGHT | |
| //xxxx | |
| //...x | |
| //...x | |
| //...x | |
| .hs.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 1} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 2} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 2}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c | |
| - | |
| 1}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col#{$c}:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r - 2}.col#{$c - 3} { | |
| opacity: $y; | |
| } | |
| } | |
| //DOWN | |
| //xxxx | |
| //x..x | |
| //x..x | |
| //x... | |
| .hs.row#{$r - 2}.col#{$c}:checked ~ { | |
| div > div > #{$z} > .row#{$r - 1}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| .hs.row#{$r | |
| - | |
| 1}.col#{$c}:checked | |
| ~ .hs.row#{$r | |
| - | |
| 2}.col4:checked | |
| ~ { | |
| div > div > #{$z} > .row#{$r}.col#{$c} { | |
| opacity: $y; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // ## lights | |
| $row: 1, 2, 3, 4; | |
| @each $i in $row { | |
| $col: 1, 2, 3, 4; | |
| @each $x in $col { | |
| .hs.row#{$i}.col#{$x}:checked ~ { | |
| div > div > house > .row#{$i}.col#{$x} { | |
| //window | |
| &.col#{random(4)} > i:nth-of-type(4) { | |
| //window | |
| background: $sun; | |
| box-shadow: inset 0 0 0 0.5rem $ls, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 0.5rem | |
| $ds, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 0 | |
| 0.5rem | |
| $tre2, | |
| // | |
| inset | |
| 0 | |
| 0 | |
| 1rem | |
| 1rem | |
| $ds, | |
| // | |
| inset | |
| 1rem | |
| 0 | |
| 0 | |
| $r1, | |
| // | |
| inset -1.25rem | |
| 0 | |
| 0 | |
| $r1, | |
| // | |
| inset | |
| 0 -2rem | |
| 0 | |
| yellow, | |
| // | |
| inset | |
| 0 -3.5rem | |
| 0 | |
| #ffa200, | |
| // | |
| 0 | |
| 0 | |
| 2rem | |
| yellow; | |
| &:after, | |
| &:before { | |
| background: $tre2; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .lh { | |
| pointer-events: none; | |
| perspective: 30rem; | |
| perspective-origin: 50% -5rem; | |
| transform: translate3d(0, 0, -100rem) scale(0); | |
| opacity: 0; | |
| } | |
| .hs.house.row4.col1:not(:checked) | |
| ~ .hs.house.row4.col2:checked | |
| ~ .hs.house.row4.col3:not(:checked) | |
| ~ .hs.house.row3.col1:not(:checked) | |
| ~ .hs.shed.row3.col2:checked | |
| ~ .hs.house.row3.col3:not(:checked) | |
| ~ .hs.house.row2.col1:not(:checked) | |
| ~ .hs.house.row2.col2:checked | |
| ~ .hs.house.row2.col3:not(:checked) | |
| ~ .hs.house.row1.col1:not(:checked) | |
| ~ .hs.shed.row1.col2:checked | |
| ~ .hs.house.row1.col3:not(:checked) | |
| ~ { | |
| div.lh { | |
| transform: translate3d(0, 0, -100rem) scale(1); | |
| /* animation: lightson $timer linear infinite;*/ | |
| light { | |
| top: -12rem; | |
| left: -6.25rem; | |
| transform: scaleX(3) rotateY(0); | |
| /* animation: light 8s linear infinite;*/ | |
| filter: blur(0.1rem); | |
| opacity: 0.5; | |
| &, | |
| &:before, | |
| &:after { | |
| background: linear-gradient(to right, $none, rgba(#fff466, 0.5), $none); | |
| width: 100%; | |
| height: 5rem; | |
| } | |
| &:before { | |
| transform: rotate(15deg) rotateY(-5deg); | |
| } | |
| &:after { | |
| transform: rotate(-15deg) rotateY(5deg); | |
| } | |
| } | |
| lens { | |
| top: -12rem; | |
| left: -6.25rem; | |
| width: 100%; | |
| height: 5rem; | |
| &:before, | |
| &:after { | |
| height: 5rem; | |
| border-radius: 50%; | |
| right: 0; | |
| margin: auto; | |
| } | |
| &:before { | |
| background: linear-gradient(to right, $none, rgba($light, 0.5), $none); | |
| width: 100%; | |
| transform: scaleX(3) rotateY(0); | |
| opacity: 0.25; | |
| filter: blur(0.1rem); | |
| } | |
| &:after { | |
| width: 5rem; | |
| background: radial-gradient($light, $none); | |
| opacity: 0.75; | |
| box-shadow: 60rem 0 15rem $light, -60rem 0 15rem $light, 0 0 3rem $light, | |
| inset 0 0 0 $light; | |
| } | |
| } | |
| } | |
| } | |
| div.lh { | |
| animation: lightson $timer linear infinite; | |
| light { | |
| animation: light 8s linear infinite; | |
| } | |
| lens { | |
| &:before { | |
| animation: light 8s linear infinite; | |
| } | |
| &:after { | |
| animation: light2 8s ease-in-out infinite; | |
| } | |
| } | |
| } | |
| @keyframes light { | |
| 100% { | |
| transform: scaleX(3) rotateY(-360deg); | |
| } | |
| } | |
| @keyframes lightson { | |
| 20%, | |
| 80% { | |
| opacity: 0; | |
| } | |
| 25%, | |
| 75% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes light2 { | |
| 22%, | |
| 27%, | |
| 72%, | |
| 77% { | |
| box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light, 0 0 3rem $light, | |
| inset 0 0 0 0 $light; | |
| } | |
| 24%, | |
| 74% { | |
| box-shadow: 0rem 0 15rem $light, 0rem 0 15rem $light, | |
| 0 0 5rem 40rem rgba($light, 0.25), inset 0 0 0 2.5rem $light; | |
| } | |
| 50% { | |
| box-shadow: -60rem 0 15rem $light, 60rem 0 15rem $light, 0 0 3rem $light, | |
| inset 0 0 0 0 $light; | |
| } | |
| } | |
| // ## gfx | |
| #graphics { | |
| top: 1rem; | |
| left: auto; | |
| right: 1rem; | |
| font-family: Telefon, Sans-Serif; | |
| font-size: 1.4rem; | |
| z-index: 1000; | |
| letter-spacing: 0.1rem; | |
| color: #fff; | |
| line-height: 1.5; | |
| max-height: 2.5rem; | |
| overflow: hidden; | |
| label { | |
| display: flex; | |
| align-content: center; | |
| justify-content: flex-end; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| border-radius: 1rem; | |
| cursor: pointer; | |
| transition: box-shadow 0.2s ease-in-out; | |
| box-shadow: 0 0 0 1rem $none, inset 0 0 0 0 rgba(#fff, 0.2); | |
| &:not(:nth-of-type(1)):hover { | |
| box-shadow: 0 0 0 0 rgba(#fff, 0.2), inset 0 0 0 2rem rgba(#fff, 0.2); | |
| } | |
| } | |
| * { | |
| position: static; | |
| } | |
| } | |
| #gfxmenu:checked ~ #graphics { | |
| max-height: 10rem; | |
| } | |
| #poor:checked ~ colour > div > div > house > label > i:nth-of-type(1), | |
| #poor:checked ~ colour > div > div > shed > label > i:nth-of-type(1), | |
| #poor:checked ~ colour > div > lens, | |
| #poor:checked ~ colour > water:before, | |
| #poor:checked ~ colour water:after { | |
| display: none; | |
| } | |
| #poor:checked ~ colour > div > div.main { | |
| -webkit-box-reflect: none; | |
| } | |
| #poor:checked ~ sky > time { | |
| opacity: 0; | |
| } | |
| #poor:checked ~ text > welldone, | |
| #poor:checked ~ text > gameover { | |
| box-shadow: none; | |
| } | |
| #good:checked ~ x > [for="good"], | |
| #poor:checked ~ x > [for="poor"] { | |
| box-shadow: 0 0 0 0 rgba(#fff, 0.1), inset 0 0 0 2rem rgba(#fff, 0.1); | |
| &:before { | |
| content: "✓"; | |
| position: static; | |
| } | |
| } | |
| #poor:checked ~ colour > div > div > shed > label, | |
| #poor:checked ~ colour > div > div > house > label { | |
| &:after, | |
| & *:after { | |
| animation: none !important; | |
| } | |
| &:before, | |
| & *:before { | |
| animation: none !important; | |
| } | |
| } | |
| [for="gfxmenu"]:after { | |
| border-bottom: 0.1rem solid #fff; | |
| border-right: 0.1rem solid #fff; | |
| transform: rotate(45deg) scaleY(1); | |
| position: relative; | |
| width: 0.6rem; | |
| height: 0.6rem; | |
| margin-left: 0.4rem; | |
| top: 0.5rem; | |
| transition: all 0.2s ease-in-out; | |
| } | |
| #gfxmenu:checked ~ x > [for="gfxmenu"]:after { | |
| transform: rotate(-45deg) scaleY(-1); | |
| } | |
| script { | |
| display: none; | |
| } |