t404owo/t404null
1
0
Fork 0
mirror of https://github.com/t404owo/t404null.git synced 2025-12-12 18:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: t404owo:1149d1fdfbec9a4ab9d06fac55bf2d9288d5223d
Branches Tags
t404owo:main t404owo:glitch t404owo:old
...
compare: t404owo:glitch
Branches Tags
t404owo:main t404owo:glitch t404owo:old

29 Commits
1149d1fdfb ... glitch

Author SHA1 Message Date
t404owo
73476e1595 Add eruda script for debugging in index.html 2025-12-07 18:36:57 +01:00
t404owo
23367f7d2e Change Supabase anon key to a publishable key 
Updated Supabase anon key to a publishable key for security.
 2025-12-07 18:35:03 +01:00
t404owo
73e96c9d69 Update index.js 2025-12-07 18:34:15 +01:00
t404owo
58d8e7ec39 Update index.html 2025-10-17 05:05:18 +02:00
t404owo
2d0a5c1ce5 Merge pull request #19 from t404owo/main 
Update to unstable branch
 2025-10-17 05:04:37 +02:00
t404owo
92b0e1232e remove eruda for cleaniness 2025-10-17 03:03:00 +00:00
t404owo
3ede610b6d Form alignment fix 2025-10-17 03:00:21 +00:00
t404owo
066490f850 some cosmetics fix 2025-10-17 02:49:38 +00:00
t404owo
849dfeda89 Site Update 
Added contact formular
Some Descriptions / Titles update

Terms of Usage (ToU) update.
Minor Copyright (C) update.
 2025-10-17 04:18:23 +02:00
t404owo
c28949f2fc Site metadata update 2025-10-17 02:15:21 +00:00
t404owo
38e174a28f test #4.2 some size adjestment 2025-10-17 02:06:13 +00:00
t404owo
64e22d3eb9 test #4.1 another UI test 2025-10-17 02:02:28 +00:00
t404owo
40f9194271 test #4 old .css 2025-10-17 01:58:14 +00:00
t404owo
422b417c29 test #4 design check 2025-10-17 01:57:04 +00:00
t404owo
17c26b0fb0 test#3 reedited color 2025-10-17 01:48:53 +00:00
t404owo
f46d90f06e test #3 style adjustment 2025-10-17 01:43:56 +00:00
t404owo
522d3a69db test#2 added id for test 2025-10-17 01:39:38 +00:00
t404owo
b11e68a4d2 test#1 color fix 2025-10-17 01:36:29 +00:00
t404owo
f996359f3a test #1 2025-10-17 01:33:43 +00:00
t404owo
87b9d03ca8 Merge pull request #17 from t404owo/main 
Main
 2025-10-17 02:59:06 +02:00
t404owo
b0709aa77e old.css updated 2025-10-17 00:56:29 +00:00
t404owo
0a0310b410 fixed X icons thingy... 2025-10-17 00:52:43 +00:00
t404owo
b6034115c8 some cosmetics fix ;D 2025-10-17 00:39:48 +00:00
t404owo
f936514228 . 2025-10-16 23:58:17 +00:00
t404owo
da810d6a03 JS fix 
about /release and /release/ issue
 2025-10-16 23:55:56 +00:00
t404owo
d704e025a6 replaced login submit... 2025-10-16 23:50:42 +00:00
t404owo
1104fd3998 Fixed a bug.... 
"context", lmao I cringed hard, replaced w/ innerHTML.
 2025-10-16 23:46:14 +00:00
t404owo
9e7ca86494 Updated serveral stuffs 
JS: added for Empty slots a msg (user request).
Updated copyright and ToS/ToU for my tracks / properties.
 2025-10-16 23:42:15 +00:00
t404owo
21b7b4b97a Merge pull request #16 from t404owo/main 
latest pull request to update the site
 2025-08-09 13:55:18 +07:00
10 changed files with 550 additions and 55 deletions
Expand all files Collapse all files

4
about_me/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>t404:null | Home</title> <title>t404:null | About Me</title>
<meta <meta
name="description" name="description"
content="Hello there! I'm t404:null (a.k.a t404owo). content="Hello there! I'm t404:null (a.k.a t404owo).
@@ -224,6 +224,6 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
</div> </div>
</div> </div>
</main> </main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div> <div class="footer">&copy; t404:null 2021-2025 - All Rights Reserved</div>
</body> </body>
</html> </html>

4
activity/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>t404:null | Home</title> <title>t404:null | Activities / Previous Events</title>
<meta <meta
name="description" name="description"
content="Hello there! I'm t404:null (a.k.a t404owo). content="Hello there! I'm t404:null (a.k.a t404owo).
@@ -278,6 +278,6 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
</a> </a>
</div> </div>
</main> </main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div> <div class="footer">&copy; t404:null 2021-2025 - All Rights Reserved</div>
</body> </body>
</html> </html>

207
assets/css/main.css
View File

@@ -7,21 +7,30 @@ body {
margin: 0px; margin: 0px;
height: 100%; height: 100%;
} }
main {
main,
textarea,
textfield {
font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
}
main {
margin: 0.75rem; margin: 0.75rem;
height: 100%; height: 100%;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
min-height: calc(100vh - 10vh); min-height: calc(100vh - 10vh);
} }
.main-page { .main-page {
max-width: 2300px; max-width: 2300px;
margin: 0 auto; margin: 0 auto;
} }
hr { hr {
margin: 2rem 0px; margin: 2rem 0px;
} }
nav { nav {
z-index: 4; z-index: 4;
position: -webkit-sticky; position: -webkit-sticky;
@@ -39,21 +48,25 @@ nav {
box-shadow: 0px 0px 12px 0.1px #d0d0d0; box-shadow: 0px 0px 12px 0.1px #d0d0d0;
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
ul { ul {
padding-left: 15px; padding-left: 15px;
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
align-content: center; align-content: center;
li { li {
display: inline-block; display: inline-block;
padding-right: 4px; padding-right: 4px;
vertical-align: middle; vertical-align: middle;
p { p {
padding-top: 0.4rem; padding-top: 0.4rem;
vertical-align: middle; vertical-align: middle;
margin: 0.5rem 1rem; margin: 0.5rem 1rem;
} }
} }
img { img {
margin-top: 0.25rem; margin-top: 0.25rem;
height: 1.5rem; height: 1.5rem;
@@ -61,6 +74,7 @@ nav {
padding-right: 0.3rem; padding-right: 0.3rem;
} }
} }
a { a {
color: black; color: black;
text-decoration: none; text-decoration: none;
@@ -72,19 +86,23 @@ nav {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.vertical-line { .vertical-line {
width: 0.1rem; width: 0.1rem;
background-color: black; background-color: black;
height: 100%; height: 100%;
} }
.social { .social {
font-size: 2.5rem; font-size: 2.5rem;
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
transition: 0.3s; transition: 0.3s;
} }
.social:hover { .social:hover {
opacity: 50%; opacity: 50%;
} }
.dropdown { .dropdown {
margin: 0.75rem; margin: 0.75rem;
position: absolute; position: absolute;
@@ -120,6 +138,7 @@ nav {
.menu { .menu {
padding-top: 0.4rem; padding-top: 0.4rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
p { p {
background-size: 0% 0.2em; background-size: 0% 0.2em;
background-image: linear-gradient(#000, #000); background-image: linear-gradient(#000, #000);
@@ -128,6 +147,7 @@ nav {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
p:hover, p:hover,
.currentpage { .currentpage {
opacity: 60%; opacity: 60%;
@@ -147,6 +167,7 @@ nav {
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 12px; border-radius: 12px;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
span { span {
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
box-sizing: border-box; box-sizing: border-box;
@@ -154,12 +175,14 @@ nav {
background-color: #000; background-color: #000;
border-radius: 2px; border-radius: 2px;
} }
#hamburger { #hamburger {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
top: 0%; top: 0%;
left: 0%; left: 0%;
span { span {
width: 70%; width: 70%;
height: 5%; height: 5%;
@@ -168,16 +191,20 @@ nav {
position: relative; position: relative;
margin: 12% 0; margin: 12% 0;
} }
span:nth-child(1) { span:nth-child(1) {
transition-delay: 0.2s; transition-delay: 0.2s;
} }
span:nth-child(2) { span:nth-child(2) {
transition-delay: 0.3s; transition-delay: 0.3s;
} }
span:nth-child(3) { span:nth-child(3) {
transition-delay: 0.4s; transition-delay: 0.4s;
} }
} }
#cross { #cross {
position: absolute; position: absolute;
height: 100%; height: 100%;
@@ -190,11 +217,13 @@ nav {
height: 0%; height: 0%;
width: 5%; width: 5%;
position: absolute; position: absolute;
right: 46%; /*a / */ right: 46%;
/*a / */
top: 10%; top: 10%;
transform: translate(-50%); transform: translate(-50%);
transition-delay: 0s; transition-delay: 0s;
} }
span:nth-child(2) { span:nth-child(2) {
width: 0%; width: 0%;
height: 5%; height: 5%;
@@ -215,21 +244,26 @@ nav {
span { span {
width: 0%; width: 0%;
} }
span:nth-child(1) { span:nth-child(1) {
transition-delay: 0s; transition-delay: 0s;
} }
span:nth-child(2) { span:nth-child(2) {
transition-delay: 0.1s; transition-delay: 0.1s;
} }
span:nth-child(3) { span:nth-child(3) {
transition-delay: 0.2s; transition-delay: 0.2s;
} }
} }
#cross { #cross {
span:nth-child(1) { span:nth-child(1) {
height: 80%; height: 80%;
transition-delay: 0.3s; transition-delay: 0.3s;
} }
span:nth-child(2) { span:nth-child(2) {
width: 80%; width: 80%;
transition-delay: 0.3s; transition-delay: 0.3s;
@@ -242,6 +276,7 @@ nav {
overflow: auto; overflow: auto;
max-height: 70vh; max-height: 70vh;
} }
/*---- main ----*/ /*---- main ----*/
.container { .container {
position: relative; position: relative;
@@ -250,6 +285,7 @@ nav {
margin: auto; margin: auto;
margin-top: 1rem; margin-top: 1rem;
} }
.carousel { .carousel {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
@@ -259,6 +295,7 @@ nav {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.slider-bg { .slider-bg {
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -279,6 +316,7 @@ nav {
border-radius: 0.5rem; border-radius: 0.5rem;
transform: scale(1.1); transform: scale(1.1);
} }
.slider section { .slider section {
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@@ -293,6 +331,7 @@ nav {
border-radius: 0.5rem; border-radius: 0.5rem;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
--apple-system; --apple-system;
div { div {
color: #fff; color: #fff;
position: relative; position: relative;
@@ -303,27 +342,33 @@ nav {
grid-template-rows: 3.5fr 1fr 1fr 5rem; grid-template-rows: 3.5fr 1fr 1fr 5rem;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
} }
h1 { h1 {
font-size: 2rem; font-size: 2rem;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 3; grid-row-end: 3;
} }
p { p {
font-size: 1.25rem; font-size: 1.25rem;
grid-row-start: 3; grid-row-start: 3;
grid-row-end: 4; grid-row-end: 4;
} }
p, p,
h1 { h1 {
width: 60vw; width: 60vw;
text-align: center; text-align: center;
grid-column-start: 2; /*|•|*/ grid-column-start: 2;
/*|•|*/
grid-column-end: 3; grid-column-end: 3;
} }
} }
.slider:hover { .slider:hover {
cursor: pointer; cursor: pointer;
} }
.prev, .prev,
.next { .next {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
@@ -346,12 +391,15 @@ nav {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.next { .next {
right: 1rem; right: 1rem;
} }
.prev { .prev {
left: 1rem; left: 1rem;
} }
.pgctrl { .pgctrl {
font-family: sans-serif, --apple-system; font-family: sans-serif, --apple-system;
z-index: 1; z-index: 1;
@@ -379,6 +427,7 @@ nav {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.control { .control {
text-align: center; text-align: center;
} }
@@ -393,6 +442,7 @@ nav {
grid-template-rows: repeat(auto-fill, 23rem); grid-template-rows: repeat(auto-fill, 23rem);
grid-template-columns: repeat(auto-fill, 23rem); grid-template-columns: repeat(auto-fill, 23rem);
grid-gap: 1rem; grid-gap: 1rem;
.card { .card {
transition: 0.75s; transition: 0.75s;
color: black; color: black;
@@ -400,6 +450,7 @@ nav {
height: 23rem; height: 23rem;
border-radius: 7px; border-radius: 7px;
text-decoration: none; text-decoration: none;
div { div {
z-index: 1; z-index: 1;
position: inherit; position: inherit;
@@ -409,12 +460,15 @@ nav {
border-radius: 7px; border-radius: 7px;
transition: 0.5s; transition: 0.5s;
} }
h2 { h2 {
font-size: 1.9rem; font-size: 1.9rem;
} }
p { p {
font-size: 1.2rem; font-size: 1.2rem;
} }
h2, h2,
p { p {
color: white; color: white;
@@ -424,6 +478,7 @@ nav {
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
} }
.bg-img { .bg-img {
/* background: url(/assets/img/t404_null-logo.png); */ /* background: url(/assets/img/t404_null-logo.png); */
background-size: cover; background-size: cover;
@@ -432,11 +487,13 @@ nav {
width: 23rem; width: 23rem;
} }
} }
.card:hover { .card:hover {
.bg-img { .bg-img {
filter: blur(5px) brightness(50%); filter: blur(5px) brightness(50%);
-webkit-filter: blur(5px) brightness(50%); -webkit-filter: blur(5px) brightness(50%);
} }
h2, h2,
p { p {
filter: none; filter: none;
@@ -453,6 +510,7 @@ nav {
grid-template-rows: repeat(auto-fill, 30rem); grid-template-rows: repeat(auto-fill, 30rem);
grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem)); grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
grid-gap: 1rem; grid-gap: 1rem;
.card { .card {
transition: 0.75s; transition: 0.75s;
color: black; color: black;
@@ -460,6 +518,7 @@ nav {
height: 30rem; height: 30rem;
border-radius: 7px; border-radius: 7px;
text-decoration: none; text-decoration: none;
div { div {
z-index: 1; z-index: 1;
position: inherit; position: inherit;
@@ -469,12 +528,15 @@ nav {
border-radius: 7px; border-radius: 7px;
transition: 0.5s; transition: 0.5s;
} }
h2 { h2 {
font-size: 1.9rem; font-size: 1.9rem;
} }
p { p {
font-size: 1.1rem; font-size: 1.1rem;
} }
h2, h2,
p { p {
/* color: black; */ /* color: black; */
@@ -484,6 +546,7 @@ nav {
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
} }
.bg-img { .bg-img {
/* background: url(/assets/img/t404_null-logo.png); */ /* background: url(/assets/img/t404_null-logo.png); */
background-size: cover; background-size: cover;
@@ -493,6 +556,7 @@ nav {
width: 30rem; width: 30rem;
} }
} }
.card:hover { .card:hover {
.bg-img { .bg-img {
filter: brightness(40%); filter: brightness(40%);
@@ -500,6 +564,7 @@ nav {
width: 8vw; width: 8vw;
border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px;
} }
h2, h2,
p { p {
padding: 0.3rem 5vw 0.3rem 10vw; padding: 0.3rem 5vw 0.3rem 10vw;
@@ -515,17 +580,113 @@ nav {
grid-gap: 1rem; grid-gap: 1rem;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
li { li {
border-radius: 7px; border-radius: 7px;
background-color: #ddd; background-color: #ddd;
} }
} }
.contact-email {
.inputbox {
outline: none;
height: 3rem;
width: 100%;
display: block;
background: #EFEFEF;
color: black;
border: 0px solid #505050;
border-radius: 5px;
transition: 0.3s;
margin-top: 0.5rem;
margin-left:-5px;
padding: 5px;
}
:not(textarea) {
text-align: center;
}
.inputbox:hover {
background: #DEDEDE;
}
.inputbox:focus {
background: #CECECE;
}
button {
width: 100%;
height: 3rem;
border-radius: 5px;
text-align: center;
}
.formbutton {
background: #272727;
color: #fff;
border: 0px;
transition-duration: 300ms;
cursor: pointer;
}
.formbutton:hover {
background: #727272;
}
.form {
border-radius: 5px;
align-items: center;
justify-content: center;
margin: auto;
padding: 4rem 2.5rem;
width: 65%;
background: #FDFDFD;
box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
}
.error_box {
background: #FFEEEE;
border-radius: 5px;
margin: auto;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem 1rem;
margin-bottom: 1.5rem;
}
.box {
height:2rem;
width: 100%;
text-align: center;
border-radius: 5px;
margin: auto;
align-items: center;
justify-content: center;
padding: 0.5rem 0px;
margin-bottom: 1rem;
}
}
textarea,
textfield {
padding: 5px;
font-size: 0.95rem;
resize: vertical;
min-height: 5rem;
}
.topic { .topic {
padding: 1rem; padding: 1rem;
font-size: 3rem; font-size: 3rem;
margin-top: 3vw; margin-top: 3vw;
margin-bottom: 7vw; margin-bottom: 7vw;
a { a {
text-decoration: none; text-decoration: none;
color: black; color: black;
@@ -536,6 +697,7 @@ nav {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
a:hover { a:hover {
opacity: 70%; opacity: 70%;
background-size: 100% 0.2em; background-size: 100% 0.2em;
@@ -547,10 +709,12 @@ nav {
font-size: 2.25rem; font-size: 2.25rem;
font-weight: 500; font-weight: 500;
} }
@font-face { @font-face {
font-family: "NerdFontsSymbols Nerd Font"; font-family: "NerdFontsSymbols Nerd Font";
src: url("/assets/fonts/nf-symbols.woff2") format("woff2"); src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
} }
.nf-icons { .nf-icons {
font-family: "NerdFontsSymbols Nerd Font"; font-family: "NerdFontsSymbols Nerd Font";
} }
@@ -564,9 +728,11 @@ nav {
padding: 5vw 5vw; padding: 5vw 5vw;
border-radius: 10px; border-radius: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
strong { strong {
color: #fff; color: #fff;
} }
.text-box { .text-box {
max-width: 1250px; max-width: 1250px;
margin: 25% auto; margin: 25% auto;
@@ -576,6 +742,7 @@ nav {
padding: 2rem; padding: 2rem;
border-radius: 7px; border-radius: 7px;
font-size: 1.2rem; font-size: 1.2rem;
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
@@ -586,6 +753,7 @@ nav {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
a:hover { a:hover {
color: #ccc; color: #ccc;
background-size: 100% 0.2em; background-size: 100% 0.2em;
@@ -598,9 +766,11 @@ nav {
text-decoration: none; text-decoration: none;
list-style-type: none; list-style-type: none;
font-size: 1.4rem; font-size: 1.4rem;
li { li {
padding: 1rem; padding: 1rem;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #46f; color: #46f;
@@ -611,22 +781,27 @@ nav {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
a:hover { a:hover {
opacity: 70%; opacity: 70%;
background-size: 100% 0.2em; background-size: 100% 0.2em;
} }
.title { .title {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
.subdiv { .subdiv {
padding: 1rem; padding: 1rem;
} }
.long-br { .long-br {
display: block; display: block;
height: 2rem; height: 2rem;
} }
@media screen and (width >= 1180px) and (width<=1690px) {
@media screen and (width >=1180px) and (width<=1690px) {
/*if(width<1620px&&width>=1125px)*/ /*if(width<1620px&&width>=1125px)*/
nav { nav {
@@ -635,6 +810,7 @@ nav {
position: relative; position: relative;
width: 17.5rem; width: 17.5rem;
padding: 0rem 0rem; padding: 0rem 0rem;
a { a {
transition: 0.2s; transition: 0.2s;
display: flex; display: flex;
@@ -642,33 +818,40 @@ nav {
border-radius: 7px; border-radius: 7px;
margin: 0.3rem 0; margin: 0.3rem 0;
} }
a:hover { a:hover {
background-color: #ddd; background-color: #ddd;
} }
strong { strong {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
align-content: center; align-content: center;
} }
p { p {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
} }
.dropdown-menu { .dropdown-menu {
display: none; display: none;
} }
} }
.menu, .menu,
.dropdown-open.dropdown, .dropdown-open.dropdown,
.dropdown-open.dropdown-social { .dropdown-open.dropdown-social {
opacity: 1; opacity: 1;
display: initial; display: initial;
} }
.social, .social,
.dropdown-open.dropdown-menu { .dropdown-open.dropdown-menu {
opacity: 0; opacity: 0;
display: none; display: none;
} }
.burger { .burger {
display: block; display: block;
} }
@@ -680,11 +863,13 @@ nav {
nav { nav {
font-size: 1.4rem; font-size: 1.4rem;
ul { ul {
img { img {
height: 2.5rem; height: 2.5rem;
} }
} }
.social { .social {
font-size: 2rem; font-size: 2rem;
} }
@@ -693,19 +878,24 @@ nav {
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
.dropdown { .dropdown {
.dropdown-social, .dropdown-social,
.dropdown-menu { .dropdown-menu {
position: relative; position: relative;
} }
.dropdown-menu { .dropdown-menu {
width: 18rem; width: 18rem;
padding: 0rem 0rem; padding: 0rem 0rem;
} }
.dropdown-social { .dropdown-social {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.dropdown-menu p, .dropdown-menu p,
.dropdown-social a { .dropdown-social a {
transition: 0.2s; transition: 0.2s;
@@ -713,6 +903,7 @@ nav {
border-radius: 7px; border-radius: 7px;
margin: 0.3rem 0; margin: 0.3rem 0;
} }
.dropdown-menu p:hover { .dropdown-menu p:hover {
background-color: #ddd; background-color: #ddd;
} }
@@ -720,31 +911,37 @@ nav {
.dropdown-social a:hover { .dropdown-social a:hover {
opacity: 50%; opacity: 50%;
} }
hr { hr {
margin: 0.75rem 0rem; margin: 0.75rem 0rem;
padding: 1rem; padding: 1rem;
border: 1px solid #aaa; border: 1px solid #aaa;
} }
} }
.social-name { .social-name {
display: none; display: none;
} }
.social, .social,
.menu-item { .menu-item {
display: none; display: none;
} }
.dropdown-open { .dropdown-open {
transition: 0.3s; transition: 0.3s;
opacity: 1; opacity: 1;
display: initial; display: initial;
.dropdown, .dropdown,
.dropdown-social, .dropdown-social,
.downdown-menu { .downdown-menu {
display: initial; display: initial;
} }
} }
.burger { .burger {
display: block; display: block;
} }
} }
} }

221
assets/css/old.css
View File

@@ -1,25 +1,35 @@
@import url("/assets/css/fonts/jost.css"); @import url("/assets/css/fonts/jost.css");
@import url("/assets/css/fonts/noto-sans-jp.css"); @import url("/assets/css/fonts/noto-sans-jp.css");
@import url("/assets/css/fonts/plus-jarkata-sans.css"); @import url("/assets/css/fonts/plus-jarkata-sans.css");
body { body {
margin: 0px; margin: 0px;
height: 100%; height: 100%;
} }
main {
main,
textarea,
textfield {
font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
}
main {
margin: 0.75rem; margin: 0.75rem;
height: 100%; height: 100%;
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
min-height: calc(100vh - 10vh); min-height: calc(100vh - 10vh);
} }
.main-page { .main-page {
max-width: 2300px; max-width: 2300px;
margin: 0 auto; margin: 0 auto;
} }
hr { hr {
margin: 2rem 0px; margin: 2rem 0px;
} }
nav { nav {
z-index: 4; z-index: 4;
position: -webkit-sticky; position: -webkit-sticky;
@@ -28,8 +38,7 @@ nav {
*/ */
top: 10px; top: 10px;
background-color: #f5f5f5; background-color: #f5f5f5;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
--apple-system;
font-size: 1.25rem; font-size: 1.25rem;
padding: 4px; padding: 4px;
margin: 10px; margin: 10px;
@@ -39,28 +48,33 @@ nav {
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
nav ul { nav ul {
padding-left: 15px; padding-left: 15px;
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
align-content: center; align-content: center;
} }
nav ul li { nav ul li {
display: inline-block; display: inline-block;
padding-right: 4px; padding-right: 4px;
vertical-align: middle; vertical-align: middle;
} }
nav ul li p { nav ul li p {
padding-top: 0.4rem; padding-top: 0.4rem;
vertical-align: middle; vertical-align: middle;
margin: 0.5rem 1rem; margin: 0.5rem 1rem;
} }
nav ul img { nav ul img {
margin-top: 0.25rem; margin-top: 0.25rem;
height: 1.5rem; height: 1.5rem;
vertical-align: middle; vertical-align: middle;
padding-right: 0.3rem; padding-right: 0.3rem;
} }
nav a { nav a {
color: black; color: black;
text-decoration: none; text-decoration: none;
@@ -71,19 +85,23 @@ nav a {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
nav .vertical-line { nav .vertical-line {
width: 0.1rem; width: 0.1rem;
background-color: black; background-color: black;
height: 100%; height: 100%;
} }
nav .social { nav .social {
font-size: 2.5rem; font-size: 2.5rem;
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
transition: 0.3s; transition: 0.3s;
} }
nav .social:hover { nav .social:hover {
opacity: 50%; opacity: 50%;
} }
nav .dropdown { nav .dropdown {
margin: 0.75rem; margin: 0.75rem;
position: absolute; position: absolute;
@@ -97,6 +115,7 @@ nav .dropdown {
opacity: 0; opacity: 0;
transition: 0.3s; transition: 0.3s;
} }
.footer { .footer {
font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif; font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
position: sticky; position: sticky;
@@ -114,11 +133,13 @@ nav .dropdown {
text-align: center; text-align: center;
align-content: center; align-content: center;
} }
/*---nav---*/ /*---nav---*/
.menu { .menu {
padding-top: 0.4rem; padding-top: 0.4rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
} }
.menu p { .menu p {
background-size: 0% 0.2em; background-size: 0% 0.2em;
background-image: linear-gradient(#000, #000); background-image: linear-gradient(#000, #000);
@@ -127,11 +148,13 @@ nav .dropdown {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.menu p:hover, .menu p:hover,
.menu .currentpage { .menu .currentpage {
opacity: 60%; opacity: 60%;
background-size: 100% 0.2em; background-size: 100% 0.2em;
} }
.burger { .burger {
border: none; border: none;
display: none; display: none;
@@ -145,6 +168,7 @@ nav .dropdown {
border-radius: 12px; border-radius: 12px;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
} }
.burger span { .burger span {
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
box-sizing: border-box; box-sizing: border-box;
@@ -152,6 +176,7 @@ nav .dropdown {
background-color: #000; background-color: #000;
border-radius: 2px; border-radius: 2px;
} }
.burger #hamburger { .burger #hamburger {
position: absolute; position: absolute;
height: 100%; height: 100%;
@@ -159,6 +184,7 @@ nav .dropdown {
top: 0%; top: 0%;
left: 0%; left: 0%;
} }
.burger #hamburger span { .burger #hamburger span {
width: 70%; width: 70%;
height: 5%; height: 5%;
@@ -167,15 +193,19 @@ nav .dropdown {
position: relative; position: relative;
margin: 12% 0; margin: 12% 0;
} }
.burger #hamburger span:nth-child(1) { .burger #hamburger span:nth-child(1) {
transition-delay: 0.2s; transition-delay: 0.2s;
} }
.burger #hamburger span:nth-child(2) { .burger #hamburger span:nth-child(2) {
transition-delay: 0.3s; transition-delay: 0.3s;
} }
.burger #hamburger span:nth-child(3) { .burger #hamburger span:nth-child(3) {
transition-delay: 0.4s; transition-delay: 0.4s;
} }
.burger #cross { .burger #cross {
position: absolute; position: absolute;
height: 100%; height: 100%;
@@ -184,6 +214,7 @@ nav .dropdown {
left: 1.5%; left: 1.5%;
transform: rotate(45deg); transform: rotate(45deg);
} }
.burger #cross span:nth-child(1) { .burger #cross span:nth-child(1) {
height: 0%; height: 0%;
width: 5%; width: 5%;
@@ -194,6 +225,7 @@ nav .dropdown {
transform: translate(-50%); transform: translate(-50%);
transition-delay: 0s; transition-delay: 0s;
} }
.burger #cross span:nth-child(2) { .burger #cross span:nth-child(2) {
width: 0%; width: 0%;
height: 5%; height: 5%;
@@ -202,34 +234,43 @@ nav .dropdown {
top: 48%; top: 48%;
transition-delay: 0s; transition-delay: 0s;
} }
.burger:hover { .burger:hover {
opacity: 40%; opacity: 40%;
} }
.burger.open #hamburger span { .burger.open #hamburger span {
width: 0%; width: 0%;
} }
.burger.open #hamburger span:nth-child(1) { .burger.open #hamburger span:nth-child(1) {
transition-delay: 0s; transition-delay: 0s;
} }
.burger.open #hamburger span:nth-child(2) { .burger.open #hamburger span:nth-child(2) {
transition-delay: 0.1s; transition-delay: 0.1s;
} }
.burger.open #hamburger span:nth-child(3) { .burger.open #hamburger span:nth-child(3) {
transition-delay: 0.2s; transition-delay: 0.2s;
} }
.burger.open #cross span:nth-child(1) { .burger.open #cross span:nth-child(1) {
height: 80%; height: 80%;
transition-delay: 0.3s; transition-delay: 0.3s;
} }
.burger.open #cross span:nth-child(2) { .burger.open #cross span:nth-child(2) {
width: 80%; width: 80%;
transition-delay: 0.3s; transition-delay: 0.3s;
} }
.dropdown { .dropdown {
display: none; display: none;
overflow: auto; overflow: auto;
max-height: 70vh; max-height: 70vh;
} }
/*---- main ----*/ /*---- main ----*/
.container { .container {
position: relative; position: relative;
@@ -238,6 +279,7 @@ nav .dropdown {
margin: auto; margin: auto;
margin-top: 1rem; margin-top: 1rem;
} }
.carousel { .carousel {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
@@ -247,6 +289,7 @@ nav .dropdown {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.slider-bg { .slider-bg {
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -267,6 +310,7 @@ nav .dropdown {
border-radius: 0.5rem; border-radius: 0.5rem;
transform: scale(1.1); transform: scale(1.1);
} }
.slider section { .slider section {
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@@ -279,9 +323,9 @@ nav .dropdown {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.5rem; border-radius: 0.5rem;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
--apple-system;
} }
.slider section div { .slider section div {
color: #fff; color: #fff;
position: relative; position: relative;
@@ -292,16 +336,19 @@ nav .dropdown {
grid-template-rows: 3.5fr 1fr 1fr 5rem; grid-template-rows: 3.5fr 1fr 1fr 5rem;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
} }
.slider section h1 { .slider section h1 {
font-size: 2rem; font-size: 2rem;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 3; grid-row-end: 3;
} }
.slider section p { .slider section p {
font-size: 1.25rem; font-size: 1.25rem;
grid-row-start: 3; grid-row-start: 3;
grid-row-end: 4; grid-row-end: 4;
} }
.slider section p, .slider section p,
.slider section h1 { .slider section h1 {
width: 60vw; width: 60vw;
@@ -310,9 +357,11 @@ nav .dropdown {
/*|•|*/ /*|•|*/
grid-column-end: 3; grid-column-end: 3;
} }
.slider:hover { .slider:hover {
cursor: pointer; cursor: pointer;
} }
.prev, .prev,
.next { .next {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
@@ -334,12 +383,15 @@ nav .dropdown {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.next { .next {
right: 1rem; right: 1rem;
} }
.prev { .prev {
left: 1rem; left: 1rem;
} }
.pgctrl { .pgctrl {
font-family: sans-serif, --apple-system; font-family: sans-serif, --apple-system;
z-index: 1; z-index: 1;
@@ -366,9 +418,11 @@ nav .dropdown {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.control { .control {
text-align: center; text-align: center;
} }
/* Cards */ /* Cards */
.album-cards { .album-cards {
margin: auto; margin: auto;
@@ -379,6 +433,7 @@ nav .dropdown {
grid-template-columns: repeat(auto-fill, 23rem); grid-template-columns: repeat(auto-fill, 23rem);
grid-gap: 1rem; grid-gap: 1rem;
} }
.album-cards .card { .album-cards .card {
transition: 0.75s; transition: 0.75s;
color: black; color: black;
@@ -387,6 +442,7 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
text-decoration: none; text-decoration: none;
} }
.album-cards .card div { .album-cards .card div {
z-index: 1; z-index: 1;
position: inherit; position: inherit;
@@ -396,12 +452,15 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
transition: 0.5s; transition: 0.5s;
} }
.album-cards .card h2 { .album-cards .card h2 {
font-size: 1.9rem; font-size: 1.9rem;
} }
.album-cards .card p { .album-cards .card p {
font-size: 1.2rem; font-size: 1.2rem;
} }
.album-cards .card h2, .album-cards .card h2,
.album-cards .card p { .album-cards .card p {
color: white; color: white;
@@ -411,6 +470,7 @@ nav .dropdown {
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
} }
.album-cards .card .bg-img { .album-cards .card .bg-img {
/* background: url(/assets/img/t404_null-logo.png); /* background: url(/assets/img/t404_null-logo.png);
*/ */
@@ -419,15 +479,18 @@ nav .dropdown {
height: 23rem; height: 23rem;
width: 23rem; width: 23rem;
} }
.album-cards .card:hover .bg-img { .album-cards .card:hover .bg-img {
filter: blur(5px) brightness(50%); filter: blur(5px) brightness(50%);
-webkit-filter: blur(5px) brightness(50%); -webkit-filter: blur(5px) brightness(50%);
} }
.album-cards .card:hover h2, .album-cards .card:hover h2,
.album-cards .card:hover p { .album-cards .card:hover p {
filter: none; filter: none;
opacity: 1; opacity: 1;
} }
.half-image-cards { .half-image-cards {
margin: auto; margin: auto;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@@ -437,6 +500,7 @@ nav .dropdown {
grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem)); grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
grid-gap: 1rem; grid-gap: 1rem;
} }
.half-image-cards .card { .half-image-cards .card {
transition: 0.75s; transition: 0.75s;
color: black; color: black;
@@ -445,6 +509,7 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
text-decoration: none; text-decoration: none;
} }
.half-image-cards .card div { .half-image-cards .card div {
z-index: 1; z-index: 1;
position: inherit; position: inherit;
@@ -454,12 +519,15 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
transition: 0.5s; transition: 0.5s;
} }
.half-image-cards .card h2 { .half-image-cards .card h2 {
font-size: 1.9rem; font-size: 1.9rem;
} }
.half-image-cards .card p { .half-image-cards .card p {
font-size: 1.1rem; font-size: 1.1rem;
} }
.half-image-cards .card h2, .half-image-cards .card h2,
.half-image-cards .card p { .half-image-cards .card p {
/* color: black; /* color: black;
@@ -470,6 +538,7 @@ nav .dropdown {
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
} }
.half-image-cards .card .bg-img { .half-image-cards .card .bg-img {
/* background: url(/assets/img/t404_null-logo.png); /* background: url(/assets/img/t404_null-logo.png);
*/ */
@@ -479,18 +548,21 @@ nav .dropdown {
height: 30rem; height: 30rem;
width: 30rem; width: 30rem;
} }
.half-image-cards .card:hover .bg-img { .half-image-cards .card:hover .bg-img {
filter: brightness(40%); filter: brightness(40%);
-webkit-filter: brightness(40%); -webkit-filter: brightness(40%);
width: 8vw; width: 8vw;
border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px;
} }
.half-image-cards .card:hover h2, .half-image-cards .card:hover h2,
.half-image-cards .card:hover p { .half-image-cards .card:hover p {
padding: 0.3rem 5vw 0.3rem 10vw; padding: 0.3rem 5vw 0.3rem 10vw;
filter: none; filter: none;
opacity: 1; opacity: 1;
} }
.contact-cards { .contact-cards {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 23rem); grid-template-columns: repeat(auto-fill, 23rem);
@@ -498,16 +570,108 @@ nav .dropdown {
justify-content: center; justify-content: center;
padding: 0; padding: 0;
} }
.contact-cards li { .contact-cards li {
border-radius: 7px; border-radius: 7px;
background-color: #ddd; background-color: #ddd;
} }
.contact-email .inputbox {
outline: none;
height: 3rem;
width: 100%;
display: block;
background: #EFEFEF;
color: black;
border: 0px solid #505050;
border-radius: 5px;
transition: 0.3s;
margin-top: 0.5rem;
margin-left: -5px;
padding: 5px;
}
.contact-email :not(textarea) {
text-align: center;
}
.contact-email .inputbox:hover {
background: #dedede;
}
.contact-email .inputbox:focus {
background: #cecece;
}
.contact-email button {
width: 100%;
height: 3rem;
border-radius: 5px;
text-align: center;
}
.contact-email .formbutton {
background: #272727;
color: #fff;
border: 0px;
transition-duration: 300ms;
cursor: pointer;
}
.contact-email .formbutton:hover {
background: #727272;
}
.contact-email .form {
border-radius: 5px;
align-items: center;
justify-content: center;
margin: auto;
padding: 4rem 2.5rem;
width: 65%;
background: #fdfdfd;
box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
}
.contact-email .error_box {
background: #fee;
border-radius: 5px;
margin: auto;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem 1rem;
margin-bottom: 1.5rem;
}
.contact-email .box {
height: 2rem;
width: 100%;
text-align: center;
border-radius: 5px;
margin: auto;
align-items: center;
justify-content: center;
padding: 0.5rem 0px;
margin-bottom: 1rem;
}
textarea,
textfield {
padding: 5px;
font-size: 0.95rem;
resize: vertical;
min-height: 5rem;
}
.topic { .topic {
padding: 1rem; padding: 1rem;
font-size: 3rem; font-size: 3rem;
margin-top: 3vw; margin-top: 3vw;
margin-bottom: 7vw; margin-bottom: 7vw;
} }
.topic a { .topic a {
text-decoration: none; text-decoration: none;
color: black; color: black;
@@ -518,22 +682,27 @@ nav .dropdown {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.topic a:hover { .topic a:hover {
opacity: 70%; opacity: 70%;
background-size: 100% 0.2em; background-size: 100% 0.2em;
} }
/* overall */ /* overall */
.icons { .icons {
font-size: 2.25rem; font-size: 2.25rem;
font-weight: 500; font-weight: 500;
} }
@font-face { @font-face {
font-family: "NerdFontsSymbols Nerd Font"; font-family: "NerdFontsSymbols Nerd Font";
src: url("/assets/fonts/nf-symbols.woff2") format("woff2"); src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
} }
.nf-icons { .nf-icons {
font-family: "NerdFontsSymbols Nerd Font"; font-family: "NerdFontsSymbols Nerd Font";
} }
/* Releases */ /* Releases */
.release-track { .release-track {
background-size: cover; background-size: cover;
@@ -544,9 +713,11 @@ nav .dropdown {
border-radius: 10px; border-radius: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.release-track strong { .release-track strong {
color: #fff; color: #fff;
} }
.release-track .text-box { .release-track .text-box {
max-width: 1250px; max-width: 1250px;
margin: 25% auto; margin: 25% auto;
@@ -557,6 +728,7 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
font-size: 1.2rem; font-size: 1.2rem;
} }
.release-track .text-box a { .release-track .text-box a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
@@ -567,19 +739,23 @@ nav .dropdown {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.release-track .text-box a:hover { .release-track .text-box a:hover {
color: #ccc; color: #ccc;
background-size: 100% 0.2em; background-size: 100% 0.2em;
} }
/* info */ /* info */
.info { .info {
text-decoration: none; text-decoration: none;
list-style-type: none; list-style-type: none;
font-size: 1.4rem; font-size: 1.4rem;
} }
.info li { .info li {
padding: 1rem; padding: 1rem;
} }
.info a { .info a {
text-decoration: none; text-decoration: none;
color: #46f; color: #46f;
@@ -590,27 +766,34 @@ nav .dropdown {
background-repeat: no-repeat; background-repeat: no-repeat;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.info a:hover { .info a:hover {
opacity: 70%; opacity: 70%;
background-size: 100% 0.2em; background-size: 100% 0.2em;
} }
.info .title { .info .title {
font-size: 1.6rem; font-size: 1.6rem;
} }
.subdiv { .subdiv {
padding: 1rem; padding: 1rem;
} }
.long-br { .long-br {
display: block; display: block;
height: 2rem; height: 2rem;
} }
@media screen and (width >= 1180px) and (width<=1690px) {
@media screen and (width >=1180px) and (width<=1690px) {
/*if(width<1620px&&width>=1125px)*/ /*if(width<1620px&&width>=1125px)*/
nav .dropdown .dropdown-social { nav .dropdown .dropdown-social {
position: relative; position: relative;
width: 17.5rem; width: 17.5rem;
padding: 0rem 0rem; padding: 0rem 0rem;
} }
nav .dropdown .dropdown-social a { nav .dropdown .dropdown-social a {
transition: 0.2s; transition: 0.2s;
display: flex; display: flex;
@@ -618,62 +801,78 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
margin: 0.3rem 0; margin: 0.3rem 0;
} }
nav .dropdown .dropdown-social a:hover { nav .dropdown .dropdown-social a:hover {
background-color: #ddd; background-color: #ddd;
} }
nav .dropdown .dropdown-social strong { nav .dropdown .dropdown-social strong {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
align-content: center; align-content: center;
} }
nav .dropdown .dropdown-social p { nav .dropdown .dropdown-social p {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
nav .dropdown .dropdown-menu { nav .dropdown .dropdown-menu {
display: none; display: none;
} }
nav .menu, nav .menu,
nav .dropdown-open.dropdown, nav .dropdown-open.dropdown,
nav .dropdown-open.dropdown-social { nav .dropdown-open.dropdown-social {
opacity: 1; opacity: 1;
display: initial; display: initial;
} }
nav .social, nav .social,
nav .dropdown-open.dropdown-menu { nav .dropdown-open.dropdown-menu {
opacity: 0; opacity: 0;
display: none; display: none;
} }
nav .burger { nav .burger {
display: block; display: block;
} }
} }
@media screen and (width<1180px) { @media screen and (width<1180px) {
/*if(width<1125px)*/ /*if(width<1125px)*/
nav { nav {
font-size: 1.4rem; font-size: 1.4rem;
} }
nav ul img { nav ul img {
height: 2.5rem; height: 2.5rem;
} }
nav .social { nav .social {
font-size: 2rem; font-size: 2rem;
} }
nav .burger { nav .burger {
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
nav .dropdown .dropdown-social, nav .dropdown .dropdown-social,
nav .dropdown .dropdown-menu { nav .dropdown .dropdown-menu {
position: relative; position: relative;
} }
nav .dropdown .dropdown-menu { nav .dropdown .dropdown-menu {
width: 18rem; width: 18rem;
padding: 0rem 0rem; padding: 0rem 0rem;
} }
nav .dropdown .dropdown-social { nav .dropdown .dropdown-social {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
nav .dropdown .dropdown-menu p, nav .dropdown .dropdown-menu p,
nav .dropdown .dropdown-social a { nav .dropdown .dropdown-social a {
transition: 0.2s; transition: 0.2s;
@@ -681,35 +880,43 @@ nav .dropdown {
border-radius: 7px; border-radius: 7px;
margin: 0.3rem 0; margin: 0.3rem 0;
} }
nav .dropdown .dropdown-menu p:hover { nav .dropdown .dropdown-menu p:hover {
background-color: #ddd; background-color: #ddd;
} }
nav .dropdown .dropdown-social a:hover { nav .dropdown .dropdown-social a:hover {
opacity: 50%; opacity: 50%;
} }
nav .dropdown hr { nav .dropdown hr {
margin: 0.75rem 0rem; margin: 0.75rem 0rem;
padding: 1rem; padding: 1rem;
border: 1px solid #aaa; border: 1px solid #aaa;
} }
nav .social-name { nav .social-name {
display: none; display: none;
} }
nav .social, nav .social,
nav .menu-item { nav .menu-item {
display: none; display: none;
} }
nav .dropdown-open { nav .dropdown-open {
transition: 0.3s; transition: 0.3s;
opacity: 1; opacity: 1;
display: initial; display: initial;
} }
nav .dropdown-open .dropdown, nav .dropdown-open .dropdown,
nav .dropdown-open .dropdown-social, nav .dropdown-open .dropdown-social,
nav .dropdown-open .downdown-menu { nav .dropdown-open .downdown-menu {
display: initial; display: initial;
} }
nav .burger { nav .burger {
display: block; display: block;
} }
} }

17
assets/js/index.js
View File

@@ -10,14 +10,15 @@ let carousel = document.querySelector(".carousel");
let bg = document.querySelector(".slider-bg"); let bg = document.querySelector(".slider-bg");
//Album-cards //Album-cards
let album_cards = document.querySelector(".album-cards"); let album_cards = document.querySelector(".album-cards"),
half_img_cards = document.querySelector(".half-image-cards");
//The Database call. //The Database call.
import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm"; import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co"; const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
const supabaseKey = const supabaseKey =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc"; "sb_publishable_b0fMYw5I1X97gQXJLVBnrA_-0L4qHGv";
//anon key, you cant access private stuffs or add hilarious stuffs w/ this... //anon key, you cant access private stuffs or add hilarious stuffs w/ this...
//(unless sending me some malicious links but I delete your msg) //(unless sending me some malicious links but I delete your msg)
//the moment you notice you need an API endpoint. //the moment you notice you need an API endpoint.
@@ -55,8 +56,8 @@ if (!params.get("release")) {
document.title = "t404:null | Home"; document.title = "t404:null | Home";
build_event(0); build_event(0);
} }
if (path_name === "/" || path_name === "/release") build_event(1); if (path_name === "/" || path_name === "/release" || path_name === "/release/") build_event(1);
if (path_name === "/" || path_name === "/activity") build_event(2); if (path_name === "/" || path_name === "/activity" || path_name === "/activity/") build_event(2);
} else { } else {
let main = document.querySelector("main"); let main = document.querySelector("main");
main.innerHTML = ""; main.innerHTML = "";
@@ -291,6 +292,7 @@ async function init_releases(d) {
<p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p> <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
</a> </a>
*/ */
if(releases.length>0)album_cards.innerHTML="";
releases.forEach((a) => { releases.forEach((a) => {
let _card = document.createElement("a"), let _card = document.createElement("a"),
_bg_img = document.createElement("div"), _bg_img = document.createElement("div"),
@@ -321,7 +323,7 @@ async function init_activities(d) {
if (d.error) { if (d.error) {
console.error("Error fetching data:", d.error); console.error("Error fetching data:", d.error);
} else { } else {
releases = d.data; activities = d.data;
/*<a class="card" href="/activity"> /*<a class="card" href="/activity">
<div class="bg-img" style=" <div class="bg-img" style="
background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png); background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
@@ -369,7 +371,8 @@ async function init_activities(d) {
<p>???</p> <p>???</p>
<p>???</p> <p>???</p>
</a>*/ </a>*/
releases.forEach((a) => { if(activities.length>0)album_cards.innerHTML="";
activities.forEach((a) => {
let _card = document.createElement("a"), let _card = document.createElement("a"),
_bg_img = document.createElement("div"), _bg_img = document.createElement("div"),
_h2 = document.createElement("h2"), _h2 = document.createElement("h2"),
@@ -390,7 +393,7 @@ async function init_activities(d) {
_card.appendChild(_h2); _card.appendChild(_h2);
_card.appendChild(_p_subtitle); _card.appendChild(_p_subtitle);
_card.appendChild(_p_preview); _card.appendChild(_p_preview);
album_cards.appendChild(_card); half_img_cards.appendChild(_card);
}); });
} }
} }

50
assets/js/mail.js Normal file
View File

@@ -0,0 +1,50 @@
import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
const supabaseKey =
"sb_publishable_b0fMYw5I1X97gQXJLVBnrA_-0L4qHGv";
//anon key, you cant access private stuffs or add hilarious stuffs w/ this...
//(unless sending me some malicious links but I delete your msg)
//the moment you notice you need an API endpoint.
const supabase = createClient(supabaseUrl, supabaseKey);
const form = document.getElementById("mail-form"),
nameInput = document.getElementById("name"),
emailInput = document.getElementById("email"),
subjectInput = document.getElementById("subject"),
messageInput = document.getElementById("message"),
statusMessage = document.querySelector(".box");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const name = nameInput.value.trim();
const email = emailInput.value.trim();
const subject = subjectInput.value.trim();
const message = messageInput.value.trim();
if (!name || !email || !subject || !message ||
name.length==0 || email.length==0 || subject.length==0 || message.length==0) {
statusMessage.textContent = "Please fill in all fields.";
statusMessage.style = "background: #FFDCDC";
return;
}
try {
const { data, error } = await supabase
.from("mail")
.insert([{ name, email, subject, message }]);
if (error) {
throw error;
}
statusMessage.textContent = "Message sent successfully!";
statusMessage.style = "background: #DDF6D2";
form.reset();
} catch (error) {
console.error("Error sending message:", error);
statusMessage.textContent = "Error sending message. Please try again.";
statusMessage.style = "background: #FFDCDC";
}
});

37
contacts/index.html
View File

@@ -1,12 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>t404:null | Home</title> <title>t404:null | Contacts</title>
<meta name="description" content="Hello there! I'm t404:null (a.k.a t404owo). <meta name="description" content="Hello there! I'm t404:null (a.k.a t404owo).
I write/make/produce EDM music(DTM), and for every releases I'll post my music on this website. If you have any requests or questions, feel free contact me." />
Here is my contact list. Feel free to contact me in case you need anything in my reach ;)" />
<link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" /> <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" /> <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
<script src="/assets/js/mail.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
</head> </head>
<body> <body>
<nav> <nav>
@@ -200,6 +203,12 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
<li> <li>
<strong class="title" style="color:#555"><b class="nf-icons icons">&#xf42f;</b> Email</strong> <strong class="title" style="color:#555"><b class="nf-icons icons">&#xf42f;</b> Email</strong>
<p class="desc"> <p class="desc">
<a href="mailto:info@t404null.com" class="text-info">info@t404null.com</a>
<br />
<a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
<br />
<a href="mailto:t404.null@t404null.com" class="text-info">t404.null@t404null.com</a>
<br /><br />Or:<br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a> <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br /> <br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a> <a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
@@ -215,32 +224,34 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
</a> </a>
</li> </li>
<li><a href="https://x.com/t404_null" style="color:black; background: none"> <li><a href="https://x.com/t404_null" style="color:black; background: none">
<strong class="title"><b class="icons">&Xopf;</b> X / Twitter</strong> <strong class="title"><b class="nf-icons icons">&#xe8c9;</b> X / Twitter</strong>
<p class="desc">@t404_null</p> <p class="desc">@t404_null</p>
</a> </a>
</li> </li>
</ul> </ul>
<hr /> <hr />
<h1 class="topic">
(Or) Contact me here
</h1>
<div class="contact-email"> <div class="contact-email">
<form method="POST" class="form"> <form method="POST" class="form" id="mail-form">
<label for="name">Subject:</label> <label for="name">Subject:</label>
<input type="text" name="name" class="inputbox" placeholder="Your Name" required> <input type="text" name="name" id="name" class="inputbox" placeholder="Your Name" required>
<br> <br>
<label for="email">Email:</label> <label for="email">Email:</label>
<input type="email" name="email" class="inputbox" placeholder="your.email@here.please" autocomplete="email" required> <input type="email" name="email" id="email" class="inputbox" placeholder="your.email@here.please" autocomplete="email" required>
<br> <br>
<label for="subject">Subject:</label> <label for="subject">Subject:</label>
<input type="text" name="subject" class="inputbox" placeholder="Your topic here ;)" required> <input type="text" name="subject" id="subject" class="inputbox" placeholder="Your topic here ;)" required>
<br> <br>
<label for="message">Message:</label> <label for="message">Message:</label>
<textarea type="text" name="message" class="inputbox" placeholder="Message here." required> </textarea> <textarea type="text" name="message" id="message" class="inputbox" placeholder="Message here." required></textarea>
<br> <br>
<br> <div class="box"></div>
<!-- div class="error_box" /div--> <button type="submit" class="formbutton">Submit</button>
<button type="submit" class="formbutton">Login</button>
</form> </form>
</div> </div>
</main> </main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div> <div class="footer">&copy; t404:null 2021-2025 - All Rights Reserved</div>
</body> </body>
</html> </html>

10
index.html
View File

@@ -219,14 +219,18 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
<h1 class="topic"> <h1 class="topic">
<a href="/release">Releases (Click for more)</a> <a href="/release">Releases (Click for more)</a>
</h1> </h1>
<div class="album-cards"></div> <div class="album-cards">
Nothing here yet. ;D
</div>
<hr /> <hr />
<h1 class="topic"> <h1 class="topic">
<a href="/activity">Activities</a> <a href="/activity">Activities</a>
</h1> </h1>
<div class="half-image-cards"></div> <div class="half-image-cards">
Nothing here yet. ;D
</div>
</main> </main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div> <div class="footer">&copy; t404:null 2021-2025 - All Rights Reserved</div>
</body> </body>
<script src="/assets/js/index.js" type="module"></script> <script src="/assets/js/index.js" type="module"></script>

3
release/index.html
View File

@@ -192,9 +192,10 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
<main class= "main-page"> <main class= "main-page">
<h1 class="topic">Releases</h1> <h1 class="topic">Releases</h1>
<div class="album-cards"> <div class="album-cards">
Nothing here yet. ;D
</div> </div>
<script src="/assets/js/index.js" type="module"></script> <script src="/assets/js/index.js" type="module"></script>
</main> </main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div> <div class="footer">&copy; t404:null 2021-2025 - All Rights Reserved</div>
</body> </body>
</html> </html>

52
song_usage_terms/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>t404:null | Home</title> <title>t404:null | Usage of my song(s) / track(s)</title>
<meta name="description" content="Hello there! Please be friendly and read this ”terms of using my songs” before using my(t404:null's) song for any purposes." /> <meta name="description" content="Hello there! Please be friendly and read this ”terms of using my songs” before using my(t404:null's) song for any purposes." />
<link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" /> <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -202,23 +202,33 @@
<div class="long-br"></div> All use of the music/track(s)/song(s) is at your own risk. I'm not responsible for any damage, problems caused by your use of my music/track(s)/song(s) and won't be involved in by any way. <div class="long-br"></div> All use of the music/track(s)/song(s) is at your own risk. I'm not responsible for any damage, problems caused by your use of my music/track(s)/song(s) and won't be involved in by any way.
</li> </li>
<li> <li>
<strong class="title">1.) In the case if you want to use my song(s) / track(s) as a corporation / a company</strong> <strong class="title">1.) In the case if you want to use my song(s) / track(s) as a corporation / a company material</strong>
<br /> If you wish to use my song as a corporation / a company, no matter how you use it, please contact me and get confirmation at one of the following email address(es): <br /> <br /> If you wish to use my song as a corporation / a company material, no matter how you use it, please contact me and get confirmation at one of the following email address(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a> <a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
<br /> <div class="long-br"></div>
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a> Or:
<br /> <br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
</li>
<li>
<div class="subdiv">
<strong class="title">1.1.) In the case if you want to use my song(s) / track(s) as an educational institution or a volunteer organization / a company for volunteer</strong>
<br /> You are allowed use my songs as well as individuals. <br /> If you can, it would be (very) helpful for me if you could confirm it once in the following email adress(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a> <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br /> <br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a> <a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br /> <br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a> <a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br />
</li>
<li>
<div class="subdiv">
<strong class="title">1.1.) In the case if you want to use my song(s) / track(s) as an educational institution or a volunteer organization / a company for volunteer</strong>
<br /> You are allowed use my songs as well as individuals. <br /> If you can, it would be (very) helpful for me if you could confirm it once in the following email adress(es): <br />
<a href="mailto:info@t404null.com" class="text-info">info@t404null.com</a>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br />
<br /> Please note that this is intended primarily, but not exclusively, for educational institutions related to music. <br /> Please note that this is intended primarily, but not exclusively, for educational institutions related to music.
</div> </div>
</li> </li>
@@ -254,6 +264,10 @@
<div class="subdiv"> <div class="subdiv">
<strong class="title">3.2.) If you want to distribute the music as an official chart / official music for a rhythm game (in short, if you're a developer/offical charter/owner of that game) or if you want to use my song/track as a BGM that is included for a program / a game or its directory</strong> <strong class="title">3.2.) If you want to distribute the music as an official chart / official music for a rhythm game (in short, if you're a developer/offical charter/owner of that game) or if you want to use my song/track as a BGM that is included for a program / a game or its directory</strong>
<br /> Please contact me at one of the following email address(es): <br /> <br /> Please contact me at one of the following email address(es): <br />
<a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a> <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br /> <br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a> <a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
@@ -266,6 +280,10 @@
<div class="dubdiv"> <div class="dubdiv">
<strong class="title">3.3.) If you want to repost my song</strong> <strong class="title">3.3.) If you want to repost my song</strong>
<br /> Please contact me at one of the following email address(es): <br /> <br /> Please contact me at one of the following email address(es): <br />
<a href="mailto:request@t404null.com" class="text-info">request@t404null.com</a>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a> <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br /> <br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a> <a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
@@ -277,6 +295,10 @@
<li> <li>
<strong class="title">4.) Other Uses</strong> <strong class="title">4.) Other Uses</strong>
<br /> Please contact me at one of the following email address(es): <br /> <br /> Please contact me at one of the following email address(es): <br />
<a href="mailto:info@t404null.com" class="text-info">info@t404null.com</a>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a> <a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br /> <br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a> <a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
@@ -284,9 +306,9 @@
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a> <a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br /> <br />
</li> </li>
<div class="long-br"></div> &copy; t404:null 2021-2024 - All Rights Reserved. <div class="long-br"></div> &copy; t404:null 2021-2025 - All Rights Reserved.
</ul> </ul>
</main> </main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div> <div class="footer">&copy; t404:null 2021-2025 - All Rights Reserved</div>
</body> </body>
</html> </html>