mirror of
https://github.com/t404owo/t404null.git
synced 2025-12-12 18:08:47 +00:00
751 lines
14 KiB
CSS
751 lines
14 KiB
CSS
@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 {
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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("/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;
|
|
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;
|
|
}
|
|
}
|
|
}
|