1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>{{ if .Title }}{{ .Title }} – {{ end }}Recordings</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root{
--bg:#0c0c12;
--text:#e5e5eb;
--muted:#a1a1b5;
--border:#2e2e43;
--btn-bg:#1c1c2a;
--btn-text:#f6f6ff;
}
body.light{
--bg:#ffffff;
--text:#1c1c1c;
--muted:#666;
--border:#ddd;
--btn-bg:#f3f3f3;
--btn-text:#333;
}
body{font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;max-width:900px;margin:32px auto;padding:0 16px;line-height:1.7;background:var(--bg);color:var(--text);transition:background .2s,color .2s}
header,footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 20px}
a{text-decoration:none;color:inherit} a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:.9rem}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--btn-bg);color:var(--btn-text)}
h1{margin:0 0 6px}
.content :is(h1,h2,h3){margin-top:1.2em}
.content img, .content video{max-width:100%;height:auto}
/* 모바일에서 줄바꿈 조정 */
@media (max-width: 768px) {
.content br:not(.keep) {
display: none;
}
.content p {
margin: 0.5em 0;
}
/* 문단 구분은 유지하되, 단일 줄바꿈은 무시 */
.content p + p {
margin-top: 1em;
}
}
</style>
</head>
<body>
<header>
<div class="nav">
{{ $back := (cond (ne .Parent nil) .Parent.RelPermalink "/recordings/") }}
<a class="btn" href="{{ $back }}">← Back</a>
</div>
<div class="nav">
<button id="theme-toggle" class="btn" type="button">Light mode</button>
<span class="muted">{{ .Date.Format "2006-01-02" }}</span>
</div>
</header>
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
<main class="content">
{{ .Content }}
</main>
<footer>
<div></div>
<div></div>
</footer>
{{/* Determine background audio for this page: prefer page resources, then section subfolder */}}
{{ $folder := path.Base (printf "%s" .File.Dir) }}
{{ $paudios := .Resources.Match "*.{mp3,m4a,ogg,wav,opus,OPUS,OGG,WAV,MP3,M4A}" }}
{{ $audio := index $paudios 0 }}
{{ if not $audio }}
{{ $secAudios := .CurrentSection.Resources.Match (printf "**/%s/*.{mp3,m4a,ogg,wav,opus,OPUS,OGG,WAV,MP3,M4A}" $folder) }}
{{ $audio = index $secAudios 0 }}
{{ end }}
{{ with $audio }}
<audio id="bgm" src="{{ .RelPermalink }}" preload="auto" loop style="display:none"></audio>
<div style="position:fixed;right:16px;bottom:16px;z-index:10">
<button id="bgm-toggle" class="btn" style="opacity:.8">BGM ▷</button>
</div>
<script>
// Try to autoplay; if blocked, enable on first user interaction
document.addEventListener('DOMContentLoaded', () => {
const bgm = document.getElementById('bgm');
const toggle = document.getElementById('bgm-toggle');
if (!bgm) return;
const tryPlay = () => bgm.play().catch(() => {});
tryPlay();
const onFirst = () => { tryPlay(); document.removeEventListener('click', onFirst); };
document.addEventListener('click', onFirst, { once: true });
if (toggle) {
toggle.addEventListener('click', (e) => {
e.preventDefault();
if (bgm.paused) {
bgm.play().then(()=>{ toggle.textContent = 'BGM ❚❚'; }).catch(()=>{});
} else {
bgm.pause();
bgm.currentTime = 0;
toggle.textContent = 'BGM ▷';
}
});
}
});
</script>
{{ end }}
<script>
(function(){
const stored = localStorage.getItem('theme');
if(stored === 'light') document.body.classList.add('light');
const btn = document.getElementById('theme-toggle');
const updateLabel = () => {
if(!btn) return;
btn.textContent = document.body.classList.contains('light') ? 'Dark mode' : 'Light mode';
};
updateLabel();
if(btn){
btn.addEventListener('click', ()=>{
document.body.classList.toggle('light');
localStorage.setItem('theme', document.body.classList.contains('light') ? 'light' : 'dark');
updateLabel();
});
}
})();
</script>
</body>
</html>
|
