=1335px)*/
+@media screen and (width >= 1125px) and (width<=1620px) {
+ /*if(width<1620px&&width>=1125px)*/
nav {
.dropdown {
@@ -666,8 +669,8 @@ nav {
}
}
-@media screen and not (min-width: 1125px) {
- /*if(width<1185px)*/
+@media screen and (width<1125px) {
+ /*if(width<1125px)*/
nav {
font-size: 1.4rem;
diff --git a/assets/css/old.css b/assets/css/old.css
new file mode 100644
index 0000000..b04bfec
--- /dev/null
+++ b/assets/css/old.css
@@ -0,0 +1,708 @@
+@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);
+}
+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;
+}
+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;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -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;
+ 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;
+}
+.menu 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;
+}
+.menu p:hover,
+.menu .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;
+}
+.burger span {
+ transition: 0.2s ease-in-out;
+ box-sizing: border-box;
+ display: block;
+ background-color: #000;
+ border-radius: 2px;
+}
+.burger #hamburger {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0%;
+ left: 0%;
+}
+.burger #hamburger span {
+ width: 70%;
+ height: 5%;
+ top: 17.5%;
+ left: 16%;
+ 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%;
+ width: 100%;
+ top: 0%;
+ left: 1.5%;
+ transform: rotate(45deg);
+}
+.burger #cross span:nth-child(1) {
+ height: 0%;
+ width: 5%;
+ position: absolute;
+ right: 46%;
+ /*a / */
+ top: 10%;
+ transform: translate(-50%);
+ transition-delay: 0s;
+}
+.burger #cross 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%;
+}
+.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;
+}
+/*---- 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;
+}
+.slider section 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;
+}
+.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;
+ 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;
+}
+.album-cards .card {
+ transition: 0.75s;
+ color: black;
+ background-color: #ddd;
+ height: 23rem;
+ border-radius: 7px;
+ text-decoration: none;
+}
+.album-cards .card div {
+ z-index: 1;
+ position: inherit;
+ height: 100%;
+ width: 100%;
+ background-color: #ddd;
+ 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;
+ padding: 0.3rem 0.75rem 0.3rem 0.75rem;
+ position: relative;
+ z-index: 3;
+ opacity: 0;
+ transition: 0.5s;
+}
+.album-cards .card .bg-img {
+ /* background: url(/assets/img/t404_null-logo.png);
+ */
+ background-size: cover;
+ position: absolute;
+ 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;
+ justify-content: center;
+ display: grid;
+ grid-template-rows: repeat(auto-fill, 30rem);
+ grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
+ grid-gap: 1rem;
+}
+.half-image-cards .card {
+ transition: 0.75s;
+ color: black;
+ background-color: #ddd;
+ height: 30rem;
+ border-radius: 7px;
+ text-decoration: none;
+}
+.half-image-cards .card div {
+ z-index: 1;
+ position: inherit;
+ height: 100%;
+ width: 100%;
+ background-color: #ddd;
+ 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;
+ */
+ padding: 0.3rem 10vw 0.3rem 5vw;
+ position: relative;
+ z-index: 3;
+ opacity: 0;
+ transition: 0.5s;
+}
+.half-image-cards .card .bg-img {
+ /* background: url(/assets/img/t404_null-logo.png);
+ */
+ background-size: cover;
+ position: absolute;
+ background-position: center left;
+ 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);
+ grid-gap: 1rem;
+ justify-content: center;
+ padding: 0;
+}
+.contact-cards li {
+ border-radius: 7px;
+ background-color: #ddd;
+}
+.topic {
+ padding: 1rem;
+ font-size: 3rem;
+ margin-top: 3vw;
+ margin-bottom: 7vw;
+}
+.topic 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;
+}
+.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;
+ background-position: center;
+ height: 100%;
+ min-height: calc(100vh - 25rem);
+ padding: 5vw 5vw;
+ border-radius: 10px;
+ border: 1px solid #ddd;
+}
+.release-track strong {
+ color: #fff;
+}
+.release-track .text-box {
+ margin: 25% 0;
+ background-color: rgba(0, 0, 0, 75);
+ height: 100%;
+ color: #ddd;
+ padding: 2rem;
+ border-radius: 7px;
+ font-size: 1.2rem;
+}
+.release-track .text-box 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;
+}
+.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;
+ 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;
+}
+.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 >= 1125px) and (width<=1620px) {
+ /*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;
+ padding: 1rem;
+ 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<1125px) {
+ /*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;
+ padding: 1rem;
+ 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;
+ }
+}
diff --git a/assets/js/index.js b/assets/js/index.js
index 169cc80..796bb52 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -6,12 +6,41 @@ let carousel = document.querySelector(".carousel");
let bg = document.querySelector(".slider-bg");
+/*
+
+
+
+*/
+
let img = [
"https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
"https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Oblitus_Requiem.png?v=1693055600835",
- "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png?v=1683474226492",
+ "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
];
-let pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"];
+let pg = [
+ "/",
+ "release/Oblitus_Requiem",
+ "release/A_Lake_With_Endless_Stars"
+];
+
if (!document) console.log("press f");
if (!next) console.log("Class next missing.");
@@ -50,6 +79,14 @@ function set() {
if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
}
+
+// setInterval(getinfo, 60000);
+// async function getinfo() {
+// let res = await fetch("");
+// const info = await res.json();
+// if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`;
+// }
+
function reset() {
for (var i = 0; i < slider.children.length; i++) {
slider.children[i].style.opacity = 0;
diff --git a/index.html b/index.html
index b6f8c2f..8056f6a 100644
--- a/index.html
+++ b/index.html
@@ -192,7 +192,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
This page is still under construction.
-
The page is still under development, in cases, this page will change after reload or after a few days and a reload.
+
The page is still under development. In cases, this page will change after reload or after a few days and a reload.
@@ -300,7 +300,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
???
Li4tLiAuLS0gLS4uIC0tLi4u
\-...-4buoe2v1qZuiULSrOPuzXZBn
YZt0ULSr9PuzvfuiaZwo5ZBseZB39
fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO
-
+