mirror of
https://github.com/t404owo/t404null.git
synced 2025-12-12 18:08:47 +00:00
Compare commits
61 Commits
21b7b4b97a
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
f3d4e659df | ||
|
|
c528c7203f | ||
|
|
cc95f657ae | ||
|
|
800ec53291 | ||
|
|
c3af2e62c8 | ||
|
|
e6e37e5ba5 | ||
|
|
b721d85d6d | ||
|
|
9f398ccb5d | ||
|
|
bb2f59f974 | ||
|
|
4cb191f2e0 | ||
|
|
bc83fa4ed8 | ||
|
|
a5f838fbd0 | ||
|
|
23210ce689 | ||
|
|
a998ad564b | ||
|
|
1636d189fe | ||
|
|
5c1b16789b | ||
|
|
9001ec9e38 | ||
|
|
bb23015bc4 | ||
|
|
892c24b498 | ||
|
|
d71bbe78a9 | ||
|
|
efb2966d62 | ||
|
|
ddb1501e39 | ||
|
|
5a8bce7125 | ||
|
|
e74d3dcf43 | ||
|
|
9e18c458a5 | ||
|
|
254bc8a3cc | ||
|
|
eefe20d81c | ||
|
|
123fd0a7bf | ||
|
|
524bc3be83 | ||
|
|
d1ad38ba9b | ||
|
|
fd290598c1 | ||
|
|
92b0e1232e | ||
|
|
3ede610b6d | ||
|
|
066490f850 | ||
|
|
849dfeda89 | ||
|
|
c28949f2fc | ||
|
|
38e174a28f | ||
|
|
64e22d3eb9 | ||
|
|
40f9194271 | ||
|
|
422b417c29 | ||
|
|
17c26b0fb0 | ||
|
|
f46d90f06e | ||
|
|
522d3a69db | ||
|
|
b11e68a4d2 | ||
|
|
f996359f3a | ||
|
|
87b9d03ca8 | ||
|
|
b0709aa77e | ||
|
|
0a0310b410 | ||
|
|
b6034115c8 | ||
|
|
f936514228 | ||
|
|
da810d6a03 | ||
|
|
d704e025a6 | ||
|
|
1104fd3998 | ||
|
|
9e7ca86494 | ||
|
|
1149d1fdfb | ||
|
|
cdb6222553 | ||
|
|
90b7aa5b6f | ||
|
|
d5915b1b59 | ||
|
|
81d6fd2475 | ||
|
|
66b845fd11 | ||
|
|
f4bc2178cb |
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>t404:null | Home</title>
|
||||
<title>t404:null | About Me</title>
|
||||
<meta
|
||||
name="description"
|
||||
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>
|
||||
</main>
|
||||
<div class="footer">© t404:null 2021-2024 - All Rights Reserved</div>
|
||||
<div class="footer">© t404:null 2021-2025 - All Rights Reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>t404:null | Home</title>
|
||||
<title>t404:null | Activities / Previous Events</title>
|
||||
<meta
|
||||
name="description"
|
||||
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>
|
||||
</div>
|
||||
</main>
|
||||
<div class="footer">© t404:null 2021-2024 - All Rights Reserved</div>
|
||||
<div class="footer">© t404:null 2021-2025 - All Rights Reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,21 +7,31 @@ body {
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
main {
|
||||
|
||||
main,
|
||||
textarea,
|
||||
textfield {
|
||||
font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0.75rem;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
min-height: calc(100vh - 10vh);
|
||||
}
|
||||
|
||||
.main-page {
|
||||
max-width: 2300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2rem 0px;
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 4;
|
||||
position: -webkit-sticky;
|
||||
@@ -39,21 +49,25 @@ nav {
|
||||
box-shadow: 0px 0px 12px 0.1px #d0d0d0;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
|
||||
ul {
|
||||
padding-left: 15px;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
align-content: center;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 4px;
|
||||
vertical-align: middle;
|
||||
|
||||
p {
|
||||
padding-top: 0.4rem;
|
||||
vertical-align: middle;
|
||||
margin: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 0.25rem;
|
||||
height: 1.5rem;
|
||||
@@ -61,6 +75,7 @@ nav {
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
@@ -72,19 +87,23 @@ nav {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
width: 0.1rem;
|
||||
background-color: black;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.social {
|
||||
font-size: 2.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.social:hover {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin: 0.75rem;
|
||||
position: absolute;
|
||||
@@ -120,6 +139,7 @@ nav {
|
||||
.menu {
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.8rem;
|
||||
|
||||
p {
|
||||
background-size: 0% 0.2em;
|
||||
background-image: linear-gradient(#000, #000);
|
||||
@@ -128,6 +148,7 @@ nav {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
p:hover,
|
||||
.currentpage {
|
||||
opacity: 60%;
|
||||
@@ -147,6 +168,7 @@ nav {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12px;
|
||||
transition: 0.2s ease-in-out;
|
||||
|
||||
span {
|
||||
transition: 0.2s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
@@ -154,12 +176,14 @@ nav {
|
||||
background-color: #000;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#hamburger {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
|
||||
span {
|
||||
width: 70%;
|
||||
height: 5%;
|
||||
@@ -168,16 +192,20 @@ nav {
|
||||
position: relative;
|
||||
margin: 12% 0;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
#cross {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -190,11 +218,13 @@ nav {
|
||||
height: 0%;
|
||||
width: 5%;
|
||||
position: absolute;
|
||||
right: 46%; /*a / */
|
||||
right: 46%;
|
||||
/*a / */
|
||||
top: 10%;
|
||||
transform: translate(-50%);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
width: 0%;
|
||||
height: 5%;
|
||||
@@ -215,21 +245,26 @@ nav {
|
||||
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;
|
||||
@@ -242,6 +277,7 @@ nav {
|
||||
overflow: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
/*---- main ----*/
|
||||
.container {
|
||||
position: relative;
|
||||
@@ -250,6 +286,7 @@ nav {
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
@@ -259,6 +296,7 @@ nav {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-bg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -279,6 +317,7 @@ nav {
|
||||
border-radius: 0.5rem;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.slider section {
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
@@ -293,6 +332,7 @@ nav {
|
||||
border-radius: 0.5rem;
|
||||
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
|
||||
--apple-system;
|
||||
|
||||
div {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
@@ -303,27 +343,33 @@ nav {
|
||||
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-start: 2;
|
||||
/*|•|*/
|
||||
grid-column-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.slider:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
@@ -346,12 +392,15 @@ nav {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.pgctrl {
|
||||
font-family: sans-serif, --apple-system;
|
||||
z-index: 1;
|
||||
@@ -379,6 +428,7 @@ nav {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.control {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -393,6 +443,7 @@ nav {
|
||||
grid-template-rows: repeat(auto-fill, 23rem);
|
||||
grid-template-columns: repeat(auto-fill, 23rem);
|
||||
grid-gap: 1rem;
|
||||
|
||||
.card {
|
||||
transition: 0.75s;
|
||||
color: black;
|
||||
@@ -400,6 +451,7 @@ nav {
|
||||
height: 23rem;
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
|
||||
div {
|
||||
z-index: 1;
|
||||
position: inherit;
|
||||
@@ -409,12 +461,15 @@ nav {
|
||||
border-radius: 7px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
color: white;
|
||||
@@ -424,6 +479,7 @@ nav {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
/* background: url(/assets/img/t404_null-logo.png); */
|
||||
background-size: cover;
|
||||
@@ -432,11 +488,13 @@ nav {
|
||||
width: 23rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
.bg-img {
|
||||
filter: blur(5px) brightness(50%);
|
||||
-webkit-filter: blur(5px) brightness(50%);
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
filter: none;
|
||||
@@ -453,6 +511,7 @@ nav {
|
||||
grid-template-rows: repeat(auto-fill, 30rem);
|
||||
grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
|
||||
grid-gap: 1rem;
|
||||
|
||||
.card {
|
||||
transition: 0.75s;
|
||||
color: black;
|
||||
@@ -460,6 +519,7 @@ nav {
|
||||
height: 30rem;
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
|
||||
div {
|
||||
z-index: 1;
|
||||
position: inherit;
|
||||
@@ -469,12 +529,15 @@ nav {
|
||||
border-radius: 7px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
/* color: black; */
|
||||
@@ -484,6 +547,7 @@ nav {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
/* background: url(/assets/img/t404_null-logo.png); */
|
||||
background-size: cover;
|
||||
@@ -493,6 +557,7 @@ nav {
|
||||
width: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
.bg-img {
|
||||
filter: brightness(40%);
|
||||
@@ -500,6 +565,7 @@ nav {
|
||||
width: 8vw;
|
||||
border-radius: 7px 0px 0px 7px;
|
||||
}
|
||||
|
||||
h2,
|
||||
p {
|
||||
padding: 0.3rem 5vw 0.3rem 10vw;
|
||||
@@ -515,17 +581,113 @@ nav {
|
||||
grid-gap: 1rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
border-radius: 7px;
|
||||
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;
|
||||
font-size:0.95rem;
|
||||
}
|
||||
|
||||
: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;
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.topic {
|
||||
padding: 1rem;
|
||||
font-size: 3rem;
|
||||
margin-top: 3vw;
|
||||
margin-bottom: 7vw;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
@@ -536,6 +698,7 @@ nav {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 70%;
|
||||
background-size: 100% 0.2em;
|
||||
@@ -547,10 +710,12 @@ nav {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "NerdFontsSymbols Nerd Font";
|
||||
src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
|
||||
src: url("https://www.nerdfonts.com/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");
|
||||
}
|
||||
|
||||
.nf-icons {
|
||||
font-family: "NerdFontsSymbols Nerd Font";
|
||||
}
|
||||
@@ -564,9 +729,11 @@ nav {
|
||||
padding: 5vw 5vw;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
max-width: 1250px;
|
||||
margin: 25% auto;
|
||||
@@ -576,6 +743,7 @@ nav {
|
||||
padding: 2rem;
|
||||
border-radius: 7px;
|
||||
font-size: 1.2rem;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
@@ -586,6 +754,7 @@ nav {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ccc;
|
||||
background-size: 100% 0.2em;
|
||||
@@ -598,9 +767,11 @@ nav {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
font-size: 1.4rem;
|
||||
|
||||
li {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #46f;
|
||||
@@ -611,22 +782,27 @@ nav {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 70%;
|
||||
background-size: 100% 0.2em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subdiv {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.long-br {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
}
|
||||
@media screen and (width >= 1180px) and (width<=1690px) {
|
||||
|
||||
@media screen and (width >=1180px) and (width<=1690px) {
|
||||
/*if(width<1620px&&width>=1125px)*/
|
||||
|
||||
nav {
|
||||
@@ -635,6 +811,7 @@ nav {
|
||||
position: relative;
|
||||
width: 17.5rem;
|
||||
padding: 0rem 0rem;
|
||||
|
||||
a {
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
@@ -642,33 +819,40 @@ nav {
|
||||
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;
|
||||
}
|
||||
@@ -680,11 +864,13 @@ nav {
|
||||
|
||||
nav {
|
||||
font-size: 1.4rem;
|
||||
|
||||
ul {
|
||||
img {
|
||||
height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@@ -693,19 +879,24 @@ nav {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
.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;
|
||||
@@ -713,6 +904,7 @@ nav {
|
||||
border-radius: 7px;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
|
||||
.dropdown-menu p:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
@@ -720,29 +912,35 @@ nav {
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -1,25 +1,7 @@
|
||||
@import url("/assets/css/fonts/jost.css");
|
||||
@import url("/assets/css/fonts/noto-sans-jp.css");
|
||||
@import url("/assets/css/fonts/plus-jarkata-sans.css");
|
||||
body {
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
main {
|
||||
font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
|
||||
margin: 0.75rem;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
min-height: calc(100vh - 10vh);
|
||||
}
|
||||
.main-page {
|
||||
max-width: 2300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
hr {
|
||||
margin: 2rem 0px;
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 4;
|
||||
position: -webkit-sticky;
|
||||
@@ -28,8 +10,7 @@ nav {
|
||||
*/
|
||||
top: 10px;
|
||||
background-color: #f5f5f5;
|
||||
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
|
||||
--apple-system;
|
||||
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
|
||||
font-size: 1.25rem;
|
||||
padding: 4px;
|
||||
margin: 10px;
|
||||
@@ -39,28 +20,33 @@ nav {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding-left: 15px;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
padding-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav ul li p {
|
||||
padding-top: 0.4rem;
|
||||
vertical-align: middle;
|
||||
margin: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
nav ul img {
|
||||
margin-top: 0.25rem;
|
||||
height: 1.5rem;
|
||||
vertical-align: middle;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
@@ -71,19 +57,23 @@ nav a {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
nav .vertical-line {
|
||||
width: 0.1rem;
|
||||
background-color: black;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav .social {
|
||||
font-size: 2.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
nav .social:hover {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
nav .dropdown {
|
||||
margin: 0.75rem;
|
||||
position: absolute;
|
||||
@@ -97,28 +87,13 @@ nav .dropdown {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.footer {
|
||||
font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
|
||||
position: sticky;
|
||||
/* width: 100%;
|
||||
*/
|
||||
background-color: white;
|
||||
/* bottom: 0;
|
||||
*/
|
||||
/* left:0;
|
||||
*/
|
||||
z-index: 3;
|
||||
padding: 1rem;
|
||||
background-color: #ddd;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/*---nav---*/
|
||||
.menu {
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.menu p {
|
||||
background-size: 0% 0.2em;
|
||||
background-image: linear-gradient(#000, #000);
|
||||
@@ -127,11 +102,13 @@ nav .dropdown {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.menu p:hover,
|
||||
.menu .currentpage {
|
||||
opacity: 60%;
|
||||
background-size: 100% 0.2em;
|
||||
}
|
||||
|
||||
.burger {
|
||||
border: none;
|
||||
display: none;
|
||||
@@ -145,6 +122,7 @@ nav .dropdown {
|
||||
border-radius: 12px;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.burger span {
|
||||
transition: 0.2s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
@@ -152,6 +130,7 @@ nav .dropdown {
|
||||
background-color: #000;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.burger #hamburger {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -159,6 +138,7 @@ nav .dropdown {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.burger #hamburger span {
|
||||
width: 70%;
|
||||
height: 5%;
|
||||
@@ -167,15 +147,19 @@ nav .dropdown {
|
||||
position: relative;
|
||||
margin: 12% 0;
|
||||
}
|
||||
|
||||
.burger #hamburger span:nth-child(1) {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
.burger #hamburger span:nth-child(2) {
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
.burger #hamburger span:nth-child(3) {
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
.burger #cross {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -184,6 +168,7 @@ nav .dropdown {
|
||||
left: 1.5%;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.burger #cross span:nth-child(1) {
|
||||
height: 0%;
|
||||
width: 5%;
|
||||
@@ -194,6 +179,7 @@ nav .dropdown {
|
||||
transform: translate(-50%);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.burger #cross span:nth-child(2) {
|
||||
width: 0%;
|
||||
height: 5%;
|
||||
@@ -202,71 +188,39 @@ nav .dropdown {
|
||||
top: 48%;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.burger:hover {
|
||||
opacity: 40%;
|
||||
}
|
||||
|
||||
.burger.open #hamburger span {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.burger.open #hamburger span:nth-child(1) {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.burger.open #hamburger span:nth-child(2) {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
.burger.open #hamburger span:nth-child(3) {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
.burger.open #cross span:nth-child(1) {
|
||||
height: 80%;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
.burger.open #cross span:nth-child(2) {
|
||||
width: 80%;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.dropdown {
|
||||
display: none;
|
||||
overflow: auto;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
/*---- main ----*/
|
||||
.container {
|
||||
position: relative;
|
||||
height: 50vw;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.carousel {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slider-bg {
|
||||
height: 100%;
|
||||
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;
|
||||
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;
|
||||
@@ -279,9 +233,9 @@ nav .dropdown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
|
||||
--apple-system;
|
||||
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
|
||||
}
|
||||
|
||||
.slider section div {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
@@ -292,16 +246,19 @@ nav .dropdown {
|
||||
grid-template-rows: 3.5fr 1fr 1fr 5rem;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
}
|
||||
|
||||
.slider section h1 {
|
||||
font-size: 2rem;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.slider section p {
|
||||
font-size: 1.25rem;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 4;
|
||||
}
|
||||
|
||||
.slider section p,
|
||||
.slider section h1 {
|
||||
width: 60vw;
|
||||
@@ -310,65 +267,11 @@ nav .dropdown {
|
||||
/*|•|*/
|
||||
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: 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;
|
||||
}
|
||||
.prev {
|
||||
left: 1rem;
|
||||
}
|
||||
.pgctrl {
|
||||
font-family: sans-serif, --apple-system;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
left: 50%;
|
||||
vertical-align: middle;
|
||||
transform: translate(-50%);
|
||||
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;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.album-cards {
|
||||
margin: auto;
|
||||
@@ -379,6 +282,7 @@ nav .dropdown {
|
||||
grid-template-columns: repeat(auto-fill, 23rem);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.album-cards .card {
|
||||
transition: 0.75s;
|
||||
color: black;
|
||||
@@ -387,6 +291,7 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.album-cards .card div {
|
||||
z-index: 1;
|
||||
position: inherit;
|
||||
@@ -396,12 +301,15 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.album-cards .card h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.album-cards .card p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.album-cards .card h2,
|
||||
.album-cards .card p {
|
||||
color: white;
|
||||
@@ -411,6 +319,7 @@ nav .dropdown {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.album-cards .card .bg-img {
|
||||
/* background: url(/assets/img/t404_null-logo.png);
|
||||
*/
|
||||
@@ -419,15 +328,18 @@ nav .dropdown {
|
||||
height: 23rem;
|
||||
width: 23rem;
|
||||
}
|
||||
|
||||
.album-cards .card:hover .bg-img {
|
||||
filter: blur(5px) brightness(50%);
|
||||
-webkit-filter: blur(5px) brightness(50%);
|
||||
}
|
||||
|
||||
.album-cards .card:hover h2,
|
||||
.album-cards .card:hover p {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.half-image-cards {
|
||||
margin: auto;
|
||||
margin-bottom: 2.5rem;
|
||||
@@ -437,6 +349,7 @@ nav .dropdown {
|
||||
grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.half-image-cards .card {
|
||||
transition: 0.75s;
|
||||
color: black;
|
||||
@@ -445,6 +358,7 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.half-image-cards .card div {
|
||||
z-index: 1;
|
||||
position: inherit;
|
||||
@@ -454,12 +368,15 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.half-image-cards .card h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.half-image-cards .card p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.half-image-cards .card h2,
|
||||
.half-image-cards .card p {
|
||||
/* color: black;
|
||||
@@ -470,6 +387,7 @@ nav .dropdown {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.half-image-cards .card .bg-img {
|
||||
/* background: url(/assets/img/t404_null-logo.png);
|
||||
*/
|
||||
@@ -479,18 +397,21 @@ nav .dropdown {
|
||||
height: 30rem;
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.half-image-cards .card:hover .bg-img {
|
||||
filter: brightness(40%);
|
||||
-webkit-filter: brightness(40%);
|
||||
width: 8vw;
|
||||
border-radius: 7px 0px 0px 7px;
|
||||
}
|
||||
|
||||
.half-image-cards .card:hover h2,
|
||||
.half-image-cards .card:hover p {
|
||||
padding: 0.3rem 5vw 0.3rem 10vw;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.contact-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 23rem);
|
||||
@@ -498,16 +419,101 @@ nav .dropdown {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contact-cards li {
|
||||
border-radius: 7px;
|
||||
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;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.topic {
|
||||
padding: 1rem;
|
||||
font-size: 3rem;
|
||||
margin-top: 3vw;
|
||||
margin-bottom: 7vw;
|
||||
}
|
||||
|
||||
.topic a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
@@ -518,22 +524,12 @@ nav .dropdown {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.topic 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;
|
||||
@@ -544,9 +540,11 @@ nav .dropdown {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.release-track strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.release-track .text-box {
|
||||
max-width: 1250px;
|
||||
margin: 25% auto;
|
||||
@@ -557,6 +555,7 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.release-track .text-box a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
@@ -567,19 +566,23 @@ nav .dropdown {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.release-track .text-box a:hover {
|
||||
color: #ccc;
|
||||
background-size: 100% 0.2em;
|
||||
}
|
||||
|
||||
/* info */
|
||||
.info {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.info li {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.info a {
|
||||
text-decoration: none;
|
||||
color: #46f;
|
||||
@@ -590,27 +593,25 @@ nav .dropdown {
|
||||
background-repeat: no-repeat;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
opacity: 70%;
|
||||
background-size: 100% 0.2em;
|
||||
}
|
||||
|
||||
.info .title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.subdiv {
|
||||
padding: 1rem;
|
||||
}
|
||||
.long-br {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
}
|
||||
@media screen and (width >= 1180px) and (width<=1690px) {
|
||||
|
||||
@media screen and (width >=1180px) and (width<=1690px) {
|
||||
|
||||
/*if(width<1620px&&width>=1125px)*/
|
||||
nav .dropdown .dropdown-social {
|
||||
position: relative;
|
||||
width: 17.5rem;
|
||||
padding: 0rem 0rem;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social a {
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
@@ -618,62 +619,78 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social strong {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav .menu,
|
||||
nav .dropdown-open.dropdown,
|
||||
nav .dropdown-open.dropdown-social {
|
||||
opacity: 1;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
nav .social,
|
||||
nav .dropdown-open.dropdown-menu {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav .burger {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width<1180px) {
|
||||
|
||||
/*if(width<1125px)*/
|
||||
nav {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
nav ul img {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
nav .social {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
nav .burger {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social,
|
||||
nav .dropdown .dropdown-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-menu {
|
||||
width: 18rem;
|
||||
padding: 0rem 0rem;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-menu p,
|
||||
nav .dropdown .dropdown-social a {
|
||||
transition: 0.2s;
|
||||
@@ -681,34 +698,42 @@ nav .dropdown {
|
||||
border-radius: 7px;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-menu p:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
nav .dropdown .dropdown-social a:hover {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
nav .dropdown hr {
|
||||
margin: 0.75rem 0rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
nav .social-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav .social,
|
||||
nav .menu-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav .dropdown-open {
|
||||
transition: 0.3s;
|
||||
opacity: 1;
|
||||
display: initial;
|
||||
}
|
||||
|
||||
nav .dropdown-open .dropdown,
|
||||
nav .dropdown-open .dropdown-social,
|
||||
nav .dropdown-open .downdown-menu {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
nav .burger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -10,14 +10,14 @@ let carousel = document.querySelector(".carousel");
|
||||
let bg = document.querySelector(".slider-bg");
|
||||
|
||||
//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.
|
||||
import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
|
||||
|
||||
const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
|
||||
const supabaseKey =
|
||||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc";
|
||||
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.
|
||||
@@ -55,8 +55,8 @@ if (!params.get("release")) {
|
||||
document.title = "t404:null | Home";
|
||||
build_event(0);
|
||||
}
|
||||
if (path_name === "/" || path_name === "/release") build_event(1);
|
||||
if (path_name === "/" || path_name === "/activity") build_event(2);
|
||||
if (path_name === "/" || path_name === "/release" || path_name === "/release/") build_event(1);
|
||||
if (path_name === "/" || path_name === "/activity" || path_name === "/activity/") build_event(2);
|
||||
} else {
|
||||
let main = document.querySelector("main");
|
||||
main.innerHTML = "";
|
||||
@@ -291,6 +291,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>
|
||||
</a>
|
||||
*/
|
||||
if(releases.length>0)album_cards.innerHTML="";
|
||||
releases.forEach((a) => {
|
||||
let _card = document.createElement("a"),
|
||||
_bg_img = document.createElement("div"),
|
||||
@@ -321,7 +322,7 @@ async function init_activities(d) {
|
||||
if (d.error) {
|
||||
console.error("Error fetching data:", d.error);
|
||||
} else {
|
||||
releases = d.data;
|
||||
activities = d.data;
|
||||
/*<a class="card" href="/activity">
|
||||
<div class="bg-img" style="
|
||||
background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
|
||||
@@ -369,7 +370,8 @@ async function init_activities(d) {
|
||||
<p>???</p>
|
||||
<p>???</p>
|
||||
</a>*/
|
||||
releases.forEach((a) => {
|
||||
if(activities.length>0)album_cards.innerHTML="";
|
||||
activities.forEach((a) => {
|
||||
let _card = document.createElement("a"),
|
||||
_bg_img = document.createElement("div"),
|
||||
_h2 = document.createElement("h2"),
|
||||
@@ -390,7 +392,7 @@ async function init_activities(d) {
|
||||
_card.appendChild(_h2);
|
||||
_card.appendChild(_p_subtitle);
|
||||
_card.appendChild(_p_preview);
|
||||
album_cards.appendChild(_card);
|
||||
half_img_cards.appendChild(_card);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
59
assets/js/mail.js
Normal file
59
assets/js/mail.js
Normal file
@@ -0,0 +1,59 @@
|
||||
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"),
|
||||
submitButton = form.querySelector('button[type="submit"]');;
|
||||
|
||||
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();
|
||||
|
||||
|
||||
try {
|
||||
|
||||
[name, email, subject, message].forEach(obj => {
|
||||
if (!obj || obj.length===0) {
|
||||
throw new Error("field_missing");
|
||||
}
|
||||
});
|
||||
|
||||
if (submitButton) submitButton.disabled = true;
|
||||
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();
|
||||
if (submitButton) submitButton.disabled = false;
|
||||
} catch (error) {
|
||||
console.error("Error sending message:", error);
|
||||
statusMessage.textContent = (error.message === "field_missing") ?
|
||||
/*if (error==="field_missing")*/
|
||||
"Please fill in all fields." :
|
||||
/*else*/
|
||||
"Error sending message. Please try again.";
|
||||
statusMessage.style = "background: #FFDCDC";
|
||||
if (submitButton) submitButton.disabled = false;
|
||||
}
|
||||
});
|
||||
@@ -1,12 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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).
|
||||
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" />
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
|
||||
<script src="/assets/js/mail.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
@@ -200,6 +202,12 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
|
||||
<li>
|
||||
<strong class="title" style="color:#555"><b class="nf-icons icons"></b> Email</strong>
|
||||
<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>
|
||||
<br />
|
||||
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
|
||||
@@ -215,12 +223,34 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="https://x.com/t404_null" style="color:black; background: none">
|
||||
<strong class="title"><b class="icons">𝕏</b> X / Twitter</strong>
|
||||
<strong class="title"><b class="nf-icons icons"></b> X / Twitter</strong>
|
||||
<p class="desc">@t404_null</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h1 class="topic">
|
||||
(Or) Contact me here
|
||||
</h1>
|
||||
<div class="contact-email">
|
||||
<form method="POST" class="form" id="mail-form">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" name="name" id="name" class="inputbox" placeholder="Your Name" required>
|
||||
<br>
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" name="email" id="email" class="inputbox" placeholder="your.email@here.please" autocomplete="email" required>
|
||||
<br>
|
||||
<label for="subject">Subject:</label>
|
||||
<input type="text" name="subject" id="subject" class="inputbox" placeholder="Your topic here ;)" required>
|
||||
<br>
|
||||
<label for="message">Message:</label>
|
||||
<textarea type="text" name="message" id="message" class="inputbox" placeholder="Message here." required></textarea>
|
||||
<br>
|
||||
<div class="box"></div>
|
||||
<button type="submit" class="formbutton">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<div class="footer">© t404:null 2021-2024 - All Rights Reserved</div>
|
||||
<div class="footer">© t404:null 2021-2025 - All Rights Reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
14
index.html
14
index.html
@@ -14,10 +14,6 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
|
||||
/>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>
|
||||
eruda.init();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
@@ -219,14 +215,18 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
|
||||
<h1 class="topic">
|
||||
<a href="/release">Releases (Click for more)</a>
|
||||
</h1>
|
||||
<div class="album-cards"></div>
|
||||
<div class="album-cards">
|
||||
Nothing here yet. ;D
|
||||
</div>
|
||||
<hr />
|
||||
<h1 class="topic">
|
||||
<a href="/activity">Activities</a>
|
||||
</h1>
|
||||
<div class="half-image-cards"></div>
|
||||
<div class="half-image-cards">
|
||||
Nothing here yet. ;D
|
||||
</div>
|
||||
</main>
|
||||
<div class="footer">© t404:null 2021-2024 - All Rights Reserved</div>
|
||||
<div class="footer">© t404:null 2021-2025 - All Rights Reserved</div>
|
||||
</body>
|
||||
|
||||
<script src="/assets/js/index.js" type="module"></script>
|
||||
|
||||
@@ -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">
|
||||
<h1 class="topic">Releases</h1>
|
||||
<div class="album-cards">
|
||||
Nothing here yet. ;D
|
||||
</div>
|
||||
<script src="/assets/js/index.js" type="module"></script>
|
||||
</main>
|
||||
<div class="footer">© t404:null 2021-2024 - All Rights Reserved</div>
|
||||
<div class="footer">© t404:null 2021-2025 - All Rights Reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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." />
|
||||
<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" />
|
||||
@@ -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.
|
||||
</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>
|
||||
<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 />
|
||||
<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>
|
||||
</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 />
|
||||
<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 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: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>
|
||||
<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 />
|
||||
</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.
|
||||
</div>
|
||||
</li>
|
||||
@@ -254,6 +264,10 @@
|
||||
<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>
|
||||
<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>
|
||||
<br />
|
||||
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
|
||||
@@ -266,6 +280,10 @@
|
||||
<div class="dubdiv">
|
||||
<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 />
|
||||
<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>
|
||||
<br />
|
||||
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
|
||||
@@ -277,6 +295,10 @@
|
||||
<li>
|
||||
<strong class="title">4.) Other Uses</strong>
|
||||
<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>
|
||||
<br />
|
||||
<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>
|
||||
<br />
|
||||
</li>
|
||||
<div class="long-br"></div> © t404:null 2021-2024 - All Rights Reserved.
|
||||
<div class="long-br"></div> © t404:null 2021-2025 - All Rights Reserved.
|
||||
</ul>
|
||||
</main>
|
||||
<div class="footer">© t404:null 2021-2024 - All Rights Reserved</div>
|
||||
<div class="footer">© t404:null 2021-2025 - All Rights Reserved</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user