slothy

((=o д o=))

@slothy

chaotic but lazy

I'm a gamedev who likes to draw and take pictures of my cat

log in
slothy
@slothy
cefqrn
@cefqrn
cefqrn
@cefqrn

looks like the internet's down

play
you died
you died
you died
you died
you died
you died
you died
congrats
you died

source code

cefqrn
@cefqrn

source code for the eggbug game

The source of the post was passed through an html minifier because cohost doesn't like indentation and empty lines

Here's the indented and (somewhat) commented code

<div style="margin:auto;width:25rem;height:10rem;clip-path:border-box;">
  <div style="position:absolute;width:inherit;height:inherit;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;"></div>
  <div style="position:absolute;top:7.5rem;width:inherit;height:2px;background-color:#bfbab5;"></div>

  <div style="position:absolute;">
    <!-- player before start -->
    <div style="position:absolute;left:calc(100% + 2rem);margin-top:7rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>

    
    <details style="position:relative;width:inherit;">
      <summary style="position:absolute;left:calc(100% + 10rem);top:2rem;width:5rem;list-style:none;padding:.5rem;line-height:1;text-align:center;color:#fff9f2;background:#83254f;border-radius:.5rem;cursor:pointer;">play</summary>
      <div style="width:100rem;"></div>

      <!--
        divs like these are jump cooldowns
        their z-index lets them take priority over everything else
        for the length of a jump
        then they move off the screen for 9999s (hopefully less than the length of the game)
      -->
      <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>

      <!-- obstacle sprites -->
      <div style="position:absolute;top:6rem;left:-1rem;">
        <div style="position:absolute;width:26rem;animation:2s linear 1s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 3s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 4s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 6s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 7s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 8s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 10s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
        <div style="position:absolute;width:26rem;animation:2s linear 12s 1 spin;transform:translateX(100%);">
          <div style="width:1rem;height:2rem;background-color:#4a4847"></div>
        </div>
      </div>
      

      <!--
        obstacle jumps
        these appear when you should jump
        and take priority over the extra jumps
      -->
      <div style="position:relative;z-index:1;width:inherit;">
        <div style="position:relative;width:inherit;">
          <!-- just right -->
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 900rem) - 900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:4.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:1000rem;"></div>

            <div style="position:absolute;left:calc(100% - 1000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <!-- too late -->
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 400rem) - 400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:5s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:500rem;"></div>

            <!-- no need to prevent next jump -->
            <div style="position:absolute;left:calc(500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <!-- death screen -->
          <div style="position:absolute;z-index:2;left:calc(max(100%, 500rem) - 500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:5.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 1900rem) - 1900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:8.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:2000rem;"></div>

            <div style="position:absolute;left:calc(100% - 2000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 1400rem) - 1400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:9s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:1500rem;"></div>

            <div style="position:absolute;left:calc(1500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 1500rem) - 1500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:9.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 2900rem) - 2900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:10.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:3000rem;"></div>

            <div style="position:absolute;left:calc(100% - 3000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 2400rem) - 2400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:11s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:2500rem;"></div>

            <div style="position:absolute;left:calc(2500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 2500rem) - 2500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:11.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 3900rem) - 3900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:14.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:4000rem;"></div>

            <div style="position:absolute;left:calc(100% - 4000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 3400rem) - 3400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:15s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:3500rem;"></div>

            <div style="position:absolute;left:calc(3500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 3500rem) - 3500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:15.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 4900rem) - 4900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:16.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:5000rem;"></div>

            <div style="position:absolute;left:calc(100% - 5000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 4400rem) - 4400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:17s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:4500rem;"></div>

            <div style="position:absolute;left:calc(4500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 4500rem) - 4500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:17.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 5900rem) - 5900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:18.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:6000rem;"></div>

            <div style="position:absolute;left:calc(100% - 6000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 5400rem) - 5400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:19s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:5500rem;"></div>

            <div style="position:absolute;left:calc(5500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 5500rem) - 5500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:19.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 6900rem) - 6900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:22.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:7000rem;"></div>

            <div style="position:absolute;left:calc(100% - 7000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 6400rem) - 6400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:23s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:6500rem;"></div>

            <div style="position:absolute;left:calc(6500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 6500rem) - 6500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:23.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>

        <div style="position:relative;width:inherit;">
          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 7900rem) - 7900rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:26.2s steps(2, jump-none) 0s 1 slideupright;"></summary>

            <div style="width:8000rem;"></div>

            <div style="position:absolute;left:calc(100% - 8000rem);">
              <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
                <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
              </div>
              <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
            </div>

            <!-- victory -->
            <div style="position:absolute;left:25rem;width:26rem;height:10rem;animation:2s linear 0s reverse 1 spin;transform:translateX(-25rem);">
              <div style="width:25rem;height:10rem;">
                <div style="margin:auto;font-size:30pt;text-align:center;">
                  congrats
                </div>
              </div>
            </div>
          </details>

          <details style="position:relative;width:inherit;">
            <summary style="position:absolute;left:calc(max(100%, 7400rem) - 7400rem);width:25rem;height:10rem;list-style:none;cursor:pointer;animation:27s steps(2, jump-none) 0s 1 slideupright;"></summary>
            
            <div style="width:7500rem;"></div>

            <div style="position:absolute;left:calc(7500rem - 100% + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
          </details>

          <div style="position:absolute;z-index:2;left:calc(max(100%, 7500rem) - 7500rem);width:25rem;height:10rem;background-color:#fff9f2;border:1px #bfbab5 solid;border-radius:.5rem;animation:27.4s steps(2, jump-none) 0s 1 slideupright;">
            <div style="text-align:center;font-size:30pt;">you died</div>
          </div>
        </div>
      </div>


      <!--
        extra jump storage (for space between obstacles)
      -->
      <div style="position:relative;left:-100%;">
        <!-- initial player -->
        <div style="position:absolute;left:calc(100rem + 2rem);top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
          <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
        </div>

        <details style="position:relative;left:100rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:200rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>

        <details style="position:relative;left:200rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:300rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:1000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:1100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:2000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:2100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>

        <details style="position:relative;left:2100rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:2200rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:3000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:3100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:4000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:4100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:5000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:5100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:6000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:6100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>

        <details style="position:relative;left:6100rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:6200rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>


        <details style="position:relative;left:7000rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:7100rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>

        <details style="position:relative;left:7100rem;">
          <summary style="position:absolute;width:25rem;height:10rem;list-style:none;cursor:pointer;"></summary>

          <div style="width:7200rem;"></div>

          <div style="position:absolute;left:100rem;">
            <div style="position:absolute;left:2rem;top:-2rem;width:1rem;height:5rem;animation:.4s 2 0s alternate ease-out spin;transform:translateY(100%);">
              <div style="margin-top:4rem;height:2rem;width:2rem;background-image:url(https://staging.cohostcdn.org/attachment/c955ad87-0183-4c38-a86d-ffbd43a2d284/eggbugSquare.png);background-size: contain;transform:rotateY(180deg) translate(1rem, -1rem);"></div>
            </div>
            <div style="position:absolute;left:-25rem;width:25rem;height:10rem;z-index:99;animation:9999s steps(2, jump-none) .8s reverse infinite spin;transform:translateX(100%);"></div>
          </div>
        </details>
      </div>
    </details>
  </div>
</div>

edit: changed the z-index of the death screens to prevent clicking past death (thanks to @dukecarge for discovering this)

You must log in to comment.

in reply to @cefqrn's post:

noa
@noa

oh no i bet with some calc() magic and using bounce transitions for their height it would be possible to make flappy bird. oh no. not sure if it would be possible to make lose detection persist but it's absolutely possible to do scores and jumping and falling and all that stuff

i'm scared

gravity would be a little bit wonky but oh no

login to reply

in reply to @cefqrn's post:

cefqrn
@cefqrn

whoops

The z-indexes of the death screens were the same as those of the summaries so the newer summary elements took priority over the death screens

should be fixed

you'll have to create a new category for that speedrun though

login to reply
cefqrn
@cefqrn

I don't mind cohost removing those lines

it's just that if something is surrounded by empty lines and has 4 spaces of indentation it gets put into a code block

login to reply
porglezomp
@porglezomp

Yeah I don’t mean the blank lines, I just mean turning indented stuff into code blocks. it makes tools that generate HTML a lot more annoying. Aaron had to do a lot of whitespace control futzing with the cohoard templates.

login to reply