From a4da668ee2ed9b6e5504aac710208cfe74ab678a Mon Sep 17 00:00:00 2001 From: t404owo Date: Sat, 9 May 2026 22:56:41 +0200 Subject: [PATCH] changed logo size... --- main.css | 950 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 950 insertions(+) create mode 100644 main.css diff --git a/main.css b/main.css new file mode 100644 index 0000000..7d19842 --- /dev/null +++ b/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; + } + } +}