diff --git a/.glitch-assets b/.glitch-assets index 8089974..9a32cba 100644 --- a/.glitch-assets +++ b/.glitch-assets @@ -15,3 +15,28 @@ {"uuid":"yEDZsSX7I7P2NlF1","deleted":true} {"uuid":"VY2dLeOvcf8ffuEw","deleted":true} {"uuid":"XPQ2UUJettC9yQ6L","deleted":true} +{"name":"a8ea3519-e4b3-4ddc-9bc1-631b3cc82ce0.image.png","date":"2024-05-21T03:34:43.481Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/a8ea3519-e4b3-4ddc-9bc1-631b3cc82ce0.image.png","type":"image/png","size":42241,"imageWidth":1391,"imageHeight":762,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fa8ea3519-e4b3-4ddc-9bc1-631b3cc82ce0.image.png","thumbnailWidth":330,"thumbnailHeight":181,"uuid":"7tvho3fs1o1pmI1y"} +{"uuid":"7tvho3fs1o1pmI1y","deleted":true} +{"name":"b84e965f-2214-46b2-b8d2-a990df908700.image.png","date":"2024-05-23T14:27:13.319Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/b84e965f-2214-46b2-b8d2-a990df908700.image.png","type":"image/png","size":1431254,"imageWidth":3000,"imageHeight":3000,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fb84e965f-2214-46b2-b8d2-a990df908700.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T2HN3K7XP7SdGaMG"} +{"uuid":"T2HN3K7XP7SdGaMG","deleted":true} +{"name":"logo.png","date":"2024-05-23T19:57:39.675Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/logo.png","type":"image/png","size":17305,"imageWidth":1000,"imageHeight":170,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Flogo.png","thumbnailWidth":330,"thumbnailHeight":57,"uuid":"aUDkZYylJwHEzvCI"} +{"name":"nerdfonts.woff2","date":"2024-06-02T11:32:16.478Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/nerdfonts.woff2","type":"font/woff2","size":963444,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fnerdfonts.woff2","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"hm5XV39Zoiona8W1"} +{"uuid":"hm5XV39Zoiona8W1","deleted":true} +{"name":"bc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","date":"2024-06-02T17:14:30.412Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/bc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","type":"image/png","size":475875,"imageWidth":1280,"imageHeight":1280,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fbc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"XDK6WgmNeQhtHjUb"} +{"uuid":"XDK6WgmNeQhtHjUb","deleted":true} +{"name":"fof-genesis.png","date":"2024-06-02T17:14:30.412Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png","type":"image/png","size":475875,"imageWidth":1280,"imageHeight":1280,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fbc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"XDK6WgmNeQhtHjUb"} +{"name":"818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","date":"2024-06-02T17:17:30.235Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","type":"image/png","size":1061446,"imageWidth":1200,"imageHeight":437,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","thumbnailWidth":330,"thumbnailHeight":121,"uuid":"vgJVArrAyvLmUYk1"} +{"uuid":"vgJVArrAyvLmUYk1","deleted":true} +{"name":"vnmc2023.png","date":"2024-06-02T17:17:30.235Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png","type":"image/png","size":1061446,"imageWidth":1200,"imageHeight":437,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","thumbnailWidth":330,"thumbnailHeight":121,"uuid":"vgJVArrAyvLmUYk1"} +{"name":"23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop (1).jpg","date":"2024-06-02T17:25:30.638Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop%20(1).jpg","type":"image/jpeg","size":489485,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop%20(1).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"v0vCS54O9bhLoGcJ"} +{"name":"c6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","date":"2024-06-02T17:25:30.774Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/c6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","type":"image/jpeg","size":424341,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fc6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"59oiOcwfsxcwtmyF"} +{"name":"729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop (2).jpg","date":"2024-06-02T17:25:31.518Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop%20(2).jpg","type":"image/jpeg","size":519419,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop%20(2).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"JpKznRKXqbXqt1zl"} +{"uuid":"59oiOcwfsxcwtmyF","deleted":true} +{"name":"glitch1.jpg","date":"2024-06-02T17:25:30.774Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg","type":"image/jpeg","size":424341,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fc6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"59oiOcwfsxcwtmyF"} +{"uuid":"JpKznRKXqbXqt1zl","deleted":true} +{"name":"glitch2.jpg","date":"2024-06-02T17:25:31.518Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg","type":"image/jpeg","size":519419,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop%20(2).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"JpKznRKXqbXqt1zl"} +{"uuid":"v0vCS54O9bhLoGcJ","deleted":true} +{"name":"glich3.jpg","date":"2024-06-02T17:25:30.638Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg","type":"image/jpeg","size":489485,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop%20(1).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"v0vCS54O9bhLoGcJ"} +{"name":"8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","date":"2024-06-02T18:31:27.051Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","type":"image/png","size":2624160,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T6g81VqtzSI3OCCx"} +{"uuid":"T6g81VqtzSI3OCCx","deleted":true} +{"name":"oblitus-requiem.png","date":"2024-06-02T18:31:27.051Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png","type":"image/png","size":2624160,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T6g81VqtzSI3OCCx"} diff --git a/assets/css/main.css b/assets/css/main.css index 9126ebe..70434a9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,87 +1,316 @@ +body { + margin: 0px; +} +main { + font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; + margin: 0.75rem; +} +hr { + margin: 2rem 0px; +} nav { - z-index: 3; + z-index: 4; position: -webkit-sticky; position: sticky; - top: 0.5rem; + top: 10px; background-color: #f5f5f5; - font-family: Jost, "Noto Sans Japanese", sans-serif; - padding: 0.1rem; - margin: 0.2rem; - margin-top: 1rem; + font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; + font-size: 1.25rem; + padding: 4px; + margin: 10px; + margin-top: 15px; border-radius: 12px; box-shadow: 0px 0px 12px 0.1px #d0d0d0; + display: grid; + grid-template-columns: auto 1fr auto; ul { - padding-left: 1rem; + padding-left: 15px; list-style-type: none; margin: 0px; - margin-bottom: 0.4rem; + align-content: center; li { display: inline-block; - padding-right: 0.25rem; + padding-right: 4px; vertical-align: middle; p { padding-top: 0.4rem; vertical-align: middle; - margin: 1rem 1rem; + margin: 0.5rem 1rem; } } img { margin-top: 0.25rem; height: 1.5rem; vertical-align: middle; - padding-right: 0.25rem; + padding-right: 0.3rem; } } + a { + color: black; + text-decoration: none; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } .vertical-line { width: 0.1rem; background-color: black; height: 100%; } - a { - color: black; - text-decoration: none; + .social { + font-size: 2.5rem; + padding-bottom: 0.4rem; + transition: 0.3s; + } + .social:hover { + opacity: 50%; } } -/*main { - position: relative; -}*/ + +footer { + font-family: Jost, "Noto Sans Japanese", sans-serif; + background-color: white; + bottom: 0px; + z-index: 3; + padding: 1rem; + background-color: #ddd; + margin: 0px; + margin-top: 1rem; + text-align: center; +} + +/*---nav---*/ + +.menu { + padding-top: 0.4rem; + padding-bottom: 0.8rem; + p { + background-size: 0% 0.2em; + background-image: linear-gradient(#000, #000); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; + } + p:hover, + .currentpage { + opacity: 60%; + background-size: 100% 0.2em; + } +} + +.burger { + border: none; + display: none; + width: 70px; + height: 70px; + margin: 0 0; + position: relative; + position: relative; + cursor: pointer; + background-color: #f5f5f5; + border-radius: 12px; + transition: 0.25s ease-in-out; + span { + transition: 0.25s ease-in-out; + box-sizing: border-box; + display: block; + background-color: #000; + border-radius: 2px; + } + #hamburger { + position: absolute; + height: 100%; + width: 100%; + top: 0%; + left: 0%; + span { + width: 70%; + height: 5%; + top: 17.5%; + left: 16%; + position: relative; + margin: 12% 0; + } + span:nth-child(1) { + transition-delay: 0.3s; + } + span:nth-child(2) { + transition-delay: 0.4s; + } + span:nth-child(3) { + transition-delay: 0.5s; + } + } + #cross { + position: absolute; + height: 100%; + width: 100%; + top: 0%; + left: 1.5%; + transform: rotate(45deg); + + span:nth-child(1) { + height: 0%; + width: 5%; + position: absolute; + right: 46%; /*a / */ + top: 10%; + transform: translate(-50%); + transition-delay: 0s; + } + span:nth-child(2) { + width: 0%; + height: 5%; + position: absolute; + right: 11%; + top: 48%; + transition-delay: 0s; + } + } +} + +.burger:hover { + opacity: 40%; +} + +.burger.open { + #hamburger { + span { + width: 0%; + } + span:nth-child(1) { + transition-delay: 0s; + } + span:nth-child(2) { + transition-delay: 0.1s; + } + span:nth-child(3) { + transition-delay: 0.2s; + } + } + #cross { + span:nth-child(1) { + height: 80%; + transition-delay: 0.3s; + } + span:nth-child(2) { + width: 80%; + transition-delay: 0.3s; + } + } +} + +.dropdown { + display: none; +} + +/*---- main ----*/ .container { position: relative; height: 50vw; - width: 95%; + width: 100%; margin: auto; margin-top: 1rem; } .carousel { + z-index: 1; width: 100%; height: 100%; - border: 1px solid #DDD; - border-radius: 7px; + border: 1px solid #ddd; + border-radius: 0.5rem; position: relative; + overflow: hidden; } -.slider { - width: 100%; +.slider-bg { height: 100%; -} -.slider section { + width: 100%; + overflow: hidden; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + background-position: center; + filter: blur(5px) brightness(75%); + -webkit-filter: blur(5px) brightness(60%); + z-index: 1; position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; display: flex; justify-content: center; align-content: center; transition: 0.3s; + padding: auto; + border-radius: 0.5rem; + transform: scale(1.1); +} +.slider section { + overflow: hidden; + z-index: 1; + position: absolute; + display: flex; + justify-content: center; + align-content: center; + transition: 0.3s; + padding: auto; + width: 100%; + height: 100%; + border-radius: 0.5rem; + font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; + div { + color: #fff; + position: relative; + z-index: 2; + margin: 0px; + display: grid; + justify-content: center; + grid-template-rows: 3.5fr 1fr 1fr 5rem; + grid-template-columns: 1fr auto 1fr; + } + h1 { + font-size: 2rem; + grid-row-start: 2; + grid-row-end: 3; + } + p { + font-size: 1.25rem; + grid-row-start: 3; + grid-row-end: 4; + } + p, + h1 { + width: 60vw; + text-align: center; + grid-column-start: 2; /*|•|*/ + grid-column-end: 3; + } +} +.slider:hover { + cursor: pointer; } .prev, .next { + background-color: rgba(0, 0, 0, 0.3); + color: #fff; position: absolute; height: 5rem; width: 5rem; - font-size: 4rem; + font-size: 4.5rem; top: 50%; + transform: translate(0, -50%); z-index: 2; + cursor: pointer; + border-radius: 0.5rem; + font-family: serif; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .next { right: 1rem; @@ -90,23 +319,365 @@ nav { left: 1rem; } .pgctrl { + z-index: 1; position: absolute; - bottom: 0px; + bottom: 0.5rem; left: 50%; + vertical-align: middle; transform: translate(-50%); - padding: 0px; - margin: 0px; + padding: 0px 0.5rem; + margin: 0px 0px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 10px; list-style: none; display: flex; z-index: 2; font-size: 4rem; + color: white; cursor: pointer; transition: 0.75s; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .control { text-align: center; } -footer { - font-family: Jost, "Noto Sans Japanese", sans-serif; +/* Cards */ + +.album-cards { + margin: auto; + justify-content: center; + display: grid; + grid-template-rows: repeat(auto-fill, 23rem); + grid-template-columns: repeat(auto-fill, 23rem); + grid-gap: 1rem; + .card { + transition: 0.75s; + color: black; + background-color: #ddd; + height: 23rem; + border-radius: 7px; + text-decoration: none; + div { + z-index: 1; + position: inherit; + height: 100%; + width: 100%; + background-color: #ddd; + border-radius: 7px; + transition: 0.5s; + } + h2 { + font-size: 1.9rem; + } + p { + font-size: 1.2rem; + } + h2, + p { + color: white; + padding: 0.3rem 0.75rem 0.3rem 0.75rem; + position: relative; + z-index: 3; + opacity: 0; + transition: 0.5s; + } + .bg-img { + /* background: url(/assets/img/t404_null-logo.png); */ + background-size: cover; + position: absolute; + height: 23rem; + width: 23rem; + } + } + .card:hover { + .bg-img { + filter: blur(5px) brightness(50%); + -webkit-filter: blur(5px) brightness(50%); + } + h2, + p { + filter: none; + opacity: 1; + } + } +} + +.half-image-cards { + margin: auto; + justify-content: center; + display: grid; + grid-template-rows: repeat(auto-fill, 23rem); + grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem)); + grid-gap: 1rem; + .card { + transition: 0.75s; + color: black; + background-color: #ddd; + height: 23rem; + border-radius: 7px; + text-decoration: none; + div { + z-index: 1; + position: inherit; + height: 100%; + width: 100%; + background-color: #ddd; + border-radius: 7px; + transition: 0.5s; + } + h2 { + font-size: 1.9rem; + } + p { + font-size: 1.1rem; + } + h2, + p { + /* color: black; */ + padding: 0.3rem 10vw 0.3rem 5vw; + position: relative; + z-index: 3; + opacity: 0; + transition: 0.5s; + } + .bg-img { + /* background: url(/assets/img/t404_null-logo.png); */ + background-size: cover; + position: absolute; + background-position: center left; + height: 23rem; + width: 30rem; + } + } + .card:hover { + .bg-img { + filter: brightness(40%); + -webkit-filter: brightness(40%); + width: 8vw; + border-radius: 7px 0px 0px 7px; + } + h2, + p { + padding: 0.3rem 5vw 0.3rem 10vw; + filter: none; + opacity: 1; + } + } +} + +.topic { + padding: 1rem; + font-size: 3rem; + margin-top: 3vw; + margin-bottom: 7vw; + a { + text-decoration: none; + color: black; + background-size: 0% 0.2em; + background-image: linear-gradient(black, black); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; + } + a:hover { + opacity: 70%; + background-size: 100% 0.2em; + } +} + +/* overall */ +.icons { + font-size: 2.25rem; + font-weight: 500; +} +@font-face { + font-family: "NerdFontsSymbols Nerd Font"; + src: url("/assets/fonts/nf-symbols.woff2") format("woff2"); +} +.nf-icons { + font-family: "NerdFontsSymbols Nerd Font"; +} + +/* Releases */ +.release-track { + background-size: cover; + background-position: center; + padding: 5% 20%; + strong { + color: #fff; + } + .text-box { + background-color: rgba(0, 0, 0, 75%); + color: #ddd; + padding: 2rem; + border-radius: 7px; + font-size: 1.2rem; + a { + text-decoration: none; + color: #fff; + background-size: 0% 0.2em; + background-image: linear-gradient(#ccc, #ccc); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; + } + a:hover { + color: #ccc; + background-size: 100% 0.2em; + } + } +} + +@media screen and (min-width: 1125px) and (max-width: 1620px) { + /*if(width<1700px&&width>=1335px)*/ + + nav { + .dropdown { + margin: 0.75rem; + position: absolute; + background-color: #f5f5f5; + box-shadow: 0px 0px 12px 0.1px #d0d0d0; + padding: 0.25rem 0.5rem; + border-radius: 7px; + right: 0; + top: 6rem; + opacity: 0; + transition: 0.3s; + display: none; + .dropdown-social { + position: relative; + width: 17.5rem; + padding: 0rem 0rem; + a { + transition: 0.2s; + display: flex; + padding: 1rem; + border-radius: 7px; + margin: 0.3rem 0; + } + a:hover { + background-color: #ddd; + } + strong { + margin-left: auto; + margin-right: auto; + align-content: center; + } + p { + margin: 0.5rem 0; + } + } + .dropdown-menu { + display: none; + } + } + .menu, + .dropdown-open.dropdown, + .dropdown-open.dropdown-social { + opacity: 1; + display: initial; + } + .social, + .dropdown-open.dropdown-menu { + opacity: 0; + display: none; + } + .burger { + display: block; + } + } +} + +@media screen and not (min-width: 1125px) { + /*if(width<1185px)*/ + + nav { + font-size: 1.4rem; + ul { + img { + height: 2.5rem; + } + } + .social { + font-size: 2rem; + } + + .burger { + height: 100px; + width: 100px; + } + .dropdown { + margin: 0.75rem; + position: absolute; + background-color: #f5f5f5; + box-shadow: 0px 0px 12px 0.1px #d0d0d0; + padding: 0.25rem 0.5rem; + border-radius: 7px; + right: 0; + top: 6rem; + display: none; + opacity: 0; + transition: 0.3s; + .dropdown-social, + .dropdown-menu { + position: relative; + } + .dropdown-menu { + width: 18rem; + padding: 0rem 0rem; + } + .dropdown-social { + display: flex; + flex-wrap: wrap; + } + .dropdown-menu p, + .dropdown-social a { + transition: 0.2s; + padding: 1rem; + border-radius: 7px; + margin: 0.3rem 0; + } + .dropdown-menu p:hover { + background-color: #ddd; + } + + .dropdown-social a:hover { + opacity: 50%; + } + hr { + margin: 0.75rem 0rem; + padding: 1rem; + border: 1px solid #aaa; + } + } + .social-name { + display: none; + } + .social, + .menu-item { + display: none; + } + .dropdown-open { + transition: 0.3s; + opacity: 1; + display: initial; + .dropdown, + .dropdown-social, + .downdown-menu { + display: initial; + } + } + .burger { + display: block; + } + } } diff --git a/assets/fonts/nf-symbols.woff2 b/assets/fonts/nf-symbols.woff2 new file mode 100644 index 0000000..83b5679 Binary files /dev/null and b/assets/fonts/nf-symbols.woff2 differ diff --git a/assets/js/index.js b/assets/js/index.js index f00ccdc..169cc80 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,10 +1,18 @@ -console.log(document); let next = document.querySelector(".next"); let prev = document.querySelector(".prev"); -let pgctrl = document.querySelectorAll(".pgctrl li"); +let pgctrl = [document.querySelector(".pgctrl")]; let slider = document.querySelector(".slider"); let carousel = document.querySelector(".carousel"); +let bg = document.querySelector(".slider-bg"); + +let img = [ + "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464", + "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Oblitus_Requiem.png?v=1693055600835", + "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png?v=1683474226492", +]; +let pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"]; + if (!document) console.log("press f"); if (!next) console.log("Class next missing."); if (!prev) console.log("Class prev missing."); @@ -15,24 +23,42 @@ let slider_index = 0; let touchstartX = 0; let touchendX = 0; -function reset() { - for (var i = 0; i < slider.children.length; i++) { - slider.children[i].style.opacity = 0; - slider.children[i].style.zIndex = 0; - pgctrl[i].style.opacity = 0.4; - } +//page control +for (var i = 0; i < slider.children.length; i++) { + let button = document.createElement("li"); + let n = i; + button.textContent = "•"; //• not · + pgctrl[0].append(button); } +pgctrl.push(document.querySelectorAll(".pgctrl li")); +if (pgctrl[1]) + pgctrl[1].forEach((m, n) => + m.addEventListener("click", function () { + reset(); + slider_index = n; + set(); + }) + ); + +//refresh reset(); set(); function set() { slider.children[slider_index].style.opacity = 1; slider.children[slider_index].style.zIndex = 1; - pgctrl[slider_index].style.opacity = 1; + pgctrl[0].children[slider_index].style.opacity = 1; + if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`; } -function dropdown_toggle() { - // +function reset() { + for (var i = 0; i < slider.children.length; i++) { + slider.children[i].style.opacity = 0; + slider.children[i].style.zIndex = 0; + pgctrl[0].children[i].style.opacity = 0.4; + if (bg) bg.style.backgroundImage = null; + } } + function nxt() { reset(); //console.log("next"); @@ -64,18 +90,14 @@ if (next) { //previous if (prev) prev.addEventListener("click", prv); -//page control -pgctrl.forEach(function (n, m) { - n.addEventListener("click", function () { - reset(); - slider_index = m; - set(); - }); -}); +slider.onclick = function () { + location.assign(pg[slider_index]); +}; +//touchswipe control function checkX() { - if (touchendX < touchstartX && touchstartX - touchendX > 50) nxt(); - if (touchendX > touchstartX && touchendX - touchstartX > 50) prv(); + if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt(); + if (touchendX > touchstartX && touchendX - touchstartX > 60) prv(); } //slider.children.forEach((carousel, num) => { carousel.addEventListener("touchstart", (e) => { @@ -85,6 +107,5 @@ carousel.addEventListener("touchend", (e) => { touchendX = e.changedTouches[0].screenX; checkX(); }); -//}); //location.reload(true); diff --git a/index.html b/index.html index fe70297..5a1f9ed 100644 --- a/index.html +++ b/index.html @@ -2,72 +2,360 @@ t404:null | Home + + +
+
-
Obj 1
-
Obj 2
-
Obj 3
+
+
+

Obj 1

+

Obj 1

+
+
+
+
+

Obj 2

+

Obj 2

+
+
+
+
+

Obj 3 (long text)

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed + diam nonumy eirmod tempor invidunt ut labore et dolore magna + aliquyam +

+
+
< >
-
    -
  • •
    • -
  • •
    • -
  • •
    • -
+
    +
    +

    Releases (Click for more)

    +
    + +
    +

    hello.world(Zer/O)

    +

    First Release

    +

    What do I see... a new world...?

    +     + +
    +

    PoΣΣεssion (Possession)

    +

    Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.

    +

    Ghost and monsters are gathering you...

    +     + +
    +

    Hyper Liminality

    +

    t404:null & trung-nova & AXiS

    +

    "until you reach it... the two hyper sides."

    +     + +
    +

    A Lake With Endless Stars

    +

    + "Under the coruscating night sky, gaze into the kaleidoscopic + waters..." +

    +     + +
    +

    Oblitus Requiem \\Against the Forsaken Legacy//

    +

    VNMC2023 Grand Finals Tiebreaker.

    +

    + "Even if you don't remember me now, I will bring the you I once knew + back from them." +

    +     +
    + +

    Activities

    +
    + +
    +

    Fanmade of Fighters I: Genesis

    +

    BOF-like Contest Releases.

    +

    + Our team (Sine Fine Stellae) Achieved #2 :D

    A Lake With Endless Stars + is one of the soundtracks from Sine Fine Stellae produced by me, + thanks to the help of Riprider500 and more people :D +

    +     + +
    +

    VNMC 2023

    +

    + (Vietnamese National Mania Championship 2023) Grand Finals + Tiebreaker by me (t404:null) +

    +

    + Oblitus Requiem \\Against the Forsaken Legacy//

    + "Even if you don't remember me now, I will bring the you I once knew + back from them." +

    Sivelia (the host of VNMC) has asked me making a custom + soundtrack round for the tourney. The soundtrack get much likes and + subscribers on Youtube within 2 weeks as the tournament got a big + impact gained. Big thank you to all VNMC staffs for that! +

    +     + +
    +

    VNMC 2024 (???)

    +

    ???

    +

    + Li4tLiAuLS0gLS4uIC0tLi4u
    \-...-4buoe2v1qZuiULSrOPuzXZBn
    YZt0ULSr9PuzvfuiaZwo5ZBseZB39
    fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO +

    +     + +
    +

    VNMC 2024 (???) (w/ ??? as ???)

    +

    ???

    +     + +
    +

    ???? 5 (????2024) (w/ ??? as ???)

    +

    ???

    +

    ???

    +     +
    - + diff --git a/release/hello.world(Zer/O)/index.html b/release/hello.world(Zer/O)/index.html new file mode 100644 index 0000000..a6ffaa4 --- /dev/null +++ b/release/hello.world(Zer/O)/index.html @@ -0,0 +1,214 @@ + + + + t404:null | hello.world(Zer/O) + + + + + + +
    +
    +
    +

    + hello.world(Zer/O) +

    +

    + "What can I see... a new world...?
    It appears, that I am living + in a world, where no-one lives..."

    "hello.world(Zer/O)" + is a first release from t404:null at 08.22.2021 on Youtube, + Bandcamp, and Soundcloud.
     It was also the first song + t404:null makes with tons ”easter eggs” and mixed with more-styles + genre called ”Full-Flavor”(200step, UK Hardcore, Electronic, Dance, + and more..).

    Available in:
    Itunes/Apple Music
    Spotify(Release date at 09.20.2021)
    YouTube
    YouTube Music(Release date at 09.20.2021)
    Soundcloud
    Bandcamp +

    +
    +
    +
    + + + diff --git a/release/index.html b/release/index.html new file mode 100644 index 0000000..5e69c8b --- /dev/null +++ b/release/index.html @@ -0,0 +1,243 @@ + + + + t404:null | Releases + + + + + + + +
    +

    Releases

    +
    + +
    +

    hello.world(Zer/O)

    +

    First Release

    +

    What do I see... a new world...?

    +     + +
    +

    PoΣΣεssion (Possession)

    +

    Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.

    +

    Ghost and monsters are gathering you...

    +     + +
    +

    Hyper Liminality

    +

    t404:null & trung-nova & AXiS

    +

    "until you reach it... the two hyper sides."

    +     + +
    +

    A Lake With Endless Stars

    +

    + "Under the coruscating night sky, gaze into the kaleidoscopic + waters..." +

    +     + +
    +

    Oblitus Requiem \\Against the Forsaken Legacy//

    +

    VNMC2023 Grand Finals Tiebreaker.

    +

    + "Even if you don't remember me now, I will bring the you I once knew + back from them." +

    +     +
    +
    + + +