diff --git a/assets/css/app.scss b/assets/css/app.scss index 26634e8..06fc0da 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -35,7 +35,8 @@ body { margin: 0; font-size: 18px; - background-image: linear-gradient(160deg, $blue, darken($blue, 20)); + background-image: linear-gradient(-60deg, $blue, darken($blue, 30)); + background-attachment: fixed; &.error { diff --git a/assets/css/type.scss b/assets/css/type.scss index ea9d2c5..73dc38c 100644 --- a/assets/css/type.scss +++ b/assets/css/type.scss @@ -25,6 +25,13 @@ $fontName: "GrotaSansRd"; font-weight: normal; } +@font-face { + font-family: Neon; + src: + url("/fonts/Neon.ttf") format("truetype"); + font-weight: normal; +} + body { line-height: 1.4; color: transparentize($white, 0.2); @@ -63,6 +70,39 @@ p { margin-top: 5px; } } + +@keyframes pulsate { + 100% { + /* Larger blur radius */ + text-shadow: + 0 0 4px #fff, + 0 0 11px #fff, + 0 0 19px #fff, + 0 0 40px $teal, + 0 0 80px $teal, + 0 0 90px $teal, + 0 0 100px $teal, + 0 0 150px $teal; + } + 0% { + /* A slightly smaller blur radius */ + text-shadow: + 0 0 3px #fff, + 0 0 8px #fff, + 0 0 17px #fff, + 0 0 35px $teal, + 0 0 70px $teal, + 0 0 76px $teal, + 0 0 90px $teal, + 0 0 130px $teal; + } +} + +.header--80s { + font-family: Neon; + animation: pulsate 0.11s ease-in-out infinite alternate; +} + .intro { font-size: 1.5em; margin-bottom: 1em; diff --git a/lib/pr_web/live/logo_live.ex b/lib/pr_web/live/logo_live.ex index 90657c7..0786ef5 100644 --- a/lib/pr_web/live/logo_live.ex +++ b/lib/pr_web/live/logo_live.ex @@ -18,12 +18,20 @@ defmodule PRWeb.LogoLive do

<.link href={~p"/"} class="logo-link"> <.logo play_state={@play_state} /> - <%= installation_name() %> + <.logo_title name={installation_name()} />

""" end + def logo_title(assigns) do + ~H""" + + <%= @name %> + + """ + end + def logo(%{play_state: %PlaybackState{state: :playing}} = assigns) do ~H""" <.logo_svg playing={true} /> diff --git a/priv/static/assets/app.css b/priv/static/assets/app.css index 052523f..eaf87bc 100644 --- a/priv/static/assets/app.css +++ b/priv/static/assets/app.css @@ -1,4 +1,5 @@ @charset "UTF-8"; + /* This file is for your main application css. */ /* ---------------------------------------------- * Generated by Animista on 2019-9-22 16:23:31 @@ -12,26 +13,34 @@ * ---------------------------------------- */ @keyframes wobble-hor-bottom { - 0%, 100% { + + 0%, + 100% { transform: translateX(0%); transform-origin: 50% 50%; } + 15% { transform: translateX(-30px) rotate(-6deg); } + 30% { transform: translateX(15px) rotate(6deg); } + 45% { transform: translateX(-15px) rotate(-3.6deg); } + 60% { transform: translateX(9px) rotate(2.4deg); } + 75% { transform: translateX(-6px) rotate(-1.2deg); } } + /** * ---------------------------------------- * animation vibrate-1 @@ -41,22 +50,28 @@ 0% { transform: translate(0); } + 20% { transform: translate(-2px, 2px); } + 40% { transform: translate(-2px, -2px); } + 60% { transform: translate(2px, 2px); } + 80% { transform: translate(2px, -2px); } + 100% { transform: translate(0); } } + /** * ---------------------------------------- * animation bounce-in-top @@ -68,36 +83,44 @@ animation-timing-function: ease-in; opacity: 0; } + 38% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } + 55% { transform: translateY(-65px); animation-timing-function: ease-in; } + 72% { transform: translateY(0); animation-timing-function: ease-out; } + 81% { transform: translateY(-28px); animation-timing-function: ease-in; } + 90% { transform: translateY(0); animation-timing-function: ease-out; } + 95% { transform: translateY(-8px); animation-timing-function: ease-in; } + 100% { transform: translateY(0); animation-timing-function: ease-out; } } + /** * ---------------------------------------- * animation swing-in-top-fwd @@ -109,12 +132,14 @@ transform-origin: top; opacity: 0; } + 100% { transform: rotateX(0deg); transform-origin: top; opacity: 1; } } + /** * ---------------------------------------- * animation pulsate-fwd @@ -124,13 +149,16 @@ 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } } + /** * ---------------------------------------- * animation flip-vertical-fwd @@ -140,102 +168,143 @@ 0% { transform: translateZ(0) rotateY(0); } + 100% { transform: translateZ(160px) rotateY(180deg); } } + @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg); } + 30% { transform: translate(3px, 2px) rotate(0deg); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 60% { transform: translate(-3px, 1px) rotate(0deg); } + 70% { transform: translate(3px, 1px) rotate(-1deg); } + 80% { transform: translate(-1px, -1px) rotate(1deg); } + 90% { transform: translate(1px, 2px) rotate(0deg); } + 100% { transform: translate(1px, -2px) rotate(-1deg); } } + @keyframes beat { - 0%, 50%, 100% { + + 0%, + 50%, + 100% { transform: scale(1, 1); } - 30%, 80% { + + 30%, + 80% { transform: scale(0.92, 0.95); } } + @keyframes pulse { - 0%, 50%, 100% { + + 0%, + 50%, + 100% { background: #fee; } - 30%, 80% { + + 30%, + 80% { background: #fff; } } + @keyframes pop { 0% { transform: scale(1); } + 10% { transform: translate(-1px, -2px) rotate(-1deg); } + 20% { transform: translate(-3px, 0px) rotate(1deg) scale(0.92); } + 30% { transform: translate(3px, 2px) rotate(0deg) scale(1.2); } + 40% { transform: translate(1px, -1px) rotate(1deg); } + 50% { transform: translate(-1px, 2px) rotate(-1deg); } + 100% { transform: scale(1); } } + @font-face { font-family: "GrotaBlack"; src: url("/fonts/GrotaSansRd-Bold.woff") format("woff"), url("/fonts/GrotaSansRd-Bold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: bold; } + @font-face { font-family: "Grota"; src: url("/fonts/GrotaSansRd-SemiBold.woff") format("woff"), url("/fonts/GrotaSansRd-SemiBold.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: bold; } + @font-face { font-family: "Grota"; src: url("/fonts/GrotaSansRd-Light.woff") format("woff"), url("/fonts/GrotaSansRd-Light.ttf") format("truetype"); /* Safari, Android, iOS */ font-weight: normal; } + +@font-face { + font-family: Neon; + src: url("/fonts/Neon.ttf") format("truetype"); + font-weight: normal; +} + body { line-height: 1.4; color: rgba(255, 255, 255, 0.8); @@ -258,7 +327,8 @@ h1 { font-family: "GrotaBlack", sans-serif; font-size: 50px; } -h1 + p { + +h1+p { margin-top: 10px; } @@ -273,18 +343,71 @@ h3 { margin: 10px 0 8px; } -h3 + p { +h3+p { margin-top: 5px; } +@keyframes pulsate { + 100% { + /* Larger blur radius */ + text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #32fad7, 0 0 80px #32fad7, 0 0 90px #32fad7, 0 0 100px #32fad7, 0 0 150px #32fad7; + } + + 0% { + /* A slightly smaller blur radius */ + text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 17px #fff, 0 0 35px #32fad7, 0 0 70px #32fad7, 0 0 76px #32fad7, 0 0 90px #32fad7, 0 0 130px #32fad7; + } +} + +.header--80s { + <<<<<<< HEAD font-family: BoogieBoysRegular; + position: relative; + font-size: 1.5em; + bottom: -0.25em; +} + +.header--80s .size { + position: relative; + visibility: hidden; +} + +.header--80s span { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + color: green; +} + +.header--80s span.regular { + font-family: BoogieBoysRegular; + color: #fff; +} + +.header--80s span.extrude { + font-family: BoogieBoysExtrude; + color: #2353f3; +} + +.header--80s span.shadow { + font-family: BoogieBoysShadow; + color: #32fad7; + =======font-family: Neon; + animation: pulsate 0.11s ease-in-out infinite alternate; + >>>>>>>8a1cf87 (80s title) +} + .intro { font-size: 1.5em; margin-bottom: 1em; } -.intro + p { + +.intro+p { margin-top: 0; } -h2 + .intro { + +h2+.intro { margin-top: -10px; } @@ -320,23 +443,29 @@ a:hover .link { letter-spacing: 0.08ex; border-radius: 20px; } + .button:focus { outline: none; } + .button:hover { border-color: #fff; } -.button + .button { + +.button+.button { margin-left: 20px; } -h3 + .button { + +h3+.button { margin-top: 10px; } + .button.loading { background: url("/images/loading.svg") no-repeat 50% 50%; width: 80px; text-indent: 99999px; } + .button--primary { background-color: #fff; color: #2353f3; @@ -345,6 +474,7 @@ h3 + .button { transition: box-shadow 200ms ease-in; box-shadow: 1px 0 0px rgba(0, 0, 0, 0.2); } + .button--primary:hover { box-shadow: 1px 0 20px rgba(0, 0, 0, 0.2); } @@ -356,6 +486,7 @@ h3 + .button { vertical-align: bottom; margin: 0 8px 4px 0; } + .logo-link { color: #fff; letter-spacing: 0.06ex; @@ -366,19 +497,23 @@ h3 + .button { width: 40px; margin: 0 6px 7px 0; } + .logo-link { font-size: 40px; } } + .box { padding: 40px 30px 20px; margin-top: 30px; border-radius: 15px; background: #0a0d36; } + .box .shad { box-shadow: 1px 0 20px rgba(0, 0, 0, 0.2); } + .box h3 { margin-top: 0; } @@ -394,6 +529,7 @@ h3 + .button { text-transform: uppercase; font-size: 14px; } + .volume .label { margin-right: 1ex; } @@ -405,6 +541,7 @@ h3 + .button { align-items: center; padding: 10px 6px; } + .button--vol .inner { flex: 1; background: rgba(255, 255, 255, 0.5); @@ -417,9 +554,11 @@ h3 + .button { overflow: hidden; transition: background-color 200ms ease-out, transform 200ms ease-in; } + .button--vol:hover { cursor: pointer; } + .button--vol:hover .inner { background: #fff; transform: scale(2); @@ -450,6 +589,7 @@ body { grid-template-rows: auto; grid-template-areas: "left" "right"; } + @media (min-width: 800px) { .container { padding: 20px 40px 0; @@ -458,6 +598,7 @@ body { grid-template-areas: "left left right right" "footer footer footer footer"; } } + .container.container--middle { grid-template-areas: "left_ main main right_"; } @@ -470,12 +611,14 @@ body { align-items: flex-start; justify-content: space-between; } + @media (min-width: 800px) { .container--header { padding: 40px 40px 0; } } -.container--header > div:last-child { + +.container--header>div:last-child { flex-grow: 1; } @@ -499,6 +642,7 @@ body { padding: 20px 0; max-width: min(100%, 85vw); } + @media (max-width: 800px) { .col--header { padding: 0; @@ -517,6 +661,7 @@ body { flex-wrap: wrap; gap: 10px; } + .nav ul { display: flex; flex: 1; @@ -525,6 +670,7 @@ body { padding: 0; margin: 0; } + @media (min-width: 500px) { .nav ul { flex: 1; @@ -533,6 +679,7 @@ body { align-items: center; } } + .nav li { padding: 0; margin: 0; @@ -540,6 +687,7 @@ body { margin: 3px 20px 3px 0; white-space: nowrap; } + .nav .button { margin-right: 10px; justify-self: flex-end; @@ -555,10 +703,12 @@ body { display: inline-block; box-shadow: 1px 0 20px rgba(0, 0, 0, 0.2); } + .user__hearts { vertical-align: middle; margin-left: 1ex; } + .user__hearts .heart { animation: 1.5s ease 0s infinite beat; } @@ -570,15 +720,18 @@ body { display: inline-block; box-shadow: 1px 0 20px rgba(0, 0, 0, 0.2); } + .users-container { width: 100%; margin-top: 10px; justify-content: flex-end; display: flex; } + .users--title { padding: 0 1ex; } + .users .profile-image { width: 30px; height: 30px; @@ -587,6 +740,7 @@ body { background: #049077; border: 1px solid #0a0d36; } + .users .profile-image:last-of-type { margin-right: 0; } @@ -638,22 +792,28 @@ body { margin-right: 1ex; font-size: 14px; } + .chip .pie { margin-right: 5px; } -.chip__number, .chip__img { + +.chip__number, +.chip__img { border-radius: 100px; width: 21px; height: 21px; flex: 0 0 21px; margin-right: 5px; } + .chip--light { background: #dfe0e0; } + .chip--pink { background: #ff1d79; } + .chip--grey { background: #5e6062; } @@ -669,72 +829,91 @@ body { transition: box-shadow 200ms ease opacity 200ms ease-in; opacity: 0; } + .track.show { opacity: 1; animation: swing-in-top-fwd 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } + .track h3 { color: #2353f3; } + .track a { color: #2353f3; } + .track a:hover .link { box-shadow: inset 0 -8px 0 0 rgba(255, 29, 121, 0.2); } + .track.is-super-liked { animation: ease-out 1s pop; } + .track.is-liked { animation: ease-out 1s beat 2; } + .track__inner { display: flex; width: 100%; align-items: center; container-type: normal; } + .track--light { background: rgba(255, 255, 255, 0.2); box-shadow: none; color: #fff; } + .track--light .novelty__container { opacity: 0.5; transition: opacity 200ms; } + .track--light h3 { color: #32fad7; } + .track--light:hover { box-shadow: 1px 0 20px rgba(0, 0, 0, 0.4); } + .track--light:hover .novelty__container { opacity: 1; } + .track--dark { color: #fff; background: #0a0d36; } + .track--dark h3 { color: inherit; } + .track:first-child { margin-top: 0; } + .track.playing { box-shadow: 1px 0 30px rgba(0, 0, 0, 0.4); } + .track__details { padding: 20px 0 10px; flex: 1; font-size: 16px; width: 10px; } + .track__details p { margin: 0; padding: 0; } + .track__name { margin-top: 0; font-weight: bold; @@ -744,6 +923,7 @@ body { white-space: nowrap; min-width: 0; } + .track__img__container { position: relative; flex: 0 0 50px; @@ -751,6 +931,7 @@ body { height: 50px; margin: 10px 15px 10px 10px; } + @media (min-width: 500px) { .track__img__container { flex: 0 0 100px; @@ -758,7 +939,9 @@ body { height: 100px; } } -.has-super-liked .track__img__container::after, .has-voted .track__img__container::after { + +.has-super-liked .track__img__container::after, +.has-voted .track__img__container::after { content: ""; position: absolute; z-index: 1; @@ -768,15 +951,18 @@ body { bottom: -3px; right: -4px; } + .has-voted .track__img__container::after { background: url(/images/heart_pink.svg) 50% 50% no-repeat; background-size: 16px 16px; animation: 1.5s ease 0s infinite beat; } + .has-super-liked .track__img__container::after { background: url(/images/fire.svg) 50% 50% no-repeat; background-size: 18px; } + .is-super-liked .track__img__container::before { content: "👑"; font-size: 50px; @@ -787,12 +973,14 @@ body { transform: rotate(-45deg); z-index: 1; } + .track__img { width: 100%; height: 100%; display: block; border-radius: 10px; } + .track__queue { width: 60px; justify-self: flex-end; @@ -805,21 +993,26 @@ body { cursor: pointer; transform: translate(0, 0); } + .track__queue:focus { outline: none; } + .track__queue:hover { transform: translate(4px, 0) scale(1.05); transition-duration: 100ms; } + .track__skipped-link { opacity: 0; transition: opacity 200ms ease; margin-left: 10px; } + .track:hover .track__skipped-link { opacity: 1; } + .track__like { padding: 0; margin: 0; @@ -828,6 +1021,7 @@ body { cursor: pointer; flex-shrink: 0; } + .track__playing { width: 18px; height: 18px; @@ -841,6 +1035,7 @@ body { box-sizing: border-box; padding: 6px 12px 12px; } + .progress__bar { position: absolute; height: 100%; @@ -861,16 +1056,19 @@ body { display: flex; margin-right: 20px; } + .novelty__score { border-radius: 100px; padding: 2px; align-self: center; } + .novelty__title { font-weight: normal; padding-top: 4px; font-size: 10px; } + .novelty__inner { position: relative; z-index: 1; @@ -886,6 +1084,7 @@ body { align-items: center; line-height: 1; } + .novelty__inner p { padding: 0; margin: 0; @@ -893,9 +1092,11 @@ body { user-select: none; cursor: help; } + .novelty__inner .track { color: #ff1d79; } + .novelty__inner .artist { color: #2353f3; } @@ -908,6 +1109,7 @@ body { margin-bottom: 2px; display: inline-block; } + .heart:first-of-type { padding-left: 8px; } @@ -920,11 +1122,13 @@ body { margin-bottom: 2px; display: inline-block; } + .fire:first-of-type { padding-left: 8px; } -.flip__back, .flip__front { +.flip__back, +.flip__front { position: absolute; width: 100px; height: 100px; @@ -932,6 +1136,7 @@ body { left: 0; top: 0; } + .flip__container { border: none; outline: none; @@ -940,9 +1145,11 @@ body { margin: 0; perspective: 600px; } + .flip__container.animate { cursor: pointer; } + .flip__flipper { width: 100px; height: 100px; @@ -951,10 +1158,12 @@ body { transform: translate3d(0, 0, 0); transition: transform 400ms ease-in-out; } + .flip__front { z-index: 2; backface-visibility: hidden; } + .flip__back { z-index: 1; transform-style: preserve-3d; @@ -963,21 +1172,23 @@ body { background-size: 70% 70%; border-radius: 11px; } + .flip__container.animate:hover .flip__flipper { transform: rotateY(180deg) scale(1.1); } + .flip__container.animate:focus-visible .flip__flipper { transition-duration: 100ms; transform: rotateY(180deg); } -.track + h3, -.track + h2 { +.track+h3, +.track+h2 { margin-top: 30px; } -h3 + .track, -h2 + .track { +h3+.track, +h2+.track { margin-top: 10px; } @@ -1003,16 +1214,20 @@ button { border: 2px solid #e4eafe; cursor: pointer; } + .like:hover { animation: 1.5s ease 0s infinite beat; } + .like.super { background-size: 18px; background-image: url(/images/fire.svg); } + .like.super:hover { animation: 0.5s infinite shake; } + .like:hover { border: 2px solid #b4c4fb; } @@ -1036,22 +1251,27 @@ input[type=text] { font-family: inherit; transition: background 200ms ease, box-shadow 200ms ease; } + input[type=text]::placeholder { transition: color 200ms ease; color: rgba(255, 255, 255, 0.5); } + input[type=text]:focus { box-shadow: 1px 0 20px rgba(0, 0, 0, 0.2); background-color: #fff; } + input[type=text]:focus::placeholder { color: rgba(66, 68, 125, 0.5); } + .loading input[type=text] { background-image: url("/images/loading_pink.svg"); background-position: 98% 0; background-repeat: no-repeat; } + .active input[type=text] { background-color: #fff; } @@ -1060,6 +1280,7 @@ input[type=text]:focus::placeholder { margin: 30px 0 0; padding: 0; } + .setup-list li { margin: 0; padding: 0; @@ -1091,6 +1312,7 @@ input[type=text]:focus::placeholder { margin: 30px 0 0; padding: 0; } + .setup-list li { margin: 0; padding: 0; @@ -1121,6 +1343,7 @@ input[type=text]:focus::placeholder { .alert-container { padding: 0 40px 0; } + @media (min-width: 800px) { .alert-container { display: grid; @@ -1137,20 +1360,24 @@ input[type=text]:focus::placeholder { display: flex; flex: 1; } + .alert .title { font-weight: bold; display: block; margin: 0; padding: 0; } + .alert .message { margin: 0; padding: 0; } + .alert .inner { flex: 1; margin-right: 20px; } + .alert .close { color: currentColor; } @@ -1217,21 +1444,26 @@ input[type=text]:focus::placeholder { place-content: center; font-weight: bold; } + .chip .pie { background: #919395; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b))); } + .pie.blue { --c: #2353f3; } + .pie.pink { --c: #ff1d79; } + .pie.teal { --c: #32fad7; } + .pie.tealDark { --c: #049077; } @@ -1276,6 +1508,7 @@ input[type=text]:focus::placeholder { --p: 0; } } + .fire_container { filter: blur(0.02em); -webkit-filter: blur(0.02em); @@ -1294,204 +1527,501 @@ input[type=text]:focus::placeholder { height: 5em; z-index: 10; } + .particle:nth-of-type(1) { - animation-delay: 0.645199067s; + <<<<<<< HEAD animation-delay: 0.645199067s; left: calc((100% - 5em) * 0); } + .particle:nth-of-type(2) { animation-delay: 0.2870944654s; left: calc((100% - 5em) * 0.02); } + .particle:nth-of-type(3) { animation-delay: 0.019304819s; left: calc((100% - 5em) * 0.04); } + .particle:nth-of-type(4) { animation-delay: 0.145596353s; left: calc((100% - 5em) * 0.06); } + .particle:nth-of-type(5) { animation-delay: 0.0036225901s; left: calc((100% - 5em) * 0.08); } + .particle:nth-of-type(6) { animation-delay: 0.8874084889s; left: calc((100% - 5em) * 0.1); } + .particle:nth-of-type(7) { animation-delay: 0.6585552144s; left: calc((100% - 5em) * 0.12); } + .particle:nth-of-type(8) { animation-delay: 0.2420491685s; left: calc((100% - 5em) * 0.14); } + .particle:nth-of-type(9) { animation-delay: 0.2077308283s; left: calc((100% - 5em) * 0.16); } + .particle:nth-of-type(10) { animation-delay: 0.4973972244s; left: calc((100% - 5em) * 0.18); } + .particle:nth-of-type(11) { animation-delay: 0.5529445407s; left: calc((100% - 5em) * 0.2); } + .particle:nth-of-type(12) { animation-delay: 0.0732833235s; left: calc((100% - 5em) * 0.22); } + .particle:nth-of-type(13) { animation-delay: 0.9124946813s; left: calc((100% - 5em) * 0.24); } + .particle:nth-of-type(14) { animation-delay: 0.6938863853s; left: calc((100% - 5em) * 0.26); } + .particle:nth-of-type(15) { animation-delay: 0.1116560009s; left: calc((100% - 5em) * 0.28); } + .particle:nth-of-type(16) { animation-delay: 0.8678880567s; left: calc((100% - 5em) * 0.3); } + .particle:nth-of-type(17) { animation-delay: 0.2210342016s; left: calc((100% - 5em) * 0.32); } + .particle:nth-of-type(18) { animation-delay: 0.1249896554s; left: calc((100% - 5em) * 0.34); } + .particle:nth-of-type(19) { animation-delay: 0.8525997712s; left: calc((100% - 5em) * 0.36); } + .particle:nth-of-type(20) { animation-delay: 0.3491900052s; left: calc((100% - 5em) * 0.38); } + .particle:nth-of-type(21) { animation-delay: 0.5778933797s; left: calc((100% - 5em) * 0.4); } + .particle:nth-of-type(22) { animation-delay: 0.882218054s; left: calc((100% - 5em) * 0.42); } + .particle:nth-of-type(23) { animation-delay: 0.5712439727s; left: calc((100% - 5em) * 0.44); } + .particle:nth-of-type(24) { animation-delay: 0.7242884229s; left: calc((100% - 5em) * 0.46); } + .particle:nth-of-type(25) { animation-delay: 0.4191228372s; left: calc((100% - 5em) * 0.48); } + .particle:nth-of-type(26) { animation-delay: 0.4747025751s; left: calc((100% - 5em) * 0.5); } + .particle:nth-of-type(27) { animation-delay: 0.8315142377s; left: calc((100% - 5em) * 0.52); } + .particle:nth-of-type(28) { animation-delay: 0.917186628s; left: calc((100% - 5em) * 0.54); } + .particle:nth-of-type(29) { animation-delay: 0.6705334965s; left: calc((100% - 5em) * 0.56); } + .particle:nth-of-type(30) { animation-delay: 0.3600116088s; left: calc((100% - 5em) * 0.58); } + .particle:nth-of-type(31) { animation-delay: 0.9737410775s; left: calc((100% - 5em) * 0.6); } + .particle:nth-of-type(32) { animation-delay: 0.0003313787s; left: calc((100% - 5em) * 0.62); } + .particle:nth-of-type(33) { animation-delay: 0.1925150661s; left: calc((100% - 5em) * 0.64); } + .particle:nth-of-type(34) { animation-delay: 0.9372631833s; left: calc((100% - 5em) * 0.66); } + .particle:nth-of-type(35) { animation-delay: 0.6007346237s; left: calc((100% - 5em) * 0.68); } + .particle:nth-of-type(36) { animation-delay: 0.6158588006s; left: calc((100% - 5em) * 0.7); } + .particle:nth-of-type(37) { animation-delay: 0.6665750906s; left: calc((100% - 5em) * 0.72); } + .particle:nth-of-type(38) { animation-delay: 0.7557133878s; left: calc((100% - 5em) * 0.74); } + .particle:nth-of-type(39) { animation-delay: 0.3072312547s; left: calc((100% - 5em) * 0.76); } + .particle:nth-of-type(40) { animation-delay: 0.1169118658s; left: calc((100% - 5em) * 0.78); } + .particle:nth-of-type(41) { animation-delay: 0.0079741195s; left: calc((100% - 5em) * 0.8); } + .particle:nth-of-type(42) { animation-delay: 0.8387323944s; left: calc((100% - 5em) * 0.82); } + .particle:nth-of-type(43) { animation-delay: 0.4180961749s; left: calc((100% - 5em) * 0.84); } + .particle:nth-of-type(44) { animation-delay: 0.0363947687s; left: calc((100% - 5em) * 0.86); } + .particle:nth-of-type(45) { animation-delay: 0.9320148672s; left: calc((100% - 5em) * 0.88); } + .particle:nth-of-type(46) { animation-delay: 0.7563004941s; left: calc((100% - 5em) * 0.9); } + .particle:nth-of-type(47) { animation-delay: 0.0517701388s; left: calc((100% - 5em) * 0.92); } + .particle:nth-of-type(48) { animation-delay: 0.8700217323s; left: calc((100% - 5em) * 0.94); } + .particle:nth-of-type(49) { animation-delay: 0.6789192152s; left: calc((100% - 5em) * 0.96); } + .particle:nth-of-type(50) { animation-delay: 0.1801907356s; + animation-delay: 0.2171608412s; + =======animation-delay: 0.6308356631s; + >>>>>>>8a1cf87 (80s title) left: calc((100% - 5em) * 0); +} + +.particle:nth-of-type(2) { + animation-delay: 0.3886991581s; + left: calc((100% - 5em) * 0.02); +} + +.particle:nth-of-type(3) { + animation-delay: 0.3049153107s; + left: calc((100% - 5em) * 0.04); +} + +.particle:nth-of-type(4) { + animation-delay: 0.0027967937s; + left: calc((100% - 5em) * 0.06); +} + +.particle:nth-of-type(5) { + animation-delay: 0.9957790893s; + left: calc((100% - 5em) * 0.08); +} + +.particle:nth-of-type(6) { + animation-delay: 0.2726268938s; + left: calc((100% - 5em) * 0.1); +} + +.particle:nth-of-type(7) { + animation-delay: 0.3827337561s; + left: calc((100% - 5em) * 0.12); +} + +.particle:nth-of-type(8) { + animation-delay: 0.669316627s; + left: calc((100% - 5em) * 0.14); +} + +.particle:nth-of-type(9) { + animation-delay: 0.8031461826s; + left: calc((100% - 5em) * 0.16); +} + +.particle:nth-of-type(10) { + animation-delay: 0.8831908991s; + left: calc((100% - 5em) * 0.18); +} + +.particle:nth-of-type(11) { + animation-delay: 0.4191250524s; + left: calc((100% - 5em) * 0.2); +} + +.particle:nth-of-type(12) { + animation-delay: 0.9366500035s; + left: calc((100% - 5em) * 0.22); +} + +.particle:nth-of-type(13) { + animation-delay: 0.3131151854s; + left: calc((100% - 5em) * 0.24); +} + +.particle:nth-of-type(14) { + animation-delay: 0.1998527125s; + left: calc((100% - 5em) * 0.26); +} + +.particle:nth-of-type(15) { + animation-delay: 0.1306564857s; + left: calc((100% - 5em) * 0.28); +} + +.particle:nth-of-type(16) { + animation-delay: 0.1693581236s; + left: calc((100% - 5em) * 0.3); +} + +.particle:nth-of-type(17) { + animation-delay: 0.3752682608s; + left: calc((100% - 5em) * 0.32); +} + +.particle:nth-of-type(18) { + animation-delay: 0.16972596s; + left: calc((100% - 5em) * 0.34); +} + +.particle:nth-of-type(19) { + animation-delay: 0.4331908648s; + left: calc((100% - 5em) * 0.36); +} + +.particle:nth-of-type(20) { + animation-delay: 0.327901547s; + left: calc((100% - 5em) * 0.38); +} + +.particle:nth-of-type(21) { + animation-delay: 0.8002151681s; + left: calc((100% - 5em) * 0.4); +} + +.particle:nth-of-type(22) { + animation-delay: 0.8916635526s; + left: calc((100% - 5em) * 0.42); +} + +.particle:nth-of-type(23) { + animation-delay: 0.5512257092s; + left: calc((100% - 5em) * 0.44); +} + +.particle:nth-of-type(24) { + animation-delay: 0.5411899247s; + left: calc((100% - 5em) * 0.46); +} + +.particle:nth-of-type(25) { + animation-delay: 0.8969589956s; + left: calc((100% - 5em) * 0.48); +} + +.particle:nth-of-type(26) { + animation-delay: 0.1327576854s; + left: calc((100% - 5em) * 0.5); +} + +.particle:nth-of-type(27) { + animation-delay: 0.6399954938s; + left: calc((100% - 5em) * 0.52); +} + +.particle:nth-of-type(28) { + animation-delay: 0.0247661888s; + left: calc((100% - 5em) * 0.54); +} + +.particle:nth-of-type(29) { + animation-delay: 0.2745960426s; + left: calc((100% - 5em) * 0.56); +} + +.particle:nth-of-type(30) { + animation-delay: 0.8516873669s; + left: calc((100% - 5em) * 0.58); +} + +.particle:nth-of-type(31) { + animation-delay: 0.1707164286s; + left: calc((100% - 5em) * 0.6); +} + +.particle:nth-of-type(32) { + animation-delay: 0.4999234112s; + left: calc((100% - 5em) * 0.62); +} + +.particle:nth-of-type(33) { + animation-delay: 0.1439288426s; + left: calc((100% - 5em) * 0.64); +} + +.particle:nth-of-type(34) { + animation-delay: 0.5593976504s; + left: calc((100% - 5em) * 0.66); +} + +.particle:nth-of-type(35) { + animation-delay: 0.2460302425s; + left: calc((100% - 5em) * 0.68); +} + +.particle:nth-of-type(36) { + animation-delay: 0.6739917021s; + left: calc((100% - 5em) * 0.7); +} + +.particle:nth-of-type(37) { + animation-delay: 0.2839246055s; + left: calc((100% - 5em) * 0.72); +} + +.particle:nth-of-type(38) { + animation-delay: 0.4819222024s; + left: calc((100% - 5em) * 0.74); +} + +.particle:nth-of-type(39) { + animation-delay: 0.0525255144s; + left: calc((100% - 5em) * 0.76); +} + +.particle:nth-of-type(40) { + animation-delay: 0.9705385115s; + left: calc((100% - 5em) * 0.78); +} + +.particle:nth-of-type(41) { + animation-delay: 0.1259729542s; + left: calc((100% - 5em) * 0.8); +} + +.particle:nth-of-type(42) { + animation-delay: 0.1141745678s; + left: calc((100% - 5em) * 0.82); +} + +.particle:nth-of-type(43) { + animation-delay: 0.7594892565s; + left: calc((100% - 5em) * 0.84); +} + +.particle:nth-of-type(44) { + animation-delay: 0.4772574602s; + left: calc((100% - 5em) * 0.86); +} + +.particle:nth-of-type(45) { + animation-delay: 0.9495687908s; + left: calc((100% - 5em) * 0.88); +} + +.particle:nth-of-type(46) { + animation-delay: 0.0726774091s; + left: calc((100% - 5em) * 0.9); +} + +.particle:nth-of-type(47) { + animation-delay: 0.6217245527s; + left: calc((100% - 5em) * 0.92); +} + +.particle:nth-of-type(48) { + animation-delay: 0.3120535427s; + left: calc((100% - 5em) * 0.94); +} + +.particle:nth-of-type(49) { + animation-delay: 0.6152128756s; + left: calc((100% - 5em) * 0.96); +} + +.particle:nth-of-type(50) { + animation-delay: 0.34306107s; left: calc((100% - 5em) * 0.98); } @@ -1500,14 +2030,17 @@ input[type=text]:focus::placeholder { opacity: 0; transform: translateY(0) scale(1); } + 25% { opacity: 1; } + to { opacity: 0; transform: translateY(-10em) scale(0); } } + canvas#ghost { position: fixed; height: 100vh; @@ -1523,13 +2056,16 @@ canvas#ghost { 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } + html { height: 100%; padding: 0; @@ -1539,17 +2075,20 @@ body { height: 100%; margin: 0; font-size: 18px; - background-image: linear-gradient(160deg, #2353f3, #092ea7); + background-image: linear-gradient(-60deg, #2353f3, #062077); background-attachment: fixed; } + body.error { background-image: linear-gradient(45deg, #ff1d79, #2353f3); background-size: 200% 200%; animation: gradient 1s ease infinite; } + body.spooky { background-image: linear-gradient(3deg, #020024 4%, #e03d12 14%, #b57027 26%, #852167 40%, #191558 70%, #000003 100%); } + body.paddy { background-color: #0b9a00; background-image: linear-gradient(115deg, #086c00 0%, #0db300 100%); @@ -1588,9 +2127,11 @@ progress { .co .flag-1 { fill: #EFC944; } + .co .flag-2 { fill: #0F2D7C; } + .co .flag-3 { fill: #B83F47; } @@ -1598,9 +2139,11 @@ progress { .de .flag-1 { fill: #000000; } + .de .flag-2 { fill: #DD0000; } + .de .flag-3 { fill: #FFCE00; } @@ -1609,10 +2152,12 @@ body.paddy .flag-1, .ie .flag-1 { fill: #ff5a0e; } + body.paddy .flag-2, .ie .flag-2 { fill: #FFFFFF; } + body.paddy .flag-3, .ie .flag-3 { fill: #00ff1a; @@ -1621,9 +2166,11 @@ body.paddy .flag-3, .we .flag-1 { fill: #FFFFFF; } + .we .flag-2 { fill: #D30731; } + .we .flag-3 { fill: #00AD36; } @@ -1631,17 +2178,19 @@ body.paddy .flag-3, .pride .flag-1 { fill: #e81416; } + .pride .flag-2 { fill: #ffa500; } + .pride .flag-3 { fill: #faeb36; } + .pride .flag-4 { fill: #79c314; } + .pride .flag-5 { fill: #487de7; } - -/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/app.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/animations.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/type.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/variables.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/layout.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/track.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/form.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/setup-list.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/alert.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/pie.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/fire.scss%22,%22file:///Users/ericgeorge/Development/PlayRequest/assets/css/ghost.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IAEE;IACA;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IAGE;;EAEF;IAEE;;;AAIJ;EACE;IAGE;;EAEF;IAEE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;ACpOJ;EACE,aAJiB;EAKjB,KACE;AACwD;EAC1D;;AAEF;EACE,aAZY;EAaZ,KACE;AAC4D;EAC9D;;AAGF;EACE,aApBY;EAqBZ,KACE;AACyD;EAC3D;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA,OCzCM;ED0CN;;;AAEF;EACE;EACA;;AACA;EACE;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAGA;EACE;;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;;;AAGJ;EACE;;;AAEF;EACE;EACA,OChFM;;;ADmFR;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE,cC9GI;;ADiHN;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE,kBChII;EDiIJ,OC5HG;ED6HH,cClII;EDmIJ;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,OCrJI;EDsJJ;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;;;AAKN;EACE;EACA;EAEA;EACA,YCnKW;;ADqKX;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,YChMK;EDiML;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAIJ;EACE;;AACA;EACE,YC5NE;ED6NF;;;AE7NN;EACE;;;AAEF;EAGE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA,qBACE;;AAGF;EAbF;IAcI;IACA;IACA;IACA,qBACE;;;AAIJ;EACE;;;AAIJ;EACE;EACA;EACA;EAEA;EAQA;EACA;;AAPA;EAPF;IAQI;;;AASF;EACE;;;AAIJ;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;IACA;;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;IACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA,YDhIK;ECiIL;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;;AAKN;EAUE;EACA;EACA,YDxJW;ECyJX;EACA;;AAbA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA,YDtKO;ECuKP;;AACA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpMF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,YFTK;EEUL;EACA;EACA;EAEA;EACA;EACA;EACA;;AACA;EACE;;AAGF;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE,YFlCG;;AEoCL;EACE,YFvCO;;;AE2CX;EACE;EACA;EACA;EACA;EACA,YFpDM;EEqDN;EACA,OF9CK;EE+CL;EACA;;AAEA;EACE;EACA;;AAIF;EACE,OF5DG;;AE+DL;EACE,OFhEG;;AEkEL;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,OF9FI;;AE+FJ;EACE;EACA;;AAGF;EACE,OFpGC;;AEuGH;EACE;;AACA;EACE;;AAKN;EACE,OFjHI;EEkHJ,YF3GS;;AE6GT;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;IACA;;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,YF3NG;EE4NH;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA,YFjRG;EEmRH;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,OFxTI;EEyTJ,YFvTO;EEwTP;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE,OFnUC;;AEqUH;EACE,OFvUC;;;AE4UP;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKF;EAEE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;EACA;;;AAIJ;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;;AC9cJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA,OHTK;EGUL;EACA,YACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA,kBH9BI;;AGgCJ;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE,kBH5CI;;;AIAR;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7BF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC7BF;EACE;;AAEA;EAHF;IAII;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EAEA,OLjCK;EKkCL;EACA,YLpCW;EKsCX;;;AAEF;EACE,YL/CK;;;AKkDP;EACE,OLpDM;;;AKuDR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AC/EF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAEA;EAKA;;AAOF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAGJ;AAAA;EAEE;EACA;EACA;;;AAEF;EACE;EACA,YACE;;;AAIJ;EACE;EAKA;;;AAMF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE,iBACE;;;AAGJ;EACE;;;AAEF;EACE;IACE;;;ACnFJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAfS;EAgBT,QAhBS;EAiBT;;AAGE;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;AAFF;EACE;EACA;;;AAIN;EACE;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;;AC1CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AXOF;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAUF;EACE;EACA;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;;;AAIA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMF;AAAA;EACE;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE%22,%22file%22:%22app.css%22%7D */ diff --git a/priv/static/fonts/BoogieBoysExtrude.otf b/priv/static/fonts/BoogieBoysExtrude.otf new file mode 100644 index 0000000..4476ad3 Binary files /dev/null and b/priv/static/fonts/BoogieBoysExtrude.otf differ diff --git a/priv/static/fonts/BoogieBoysRegular.otf b/priv/static/fonts/BoogieBoysRegular.otf new file mode 100644 index 0000000..2466edb Binary files /dev/null and b/priv/static/fonts/BoogieBoysRegular.otf differ diff --git a/priv/static/fonts/BoogieBoysShadow.otf b/priv/static/fonts/BoogieBoysShadow.otf new file mode 100644 index 0000000..d3aeb8c Binary files /dev/null and b/priv/static/fonts/BoogieBoysShadow.otf differ diff --git a/priv/static/fonts/Neon.ttf b/priv/static/fonts/Neon.ttf new file mode 100644 index 0000000..cdd5904 Binary files /dev/null and b/priv/static/fonts/Neon.ttf differ