61 lines
4.0 KiB
Svelte
61 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import updateHistoryMarkdown from '../../../UPDATES.md?raw';
|
|
import { renderReleaseMarkdown } from '$lib/release-notes/markdown.ts';
|
|
import { parseUpdateHistoryDocument } from '$lib/update-history-document.ts';
|
|
|
|
const updateHistoryDocument = parseUpdateHistoryDocument(updateHistoryMarkdown);
|
|
const renderedUpdateHistory = renderReleaseMarkdown(updateHistoryDocument.body);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>업데이트 내역 · 홀로도리 계산기</title>
|
|
<meta name="description" content="홀로도리 계산기에 수시로 반영된 기능, 개선, 수정, 데이터 업데이트 내역" />
|
|
</svelte:head>
|
|
|
|
<main>
|
|
<header class="page-header">
|
|
<p class="eyebrow">CHANGELOG</p>
|
|
<h1>업데이트 내역</h1>
|
|
<p class="description">큰 버전 배포 단위가 아닌, 실제로 반영된 변경 사항을 순서대로 기록합니다.</p>
|
|
</header>
|
|
|
|
<aside class="delivery-note">
|
|
<span aria-hidden="true">●</span>
|
|
<p><strong>온라인판</strong>은 변경 사항이 수시로 반영됩니다. <strong>오프라인판</strong>은 다시 내려받은 파일에 포함된 시점까지의 내역을 보여 줍니다.</p>
|
|
</aside>
|
|
|
|
<article class="markdown-body">{@html renderedUpdateHistory}</article>
|
|
</main>
|
|
|
|
<style>
|
|
main { width: min(980px, calc(100% - var(--page-gutter))); margin: 0 auto; padding: var(--page-content-top) 0 88px; }
|
|
.page-header { padding: 18px 0 var(--page-header-bottom); }
|
|
.eyebrow { margin: 0 0 10px; color: #ed8bb5; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
|
|
h1 { margin: 0; color: #f3f5f8; font-size: var(--page-title-size); letter-spacing: -.045em; }
|
|
.description { margin: 13px 0 0; color: #9ba5b4; font-size: var(--page-description-size); line-height: 1.65; }
|
|
.delivery-note { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 36px; padding: 15px 17px; border: 1px solid rgb(237 139 181 / 24%); border-radius: 12px; background: rgb(237 139 181 / 7%); }
|
|
.delivery-note > span { margin-top: 7px; color: #ed8bb5; font-size: 7px; }
|
|
.delivery-note p { margin: 0; color: #aeb6c2; font-size: 14px; line-height: 1.65; }
|
|
.delivery-note strong { color: #e9edf2; }
|
|
.markdown-body { position: relative; padding-left: 34px; }
|
|
.markdown-body::before { position: absolute; top: 9px; bottom: 0; left: 6px; width: 1px; background: #303947; content: ''; }
|
|
:global(.markdown-body h2) { position: relative; margin: 0 0 14px; padding-top: 2px; color: #cad0d9; font-size: 15px; font-weight: 850; }
|
|
:global(.markdown-body h2:not(:first-child)) { margin-top: 38px; }
|
|
:global(.markdown-body h2::before) { position: absolute; top: 6px; left: -34px; width: 13px; height: 13px; border: 3px solid #101319; border-radius: 50%; background: #ed8bb5; box-shadow: 0 0 0 1px rgb(237 139 181 / 45%); content: ''; }
|
|
:global(.markdown-body h3) { margin: 10px 0 0; padding: 19px 20px 0; border: 1px solid #2b3441; border-bottom: 0; border-radius: 12px 12px 0 0; color: #edf0f4; background: #151a22; font-size: 17px; letter-spacing: -.02em; }
|
|
:global(.markdown-body h3 + p) { margin: 0 0 10px; padding: 8px 20px 19px; border: 1px solid #2b3441; border-top: 0; border-radius: 0 0 12px 12px; color: #9ca6b4; background: #151a22; font-size: 14px; line-height: 1.65; }
|
|
:global(.markdown-body code) { margin-right: 7px; padding: 3px 7px; border: 1px solid rgb(237 139 181 / 32%); border-radius: 999px; color: #efa0c1; background: rgb(237 139 181 / 9%); font-family: inherit; font-size: 10px; font-weight: 900; }
|
|
:global(.markdown-body hr) { height: 1px; margin: 38px 0; border: 0; background: #2c3440; }
|
|
:global(.markdown-body ul), :global(.markdown-body ol) { color: #9ca6b4; line-height: 1.7; }
|
|
:global(.markdown-body a) { color: #f0a1c3; }
|
|
|
|
@media (max-width: 560px) {
|
|
.page-header { padding-top: 12px; }
|
|
.delivery-note { margin-bottom: 30px; }
|
|
.markdown-body { padding-left: 27px; }
|
|
:global(.markdown-body h2::before) { left: -27px; }
|
|
:global(.markdown-body h3) { padding: 17px 17px 0; }
|
|
:global(.markdown-body h3 + p) { padding: 8px 17px 17px; }
|
|
}
|
|
</style>
|