edit event "CANYE y:0k"
view the event
title
style
Use
CSS
for style:
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P"); * { margin: 0; padding: 0; box-sizing: border-box; } *::-moz-selection { background: #fd5d8d; color: #f1034a; color: #270245; } *::selection { background: #fd5d8d; color: #f1034a; color: #270245; } html, body { width: 100% !important; /* height: 100%; */ } body { max-width: 600px; margin: auto; position: relative; background: #000; padding-bottom: 2em; /* overflow: scroll; */ } p, a, input, textarea, td, th, h1, h2, h3, h4, h5, li { color: #ddd; font-family: "Press Start 2P", cursive; will-change: text-shadow; -webkit-animation: rgbText 1s steps(9) 0s infinite alternate; animation: rgbText 1s steps(9) 0s infinite alternate; } a { color: pink; } body a { display;: block; margin-top: 1em; } p, h1, h2, h3, h4, h5, table, li { margin-top: 1em; } h1, h2, h3, h4, h5 { font-weight: normal; color: white; } input[type=text], input[type=password], input[type=submit], textarea { background: none!important; border: none; } input[type=submit] { color: pink } /* replace radio buttons with characters */ input[type=radio] { appearance: none; webkit-appearance: none; } input[type=radio]::before { content: "-"; } input[type=radio]:checked::before { content: "*"; } th, td { padding: 5px; } /* fancy stuff */ body:before { content: ""; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); z-index: 500; mix-blend-mode: overlay; pointer-events: none; } .noise { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 400; opacity: 0.8; pointer-events: none; } .noise:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("https://ice-creme.de/images/background-noise.png"); pointer-events: none; } .noise-moving { opacity: 1; z-index: 450; } .noise-moving:before { will-change: background-position; -webkit-animation: noise 1s infinite alternate; animation: noise 1s infinite alternate; } .scanlines { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; opacity: 0.6; will-change: opacity; -webkit-animation: opacity 3s linear infinite; animation: opacity 3s linear infinite; } .scanlines:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%); background-size: 100% 10px; will-change: background, background-size; -webkit-animation: scanlines 0.2s linear infinite; animation: scanlines 0.2s linear infinite; } .intro-wrap { pointer-events: none; mix-blend-mode: lighten; position: fixed; top: 0; left: 0; font-family: "Press Start 2P", cursive; color: #fff; font-size: 2rem; width: 100vw; height: 100vh; background: #2b52ff; } .intro-wrap .noise:before { background-size: 200%; } .intro-wrap .play { position: absolute; left: 2rem; top: 2rem; will-change: text-shadow; -webkit-animation: rgbText 2s steps(9) 0s infinite alternate; animation: rgbText 2s steps(9) 0s infinite alternate; } .intro-wrap .play .char { will-change: opacity; -webkit-animation: type 1.2s infinite alternate; animation: type 1.2s infinite alternate; -webkit-animation-delay: calc(60ms * var(--char-index)); animation-delay: calc(60ms * var(--char-index)); } .intro-wrap .time { position: absolute; right: 2rem; top: 2rem; will-change: text-shadow; -webkit-animation: rgbText 1s steps(9) 0s infinite alternate; animation: rgbText 1s steps(9) 0s infinite alternate; } .intro-wrap .recordSpeed { position: absolute; left: 2rem; bottom: 2rem; will-change: text-shadow; -webkit-animation: rgbText 1s steps(9) 0s infinite alternate; animation: rgbText 1s steps(9) 0s infinite alternate; } /* Animations */ @-webkit-keyframes noise { 0%, 100% { background-position: 0 0; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: 20% 25%; } 50% { background-position: -25% 10%; } 60% { background-position: 15% 5%; } 70% { background-position: 0 15%; } 80% { background-position: 25% 35%; } 90% { background-position: -10% 10%; } } @keyframes noise { 0%, 100% { background-position: 0 0; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: 20% 25%; } 50% { background-position: -25% 10%; } 60% { background-position: 15% 5%; } 70% { background-position: 0 15%; } 80% { background-position: 25% 35%; } 90% { background-position: -10% 10%; } } @-webkit-keyframes opacity { 0% { opacity: 0.6; } 20% { opacity: 0.3; } 35% { opacity: 0.5; } 50% { opacity: 0.8; } 60% { opacity: 0.4; } 80% { opacity: 0.7; } 100% { opacity: 0.6; } } @keyframes opacity { 0% { opacity: 0.6; } 20% { opacity: 0.3; } 35% { opacity: 0.5; } 50% { opacity: 0.8; } 60% { opacity: 0.4; } 80% { opacity: 0.7; } 100% { opacity: 0.6; } } @-webkit-keyframes scanlines { from { background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%); background-size: 100% 4px; } to { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%); background-size: 100% 4px; } } @keyframes scanlines { from { background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51%); background-size: 100% 4px; } to { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51%); background-size: 100% 4px; } } @-webkit-keyframes rgbText { 0% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8); } 25% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8); } 45% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8); } 50% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8); } 55% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8); } 90% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8); } 100% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8); } } @keyframes rgbText { 0% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8); } 25% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8); } 45% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8); } 50% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8); } 55% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8); } 90% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8); } 100% { text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8); } } @-webkit-keyframes type { 0%, 19% { opacity: 0; } 20%, 100% { opacity: 1; } } @keyframes type { 0%, 19% { opacity: 0; } 20%, 100% { opacity: 1; } }
description
Use
markdown
for headers, lists, etc:
<div class="intro-wrap"> <div class="scanlines"></div> <div class="noise"></div> <div class="noise noise-moving"></div> </div> # CANYE y:0k are you experiencing errors? do you need a reboot? everything ends here and nothing begins now. love the ghosts that haunt you and embrace the dream you reach out for. your once pristine slate was scratched and etched, smooth it until it catches the light again. please turn up and leave at moments of your choosing. persist what you need from your past, into your future. release all you don't. ## INFO: +1s, +2s, +3s etc - very welcome. Some crash space available - please let a host know if you want to claim a piece of it. Bring your own drinks, snacks etc. Local shops may be available depending on the hour. Near Tufnell Park Tube (Northern Line) ## dress code dress for pasts and futures that are hard-to-have or hard-to-forget a brand new look or a timeless classic, be a back-to-basics bitch or re-up the rags of yesteryear post-clownpocalyptchic or to integrate with the murmurations of the Machine God a dream of a bold and bright tomorrow or a cyberpunk nightmare ## :::: we hope to truly see you. remember that nothing needs to be attended to. and to try turning it off and on again.
password