mirror of
https://github.com/t404owo/t404null.git
synced 2025-12-12 09:58:46 +00:00
New UI Update, still WIP
This commit is contained in:
Glitch (t404null-unstable)
@@ -1,6 +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');
|
||||
@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;
|
||||
@@ -12,7 +13,7 @@ main {
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
min-height: calc(100vh - 10rem);
|
||||
min-height: calc(100vh - 10vh);
|
||||
}
|
||||
hr {
|
||||
margin: 2rem 0px;
|
||||
@@ -24,7 +25,8 @@ nav {
|
||||
/* width:100%; */
|
||||
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;
|
||||
@@ -96,7 +98,6 @@ nav {
|
||||
|
||||
.footer {
|
||||
font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
|
||||
height: 1rem;
|
||||
position: sticky;
|
||||
/* width: 100%; */
|
||||
background-color: white;
|
||||
@@ -107,6 +108,7 @@ nav {
|
||||
background-color: #ddd;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/*---nav---*/
|
||||
@@ -284,7 +286,8 @@ nav {
|
||||
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;
|
||||
div {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
@@ -502,11 +505,11 @@ nav {
|
||||
}
|
||||
|
||||
.contact-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 23rem);
|
||||
grid-gap: 1rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 23rem);
|
||||
grid-gap: 1rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
li {
|
||||
border-radius: 7px;
|
||||
background-color: #ddd;
|
||||
@@ -617,8 +620,8 @@ nav {
|
||||
display: block;
|
||||
height: 2rem;
|
||||
}
|
||||
@media screen and (min-width: 1125px) and (max-width: 1620px) {
|
||||
/*if(width<1700px&&width>=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;
|
||||
|
||||
708
assets/css/old.css
Normal file
708
assets/css/old.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -6,12 +6,41 @@ let carousel = document.querySelector(".carousel");
|
||||
|
||||
let bg = document.querySelector(".slider-bg");
|
||||
|
||||
/*
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@1.28.0/dist/umd/supabase.min.js"></script>
|
||||
<script>
|
||||
const supabaseUrl = 'https://owbamcqdmqetrgcznxva.supabase.co';
|
||||
const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc';
|
||||
//anon key, you cant access private stuffs or add hilarious stuffs w/ this...
|
||||
//(unless sending me some malicious links but I delete your msg)
|
||||
const supabase = supabase.createClient(supabaseUrl, supabaseKey);
|
||||
async function fetchData() {
|
||||
let { data, error } = await supabase.
|
||||
from('events')
|
||||
.select('*'); //note it only shows u public stuffs
|
||||
if (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
} else {
|
||||
console.log('Data:', data);
|
||||
//edit tmr
|
||||
}
|
||||
}
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
*/
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user