diff --git a/css/jazz.css b/css/jazz.css new file mode 100644 index 0000000..3ea4d98 --- /dev/null +++ b/css/jazz.css @@ -0,0 +1,222 @@ +body { + --bs-gutter-x: 0; + background: black !important; +} + +#screenRow { + gap: 0 !important; + margin: 0; + text-transform: uppercase; + letter-spacing: .1em; +} + +#screenRow { + --bs-gutter-x: 0; +} + +.card { + background: black; + border: none; + border-radius: 0; + margin-bottom: 0.5em !important; + width: min-content !important; +} + +.card:first-of-type { + border-bottom: 3px solid white; +} + +.card-header, +.card-header th{ + background: transparent; + font-weight: 400 !important; + font-size: 1.3em; + border: none; +} + +#screenRow .table { + --bs-border-width: 0; +} + +.minoes-table { + display: flex; + flex-direction: column; + filter: + drop-shadow(-2px 0 0 white) + drop-shadow(2px 0 0 white) + drop-shadow(0 -2px 0 white) + drop-shadow(0 2px 0 white) + drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%)); +} + +.minoes-table tr { + display: flex; + position: relative; + flex-direction: row; + z-index: calc(100 - var(--row)); +} + +#holdTable { + margin: 0 0 0 auto !important; +} + +#statsTable { + margin-right: 1.5em; +} + +#statsTable tr { + display: flex; + flex-flow: column; + align-items: center; +} + +#statsTable td, +#statsTable th { + margin: 0; + padding: 0 !important; + width: auto; + height: auto; + text-transform: uppercase; +} + +#statsTable th { + display: inline; + flex-flow: row; + font-size: 0.8em; + text-align: center; + width: 200%; +} + +#statsTable td { + font-size: 1.3em; + font-weight: 600; + color: white; +} + +td#timeCell { + text-align: center; +} + +#matrixCard { + background: transparent; + border-top: none; + border-left: 3px solid white; + border-right: 3px solid white; + border-bottom: 3px solid white; +} + +tr.matrix td:not(.mino) { + border: 0; +} + +.minoes-table td { + display: inline-block; + width: var(--cell-side); + height: var(--cell-side); + padding: 0 !important; + z-index: calc(200 - var(--row)); +} + +.mino { + width: inherit; + height: inherit; + display: block; + padding: 0; + opacity: 100%; + border-width: 1px; + border-style: solid; + box-shadow: 0 -6px 0 var(--box-shadow-color); +} + +.I.mino { + background-color: #42AFE1; + border-color: #6CEAFF; + --box-shadow-color: #6CEAFF; +} + +.J.mino { + background-color: #1165B5; + border-color: #339BFF; + --box-shadow-color: #339BFF; +} + +.L.mino { + background-color: #F38927; + border-color: #FFBA59; + --box-shadow-color: #FFBA59; +} + +.O.mino { + background-color: #F6D03C; + border-color: #FFFF7F; + --box-shadow-color: #FFFF7F; +} + +.S.mino { + background-color: #32ee3e; + border-color: #84F880; + --box-shadow-color: #84F880; +} + +.T.mino { + background-color: #9739A2; + border-color: #D958E9; + --box-shadow-color: #D958E9; +} + +.Z.mino { + background-color: #EB4F65; + border-color: #FF7F79; + --box-shadow-color: #FF7F79; +} + +.ghost.mino { + background-color: #fff4; + border-color: #fff8; + opacity: 5%; + box-shadow: none; + transform: translateY(-6px); +} + +.moving.mino { + filter: saturate(80%) brightness(130%); +} + +.locking.mino { + filter: saturate(20%) brightness(300%); +} + +.locked.mino { + animation: locked-animation; + animation-duration: 0.2s; +} + +.disabled.mino { + filter: brightness(50%) contrast(65%); + opacity: 70%; +} + +@keyframes locked-animation { + from { + filter: saturate(50%) brightness(300%); + } +} + +@keyframes cleared-line-animation { + from { + background-color: #eeeeee; + } + to { + background-color: transparent; + } +} + +@keyframes trail-animation { + from { + background-color: #ceffff05; + filter: saturate(50%) brightness(110%); + } + to { + background-color: transparent; + } +} \ No newline at end of file diff --git a/css/retro.css b/css/old-school.css similarity index 78% rename from css/retro.css rename to css/old-school.css index d971cb4..80bc511 100644 --- a/css/retro.css +++ b/css/old-school.css @@ -4,11 +4,11 @@ @font-face { font-family: "Early GameBoy"; - src: url("retro/Early GameBoy.ttf"); + src: url("old-school/Early GameBoy.ttf"); } #screenRow { - background-image: url("retro/bg.png"); + background-image: url("old-school/bg.png"); background-size: 10px; padding: 40px 20px; border: 3px inset black; @@ -22,7 +22,7 @@ .card { background: #8D8E04; border-radius: 0; - border-image-source: url("retro/border-sm.png"); + border-image-source: url("old-school/border-sm.png"); border-image-slice: 25; border-image-width: 13px; border-image-repeat: repeat; @@ -37,7 +37,7 @@ #matrixCard { background: #808302; - border-image-source: url("retro/border-lg.png"); + border-image-source: url("old-school/border-lg.png"); border-image-slice: 30; border-image-width: 15px; border-image-outset: 15px; @@ -89,31 +89,31 @@ } .I.mino { - background-image: url("retro/I-mino.png") + background-image: url("old-school/I-mino.png") } .J.mino { - background-image: url("retro/J-mino.png") + background-image: url("old-school/J-mino.png") } .L.mino { - background-image: url("retro/L-mino.png") + background-image: url("old-school/L-mino.png") } .O.mino { - background-image: url("retro/O-mino.png") + background-image: url("old-school/O-mino.png") } .S.mino { - background-image: url("retro/S-mino.png") + background-image: url("old-school/S-mino.png") } .T.mino { - background-image: url("retro/T-mino.png") + background-image: url("old-school/T-mino.png") } .Z.mino { - background-image: url("retro/Z-mino.png") + background-image: url("old-school/Z-mino.png") } @keyframes blinker { diff --git a/css/retro/Early GameBoy.ttf b/css/old-school/Early GameBoy.ttf similarity index 100% rename from css/retro/Early GameBoy.ttf rename to css/old-school/Early GameBoy.ttf diff --git a/css/retro/I-mino.png b/css/old-school/I-mino.png similarity index 100% rename from css/retro/I-mino.png rename to css/old-school/I-mino.png diff --git a/css/retro/J-mino.png b/css/old-school/J-mino.png similarity index 100% rename from css/retro/J-mino.png rename to css/old-school/J-mino.png diff --git a/css/retro/L-mino.png b/css/old-school/L-mino.png similarity index 100% rename from css/retro/L-mino.png rename to css/old-school/L-mino.png diff --git a/css/retro/O-mino.png b/css/old-school/O-mino.png similarity index 100% rename from css/retro/O-mino.png rename to css/old-school/O-mino.png diff --git a/css/retro/S-mino.png b/css/old-school/S-mino.png similarity index 100% rename from css/retro/S-mino.png rename to css/old-school/S-mino.png diff --git a/css/retro/T-mino.png b/css/old-school/T-mino.png similarity index 100% rename from css/retro/T-mino.png rename to css/old-school/T-mino.png diff --git a/css/retro/Z-mino.png b/css/old-school/Z-mino.png similarity index 100% rename from css/retro/Z-mino.png rename to css/old-school/Z-mino.png diff --git a/css/retro/bg.png b/css/old-school/bg.png similarity index 100% rename from css/retro/bg.png rename to css/old-school/bg.png diff --git a/css/retro/border-lg.png b/css/old-school/border-lg.png similarity index 100% rename from css/retro/border-lg.png rename to css/old-school/border-lg.png diff --git a/css/retro/border-sm.png b/css/old-school/border-sm.png similarity index 100% rename from css/retro/border-sm.png rename to css/old-school/border-sm.png diff --git a/css/retro/edo3adc8h2re1.jpeg b/css/old-school/edo3adc8h2re1.jpeg similarity index 100% rename from css/retro/edo3adc8h2re1.jpeg rename to css/old-school/edo3adc8h2re1.jpeg diff --git a/css/old-school/maxresdefault.jpg b/css/old-school/maxresdefault.jpg new file mode 100644 index 0000000..00e839a Binary files /dev/null and b/css/old-school/maxresdefault.jpg differ diff --git a/css/synthwave.css b/css/synthwave.css index 07dc148..ca84c79 100644 --- a/css/synthwave.css +++ b/css/synthwave.css @@ -31,7 +31,7 @@ body[data-bs-theme="dark"] { .mino { background: var(--color); - border: 3px solid var(--border); + border: 1px solid var(--border); box-shadow: 0 0 8px var(--border); } diff --git a/index.html b/index.html index dff9c1a..aa39b8b 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + @@ -70,12 +70,11 @@