quiple/galmuri
1
1
Fork 0
mirror of https://github.com/quiple/galmuri.git synced 2024-09-20 02:18:08 +03:00
Code Issues Packages Projects Releases Wiki Activity
831ccd2dbb
galmuri/index.html

128 lines
7.9 KiB
HTML
Raw Normal View History

Renew
2022-04-03 17:11:03 +03:00
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Galmuri</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="닌텐도 DS에서 사용되었던 비트맵 폰트를 기반으로 하는 픽셀풍 윤곽선 폰트.">
<link rel="icon" href="./files/q.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<style>
@font-face { font-family: Galmuri11; font-weight: 400; font-style: normal; font-display: block; src: 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.ttf') format("truetype"); }
@font-face { font-family: Galmuri9; font-weight: 400; font-style: normal; font-display: block; src: url('./dist/Galmuri9.ttf') format("truetype"); }
@font-face { font-family: Yamche; font-weight: 400; font-style: normal; font-display: block; src: url('./dist/Yamche.ttf') format("truetype"); }
:root { --point-color: #6171eb; }
html, body { image-rendering: pixelated; font-size: 24px; word-break: keep-all; position: relative; height: 100%; font-family: Galmuri11, sans-serif; box-sizing: border-box; }
p, .btns { line-height: 1.5; width: 62.5%; }
p:first-child { margin-top: -12px; }
a { color: var(--point-color); text-decoration: none; }
a:hover { text-decoration: underline; }
.btns { margin: 0 3px; margin-top: 30px; display: flex; gap: 2%; }
.btn { position: relative; text-align: center; flex: 1; padding: 0 36px; font-size: 20px; font-family: Galmuri9, sans-serif; display: flex; justify-content: center; align-items: center; height: 81px; color: #000; border: 3px solid #fbfbfb; box-shadow: 0 0 0 3px #494949; }
.btn::before { content: ''; position: absolute; width: 100%; height: 100%; z-index: -1; background-image: url('./files/bg.png'); background-size: contain; }
.btn:hover { text-decoration: none; box-shadow: 0 0 0 3px #416179; }
.btn:hover::before { background-image: url('./files/bgs.png'); }
.btn:active::before { transform: rotate(180deg); }
.swiper { width: 100%; height: 100%; }
.swiper-pagination-bullet { border-radius: 0; margin: 8px 0 !important; }
.swiper-pagination-bullet-active { background: var(--point-color); }
.wrap { width: calc(100% - 180px); height: calc(100% - 180px); padding: 90px; }
h1 { margin: 0; margin-top: -20px; line-height: 1.5; font-family: Galmuri9, sans-serif; font-size: 80px; }
#title { font-size: 100px; }
.detail { line-height: 1.5; font-size: 12px; position: absolute; bottom: 0; display: flex; justify-content: space-between; gap: 12px; width: calc(100% - 180px); margin-bottom: 90px; }
.detail span { display: block; }
.highlight { color: var(--point-color); }
@media (max-width: 1920px) {
.wrap { width: calc(100% - 160px); height: calc(100% - 160px); padding: 80px; }
.detail { width: calc(100% - 160px); margin-bottom: 80px; }
p, .btns { width: 75%; }
}
@media (max-width: 1280px) {
.wrap { width: calc(100% - 140px); height: calc(100% - 140px); padding: 70px; }
.detail { width: calc(100% - 140px); margin-bottom: 70px; }
p, .btns { width: 90%; }
h1 { font-size: 60px; }
#title { font-size: 80px; }
}
@media (max-width: 720px) {
.wrap { width: calc(100% - 80px); height: calc(100% - 80px); padding: 50px 40px; }
.detail { width: calc(100% - 80px); margin-bottom: 40px; }
.btns { flex-direction: column; gap: 20px; }
.btn { text-align: center; flex: 1 1 81px; }
p, .btns { width: 100%; }
html, body { font-size: 14px; }
h1 { font-size: 40px; }
#title { font-size: 60px; }
.detail { flex-direction: column; gap: 12px; }
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<h1 id="title">닌텐도 DS에 사용되었던<br>비트맵 폰트의 재탄생</h1>
<div class="btns">
<a class="btn" href="https://github.com/quiple/galmuri" target="_blank" style="flex:initial">GitHub에서 이 프로젝트 확인하기</a>
</div>
Update index.html
2022-04-03 17:17:05 +03:00
<small class="detail">아래로 스크롤하여 더 많은 내용 확인하기</small>
Renew
2022-04-03 17:11:03 +03:00
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<p><strong>Galmuri</strong>는 한글 음절 2,780자와 JIS 한자 6,355자 등을 지원하는 픽셀풍의 윤곽선 폰트입니다. 닌텐도 DS 본체와 소프트웨어에 사용되었던 비트맵 폰트의 모양을 본따 만들어졌습니다. Galmuri의 이름은 2008년 6월 사용자 한글화 커뮤니티인 <a href="https://cafe.naver.com/hansicgu" target="_blank">한식구</a>에서 김동한 님께서 만들어 배포하신 비트맵 폰트 ‘<a href="https://cafe.naver.com/hansicgu/174" target="_blank">갈무리M</a>’에서 유래하였습니다.</p>
<p>기존의 한글 음절 2,355자¹에 Adobe-KR-0의 425자를 추가하였으며, 지금은 Adobe-KR-1의 한글 음절 1,578자 및 한중일 호환용 한자, 한중일 통합 한자를 추가하는 중입니다.</p>
<small class="detail">1. KS X 1001의 2,350자 + 뢔, 쌰, 쎼, 쓔, 쬬.</small>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<h1>라이선스</h1>
<p>Copyright © 2019-2022 Lee Minseo (itoupluk427@gmail.com), with reserved font name “Galmuri”.</p>
<p>Galmuri는 <a href="https://scripts.sil.org/OFL" target="_blank">SIL 오픈 폰트 라이선스 1.1</a>에 따라 사용할 수 있으며, <strong>폰트가 자체적으로 판매되지 않는 한 자유롭게 사용·연구·수정·재배포할 수 있습니다.</strong> 또한 어떠한 경우에도 저작권자는 계약·불법 행위 또는 기타 계약의 조치로 인한 일반·특수·간접·부수·결과적 손해를 포함하여 어떠한 청구·손해 또는 기타 책임도 지지 않습니다.</p>
Update index.html
2022-04-03 18:03:09 +03:00
<p>그리고 Galmuri를 수정하여 파생된 이차적 저작물 폰트는 이름에 ‘Galmuri’를 사용할 수 없으며, 다른 유형의 라이선스로 배포할 수 없습니다.</p>
Renew
2022-04-03 17:11:03 +03:00
<p>OFL 1.1을 한국어로 번역한 내용은 <a href="https://github.com/quiple/galmuri/blob/main/LICENSE-ko.md">이곳</a>에서 확인할 수 있으며, 라이선스 원문은 <a href="https://github.com/quiple/galmuri/blob/main/LICENSE" target="_blank">이곳</a>에서 확인할 수 있습니다.</p>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<h1>다운로드</h1>
<div class="btns">
<a class="btn" href="https://github.com/quiple/galmuri/raw/main/dist/Galmuri11.ttf" download>Galmuri11</a>
<a class="btn" href="https://github.com/quiple/galmuri/raw/main/dist/Galmuri11-Bold.ttf" download>Galmuri11 Bold</a>
<a class="btn" href="https://github.com/quiple/galmuri/raw/main/dist/Galmuri9.ttf" download>Galmuri9</a>
<a class="btn" href="https://github.com/quiple/galmuri/raw/main/dist/Yamche.ttf" download>Yamche</a>
</div>
<small class="detail"><div>&copy; Lee Minseo</div><div>닌텐도 DS는 대한민국에서 등록된 Nintendo의 상표입니다.</div></small>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper(".swiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 0,
touchRatio: 0,
speed: 500,
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
on: {
slideChange: function() {
}
}
});
</script>
</body>
Update index.html
2022-04-03 17:12:43 +03:00
</html>
Reference in New Issue Copy Permalink