<!DOCTYPE html>
<html lang="{{ page.lang | default: 'en' }}" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ page.title }}</title>
<meta name="description" content="{{ site.description }}" />
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}" />
<style>
.doc-wrap {
max-width: 860px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.doc-wrap h1 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
margin-bottom: 2rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
/* details / summary toggle */
details { margin-bottom: 2rem; }
details summary {
cursor: pointer;
padding: 0.6rem 1rem;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 1rem;
font-weight: 600;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
details summary::-webkit-details-marker { display: none; }
details[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: transparent;
}
/* markdown content inside */
.doc-body h2 {
font-size: 1.15rem;
font-weight: 700;
margin: 1.75rem 0 0.5rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--border);
}
.doc-body h3 {
font-size: 1rem;
font-weight: 600;
margin: 1.25rem 0 0.4rem;
color: var(--accent);
}
.doc-body p { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-muted); }
.doc-body p code, .doc-body li code { color: var(--text); }
.doc-body ul, .doc-body ol {
padding-left: 1.5rem;
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: var(--text-muted);
}
.doc-body li { margin-bottom: 0.25rem; }
.doc-body pre {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.25rem;
overflow-x: auto;
margin-bottom: 1rem;
}
.doc-body pre code {
background: none;
padding: 0;
font-size: 0.85rem;
color: var(--text);
}
.doc-body table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.doc-body th {
text-align: left;
padding: 0.5rem 0.75rem;
background: var(--bg3);
color: var(--text-muted);
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid var(--border);
}
.doc-body td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
color: var(--text-muted);
}
.doc-body tr:last-child td { border-bottom: none; }
.doc-body strong { color: var(--text); }
.doc-body a { color: var(--accent); }
.doc-body em { color: var(--text-muted); font-style: italic; }
.doc-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
/* content area inside <details> */
details > .doc-body {
background: var(--bg2);
border: 1px solid var(--border);
border-top: none;
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
padding: 1.5rem;
}
</style>
</head>
<body>
<nav>
<a class="nav-logo" href="{{ '/' | relative_url }}">sasurahime <span>✦</span></a>
<div class="nav-links">
<a href="{{ '/HOWTO-USE' | relative_url }}">HOW TO USE</a>
<a href="{{ '/SUPPORTED' | relative_url }}">Targets</a>
<div class="lang-switch">
<button id="btn-en" class="lang-btn active" onclick="switchLang('en')">EN</button>
<button id="btn-ja" class="lang-btn" onclick="switchLang('ja')">JA</button>
</div>
<a class="nav-gh" href="https://github.com/armaniacs/sasurahime" target="_blank" rel="noopener">
<svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
GitHub
</a>
</div>
</nav>
<div class="doc-wrap">
<h1>{{ page.title }}</h1>
{{ content }}
</div>
<footer>
<p>
<a href="{{ '/' | relative_url }}">Top</a> ·
<a href="https://github.com/armaniacs/sasurahime" target="_blank" rel="noopener">GitHub</a> ·
<a href="{{ '/HOWTO-USE' | relative_url }}">Documentation</a> ·
Apache-2.0 License
</p>
<p style="margin-top:0.5rem">© 2025 sasurahime contributors</p>
</footer>
<script>
/* wrap <details> children (excluding <summary>) in .doc-body */
document.querySelectorAll('details').forEach(function(d) {
var wrap = document.createElement('div');
wrap.className = 'doc-body';
Array.from(d.childNodes).forEach(function(n) {
if (n.nodeName !== 'SUMMARY') wrap.appendChild(n);
});
d.appendChild(wrap);
});
/* EN/JA language switcher */
function switchLang(lang) {
var details = document.querySelectorAll('details');
details.forEach(function(d) {
var summary = d.querySelector('summary');
if (!summary) return;
var text = summary.textContent || '';
if (lang === 'en') {
d.open = text.indexOf('English') !== -1;
} else {
d.open = text.indexOf('日本語') !== -1;
}
});
/* Update nav link labels */
var navLinks = document.querySelectorAll('.nav-links a:not(.nav-gh)');
if (navLinks.length >= 2) {
if (lang === 'ja') {
navLinks[0].textContent = '使い方';
navLinks[1].textContent = 'ターゲット一覧';
} else {
navLinks[0].textContent = 'HOW TO USE';
navLinks[1].textContent = 'Targets';
}
}
document.getElementById('btn-en').classList.toggle('active', lang === 'en');
document.getElementById('btn-ja').classList.toggle('active', lang === 'ja');
}
/* default: open EN, close JA */
switchLang('en');
</script>
</body>
</html>