quiple/galmuri
1
1
Fork 0
mirror of https://github.com/quiple/galmuri.git synced 2024-09-11 14:06:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update color

Browse Source
This commit is contained in:
Lee Minseo 2022-06-24 13:55:45 +09:00
parent 644d27b7f4
commit 63e7e1066f
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
files/style.css
View File

@ -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; }

4
index.html
View File

@ -64,9 +64,9 @@
</div>
<p>이름에 ‘Bitmap’이 붙은 파일은 윤곽선 데이터 없이 비트맵 스트라이크만 포함된 트루타입 폰트입니다. CrystalTile2에서 폰트 이미지를 삽입하는 등의 용도로 적합합니다.</p>
<h2>웹폰트로 사용</h2>
<p>HTML에서:</p>
<p style="margin-bottom:8px">HTML에서:</p>
<pre>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css"&gt;</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>