Merge branch 'master' into emoji-search-fix
transbitch
commit
ac3d9a337d
|
|
@ -26,7 +26,6 @@ RUN mkdir /dm_media
|
|||
RUN mkdir /songs
|
||||
RUN mkdir /temp_songs
|
||||
RUN mkdir /videos
|
||||
RUN mkdir /orgies
|
||||
RUN mkdir /audio
|
||||
RUN mkdir /asset_submissions
|
||||
RUN mkdir /asset_submissions/emojis
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@ services:
|
|||
- "./seed-users.sql:/docker-entrypoint-initdb.d/01-seed-users.sql"
|
||||
- "./seed-badges.sql:/docker-entrypoint-initdb.d/02-seed-badges.sql"
|
||||
- "./seed-hats.sql:/docker-entrypoint-initdb.d/03-seed-hats.sql"
|
||||
- "./seed-emojis.sql:/docker-entrypoint-initdb.d/04-seed-emojis.sql"
|
||||
- "./seed-emojis-rDrama.sql:/docker-entrypoint-initdb.d/04-seed-emojis-rDrama.sql"
|
||||
- "./seed-emojis-WPD.sql:/docker-entrypoint-initdb.d/04-seed-emojis-WPD.sql"
|
||||
environment:
|
||||
- POSTGRES_HOST_AUTH_METHOD=trust
|
||||
ports:
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,3 +1,5 @@
|
|||
/*generic*/
|
||||
|
||||
#awards-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
|
@ -14,58 +16,32 @@
|
|||
animation-timing-function: linear !important;
|
||||
}
|
||||
|
||||
.scooter img {
|
||||
width: min(7vw, 50px) !important;
|
||||
|
||||
/*emoji*/
|
||||
|
||||
.emoji-award img, .emoji-hz-award img {
|
||||
width: min(60px, 13vw) !important;
|
||||
}
|
||||
|
||||
.emoji-award img {
|
||||
width: min(10vw, 60px) !important;
|
||||
.emoji-award:nth-child(even) {
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
.train img {
|
||||
width: min(10vw, 80px) !important;
|
||||
}
|
||||
|
||||
|
||||
.emoji-award:nth-child(even), .emoji-award:nth-child(n+2):nth-child(n+3) img {
|
||||
.emoji-award:nth-child(2) img, .emoji-award:nth-child(3) img, .emoji-award:nth-child(6) img, .emoji-award:nth-child(7) img, .emoji-award:nth-child(10) img, .emoji-award:nth-child(11) img, .emoji-award:nth-child(14) img, .emoji-award:nth-child(15) img, .emoji-award:nth-child(18) img, .emoji-award:nth-child(19) img {
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes emojiX {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(98vw);
|
||||
}
|
||||
}
|
||||
@keyframes emojiY {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(80vh);
|
||||
}
|
||||
}
|
||||
|
||||
.train:nth-child(1), .scooter:nth-child(1) {top:2%}
|
||||
.train:nth-child(2), .scooter:nth-child(2) {top:27%}
|
||||
.train:nth-child(3), .scooter:nth-child(3) {top:52%}
|
||||
.train:nth-child(4), .scooter:nth-child(4) {top:77%}
|
||||
|
||||
.train:nth-child(odd) {animation-direction: reverse;}
|
||||
.train:nth-child(odd) img {transform: scaleX(-1);}
|
||||
|
||||
@keyframes train {
|
||||
from {transform: translateX(-10vw)}
|
||||
to {transform: translateX(110vw)}
|
||||
}
|
||||
|
||||
.scooter:nth-child(even) {animation-direction: reverse;}
|
||||
.scooter:nth-child(even) img {transform: scaleX(-1);}
|
||||
|
||||
.emoji-award {
|
||||
animation: emojiX 8s alternate;
|
||||
}
|
||||
|
|
@ -73,10 +49,6 @@
|
|||
animation: emojiY 9s alternate;
|
||||
}
|
||||
|
||||
.train, .scooter {
|
||||
animation: train 12s;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.emoji-award {
|
||||
animation: emojiX 6s alternate;
|
||||
|
|
@ -84,9 +56,70 @@
|
|||
.emoji-award img {
|
||||
animation: emojiY 7s alternate;
|
||||
}
|
||||
.train, .scooter {
|
||||
animation: train 6s;
|
||||
}
|
||||
|
||||
.emoji-hz-award:nth-child(odd) {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
.emoji-hz-award:nth-child(odd) img {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.emoji-hz-award:nth-child(1), .emoji-hz-award:nth-child(5), .emoji-hz-award:nth-child(9), .emoji-hz-award:nth-child(13), .emoji-hz-award:nth-child(17) {
|
||||
top: 2%;
|
||||
}
|
||||
.emoji-hz-award:nth-child(2), .emoji-hz-award:nth-child(6), .emoji-hz-award:nth-child(10), .emoji-hz-award:nth-child(14), .emoji-hz-award:nth-child(18) {
|
||||
top: 27%;
|
||||
}
|
||||
.emoji-hz-award:nth-child(3), .emoji-hz-award:nth-child(7), .emoji-hz-award:nth-child(11), .emoji-hz-award:nth-child(15), .emoji-hz-award:nth-child(19) {
|
||||
top: 52%;
|
||||
}
|
||||
.emoji-hz-award:nth-child(4), .emoji-hz-award:nth-child(8), .emoji-hz-award:nth-child(12), .emoji-hz-award:nth-child(16), .emoji-hz-award:nth-child(20) {
|
||||
top: 77%;
|
||||
}
|
||||
|
||||
|
||||
@keyframes emoji-hz {
|
||||
0% {
|
||||
transform: translateX(-10vw);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(110vw);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-hz-award {
|
||||
animation: emoji-hz 12s;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.emoji-hz-award {
|
||||
animation: emoji-hz 6s;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-delay-1 {
|
||||
animation-delay: 1s !important;
|
||||
}
|
||||
.animation-delay-2 {
|
||||
animation-delay: 2s !important;
|
||||
}
|
||||
.animation-delay-3 {
|
||||
animation-delay: 3s !important;
|
||||
}
|
||||
.animation-delay-4 {
|
||||
animation-delay: 4s !important;
|
||||
}
|
||||
|
||||
.emoji-award, .emoji-hz-award {
|
||||
transform: translateX(-10vw);
|
||||
}
|
||||
|
||||
.emoji-hz-award img.reversed {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.emoji-hz-award:nth-child(odd) img.reversed {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/*confetti*/
|
||||
|
|
@ -222,13 +255,13 @@
|
|||
animation: 60s linear 0s infinite move-colors;
|
||||
}
|
||||
|
||||
.queen:not(a):not(.ectoplasm), h1.queen.post-title a {
|
||||
.queen:not(a) img, .queen:not(.ectoplasm), h1.queen.post-title a {
|
||||
color: hotpink !important;
|
||||
font-weight: 700 !important;
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.sharpen:not(a), h1.sharpen.post-title a {
|
||||
.sharpen:not(a):not(.blood), h1.sharpen.post-title a {
|
||||
color: red !important;
|
||||
font-weight: bold !important;
|
||||
font-style: italic !important;
|
||||
|
|
@ -274,44 +307,6 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.animation-delay-1 {
|
||||
opacity: 0;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.animation-delay-2 {
|
||||
opacity: 0;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.animation-delay-3 {
|
||||
opacity: 0;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
.animation-delay-4 {
|
||||
opacity: 0;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
.animation-delay-5 {
|
||||
opacity: 0;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
.animation-delay-6 {
|
||||
opacity: 0;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
.animation-delay-7 {
|
||||
opacity: 0;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
.animation-delay-8 {
|
||||
opacity: 0;
|
||||
animation-delay: 8s;
|
||||
}
|
||||
.animation-delay-9 {
|
||||
opacity: 0;
|
||||
animation-delay: 9s;
|
||||
}
|
||||
|
||||
|
||||
@keyframes move-colors {
|
||||
from {background-position: 0px;}
|
||||
to {background-position: 1000px;}
|
||||
|
|
|
|||
|
|
@ -189,6 +189,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
}
|
||||
|
||||
#message * {
|
||||
#message *:not(#typing-indicator *) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -216,6 +216,7 @@
|
|||
.fa-tv:before{content:"\f26c"}
|
||||
.fa-heart:before{content:"\f004"}
|
||||
.fa-coin:before{content:"\f85c"}
|
||||
.fa-scarecrow:before{content:"\f70d"}
|
||||
|
||||
/* do not remove - fixes hand, talking, marsey-love components
|
||||
from breaking out of the comment box
|
||||
|
|
@ -4161,18 +4162,6 @@ small, .small {
|
|||
min-height: 30px;
|
||||
}
|
||||
|
||||
.hole-flair {
|
||||
padding: 3px 5px 2px 5px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: var(--primary);
|
||||
margin-right: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.hole-flair:hover {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
.post-meta-domain {
|
||||
/* fixes very long domains overflowing post_listing */
|
||||
display: inline-block;
|
||||
|
|
@ -5111,10 +5100,10 @@ span.green {
|
|||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
.comment .comment-collapse-desktop:hover {
|
||||
.comment .comment-collapse-line:hover {
|
||||
border-left-color: var(--white) !important;
|
||||
}
|
||||
.comment.collapsed .comment-collapse-desktop:hover {
|
||||
.comment.collapsed .comment-collapse-line:hover {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -5178,14 +5167,50 @@ span.green {
|
|||
.text-info {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
.patron {
|
||||
padding: 2px 5px 3px 5px !important;
|
||||
|
||||
|
||||
.patron, .pronouns, .post-flair, .hole-flair, .mod {
|
||||
padding: 1.5px 5px 3px 5px !important;
|
||||
border-radius: 5px !important;
|
||||
color: white !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.patron, .pronouns, .post-flair, .hole-flair, .mod {
|
||||
padding: 2px 5px !important;
|
||||
}
|
||||
}
|
||||
.patron[style*="background-color:#ffffff"] {
|
||||
color: black !important;
|
||||
}
|
||||
.pronouns {
|
||||
font-size: 9px;
|
||||
margin-left: 0.25rem;
|
||||
font-weight: 700;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.post-flair {
|
||||
background-color: var(--primary);
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
}
|
||||
.hole-flair {
|
||||
background-color: var(--primary);
|
||||
margin-right: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.hole-flair:hover {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
.mod {
|
||||
padding: 2px 5px 3px 5px;
|
||||
border-radius: 5px;
|
||||
color:white!important;
|
||||
background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet );
|
||||
text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
|
||||
}
|
||||
|
||||
|
||||
.container, .container-fluid {
|
||||
background-color: rgb(var(--background)) !important;
|
||||
}
|
||||
|
|
@ -5258,7 +5283,7 @@ textarea {
|
|||
margin: 1.75rem auto !important;
|
||||
}
|
||||
}
|
||||
.in-comment-image, .img, img[alt^="![]("],
|
||||
.img, img[alt^="![]("],
|
||||
.preview img:not(img[src^="/uid/"], img[src^="/pp/"], img[src$="/pic"], img[src$="/i/hand.webp"], img[src$="/i/talking.webp"], img[src*="/e/"]) {
|
||||
max-height: 150px !important;
|
||||
max-width: 100% !important;
|
||||
|
|
@ -5503,6 +5528,10 @@ span > img[src$="/i/love-background.webp"] {
|
|||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
[cide] [cide], [bounce] [bounce] {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Fix for <ol> being populated with <li><p></p></li> in many contexts. */
|
||||
.post-body li > p:first-child,
|
||||
.comment-text li > p:first-child,
|
||||
|
|
@ -5781,14 +5810,6 @@ html {
|
|||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.mod {
|
||||
padding: 2px 5px 3px 5px;
|
||||
border-radius: 5px;
|
||||
color:white!important;
|
||||
background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet );
|
||||
text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: min(50%, 500px);
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
|
||||
|
|
@ -5957,7 +5978,7 @@ li > .sidebar {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
th:not(#formatting-table th), td:not(#formatting-table td) {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -6500,22 +6521,6 @@ g {
|
|||
.fa-stack-1x{line-height:inherit}
|
||||
.fa-stack-2x{font-size:2em}
|
||||
|
||||
.pronouns {
|
||||
font-size: 9px;
|
||||
margin-left: 0.25rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px 3px 5px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pronouns, .patron, .mod {
|
||||
padding: 2px 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding: 14px 14px 0 14px !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
|
|
@ -7193,12 +7198,12 @@ input::-webkit-inner-spin-button {
|
|||
min-height: 60px;
|
||||
}
|
||||
|
||||
#notelabel {
|
||||
#notelabel, #emoji_behavior_label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#note, #notelabel {
|
||||
#note, #notelabel, #emoji_behavior_label {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -7220,12 +7225,12 @@ input::-webkit-inner-spin-button {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.comment .comment-collapse-desktop {
|
||||
.comment .comment-collapse-line {
|
||||
padding-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.comment .comment-collapse-desktop {
|
||||
.comment .comment-collapse-line {
|
||||
padding-right: 10px;
|
||||
}
|
||||
blockquote {
|
||||
|
|
@ -7466,7 +7471,7 @@ bdi {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.comment-collapse-desktop {
|
||||
.comment-collapse-line {
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
|
|
@ -7560,3 +7565,16 @@ ul {
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.section-title hr {
|
||||
flex: 1;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
flex-flow: column wrap;
|
||||
}
|
||||
#chat-window {
|
||||
max-height: 34vh !important;
|
||||
max-height: 38vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ blockquote a {
|
|||
color: navy;
|
||||
}
|
||||
|
||||
.comment-collapse-desktop {
|
||||
.comment-collapse-line {
|
||||
border-color: maroon !important;
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ p, blockquote {
|
|||
color: var(--gray-200)
|
||||
}
|
||||
|
||||
.comment-collapse-desktop {
|
||||
.comment-collapse-line {
|
||||
border-color: var(--gray-400) !important
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
const song = document.getElementById('event-song').value;
|
||||
const audio = new Audio(song);
|
||||
audio.loop = true;
|
||||
|
||||
audio.play();
|
||||
document.addEventListener('click', () => {
|
||||
if (audio.paused) audio.play();
|
||||
}, {once : true});
|
||||
prepare_to_pause(audio)
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--primary: #cc4145;
|
||||
--secondary: #c7c7c7;
|
||||
--dark: #c7c7c7;
|
||||
--muted: #131512;
|
||||
|
|
@ -213,57 +212,49 @@ body {
|
|||
background-blend-mode: soft-light;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
float: left
|
||||
}
|
||||
.color {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.color p {
|
||||
.color p {
|
||||
position: relative;
|
||||
z-index: 1231231;
|
||||
text-align: center;
|
||||
line-height: 90vh;
|
||||
}
|
||||
}
|
||||
|
||||
.color:nth-child(1){
|
||||
.color:nth-child(1){
|
||||
background-color: #F5624D;
|
||||
}
|
||||
}
|
||||
|
||||
.color:nth-child(2){
|
||||
.color:nth-child(2){
|
||||
background-color: #CC231E;
|
||||
}
|
||||
}
|
||||
|
||||
.color:nth-child(3){
|
||||
.color:nth-child(3){
|
||||
background-color: #34A65F;
|
||||
}
|
||||
}
|
||||
|
||||
.color:nth-child(4){
|
||||
.color:nth-child(4){
|
||||
background-color: #0F8A5F;
|
||||
}
|
||||
}
|
||||
|
||||
.color:nth-child(5){
|
||||
.color:nth-child(5){
|
||||
background-color: #235E6F;
|
||||
}
|
||||
}
|
||||
|
||||
#snow:not([data-nonce]) {
|
||||
#snow:not([data-nonce]) {
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* awards */
|
||||
|
||||
/* gingerbread */
|
||||
.fall-snowflake {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-family: Serif;
|
||||
text-shadow: 0 0 1px #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes fall-snowflakes-fall {
|
||||
@keyframes fall-gingerbreads-fall {
|
||||
0% {
|
||||
top: -20%
|
||||
}
|
||||
|
|
@ -272,7 +263,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fall-snowflakes-shake {
|
||||
@keyframes fall-gingerbreads-shake {
|
||||
0% {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
|
@ -284,116 +275,81 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.fall-snowflake {
|
||||
.fall-gingerbread {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-family: Serif;
|
||||
text-shadow: 0 0 1px #000;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: -20%;
|
||||
z-index: 9999;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: fall-snowflakes-fall, fall-snowflakes-shake;
|
||||
animation-name: fall-gingerbreads-fall, fall-gingerbreads-shake;
|
||||
animation-duration: 10s, 4s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-play-state: running, running
|
||||
}
|
||||
|
||||
.fall-snowflake:nth-of-type(0) {
|
||||
left: 1%;
|
||||
animation-delay: 0s, 0s
|
||||
.fall-gingerbread img {
|
||||
width: min(60px, 13vw) !important;
|
||||
}
|
||||
.fall-snowflake:nth-of-type(1) {
|
||||
|
||||
.fall-gingerbread:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(2) {
|
||||
.fall-gingerbread:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, .5s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(3) {
|
||||
.fall-gingerbread:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(4) {
|
||||
.fall-gingerbread:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(5) {
|
||||
.fall-gingerbread:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation delay: 3s, 1.5s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(10) {
|
||||
left: 100%;
|
||||
animation-delay: 3s, 2s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(11) {
|
||||
.fall-gingerbread:nth-of-type(6) {
|
||||
left: 5%;
|
||||
animation-delay: 1s, 4s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(12) {
|
||||
.fall-gingerbread:nth-of-type(7) {
|
||||
left: 15%;
|
||||
animation-delay: 1s, 1.5s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(13) {
|
||||
.fall-gingerbread:nth-of-type(8) {
|
||||
left: 25%;
|
||||
animation-delay: 6s, 2.5s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(14) {
|
||||
.fall-gingerbread:nth-of-type(9) {
|
||||
left: 35%;
|
||||
animation-delay: 4s, 1s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(15) {
|
||||
.fall-gingerbread:nth-of-type(10) {
|
||||
left: 45%;
|
||||
animation-delay: 2s, 4s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(16) {
|
||||
left: 55%;
|
||||
animation-delay: 8s, 3s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(17) {
|
||||
left: 65%;
|
||||
animation-delay: 6s, 3s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(18) {
|
||||
left: 75%;
|
||||
animation-delay: 2.5s, 4s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(19) {
|
||||
left: 85%;
|
||||
animation-delay: 2s, 0s
|
||||
}
|
||||
.fall-snowflake:nth-of-type(20) {
|
||||
left: 95%;
|
||||
animation delay: 3s, 1.5s
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 5600ms linear infinite;
|
||||
animation: spin 5600ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* vvv kill yourself vscodelet vvv */
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
:root {
|
||||
--primary: #cc4145;
|
||||
--secondary: #101819;
|
||||
--dark: #101819;
|
||||
--muted: #e6faff;
|
||||
|
|
@ -17,10 +16,6 @@
|
|||
--gray-900: #101819;
|
||||
}
|
||||
|
||||
/*#banner-skybox {
|
||||
fill: url(#skybox-gradient-night);
|
||||
}*/
|
||||
|
||||
.comment-text, .post-body {
|
||||
--primary: #15de59;
|
||||
--primary: #15de59 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
.poor {
|
||||
position: fixed;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
#fog-effect-poor {
|
||||
background-image: url(/assets/events/homoween/images/poor/fog.webp);
|
||||
background-size: cover;
|
||||
z-index: 9998;
|
||||
opacity:0.7;
|
||||
}
|
||||
|
||||
#stab-effect-poor {
|
||||
background-image: url(/assets/events/homoween/images/poor/blood.webp);
|
||||
z-index: 9997;
|
||||
}
|
||||
|
||||
#flashlight-effect-poor {
|
||||
background-image: url(/assets/events/homoween/images/poor/flashlight.webp);
|
||||
z-index: 9995;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
|
@ -57,95 +57,191 @@
|
|||
/*days*/
|
||||
:root {
|
||||
/*sky*/
|
||||
--sky-gradient-day1: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
|
||||
--sky-gradient-day2: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
|
||||
--sky-gradient-day3: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
|
||||
--sky-gradient-day4: radial-gradient(at bottom, #930184 -15%, #490272 60%);
|
||||
--sky-gradient-day5: radial-gradient(at bottom, #800073 -55%, #400179 60%);
|
||||
--sky-gradient-day6: radial-gradient(at bottom, #69017a 25%, #390271 70%);
|
||||
--sky-gradient-day7: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
|
||||
--sky-gradient-day8: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
|
||||
--sky-gradient-day9: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
|
||||
--sky-gradient-day10: radial-gradient(at bottom, #59047b 10%, #150026 70%);
|
||||
--sky-gradient-day10: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
|
||||
--sky-gradient-day11: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
|
||||
--sky-gradient-day12: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
|
||||
--sky-gradient-day13: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
|
||||
--sky-gradient-day14: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
|
||||
--sky-gradient-day15: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
|
||||
--sky-gradient-day16: radial-gradient(at bottom, #930184 -15%, #490272 60%);
|
||||
--sky-gradient-day17: radial-gradient(at bottom, #930184 -15%, #490272 60%);
|
||||
--sky-gradient-day18: radial-gradient(at bottom, #800073 -55%, #400179 60%);
|
||||
--sky-gradient-day19: radial-gradient(at bottom, #800073 -55%, #400179 60%);
|
||||
--sky-gradient-day20: radial-gradient(at bottom, #69017a 25%, #390271 70%);
|
||||
--sky-gradient-day21: radial-gradient(at bottom, #69017a 25%, #390271 70%);
|
||||
--sky-gradient-day22: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
|
||||
--sky-gradient-day23: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
|
||||
--sky-gradient-day24: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
|
||||
--sky-gradient-day25: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
|
||||
--sky-gradient-day26: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
|
||||
--sky-gradient-day27: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
|
||||
--sky-gradient-day28: radial-gradient(at bottom, #59047b 10%, #150026 70%);
|
||||
--sky-gradient-day29: radial-gradient(at bottom, #59047b 10%, #150026 70%);
|
||||
--sky-gradient-day30: radial-gradient(at bottom, #350249 10%, #150026 70%);
|
||||
--sky-gradient-day31: radial-gradient(at bottom, #21002e 10%, #150026 70%);
|
||||
|
||||
/*moon*/
|
||||
--moon-fill-day1:gold;
|
||||
--moon-fill-day2:gold;
|
||||
--moon-fill-day3:goldenrod;
|
||||
--moon-fill-day4:none;
|
||||
--moon-fill-day5:none;
|
||||
--moon-fill-day6:#e4e4e4;
|
||||
--moon-fill-day7:#e4e4e4;
|
||||
--moon-fill-day8:#e4e4e4;
|
||||
--moon-fill-day9:#e4e4e4;
|
||||
--moon-fill-day10:#e4e4e4;
|
||||
--moon-fill-day10: gold;
|
||||
--moon-fill-day11: gold;
|
||||
--moon-fill-day12: gold;
|
||||
--moon-fill-day13: gold;
|
||||
--moon-fill-day14: goldenrod;
|
||||
--moon-fill-day15: goldenrod;
|
||||
--moon-fill-day16: none;
|
||||
--moon-fill-day17: none;
|
||||
--moon-fill-day18: none;
|
||||
--moon-fill-day19: none;
|
||||
--moon-fill-day20: #e4e4e4;
|
||||
--moon-fill-day21: #e4e4e4;
|
||||
--moon-fill-day22: #e4e4e4;
|
||||
--moon-fill-day23: #e4e4e4;
|
||||
--moon-fill-day24: #e4e4e4;
|
||||
--moon-fill-day25: #e4e4e4;
|
||||
--moon-fill-day26: #e4e4e4;
|
||||
--moon-fill-day27: #e4e4e4;
|
||||
--moon-fill-day28: #e4e4e4;
|
||||
--moon-fill-day29: #e4e4e4;
|
||||
--moon-fill-day30: #e4e4e4;
|
||||
--moon-fill-day31: #e4e4e4;
|
||||
|
||||
--moon-shadow-day1:drop-shadow(0px 0px 20px yellow);
|
||||
--moon-shadow-day2:drop-shadow(0px 0px 20px yellow);
|
||||
--moon-shadow-day3:drop-shadow(0px 0px 20px gold);
|
||||
--moon-shadow-day4:none;
|
||||
--moon-shadow-day5:none;
|
||||
--moon-shadow-day6:drop-shadow(0px 0px 5px #deddcf);
|
||||
--moon-shadow-day7:drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day8:drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day9:drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day10:drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day10: drop-shadow(0px 0px 20px yellow);
|
||||
--moon-shadow-day11: drop-shadow(0px 0px 20px yellow);
|
||||
--moon-shadow-day12: drop-shadow(0px 0px 20px yellow);
|
||||
--moon-shadow-day13: drop-shadow(0px 0px 20px yellow);
|
||||
--moon-shadow-day14: drop-shadow(0px 0px 20px gold);
|
||||
--moon-shadow-day15: drop-shadow(0px 0px 20px gold);
|
||||
--moon-shadow-day16: none;
|
||||
--moon-shadow-day17: none;
|
||||
--moon-shadow-day18: none;
|
||||
--moon-shadow-day19: none;
|
||||
--moon-shadow-day20: drop-shadow(0px 0px 5px #deddcf);
|
||||
--moon-shadow-day21: drop-shadow(0px 0px 5px #deddcf);
|
||||
--moon-shadow-day22: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day23: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day24: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day25: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day26: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day27: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day28: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day29: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day30: drop-shadow(0px 0px 10px #deddcf);
|
||||
--moon-shadow-day31: drop-shadow(0px 0px 10px #deddcf);
|
||||
|
||||
--moon-position-day1:303px;
|
||||
--moon-position-day2:308px;
|
||||
--moon-position-day3:320px;
|
||||
--moon-position-day4:350px;
|
||||
--moon-position-day5:350px;
|
||||
--moon-position-day6:322px;
|
||||
--moon-position-day7:312px;
|
||||
--moon-position-day8:308px;
|
||||
--moon-position-day9:303px;
|
||||
--moon-position-day10:300px;
|
||||
--moon-position-day10: 303px;
|
||||
--moon-position-day11: 303px;
|
||||
--moon-position-day12: 308px;
|
||||
--moon-position-day13: 308px;
|
||||
--moon-position-day14: 320px;
|
||||
--moon-position-day15: 320px;
|
||||
--moon-position-day16: 350px;
|
||||
--moon-position-day17: 350px;
|
||||
--moon-position-day18: 350px;
|
||||
--moon-position-day19: 350px;
|
||||
--moon-position-day20: 322px;
|
||||
--moon-position-day21: 322px;
|
||||
--moon-position-day22: 312px;
|
||||
--moon-position-day23: 312px;
|
||||
--moon-position-day24: 308px;
|
||||
--moon-position-day25: 308px;
|
||||
--moon-position-day26: 303px;
|
||||
--moon-position-day27: 303px;
|
||||
--moon-position-day28: 300px;
|
||||
--moon-position-day29: 300px;
|
||||
--moon-position-day30: 300px;
|
||||
--moon-position-day31: 300px;
|
||||
|
||||
/*ground*/
|
||||
--ground-shadow-day1:#5818bd;
|
||||
--ground-shadow-day2:#5818bd;
|
||||
--ground-shadow-day3:#5818bd;
|
||||
--ground-shadow-day4:#5818bd;
|
||||
--ground-shadow-day5:#5818bd;
|
||||
--ground-shadow-day6:#5818bd;
|
||||
--ground-shadow-day7:#4e16a6;
|
||||
--ground-shadow-day8:#51009a;
|
||||
--ground-shadow-day9:#4b028c;
|
||||
--ground-shadow-day10:#41017b;
|
||||
--ground-shadow-day10: #5818bd;
|
||||
--ground-shadow-day11: #5818bd;
|
||||
--ground-shadow-day12: #5818bd;
|
||||
--ground-shadow-day13: #5818bd;
|
||||
--ground-shadow-day14: #5818bd;
|
||||
--ground-shadow-day15: #5818bd;
|
||||
--ground-shadow-day16: #5818bd;
|
||||
--ground-shadow-day17: #5818bd;
|
||||
--ground-shadow-day18: #5818bd;
|
||||
--ground-shadow-day19: #5818bd;
|
||||
--ground-shadow-day20: #5818bd;
|
||||
--ground-shadow-day21: #5818bd;
|
||||
--ground-shadow-day22: #4e16a6;
|
||||
--ground-shadow-day23: #4e16a6;
|
||||
--ground-shadow-day24: #51009a;
|
||||
--ground-shadow-day25: #51009a;
|
||||
--ground-shadow-day26: #4b028c;
|
||||
--ground-shadow-day27: #4b028c;
|
||||
--ground-shadow-day28: #41017b;
|
||||
--ground-shadow-day29: #41017b;
|
||||
--ground-shadow-day30: #41017b;
|
||||
--ground-shadow-day31: #41017b;
|
||||
|
||||
--house-shadow-day1:#5818bd;
|
||||
--house-shadow-day2:#5818bd;
|
||||
--house-shadow-day3:#5818bd;
|
||||
--house-shadow-day4:#5818bd;
|
||||
--house-shadow-day5:#5818bd;
|
||||
--house-shadow-day6:#5818bd;
|
||||
--house-shadow-day7:#5818bd;
|
||||
--house-shadow-day8:#4a149f;
|
||||
--house-shadow-day9:#431290;
|
||||
--house-shadow-day10:#3a1476;
|
||||
--house-shadow-day10: #5818bd;
|
||||
--house-shadow-day11: #5818bd;
|
||||
--house-shadow-day12: #5818bd;
|
||||
--house-shadow-day13: #5818bd;
|
||||
--house-shadow-day14: #5818bd;
|
||||
--house-shadow-day15: #5818bd;
|
||||
--house-shadow-day16: #5818bd;
|
||||
--house-shadow-day17: #5818bd;
|
||||
--house-shadow-day18: #5818bd;
|
||||
--house-shadow-day19: #5818bd;
|
||||
--house-shadow-day20: #5818bd;
|
||||
--house-shadow-day21: #5818bd;
|
||||
--house-shadow-day22: #5818bd;
|
||||
--house-shadow-day23: #5818bd;
|
||||
--house-shadow-day24: #4a149f;
|
||||
--house-shadow-day25: #4a149f;
|
||||
--house-shadow-day26: #431290;
|
||||
--house-shadow-day27: #431290;
|
||||
--house-shadow-day28: #3a1476;
|
||||
--house-shadow-day29: #3a1476;
|
||||
--house-shadow-day30: #3a1476;
|
||||
--house-shadow-day31: #3a1476;
|
||||
|
||||
--object-fill-day1:#240441;
|
||||
--object-fill-day2:#240441;
|
||||
--object-fill-day3:#240441;
|
||||
--object-fill-day4:#240441;
|
||||
--object-fill-day5:#240441;
|
||||
--object-fill-day6:#240441;
|
||||
--object-fill-day7:#240441;
|
||||
--object-fill-day8:#1e0538;
|
||||
--object-fill-day9:#18042c;
|
||||
--object-fill-day10:#18042c;
|
||||
--object-fill-day10: #240441;
|
||||
--object-fill-day11: #240441;
|
||||
--object-fill-day12: #240441;
|
||||
--object-fill-day13: #240441;
|
||||
--object-fill-day14: #240441;
|
||||
--object-fill-day15: #240441;
|
||||
--object-fill-day16: #240441;
|
||||
--object-fill-day17: #240441;
|
||||
--object-fill-day18: #240441;
|
||||
--object-fill-day19: #240441;
|
||||
--object-fill-day20: #240441;
|
||||
--object-fill-day21: #240441;
|
||||
--object-fill-day22: #240441;
|
||||
--object-fill-day23: #240441;
|
||||
--object-fill-day24: #1e0538;
|
||||
--object-fill-day25: #1e0538;
|
||||
--object-fill-day26: #18042c;
|
||||
--object-fill-day27: #18042c;
|
||||
--object-fill-day28: #18042c;
|
||||
--object-fill-day29: #18042c;
|
||||
--object-fill-day30: #18042c;
|
||||
--object-fill-day31: #18042c;
|
||||
|
||||
--star-opacity-day1: 0;
|
||||
--star-opacity-day2: 0;
|
||||
--star-opacity-day3: 0;
|
||||
--star-opacity-day4: 0.2;
|
||||
--star-opacity-day5: 0.3;
|
||||
--star-opacity-day6: 0.4;
|
||||
--star-opacity-day7: 0.5;
|
||||
--star-opacity-day8: 0.5;
|
||||
--star-opacity-day9: 0.6;
|
||||
--star-opacity-day10: 0.7;
|
||||
--star-opacity-day10: 0;
|
||||
--star-opacity-day11: 0;
|
||||
--star-opacity-day12: 0;
|
||||
--star-opacity-day13: 0;
|
||||
--star-opacity-day14: 0;
|
||||
--star-opacity-day15: 0;
|
||||
--star-opacity-day16: 0.2;
|
||||
--star-opacity-day17: 0.2;
|
||||
--star-opacity-day18: 0.3;
|
||||
--star-opacity-day19: 0.3;
|
||||
--star-opacity-day20: 0.4;
|
||||
--star-opacity-day21: 0.4;
|
||||
--star-opacity-day22: 0.5;
|
||||
--star-opacity-day23: 0.5;
|
||||
--star-opacity-day24: 0.5;
|
||||
--star-opacity-day25: 0.5;
|
||||
--star-opacity-day26: 0.6;
|
||||
--star-opacity-day27: 0.6;
|
||||
--star-opacity-day28: 0.7;
|
||||
--star-opacity-day29: 0.7;
|
||||
--star-opacity-day30: 0.7;
|
||||
--star-opacity-day31: 0.7;
|
||||
}
|
||||
|
||||
/* stars */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#banner-homoween-title {
|
||||
text-shadow: 0 0 40px #3AE63A;
|
||||
text-shadow: 0 0 40px #3AE63A !important;
|
||||
fill: #90ee90;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(
|
||||
|
|
|
|||
|
|
@ -13,9 +13,3 @@
|
|||
background-color: var(--background);
|
||||
z-index:0;
|
||||
}
|
||||
#banner-homoween-title {
|
||||
opacity: 0;
|
||||
}
|
||||
#banner-homoween-text-evil {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
|
@ -32,7 +32,6 @@
|
|||
|
||||
/* Homoween Theming */
|
||||
:root {
|
||||
--primary: #F66A3C !important;
|
||||
--dark: #140224;
|
||||
--secondary: #820263;
|
||||
--white: #E1E1E1;
|
||||
|
|
@ -49,7 +48,7 @@
|
|||
--gray-700: var(--dark);
|
||||
--gray-800: var(--dark);
|
||||
--gray-900: var(--dark);
|
||||
--background: var(--dark);
|
||||
--background: 20, 2, 36;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -184,10 +183,7 @@ body::after {
|
|||
|
||||
.blood {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blood {
|
||||
color: #dc3545 !important;
|
||||
color: red !important;
|
||||
font-family: 'DoubleFeature';
|
||||
}
|
||||
|
||||
|
|
@ -228,30 +224,6 @@ body::after {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes haunted-upsidedown {
|
||||
0% {
|
||||
backdrop-filter: brightness(20%) sepia(1) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
1% {
|
||||
backdrop-filter: brightness(20%) sepia(1) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
2% {
|
||||
backdrop-filter: sepia(1) contrast(1.5) brightness(200%) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
3% {
|
||||
backdrop-filter: sepia(1) contrast(1.5) brightness(20%) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
4% {
|
||||
backdrop-filter: brightness(300%) sepia(1) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
7% {
|
||||
backdrop-filter: brightness(1) sepia(1) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
backdrop-filter: brightness(1) sepia(1) saturate(3) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spiders */
|
||||
.spider:nth-child(odd) {
|
||||
animation-name: swingFast;
|
||||
|
|
@ -260,59 +232,57 @@ body::after {
|
|||
.spider:nth-child(2) {
|
||||
animation-delay: 250ms;
|
||||
animation-duration: 2100ms;
|
||||
left: 20%;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.spider:nth-child(3) {
|
||||
animation-delay: 300ms;
|
||||
animation-duration: 1600ms;
|
||||
left: 30%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.spider:nth-child(4) {
|
||||
animation-delay: 400ms;
|
||||
animation-duration: 1800ms;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.spider:nth-child(5) {
|
||||
animation-delay: 240ms;
|
||||
animation-duration: 1900ms;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.spider:nth-child(6) {
|
||||
animation-delay: 250ms;
|
||||
animation-duration: 2300ms;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
.spider:nth-child(7) {
|
||||
animation-delay: 400ms;
|
||||
animation-duration: 2100ms;
|
||||
left: 70%;
|
||||
}
|
||||
|
||||
.spider:nth-child(8) {
|
||||
animation-delay: 4000ms;
|
||||
animation-duration: 200ms;
|
||||
left: 80%;
|
||||
left: 70%;
|
||||
}
|
||||
|
||||
.spider {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
|
||||
animation: swing 2s infinite;
|
||||
transform-origin: top;
|
||||
|
||||
transition: 0.8s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.spider {
|
||||
zoom: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@supports (-moz-appearance:none) {
|
||||
.spider {
|
||||
left: 5%;
|
||||
}
|
||||
.spider:nth-child(2) {
|
||||
left: 20%;
|
||||
}
|
||||
.spider:nth-child(3) {
|
||||
left: 35%;
|
||||
}
|
||||
.spider:nth-child(4) {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spider:hover .body {
|
||||
transform: rotate(20deg);
|
||||
transition: 0.4s ease-in-out;
|
||||
|
|
@ -357,19 +327,18 @@ body::after {
|
|||
|
||||
.spider .body .eye:after {
|
||||
background: #222;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: "";
|
||||
display: block;
|
||||
margin: 55%;
|
||||
border-radius: 50%;
|
||||
|
||||
animation: look 4s infinite;
|
||||
}
|
||||
|
||||
.spider:nth-child(8) .body .eye {
|
||||
background-color: #FF0000;
|
||||
background: radial-gradient(#FF9B9B, #FF0000);
|
||||
.spider:nth-child(4) .body .eye {
|
||||
background-color: #FF0000;
|
||||
background: radial-gradient(#FF9B9B, #FF0000);
|
||||
}
|
||||
|
||||
.spider:nth-child(odd) .body .eye:after {
|
||||
|
|
@ -468,10 +437,10 @@ body::after {
|
|||
|
||||
#fog-effect {
|
||||
pointer-events: none;
|
||||
position:fixed;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left: 0;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1031;
|
||||
}
|
||||
|
|
@ -530,31 +499,16 @@ body::after {
|
|||
font-weight: initial;
|
||||
}
|
||||
|
||||
/* Upsidedown */
|
||||
#canvas {
|
||||
position:absolute;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
/* Bones */
|
||||
#animate{
|
||||
margin-left:45%;
|
||||
margin-top:-5%;
|
||||
position: fixed;
|
||||
z-index:999;
|
||||
#bones-container {
|
||||
margin-top: -5%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
opacity:0.9;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Pumpkin */
|
||||
.fall-pumpkin {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-family: Serif;
|
||||
text-shadow: 0 0 1px #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes fall-pumpkins-fall {
|
||||
0% {
|
||||
top: -20%
|
||||
|
|
@ -577,7 +531,12 @@ body::after {
|
|||
}
|
||||
|
||||
.fall-pumpkin {
|
||||
position: fixed;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-family: Serif;
|
||||
text-shadow: 0 0 1px #000;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
z-index: 999;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -590,10 +549,10 @@ body::after {
|
|||
animation-play-state: running, running
|
||||
}
|
||||
|
||||
.fall-pumpkin:nth-of-type(0) {
|
||||
left: 1%;
|
||||
animation-delay: 0s, 0s
|
||||
.fall-pumpkin img {
|
||||
width: min(60px, 13vw) !important;
|
||||
}
|
||||
|
||||
.fall-pumpkin:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s
|
||||
|
|
@ -615,77 +574,37 @@ body::after {
|
|||
animation-delay: 8s, 3s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation delay: 3s, 1.5s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(10) {
|
||||
left: 100%;
|
||||
animation-delay: 3s, 2s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(11) {
|
||||
left: 5%;
|
||||
animation-delay: 1s, 4s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(12) {
|
||||
.fall-pumpkin:nth-of-type(7) {
|
||||
left: 15%;
|
||||
animation-delay: 1s, 1.5s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(13) {
|
||||
.fall-pumpkin:nth-of-type(8) {
|
||||
left: 25%;
|
||||
animation-delay: 6s, 2.5s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(14) {
|
||||
.fall-pumpkin:nth-of-type(9) {
|
||||
left: 35%;
|
||||
animation-delay: 4s, 1s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(15) {
|
||||
.fall-pumpkin:nth-of-type(10) {
|
||||
left: 45%;
|
||||
animation-delay: 2s, 4s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(16) {
|
||||
left: 55%;
|
||||
animation-delay: 8s, 3s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(17) {
|
||||
left: 65%;
|
||||
animation-delay: 6s, 3s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(18) {
|
||||
left: 75%;
|
||||
animation-delay: 2.5s, 4s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(19) {
|
||||
left: 85%;
|
||||
animation-delay: 2s, 0s
|
||||
}
|
||||
.fall-pumpkin:nth-of-type(20) {
|
||||
left: 95%;
|
||||
animation delay: 3s, 1.5s
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 5600ms linear infinite;
|
||||
animation: spin 5600ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Trick or Treat */
|
||||
|
|
@ -714,7 +633,7 @@ body::after {
|
|||
display:inline-block;
|
||||
}
|
||||
|
||||
#jump-scare-img {
|
||||
#jumpscare-img {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -727,9 +646,10 @@ body::after {
|
|||
|
||||
/* progressbar */
|
||||
.progress {
|
||||
position: relative;
|
||||
background-color: #1d9bf0;
|
||||
background-image: linear-gradient(0deg, #1d9bf0 0%, #59b1ec 100%);
|
||||
width: 270px;
|
||||
max-width: 95vw;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0px 12px 2px #ffffff10;
|
||||
|
|
@ -803,7 +723,31 @@ body::after {
|
|||
background-image: url('/assets/events/homoween/images/cursormarsey.webp?x=6') !important;
|
||||
}
|
||||
|
||||
.spider .body .eye::after {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.post-flair {
|
||||
padding-top: 5px !important;
|
||||
}
|
||||
|
||||
.has_header {
|
||||
padding-top: 79.54px !important
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.has_header {
|
||||
padding-top: calc(var(--safe-area-inset-top) + 65.8px) !important
|
||||
}
|
||||
}
|
||||
|
||||
#effigy {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
width: 120px;
|
||||
top: 230px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#effigy {
|
||||
width: 80px;
|
||||
top: 110px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
canvas.sketch {
|
||||
opacity: calc(0.1*{{ stab }});
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
img.cursor-stalker {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
z-index: 1000000000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -4,11 +4,20 @@ body {
|
|||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-color: #000;
|
||||
filter: sepia(100%) hue-rotate(180deg) saturate(300%);
|
||||
box-shadow: 0 0 900px rgba(0, 0, 0, 0.9) inset;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
filter: sepia(100%) hue-rotate(180deg) saturate(300%);
|
||||
}
|
||||
|
||||
#canvas {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
canvas.particles {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -1,26 +0,0 @@
|
|||
function setBannerDay(day){
|
||||
let sky = document.getElementById("banner-homoween-svg"),
|
||||
moon = document.getElementById("banner-homoween-moon"),
|
||||
house = document.getElementById("house-fill-gradient-stop"),
|
||||
ground = document.getElementById("ground-gradient-stop"),
|
||||
objects = document.getElementById("banner-homoween-objects"),
|
||||
stars = document.getElementById("banner-homoween-stars")
|
||||
|
||||
sky.style.backgroundImage = "var(--sky-gradient-day"+day+")"
|
||||
moon.style.fill = "var(--moon-fill-day"+day+")"
|
||||
moon.style.filter = "var(--moon-shadow-day"+day+")"
|
||||
moon.style.cy = "var(--moon-position-day"+day+")"
|
||||
house.style.stopColor = "var(--house-shadow-day"+day+")"
|
||||
ground.style.stopColor = "var(--ground-shadow-day"+day+")"
|
||||
objects.style.fill = "var(--object-fill-day"+day+")"
|
||||
stars.style.opacity = "var(--star-opacity-day"+day+")"
|
||||
}
|
||||
|
||||
function cycleBanner(){
|
||||
i=1
|
||||
asdf = setInterval(function(){
|
||||
setBannerDay(i)
|
||||
if (i > 9){clearInterval(asdf)}
|
||||
i++
|
||||
}, 250)
|
||||
}
|
||||
|
|
@ -1,13 +1,9 @@
|
|||
const el = document.getElementById("banner-homoween-title");
|
||||
|
||||
function animateBannerText() {
|
||||
const letters = el.getElementsByTagName("tspan");
|
||||
const letters = el.getElementsByTagName("tspan");
|
||||
|
||||
for (let i = 0; i < letters.length; i++) {
|
||||
letters.item(i).style.transition = `all 600ms ${600 + i * 40}ms`;
|
||||
}
|
||||
|
||||
setTimeout(() => el.classList.add("life"), 1000);
|
||||
for (let i = 0; i < letters.length; i++) {
|
||||
letters.item(i).style.transition = `all 600ms ${600 + i * 40}ms`;
|
||||
}
|
||||
|
||||
animateBannerText();
|
||||
setTimeout(() => el.classList.add("life"), 1000);
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
/*
|
||||
A Bloody Mess by Rob Glazebrook
|
||||
By default, canvas does not clear between frames. I'm taking advantage of that to create the running blood effect.
|
||||
This pen was inspired by Katy Decorah's BLOOD: https://codepen.io/katydecorah/pen/Lkogi
|
||||
*/
|
||||
|
||||
|
||||
let i = 0;
|
||||
|
||||
const stabs = document.getElementById('stabs').value
|
||||
|
||||
let blood = Sketch.create({autoclear: false, autopause: false}),
|
||||
drops = [],
|
||||
dropCount = stabs*10,
|
||||
maxDrops = dropCount+1,
|
||||
Drop = function() {
|
||||
this.x = random(0,blood.width);
|
||||
this.radius = random(10,20);
|
||||
this.y = -this.radius - random(50,100);
|
||||
this.vy = this.radius/6;
|
||||
this.r = ~~random(240,255);
|
||||
this.g = ~~random(0,20);
|
||||
this.b = ~~random(0,20);
|
||||
};
|
||||
|
||||
blood.update = function() {
|
||||
let d = drops.length;
|
||||
while(d < dropCount && i < maxDrops) {
|
||||
let drop = new Drop();
|
||||
drops.push(drop);
|
||||
d++;
|
||||
i++;
|
||||
}
|
||||
while(d-- && i < maxDrops) {
|
||||
let drop = drops[d];
|
||||
drop.y += drop.vy;
|
||||
if(drop.y - drop.radius > blood.height) {
|
||||
drops.splice(d,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blood.draw = function() {
|
||||
let d = drops.length;
|
||||
while(d-- && i < maxDrops) {
|
||||
let drop = drops[d];
|
||||
blood.beginPath();
|
||||
blood.fillStyle = 'rgba('+drop.r+','+drop.g+','+drop.b+',.8)';
|
||||
blood.arc(drop.x,drop.y,drop.radius,0,TWO_PI);
|
||||
blood.fill();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,15 @@
|
|||
let bones_container = document.getElementById('animate');
|
||||
const number = bones_container.dataset.bones
|
||||
|
||||
// Stackable
|
||||
// With each award, append a new image to array
|
||||
let bones_container = document.getElementById('bones-container');
|
||||
const sources = ['skeleton1.webp','skeleton2.webp','skeleton3.webp','skeleton4.webp','skeleton5.webp','skeleton6.webp'];
|
||||
|
||||
if(number > sources.length){
|
||||
number = sources.length
|
||||
}
|
||||
let number = parseInt(bones_container.dataset.bones)
|
||||
if (screen_width >= 768)
|
||||
number *= 2
|
||||
|
||||
const n = sources.length - number
|
||||
const pw = screen.availWidth/6
|
||||
const pw = screen_width / 3.5
|
||||
|
||||
let circles = [];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let i = 0; i < number; i++) {
|
||||
addCircle(i * 150, [10 + 0, pw]);
|
||||
addCircle(i * 150, [10 + 0, -pw]);
|
||||
addCircle(i * 150, [10 - (0.5*pw), -pw]);
|
||||
|
|
@ -60,7 +55,6 @@ function Circle(x, y, v, range) {
|
|||
_this.x += _this.v.x;
|
||||
this.element.style.opacity = 1;
|
||||
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||
this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||
this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
const thunder1 = new Audio(`/assets/events/homoween/audio/haunted/thunder1.mp3`)
|
||||
const thunder2 = new Audio(`/assets/events/homoween/audio/haunted/thunder2.mp3`)
|
||||
const is_upsidedown = localStorage.getItem('setting_upsidedown')
|
||||
const thunder1 = document.getElementById("thunder1")
|
||||
const thunder2 = document.getElementById("thunder2")
|
||||
|
||||
const div = document.getElementById("haunted-effect")
|
||||
|
||||
const stylesheet_haunted = document.createElement("link")
|
||||
stylesheet_haunted.setAttribute("rel", "stylesheet")
|
||||
stylesheet_haunted.setAttribute("href", "/assets/events/homoween/css/haunted2.css?x=1")
|
||||
stylesheet_haunted.setAttribute("href", "/assets/events/homoween/css/haunt2.css?x=1")
|
||||
stylesheet_haunted.disabled = true
|
||||
document.head.appendChild(stylesheet_haunted)
|
||||
|
||||
window.onload = function(){
|
||||
thunder2.volume = 0.5
|
||||
if (thunder1)
|
||||
thunder2.volume = 0.5
|
||||
lightningStrike("normal")
|
||||
}
|
||||
|
||||
|
|
@ -20,25 +21,23 @@ setInterval(function(){
|
|||
} else {
|
||||
lightningStrike("normal")
|
||||
}
|
||||
},14000)
|
||||
}, 14000)
|
||||
|
||||
function lightningStrike(strike) {
|
||||
if(is_upsidedown == 'true'){
|
||||
div.style.animation = "haunted-upsidedown 20s"
|
||||
} else {
|
||||
div.style.animation = "haunted 20s"
|
||||
}
|
||||
div.style.animation = "haunted 20s"
|
||||
|
||||
if(strike == "haunted"){
|
||||
stylesheet_haunted.disabled = false
|
||||
thunder2.play()
|
||||
if (thunder1)
|
||||
thunder2.play()
|
||||
setTimeout(function(){
|
||||
stylesheet_haunted.disabled = true
|
||||
},700)
|
||||
}, 700)
|
||||
}
|
||||
|
||||
thunder1.play()
|
||||
if (thunder1)
|
||||
thunder1.play()
|
||||
setTimeout(function(){
|
||||
div.style.animation = "none"
|
||||
},1000)
|
||||
}, 1000)
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// Jump scare function
|
||||
function scare() {
|
||||
const image = document.getElementById("jump-scare-img");
|
||||
const image = document.getElementById("jumpscare-img");
|
||||
image.style.display = "block";
|
||||
|
||||
const jumpscare_audio = document.getElementById('jumpscare-audio')
|
||||
|
|
|
|||
|
|
@ -626,3 +626,50 @@
|
|||
return Sketch;
|
||||
|
||||
}));
|
||||
|
||||
|
||||
let i = 0;
|
||||
|
||||
const stabs = document.getElementById('stabs').value
|
||||
|
||||
let blood = Sketch.create({autoclear: false, autopause: false}),
|
||||
drops = [],
|
||||
dropCount = stabs*4,
|
||||
maxDrops = dropCount+1,
|
||||
Drop = function() {
|
||||
this.x = random(0,blood.width);
|
||||
this.radius = random(7,12);
|
||||
this.y = -this.radius - random(50,100);
|
||||
this.vy = this.radius/6;
|
||||
this.r = ~~random(240,255);
|
||||
this.g = ~~random(0,20);
|
||||
this.b = ~~random(0,20);
|
||||
};
|
||||
|
||||
blood.update = function() {
|
||||
let d = drops.length;
|
||||
while(d < dropCount && i < maxDrops) {
|
||||
let drop = new Drop();
|
||||
drops.push(drop);
|
||||
d++;
|
||||
i++;
|
||||
}
|
||||
while(d-- && i < maxDrops) {
|
||||
let drop = drops[d];
|
||||
drop.y += drop.vy;
|
||||
if(drop.y - drop.radius > blood.height) {
|
||||
drops.splice(d,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blood.draw = function() {
|
||||
let d = drops.length;
|
||||
while(d-- && i < maxDrops) {
|
||||
let drop = drops[d];
|
||||
blood.beginPath();
|
||||
blood.fillStyle = 'rgba('+drop.r+','+drop.g+','+drop.b+',.8)';
|
||||
blood.arc(drop.x,drop.y,drop.radius,0,TWO_PI);
|
||||
blood.fill();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
const assets = [
|
||||
"marseyjason",
|
||||
"marseynightmare",
|
||||
"marseyhellraiser",
|
||||
"marseysaw",
|
||||
"marseyzombie2",
|
||||
"marseywerewolf",
|
||||
"marseysatangoat",
|
||||
"marseyskeleton2",
|
||||
"marseystabby",
|
||||
"marseyface",
|
||||
"marseydaemon",
|
||||
"marseygrimreaper",
|
||||
"marseycheshire4",
|
||||
"marseyaugust",
|
||||
"marseycerebrus",
|
||||
"marseyzombie",
|
||||
"marseything",
|
||||
"marseytwins",
|
||||
"marseymonstrosity",
|
||||
"marseykrampus",
|
||||
"marseybaphomet",
|
||||
"marseyfacepeel",
|
||||
"carpwitchtrans",
|
||||
"capymummy",
|
||||
"marseynotesbardfinn"
|
||||
];
|
||||
|
||||
const stalker_container = document.getElementById("stalkers-container")
|
||||
|
||||
const count = parseInt(stalker_container.dataset.stalkersCount),
|
||||
size = 25,
|
||||
spacing = 4 - 0.05 * count,
|
||||
diameter = 20 + 0.5 * count,
|
||||
rotation = 0.04 + 0.001 * count,
|
||||
speed = 0.03 + 0.002 * count,
|
||||
offset = 10;
|
||||
|
||||
let stalkers = [],
|
||||
a = Math.round(size * diameter * 0.2),
|
||||
current = offset,
|
||||
mouse = {
|
||||
x: a + offset,
|
||||
y: a + offset
|
||||
};
|
||||
|
||||
// populate stalkers
|
||||
for (let i = 0; i < count; i++) {
|
||||
stalkers[i] = new stalker(i);
|
||||
}
|
||||
|
||||
function stalker(i) {
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.X = 0;
|
||||
this.Y = 0;
|
||||
this.img = document.createElement("img");
|
||||
this.img.id = "stalker-" + i;
|
||||
this.img.className = "cursor-stalker";
|
||||
this.img.src = `${SITE_FULL_IMAGES}/e/${assets[i]}.webp`;
|
||||
stalker_container.appendChild(this.img);
|
||||
}
|
||||
|
||||
function placestalker(stalker, x, y) {
|
||||
stalker.x = x;
|
||||
stalker.y = y;
|
||||
const left = stalker.x + "px";
|
||||
const top = stalker.y + "px";
|
||||
stalker.img.style.transform = `translate(${left}, ${top})`
|
||||
}
|
||||
|
||||
function makeCircle() {
|
||||
let stalker;
|
||||
current -= rotation;
|
||||
for (let i = count - 1; i > -1; --i) {
|
||||
stalker = stalkers[i];
|
||||
const top = Math.round(stalker.y + a * Math.sin((current + i) / spacing) - 15) + "px";
|
||||
const left = Math.round(stalker.x + a * Math.cos((current + i) / spacing)) + "px";
|
||||
stalker.img.style.transform = `translate(${left}, ${top})`
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener("mousemove", function (e) {
|
||||
mouse.x = e.pageX;
|
||||
mouse.y = e.pageY;
|
||||
});
|
||||
|
||||
function getRandom(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
let stalker = stalkers[0];
|
||||
let prevstalker = stalkers[0];
|
||||
stalker.x = stalker.X += (mouse.x - stalker.X) * speed;
|
||||
if (screen_width < 768) {
|
||||
stalker.x = Math.min(stalker.x, screen_width * 0.5);
|
||||
}
|
||||
stalker.y = stalker.Y += (mouse.y - stalker.Y) * speed;
|
||||
for (let i = count - 1; i > 0; --i) {
|
||||
stalker = stalkers[i];
|
||||
prevstalker = stalkers[i - 1];
|
||||
stalker.x = stalker.X += (prevstalker.x - stalker.X) * speed;
|
||||
stalker.y = stalker.Y += (prevstalker.y - stalker.Y) * speed;
|
||||
}
|
||||
makeCircle();
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
draw();
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
let st = init("canvas"), // stranger things var
|
||||
let st = init("canvas"),
|
||||
w = (canvas.width = innerWidth),
|
||||
h = (canvas.height = innerHeight);
|
||||
|
||||
|
|
@ -25,8 +25,13 @@ class firefly {
|
|||
|
||||
let f = [];
|
||||
|
||||
let num_fireflies = 10
|
||||
if (screen_width >= 768) {
|
||||
num_fireflies = 50
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (f.length < 100) {
|
||||
if (f.length < num_fireflies) {
|
||||
for (let j = 0; j < 10; j++) {
|
||||
f.push(new firefly());
|
||||
}
|
||||
|
|
@ -51,30 +56,10 @@ function init(elemid) {
|
|||
return st;
|
||||
}
|
||||
|
||||
window.requestAnimFrame = function () {
|
||||
return (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback) {
|
||||
window.setTimeout(callback);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
function loop() {
|
||||
window.requestAnimFrame(loop);
|
||||
st.clearRect(0, 0, w, h);
|
||||
draw();
|
||||
}
|
||||
|
||||
addEventListener("resize", function () {
|
||||
(w = canvas.width = innerWidth),
|
||||
(h = canvas.height = innerHeight);
|
||||
loop();
|
||||
});
|
||||
|
||||
loop();
|
||||
setInterval(loop, 1000 / 60);
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,9 +1,13 @@
|
|||
const song = document.getElementById('event-song').value;
|
||||
const audio = new Audio(song);
|
||||
audio.loop = true;
|
||||
if (!playing_music()) {
|
||||
addEventListener("load", () => {
|
||||
const audio = document.getElementById('event-song');
|
||||
|
||||
audio.play();
|
||||
document.addEventListener('click', () => {
|
||||
if (audio.paused) audio.play();
|
||||
}, {once : true});
|
||||
prepare_to_pause(audio)
|
||||
handle_playing_music(audio)
|
||||
|
||||
audio.play();
|
||||
document.addEventListener('click', () => {
|
||||
if (audio.paused) audio.play();
|
||||
}, {once : true});
|
||||
prepare_to_pause(audio)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue