mirror of
https://github.com/quiple/galmuri.git
synced 2024-10-06 02:18:02 +03:00
134 lines
10 KiB
CSS
134 lines
10 KiB
CSS
@charset "utf-8";
|
|
@font-face { font-family: Galmuri11; font-weight: 400; font-style: normal; font-display: block; src: url('../dist/Galmuri11.woff2') format('woff2'), url('../dist/Galmuri11.ttf') format('truetype'); }
|
|
@font-face { font-family: Galmuri11; font-weight: 700; font-style: normal; font-display: block; src: url('../dist/Galmuri11-Bold.woff2') format('woff2'), url('../dist/Galmuri11-Bold.ttf') format('truetype'); }
|
|
@font-face { font-family: Galmuri9; font-weight: 400; font-style: normal; font-display: block; src: url('../dist/Galmuri9.woff2') format('woff2'), url('../dist/Galmuri9.ttf') format('truetype'); }
|
|
@font-face { font-family: Galmuri7; font-weight: 400; font-style: normal; font-display: block; src: url('../dist/Galmuri7.woff2') format('woff2'), url('../dist/Galmuri7.ttf') format('truetype'); }
|
|
:root {
|
|
--point-color: #6171eb;
|
|
--point-fixed: #6171eb;
|
|
--bg: #fbfbfb;
|
|
--bgo: rgba(255,255,255,.5);
|
|
--cr: #222;
|
|
--cro: rgba(0,0,0,.5);
|
|
--croo: rgba(0,0,0,.2);
|
|
}
|
|
::selection { background-color: var(--point-color); color: var(--bg); }
|
|
* { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; }
|
|
html, body { font-size: 20px; position: relative; height: 100%; font-family: Galmuri9, sans-serif; box-sizing: border-box; background-color: var(--bg); color: var(--cr); }
|
|
.g11 { font-family: Galmuri11, serif; font-weight: 400; font-size: 24px; }
|
|
.g11b { font-family: Galmuri11, serif; font-weight: 700; font-size: 24px; }
|
|
.g9 { font-family: Galmuri9, serif; font-weight: 400; font-size: 20px; }
|
|
.g7 { font-family: Galmuri7, serif; font-weight: 400; font-size: 16px; }
|
|
h2 { line-height: 1; }
|
|
p, ul, small { line-height: 1.5; }
|
|
ul { list-style-type: none; font-size: 16px; font-family: Galmuri7, sans-serif; padding-left: 16px; position: relative; }
|
|
li { margin: .25em 0; }
|
|
li::before { content: '•'; left: 2px; position: absolute; }
|
|
.doc { max-width: 768px; padding: 0 24px; margin: 0 auto; }
|
|
h2 { font-family: Galmuri11, sans-serif; font-size: 24px; font-weight: 700; margin: 24px 0; }
|
|
a { color: var(--point-color); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
small { display: block; font-size: 16px; font-family: Galmuri7, sans-serif; margin-bottom: 2em; }
|
|
.btns { padding: 2px 0; margin: 0 2px; display: flex; gap: 2%; }
|
|
.btn { cursor: pointer; position: relative; text-align: center; flex: 1; padding: 0 36px; font-size: 16px; font-family: Galmuri7, sans-serif; display: flex; justify-content: center; align-items: center; height: 54px; color: #000; border: 2px solid #fbfbfb; outline: 2px solid #494949; z-index: 0; line-height: 1.5; }
|
|
.btn::before { content: ''; position: absolute; width: 100%; height: 100%; z-index: -1; background-image: url('./bg.png'); background-size: contain; }
|
|
.btn:hover { text-decoration: none; outline-color: #416179; }
|
|
.btn-check:checked + .btn { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--cr); }
|
|
.btn:hover::before { background-image: url('./bgs.png'); }
|
|
.btn:active::before { transform: rotate(180deg); }
|
|
pre, code { font-family: HBIOS-SYS, monospace; font-size: 16px; padding: .5em 1em; color: #fbfbfb; background-color: #000; word-break: break-all; white-space: normal; }
|
|
.swiper { width: 100%; height: 50vh; margin: 20px 0; }
|
|
.swiper .swiper-slide { width: auto; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: start; align-items: center; justify-content: space-between; gap: 4px; }
|
|
.swiper .swiper-slide img { image-rendering: smooth; display: block; width: 100%; height: 95%; object-fit: cover; }
|
|
.swiper .capt { font-family: 'Galmuri7', sans-serif; font-size: 16px; margin: 0 12px; line-height: 1.5; }
|
|
.wrap { width: calc(100% - 180px); height: calc(100vh - 180px); padding: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
.detail { line-height: 1.5; font-size: 16px; font-family: Galmuri7, sans-serif; position: absolute; bottom: 0; display: flex; justify-content: space-between; gap: 12px; width: calc(100% - 180px); margin-bottom: 90px; align-items: flex-end; }
|
|
#name { font-weight: normal; margin: 0; margin-top: -20px; line-height: 1.5; position: relative; font-size: 240px; color: #fff; font-family: Galmuri7, sans-serif; text-shadow: .125em 0 0 var(--point-fixed), -.125em 0 0 var(--point-fixed), 0 .125em 0 var(--point-fixed), 0 -.125em 0 var(--point-fixed), .125em .125em 0 var(--point-fixed), -.125em -.125em 0 var(--point-fixed), .125em -.125em 0 var(--point-fixed), -.125em .125em 0 var(--point-fixed), 0 .125em 0 var(--point-fixed), -.125em .125em 0 var(--point-fixed), .125em .125em 0 var(--point-fixed); animation: shadow .5s .5s cubic-bezier(0,0,0,1) forwards, up .5s .5s cubic-bezier(0,0,0,1) forwards; }
|
|
#title div { margin: 0; font-size: 80px; font-family: Galmuri9, sans-serif; font-weight: 400; line-height: 1.5; opacity: 0; text-shadow: 0 0 0 var(--croo); white-space: nowrap; }
|
|
#title div:first-child { animation: fade-in .5s .5s cubic-bezier(0,0,0,1) forwards, slide-in-up .5s .5s cubic-bezier(0,0,0,1) forwards, shadow2 .5s 1.2s cubic-bezier(0,0,0,1) forwards; }
|
|
#title div:nth-child(2) { animation: fade-in .5s .6s cubic-bezier(0,0,0,1) forwards, slide-in-up .5s .6s cubic-bezier(0,0,0,1) forwards, shadow2 .5s 1.2s cubic-bezier(0,0,0,1) forwards; }
|
|
#title div:last-child { animation: fade-in .5s .7s cubic-bezier(0,0,0,1) forwards, slide-in-up .5s .7s cubic-bezier(0,0,0,1) forwards, shadow2 .5s 1.2s cubic-bezier(0,0,0,1) forwards; }
|
|
#preload { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; background-image: url('./bgs.png'); }
|
|
#more { opacity: 0; animation: fade-in .5s 2s cubic-bezier(0,0,0,1) forwards; }
|
|
#list { --columns: 48; --columnsL: 56; --columnsS: 24; --columnsXS: 16; --tableWidth: 95vw; display: flex; flex-wrap: wrap; width: var(--tableWidth); }
|
|
#list .item { cursor: cell; display: flex; align-items: center; justify-content: center; width: calc(var(--tableWidth) / var(--columnsL)); height: calc(var(--tableWidth) / var(--columnsL)); text-decoration: none; color: var(--cr); }
|
|
#list .item:hover { background: var(--cr); color: var(--bg); }
|
|
#list .item.flash { animation: charset-flash 300ms 1; animation-fill-mode: forwards; animation-timing-function: ease-out; }
|
|
#hud-notification { position: fixed; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; z-index: 999; pointer-events: none; }
|
|
#hud-notification .msg { background: #222; color: #fbfbfb; height: 32px; line-height: 32px; font-size: 12px; letter-spacing: 0; padding: 0 10px 0 11px; opacity: .1; transition: 250ms all ease-in; transform: translate3d(0, 71px, 0); }
|
|
#hud-notification.visible .msg { transform: translate3d(0,0,0); transition: 120ms all cubic-bezier(.25,.47,.44,.93); opacity: 1; }
|
|
.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
|
|
.list-wrap { display: flex; justify-content: center; padding-bottom: 2.5vw; }
|
|
.tameshi { height: auto !important; padding-top: 0 !important; }
|
|
#tameshi { background-color: transparent; color: var(--cr); width: calc(100% + 6px); box-sizing: border-box; min-height: 200px; height: 100px; resize: vertical; line-height: 1.5; padding: 8px 14px; border: 3px solid var(--cro); transition: font-size .1s, border-color .1s; margin: 0 -3px; }
|
|
#tameshi:focus { border-color: var(--cr); outline: none; }
|
|
.donate-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
|
|
.donate { display: flex; align-items: stretch; position: relative; border: 2px solid var(--cro); padding: 12px; border-radius: 16px; }
|
|
.donate-logo { display: block; height: 18px; position: absolute; top: -10px; border-left: 4px solid var(--bg); border-right: 4px solid var(--bg); background-color: var(--bg); }
|
|
.donate-img { display: block; padding: 4px; width: 148px; background-color: #fff; box-shadow: 0 0 2px rgba(0,0,0,.75); border-radius: 4px; }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--point-color: #bbc2f7;
|
|
--bg: #222;
|
|
--bgo: rgba(0,0,0,.5);
|
|
--cr: #fbfbfb;
|
|
--cro: rgba(255,255,255,.5);
|
|
--croo: rgba(255,255,255,.2);
|
|
}
|
|
.btn { outline-color: #b6b6b6; }
|
|
.btn:hover { outline-color: #88a7bf; }
|
|
}
|
|
@media (max-width: 1920px) {
|
|
#list .item { width: calc(var(--tableWidth) / var(--columns)); height: calc(var(--tableWidth) / var(--columns)); }
|
|
.detail { width: calc(100% - 160px); margin-bottom: 80px; }
|
|
#title div { font-size: 70px; }
|
|
#name { font-size: 200px; }
|
|
}
|
|
@media (max-width: 1280px) {
|
|
#list .item { width: calc(var(--tableWidth) / var(--columnsS)); height: calc(var(--tableWidth) / var(--columnsS)); }
|
|
.detail { width: calc(100% - 140px); margin-bottom: 70px; }
|
|
#title div { font-size: 60px; }
|
|
#name { font-size: 160px; }
|
|
}
|
|
@media (max-width: 720px) {
|
|
html, body { font-size: 16px; }
|
|
ul { list-style-type: none; font-size: 12.8px; }
|
|
.swiper .capt { font-size: 12.8px; }
|
|
.doc { padding: 0 16px; }
|
|
#list .item { width: calc(var(--tableWidth) / var(--columnsXS)); height: calc(var(--tableWidth) / var(--columnsXS)); }
|
|
.detail { width: calc(100% - 80px); margin-bottom: 40px; flex-direction: column; gap: 12px; align-items: stretch; font-size: 12px; }
|
|
#title div { font-size: 7.5vw; }
|
|
#name { font-size: 20vw; }
|
|
}
|
|
.octocat { border: 0; color:#fbfbfb; fill: var(--point-fixed); height: 5.2rem; position: absolute; right: 0; top: 0; width: 5.2rem; z-index: 2; }
|
|
.octocat:hover .octocat-arm { animation: b .56s infinite; transform-origin: 7rem 5.25rem; }
|
|
.octocat .octocat-arm, .octocat .octocat-body { fill: #fbfbfb; }
|
|
@keyframes b {
|
|
0%, 50% { transform: rotate(0); }
|
|
25%, 75% { transform: rotate(-25deg); }
|
|
}
|
|
@keyframes fade-in {
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes slide-in-up {
|
|
from { transform: translateY(100%); }
|
|
}
|
|
@keyframes shadow {
|
|
to { text-shadow: .125em 0 0 var(--point-fixed), -.125em 0 0 var(--point-fixed), 0 .125em 0 var(--point-fixed), 0 -.125em 0 var(--point-fixed), .125em .125em 0 var(--point-fixed), -.125em -.125em 0 var(--point-fixed), .125em -.125em 0 var(--point-fixed), -.125em .125em 0 var(--point-fixed), 0 .25em 0 var(--point-fixed), -.125em .25em 0 var(--point-fixed), .125em .25em 0 var(--point-fixed); }
|
|
}
|
|
@keyframes shadow2 {
|
|
to { text-shadow: .1em .1em 0 var(--croo); }
|
|
}
|
|
@keyframes up {
|
|
to { transform: translateY(-.125em); }
|
|
}
|
|
@keyframes charset-flash {
|
|
0% { background-color: var(--bg); color: var(--cr); }
|
|
20% { background-color: var(--cr); color: var(--bg); }
|
|
20.1% { background-color: var(--bg); color: var(--cr); }
|
|
40% { background-color: var(--bg); color: var(--cr); }
|
|
40.1% { background-color: var(--cr); color: var(--bg); }
|
|
60% { background-color: var(--cr); color: var(--bg); }
|
|
100% { background-color: var(--bg); color: var(--cr); }
|
|
}
|