Merge pull request #20 from t404owo/test

Create Test Branch testing site updates

assets/css/main.css

@@ -5,6 +5,7 @@
 
 body {
   margin: 0px;
+  height: 100%;
 }
 
 main,
@@ -20,13 +21,6 @@ main {
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
-  view-transition-name: main-page;
-  transition-property: opacity, display;
-  transition-duration: 1s;
-  opacity: 1;
-  @starting-style {
-    opacity: 0;
-  }
 }
 
 .main-page {
@@ -956,32 +950,3 @@ textfield {
     }
   }
 }
-
-@view-transition {
-  navigation: none;
-  animation: none;
-  
-}
-
-::view-transition-group(main-page) {
-  animation-timing-function: ease-out;
-}
-::view-transition-old(main-page) {
-  animation-name: fade-out;
-}
-
-::view-transition-new(main-page) {
-  animation-name: fade-in;
-}
-
-@keyframes fade-out {
-  0% { opacity: 1; translate: 0;}
-  50% { opacity: 0; translate: -1wv;}
-  100% { opacity: 0;}
-}
-
-@keyframes fade-in {
-  0% { opacity: 0; translate: -1wv;}
-  50% { opacity: 0; translate: 0;}
-  100% { opacity: 1;}
-}

assets/js/index.js

@@ -18,6 +18,7 @@ import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js
 
 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.

main.css

@@ -0,0 +1,950 @@
+@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");
+@import url("/assets/css/old.css");
+
+body {
+    margin: 0px;
+    height: 100%;
+}
+
+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;
+}
+
+.logo {
+    height: 3.75rem;
+    width: auto;
+}
+
+hr {
+    margin: 2rem 0px;
+}
+
+nav {
+    z-index: 4;
+    position: -webkit-sticky;
+    position: sticky;
+    /*   width:100%; */
+    top: 10px;
+    background-color: #f5f5f5;
+    font-family:
+        "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
+    font-size: 1.25rem;
+    padding: 4px;
+    margin: 10px;
+    margin-top: 15px;
+    border-radius: 12px;
+    box-shadow: 0px 0px 12px 0.1px #d0d0d0;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+
+    ul {
+        padding-left: 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;
+            vertical-align: middle;
+            padding-right: 0.3rem;
+        }
+    }
+
+    a {
+        color: black;
+        text-decoration: none;
+
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .vertical-line {
+        width: 0.1rem;
+        background-color: black;
+        height: 100%;
+    }
+
+    .social {
+        font-size: 2.5rem;
+        padding-bottom: 0.4rem;
+        transition: 0.3s;
+    }
+
+    .social:hover {
+        opacity: 50%;
+    }
+
+    .dropdown {
+        margin: 0.75rem;
+        position: absolute;
+        background-color: #f5f5f5;
+        box-shadow: 0px 0px 12px 0.1px #d0d0d0;
+        padding: 0.25rem 0.5rem;
+        border-radius: 7px;
+        right: 0;
+        top: 6rem;
+        display: none;
+        opacity: 0;
+        transition: 0.3s;
+    }
+}
+
+.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;
+
+    p {
+        background-size: 0% 0.2em;
+        background-image: linear-gradient(#000, #000);
+        background-position-y: 104%;
+        background-position-x: 0%;
+        background-repeat: no-repeat;
+        transition: 0.3s ease-in-out;
+    }
+
+    p:hover,
+    .currentpage {
+        opacity: 60%;
+        background-size: 100% 0.2em;
+    }
+}
+
+.burger {
+    border: none;
+    display: none;
+    width: 70px;
+    height: 70px;
+    margin: 0 0;
+    position: relative;
+    position: relative;
+    cursor: pointer;
+    background-color: #f5f5f5;
+    border-radius: 12px;
+    transition: 0.2s ease-in-out;
+
+    span {
+        transition: 0.2s ease-in-out;
+        box-sizing: border-box;
+        display: block;
+        background-color: #000;
+        border-radius: 2px;
+    }
+
+    #hamburger {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0%;
+        left: 0%;
+
+        span {
+            width: 70%;
+            height: 5%;
+            top: 17.5%;
+            left: 16%;
+            position: relative;
+            margin: 12% 0;
+        }
+
+        span:nth-child(1) {
+            transition-delay: 0.2s;
+        }
+
+        span:nth-child(2) {
+            transition-delay: 0.3s;
+        }
+
+        span:nth-child(3) {
+            transition-delay: 0.4s;
+        }
+    }
+
+    #cross {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0%;
+        left: 1.5%;
+        transform: rotate(45deg);
+
+        span:nth-child(1) {
+            height: 0%;
+            width: 5%;
+            position: absolute;
+            right: 46%;
+            /*a / */
+            top: 10%;
+            transform: translate(-50%);
+            transition-delay: 0s;
+        }
+
+        span:nth-child(2) {
+            width: 0%;
+            height: 5%;
+            position: absolute;
+            right: 11%;
+            top: 48%;
+            transition-delay: 0s;
+        }
+    }
+}
+
+.burger:hover {
+    opacity: 40%;
+}
+
+.burger.open {
+    #hamburger {
+        span {
+            width: 0%;
+        }
+
+        span:nth-child(1) {
+            transition-delay: 0s;
+        }
+
+        span:nth-child(2) {
+            transition-delay: 0.1s;
+        }
+
+        span:nth-child(3) {
+            transition-delay: 0.2s;
+        }
+    }
+
+    #cross {
+        span:nth-child(1) {
+            height: 80%;
+            transition-delay: 0.3s;
+        }
+
+        span:nth-child(2) {
+            width: 80%;
+            transition-delay: 0.3s;
+        }
+    }
+}
+
+.dropdown {
+    display: none;
+    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;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    transition: 0.3s;
+    padding: auto;
+    width: 100%;
+    height: 100%;
+    border-radius: 0.5rem;
+    font-family:
+        "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
+
+    div {
+        color: #fff;
+        position: relative;
+        z-index: 2;
+        margin: 0px;
+        display: grid;
+        justify-content: center;
+        grid-template-rows: 3.5fr 1fr 1fr 5rem;
+        grid-template-columns: 1fr auto 1fr;
+    }
+
+    h1 {
+        font-size: 2rem;
+        grid-row-start: 2;
+        grid-row-end: 3;
+    }
+
+    p {
+        font-size: 1.25rem;
+        grid-row-start: 3;
+        grid-row-end: 4;
+    }
+
+    p,
+    h1 {
+        width: 60vw;
+        text-align: center;
+        grid-column-start: 2;
+        /*|•|*/
+        grid-column-end: 3;
+    }
+}
+
+.slider:hover {
+    cursor: pointer;
+}
+
+.prev,
+.next {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    position: absolute;
+    height: 5rem;
+    width: 5rem;
+    font-size: 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;
+    margin-bottom: 2.5rem;
+    justify-content: center;
+    display: grid;
+    grid-template-rows: repeat(auto-fill, 23rem);
+    grid-template-columns: repeat(auto-fill, 23rem);
+    grid-gap: 1rem;
+
+    .card {
+        transition: 0.75s;
+        color: black;
+        background-color: #ddd;
+        height: 23rem;
+        border-radius: 7px;
+        text-decoration: none;
+
+        div {
+            z-index: 1;
+            position: inherit;
+            height: 100%;
+            width: 100%;
+            background-color: #ddd;
+            border-radius: 7px;
+            transition: 0.5s;
+        }
+
+        h2 {
+            font-size: 1.9rem;
+        }
+
+        p {
+            font-size: 1.2rem;
+        }
+
+        h2,
+        p {
+            color: white;
+            padding: 0.3rem 0.75rem 0.3rem 0.75rem;
+            position: relative;
+            z-index: 3;
+            opacity: 0;
+            transition: 0.5s;
+        }
+
+        .bg-img {
+            /*       background: url(/assets/img/t404_null-logo.png); */
+            background-size: cover;
+            position: absolute;
+            height: 23rem;
+            width: 23rem;
+        }
+    }
+
+    .card:hover {
+        .bg-img {
+            filter: blur(5px) brightness(50%);
+            -webkit-filter: blur(5px) brightness(50%);
+        }
+
+        h2,
+        p {
+            filter: none;
+            opacity: 1;
+        }
+    }
+}
+
+.half-image-cards {
+    margin: auto;
+    margin-bottom: 2.5rem;
+    justify-content: center;
+    display: grid;
+    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;
+        background-color: #ddd;
+        height: 30rem;
+        border-radius: 7px;
+        text-decoration: none;
+
+        div {
+            z-index: 1;
+            position: inherit;
+            height: 100%;
+            width: 100%;
+            background-color: #ddd;
+            border-radius: 7px;
+            transition: 0.5s;
+        }
+
+        h2 {
+            font-size: 1.9rem;
+        }
+
+        p {
+            font-size: 1.1rem;
+        }
+
+        h2,
+        p {
+            /*       color: black; */
+            padding: 0.3rem 10vw 0.3rem 5vw;
+            position: relative;
+            z-index: 3;
+            opacity: 0;
+            transition: 0.5s;
+        }
+
+        .bg-img {
+            /*       background: url(/assets/img/t404_null-logo.png); */
+            background-size: cover;
+            position: absolute;
+            background-position: center left;
+            height: 30rem;
+            width: 30rem;
+        }
+    }
+
+    .card:hover {
+        .bg-img {
+            filter: brightness(40%);
+            -webkit-filter: brightness(40%);
+            width: 8vw;
+            border-radius: 7px 0px 0px 7px;
+        }
+
+        h2,
+        p {
+            padding: 0.3rem 5vw 0.3rem 10vw;
+            filter: none;
+            opacity: 1;
+        }
+    }
+}
+
+.contact-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 23rem);
+    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;
+        background-size: 0% 0.2em;
+        background-image: linear-gradient(black, black);
+        background-position-y: 104%;
+        background-position-x: 0%;
+        background-repeat: no-repeat;
+        transition: 0.3s ease-in-out;
+    }
+
+    a:hover {
+        opacity: 70%;
+        background-size: 100% 0.2em;
+    }
+}
+
+/* overall */
+.icons {
+    font-size: 2.25rem;
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "NerdFontsSymbols Nerd Font";
+    src: url("https://www.nerdfonts.com/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2")
+        format("woff2");
+}
+
+.nf-icons {
+    font-family: "NerdFontsSymbols Nerd Font";
+}
+
+/* Releases */
+.release-track {
+    background-size: cover;
+    background-position: center;
+    height: 100%;
+    min-height: calc(100vh - 25rem);
+    padding: 5vw 5vw;
+    border-radius: 10px;
+    border: 1px solid #ddd;
+
+    strong {
+        color: #fff;
+    }
+
+    .text-box {
+        max-width: 1250px;
+        margin: 25% auto;
+        background-color: rgba(0, 0, 0, 75%);
+        height: 100%;
+        color: #ddd;
+        padding: 2rem;
+        border-radius: 7px;
+        font-size: 1.2rem;
+
+        a {
+            text-decoration: none;
+            color: #fff;
+            background-size: 0% 0.2em;
+            background-image: linear-gradient(#ccc, #ccc);
+            background-position-y: 104%;
+            background-position-x: 0%;
+            background-repeat: no-repeat;
+            transition: 0.3s ease-in-out;
+        }
+
+        a:hover {
+            color: #ccc;
+            background-size: 100% 0.2em;
+        }
+    }
+}
+
+/* info */
+.info {
+    text-decoration: none;
+    list-style-type: none;
+    font-size: 1.4rem;
+
+    li {
+        padding: 1rem;
+    }
+
+    a {
+        text-decoration: none;
+        color: #46f;
+        background-size: 0% 0.2em;
+        background-image: linear-gradient(#46f, #46f);
+        background-position-y: 104%;
+        background-position-x: 0%;
+        background-repeat: no-repeat;
+        transition: 0.3s ease-in-out;
+    }
+
+    a:hover {
+        opacity: 70%;
+        background-size: 100% 0.2em;
+    }
+
+    .title {
+        font-size: 1.6rem;
+    }
+}
+
+.subdiv {
+    padding: 1rem;
+}
+
+.long-br {
+    display: block;
+    height: 2rem;
+}
+
+@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;
+
+                a {
+                    transition: 0.2s;
+                    display: flex;
+                    padding: 1rem;
+                    border-radius: 7px;
+                    margin: 0.3rem 0;
+                }
+
+                a:hover {
+                    background-color: #ddd;
+                }
+
+                strong {
+                    margin-left: auto;
+                    margin-right: auto;
+                    align-content: center;
+                }
+
+                p {
+                    margin: 0.5rem 0;
+                }
+            }
+
+            .dropdown-menu {
+                display: none;
+            }
+        }
+
+        .menu,
+        .dropdown-open.dropdown,
+        .dropdown-open.dropdown-social {
+            opacity: 1;
+            display: initial;
+        }
+
+        .social,
+        .dropdown-open.dropdown-menu {
+            opacity: 0;
+            display: none;
+        }
+
+        .burger {
+            display: block;
+        }
+    }
+}
+
+@media screen and (width<1180px) {
+    /*if(width<1125px)*/
+
+    nav {
+        font-size: 1.4rem;
+
+        ul {
+            img {
+                height: 2.5rem;
+            }
+        }
+
+        .social {
+            font-size: 2rem;
+        }
+
+        .burger {
+            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;
+                padding: 1rem;
+                border-radius: 7px;
+                margin: 0.3rem 0;
+            }
+
+            .dropdown-menu p:hover {
+                background-color: #ddd;
+            }
+
+            .dropdown-social a:hover {
+                opacity: 50%;
+            }
+
+            hr {
+                margin: 0.75rem 0rem;
+                padding: 1rem;
+                border: 1px solid #aaa;
+            }
+        }
+
+        .social-name {
+            display: none;
+        }
+
+        .social,
+        .menu-item {
+            display: none;
+        }
+
+        .dropdown-open {
+            transition: 0.3s;
+            opacity: 1;
+            display: initial;
+
+            .dropdown,
+            .dropdown-social,
+            .downdown-menu {
+                display: initial;
+            }
+        }
+
+        .burger {
+            display: block;
+        }
+    }
+}