mirror of
https://github.com/quiple/galmuri.git
synced 2024-09-11 14:06:07 +03:00
Update color
This commit is contained in:
parent
644d27b7f4
commit
63e7e1066f
@ -11,6 +11,7 @@
|
||||
--cr: #222;
|
||||
--cro: rgba(0,0,0,.5);
|
||||
--croo: rgba(0,0,0,.2);
|
||||
--crooo: rgba(0,0,0,.1);
|
||||
}
|
||||
::selection { background-color: var(--point-color); color: var(--bg); }
|
||||
* { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; }
|
||||
@ -36,13 +37,13 @@ small { display: block; font-size: 16px; font-family: Galmuri7, sans-serif; marg
|
||||
.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; }
|
||||
pre, code { font-family: HBIOS-SYS, monospace; font-size: 16px; padding: .5em 1em; color: var(--cr); background-color: var(--crooo); word-break: break-all; white-space: normal; border-radius: 8px; margin-top: 8px; }
|
||||
.swiper { width: 100%; height: 50vh; margin: 20px 0; overflow: initial; }
|
||||
.swiper .swiper-slide { width: auto; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
||||
.swiper .swiper-slide img { image-rendering: smooth; display: block; width: 100%; height: 95%; object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.5); border-radius: 8px; }
|
||||
.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; }
|
||||
.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: 80px; 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; }
|
||||
@ -65,7 +66,7 @@ pre, code { font-family: HBIOS-SYS, monospace; font-size: 16px; padding: .5em 1e
|
||||
.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; }
|
||||
.donate-img { display: block; padding: 4px; width: 148px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.5); border-radius: 4px; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--point-color: #bbc2f7;
|
||||
@ -74,6 +75,7 @@ pre, code { font-family: HBIOS-SYS, monospace; font-size: 16px; padding: .5em 1e
|
||||
--cr: #fbfbfb;
|
||||
--cro: rgba(255,255,255,.5);
|
||||
--croo: rgba(255,255,255,.2);
|
||||
--crooo: rgba(255,255,255,.1);
|
||||
}
|
||||
.btn { outline-color: #b6b6b6; }
|
||||
.btn:hover { outline-color: #88a7bf; }
|
||||
|
@ -64,9 +64,9 @@
|
||||
</div>
|
||||
<p>이름에 ‘Bitmap’이 붙은 파일은 윤곽선 데이터 없이 비트맵 스트라이크만 포함된 트루타입 폰트입니다. CrystalTile2에서 폰트 이미지를 삽입하는 등의 용도로 적합합니다.</p>
|
||||
<h2>웹폰트로 사용</h2>
|
||||
<p>HTML에서:</p>
|
||||
<p style="margin-bottom:8px">HTML에서:</p>
|
||||
<pre><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css"></pre>
|
||||
<p>CSS에서:</p>
|
||||
<p style="margin-bottom:8px">CSS에서:</p>
|
||||
<pre>@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');</pre>
|
||||
<h2>쇼케이스</h2>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user