From b0709aa77eaf69fbea482d297965ae8a0a739f1c Mon Sep 17 00:00:00 2001 From: t404owo Date: Fri, 17 Oct 2025 00:56:29 +0000 Subject: [PATCH] old.css updated --- assets/css/main.css | 9 +- assets/css/old.css | 204 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 203 insertions(+), 10 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index dc5c7b3..5d7c31c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -8,11 +8,13 @@ body { height: 100%; } -main, textarea, textfield { +main, +textarea, +textfield { font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; } -main { +main { margin: 0.75rem; height: 100%; margin-bottom: 0; @@ -776,7 +778,8 @@ nav { } } -textarea, textfield { +textarea, +textfield { padding: 5px; font-size: 0.95rem; } diff --git a/assets/css/old.css b/assets/css/old.css index 458eb63..8dc5c1d 100644 --- a/assets/css/old.css +++ b/assets/css/old.css @@ -1,25 +1,35 @@ @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 { + +main, +textarea, +textfield { font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; +} + +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; } + hr { margin: 2rem 0px; } + nav { z-index: 4; position: -webkit-sticky; @@ -28,8 +38,7 @@ nav { */ 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; @@ -39,28 +48,33 @@ nav { 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; @@ -71,19 +85,23 @@ nav a { -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; @@ -97,6 +115,7 @@ nav .dropdown { opacity: 0; transition: 0.3s; } + .footer { font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif; position: sticky; @@ -114,11 +133,13 @@ nav .dropdown { 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); @@ -127,11 +148,13 @@ nav .dropdown { 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; @@ -145,6 +168,7 @@ nav .dropdown { border-radius: 12px; transition: 0.2s ease-in-out; } + .burger span { transition: 0.2s ease-in-out; box-sizing: border-box; @@ -152,6 +176,7 @@ nav .dropdown { background-color: #000; border-radius: 2px; } + .burger #hamburger { position: absolute; height: 100%; @@ -159,6 +184,7 @@ nav .dropdown { top: 0%; left: 0%; } + .burger #hamburger span { width: 70%; height: 5%; @@ -167,15 +193,19 @@ nav .dropdown { 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%; @@ -184,6 +214,7 @@ nav .dropdown { left: 1.5%; transform: rotate(45deg); } + .burger #cross span:nth-child(1) { height: 0%; width: 5%; @@ -194,6 +225,7 @@ nav .dropdown { transform: translate(-50%); transition-delay: 0s; } + .burger #cross span:nth-child(2) { width: 0%; height: 5%; @@ -202,34 +234,43 @@ nav .dropdown { 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; overflow: auto; max-height: 70vh; } + /*---- main ----*/ .container { position: relative; @@ -238,6 +279,7 @@ nav .dropdown { margin: auto; margin-top: 1rem; } + .carousel { z-index: 1; width: 100%; @@ -247,6 +289,7 @@ nav .dropdown { position: relative; overflow: hidden; } + .slider-bg { height: 100%; width: 100%; @@ -267,6 +310,7 @@ nav .dropdown { border-radius: 0.5rem; transform: scale(1.1); } + .slider section { overflow: hidden; z-index: 1; @@ -279,9 +323,9 @@ nav .dropdown { 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; } + .slider section div { color: #fff; position: relative; @@ -292,16 +336,19 @@ nav .dropdown { 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; @@ -310,9 +357,11 @@ nav .dropdown { /*|•|*/ grid-column-end: 3; } + .slider:hover { cursor: pointer; } + .prev, .next { background-color: rgba(0, 0, 0, 0.3); @@ -334,12 +383,15 @@ nav .dropdown { -ms-user-select: none; user-select: none; } + .next { right: 1rem; } + .prev { left: 1rem; } + .pgctrl { font-family: sans-serif, --apple-system; z-index: 1; @@ -366,9 +418,11 @@ nav .dropdown { -ms-user-select: none; user-select: none; } + .control { text-align: center; } + /* Cards */ .album-cards { margin: auto; @@ -379,6 +433,7 @@ nav .dropdown { grid-template-columns: repeat(auto-fill, 23rem); grid-gap: 1rem; } + .album-cards .card { transition: 0.75s; color: black; @@ -387,6 +442,7 @@ nav .dropdown { border-radius: 7px; text-decoration: none; } + .album-cards .card div { z-index: 1; position: inherit; @@ -396,12 +452,15 @@ nav .dropdown { 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; @@ -411,6 +470,7 @@ nav .dropdown { opacity: 0; transition: 0.5s; } + .album-cards .card .bg-img { /* background: url(/assets/img/t404_null-logo.png); */ @@ -419,15 +479,18 @@ nav .dropdown { 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; @@ -437,6 +500,7 @@ nav .dropdown { grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem)); grid-gap: 1rem; } + .half-image-cards .card { transition: 0.75s; color: black; @@ -445,6 +509,7 @@ nav .dropdown { border-radius: 7px; text-decoration: none; } + .half-image-cards .card div { z-index: 1; position: inherit; @@ -454,12 +519,15 @@ nav .dropdown { 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; @@ -470,6 +538,7 @@ nav .dropdown { opacity: 0; transition: 0.5s; } + .half-image-cards .card .bg-img { /* background: url(/assets/img/t404_null-logo.png); */ @@ -479,18 +548,21 @@ nav .dropdown { 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); @@ -498,16 +570,19 @@ nav .dropdown { 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; @@ -518,22 +593,27 @@ nav .dropdown { 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; @@ -544,9 +624,11 @@ nav .dropdown { border-radius: 10px; border: 1px solid #ddd; } + .release-track strong { color: #fff; } + .release-track .text-box { max-width: 1250px; margin: 25% auto; @@ -557,6 +639,7 @@ nav .dropdown { border-radius: 7px; font-size: 1.2rem; } + .release-track .text-box a { text-decoration: none; color: #fff; @@ -567,19 +650,23 @@ nav .dropdown { 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; @@ -590,27 +677,106 @@ nav .dropdown { 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 >= 1180px) and (width<=1690px) { + +.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; +} + +.contact-email :not(textarea) { + text-align: center; +} + +.contact-email .inputbox:hover { + background: #dedede; +} + +.contact-email .inputbox:focus { + background: #cecece; +} + +.contact-email button { + width: 100%; + height: 3rem; + border-radius: 5px; + text-align: center; +} + +.contact-email .formbutton { + background: #272727; + color: #fff; + border: 0px; + transition-duration: 300ms; + cursor: pointer; +} + +.contact-email .formbutton:hover { + background: #727272; +} + +.contact-email .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; +} + +.contact-email .error_box { + background: #fee; + border-radius: 5px; + margin: auto; + align-items: center; + justify-content: center; + text-align: center; + padding: 1rem 1rem; + margin-bottom: 1.5rem; +} + +textarea, +textfield { + padding: 5px; + font-size: 0.95rem; +} + +@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; } + nav .dropdown .dropdown-social a { transition: 0.2s; display: flex; @@ -618,62 +784,78 @@ nav .dropdown { 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<1180px) { + /*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; @@ -681,35 +863,43 @@ nav .dropdown { 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; } -} +} \ No newline at end of file