diff options
| -rw-r--r-- | hugo.toml | 1 | ||||
| -rw-r--r-- | layouts/recordings/recordings-plain.html | 100 | ||||
| -rw-r--r-- | layouts/recordings/single.html | 50 |
3 files changed, 129 insertions, 22 deletions
@@ -11,6 +11,7 @@ buildFuture = true [markup.goldmark] [markup.goldmark.renderer] hardWraps = true + unsafe = true [params] fancyTitle = "THESIAH" # title for frontpage, may include image diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html index d3c273e..fcd67ff 100644 --- a/layouts/recordings/recordings-plain.html +++ b/layouts/recordings/recordings-plain.html @@ -5,6 +5,26 @@ <title>{{ .Title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> + :root { + --bg: #0d0d12; + --card: #171721; + --text: #e6e6f2; + --muted: #acacc1; + --border: #2b2b3c; + --badge-bg: #242437; + --badge-text: #f4f4ff; + --hover: #1f1f2f; + } + body.theme-light { + --bg: #f7f7f9; + --card: #ffffff; + --text: #141416; + --muted: #656575; + --border: #ddddf0; + --badge-bg: #efeff5; + --badge-text: #13131a; + --hover: #f2f2fb; + } body { font-family: system-ui, @@ -16,6 +36,9 @@ max-width: 900px; margin: 32px auto; padding: 0 16px; + background: var(--bg); + color: var(--text); + transition: background 0.2s ease, color 0.2s ease; } h1 { margin-bottom: 12px; @@ -26,12 +49,13 @@ } a { text-decoration: none; + color: inherit; } a:hover { text-decoration: underline; } .meta { - color: #666; + color: var(--muted); margin-top: 4px; } video { @@ -46,19 +70,25 @@ } .badge { font-size: 0.8rem; - border: 1px solid #ccc; - border-radius: 6px; - padding: 2px 6px; + border: 1px solid var(--border); + border-radius: 999px; + padding: 3px 10px; margin-left: 6px; + background: var(--badge-bg); + color: var(--badge-text); } .folder-section { margin: 16px 0; - border: 1px solid #ddd; - border-radius: 8px; - background: #f9f9f9; + border: 1px solid var(--border); + border-radius: 12px; + background: var(--card); + box-shadow: 0 12px 28px rgba(8, 8, 15, 0.25); + } + body.theme-light .folder-section { + box-shadow: 0 18px 32px rgba(0, 0, 0, 0.08); } .folder-header { - padding: 8px 12px; + padding: 10px 14px; cursor: pointer; font-weight: 600; display: flex; @@ -66,26 +96,26 @@ align-items: center; } .folder-header:hover { - background: #f0f0f0; + background: var(--hover); } .folder-name { - color: #333; + color: var(--text); } .folder-count { - color: #666; + color: var(--muted); font-size: 0.9rem; font-weight: normal; } .folder-content { - padding: 0 12px 12px; + padding: 0 14px 14px; margin: 0; - border-top: 1px solid #eee; - background: white; + border-top: 1px solid var(--border); + background: var(--card); } .folder-content li { margin: 8px 0; padding: 4px 0; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid var(--border); } .folder-content li:last-child { border-bottom: none; @@ -97,6 +127,18 @@ li.folder-section[data-restricted="true"].allowed { display: block; } + .top-bar { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 12px; + } + #theme-toggle { + border: none; + cursor: pointer; + font-weight: 600; + } </style> <script> // 즉시 실행: 제한된 폴더 숨기기 (FOUC 방지) @@ -156,7 +198,12 @@ </script> </head> <body> - <h1>{{ .Title }}</h1> + <div class="top-bar"> + <div> + <h1>{{ .Title }}</h1> + </div> + <button id="theme-toggle" class="badge" style="border:none;cursor:pointer">Light mode</button> + </div> <!-- 섹션 소개 글 --> <div class="content">{{ .Content }}</div> @@ -665,5 +712,26 @@ }); }); </script> + <script> + (function() { + const stored = localStorage.getItem('theme'); + if (stored === 'light') { + document.body.classList.add('theme-light'); + } + const toggle = document.getElementById('theme-toggle'); + const updateLabel = () => { + if (!toggle) return; + toggle.textContent = document.body.classList.contains('theme-light') ? 'Dark mode' : 'Light mode'; + }; + updateLabel(); + if (toggle) { + toggle.addEventListener('click', () => { + document.body.classList.toggle('theme-light'); + localStorage.setItem('theme', document.body.classList.contains('theme-light') ? 'light' : 'dark'); + updateLabel(); + }); + } + })(); + </script> </body> </html> diff --git a/layouts/recordings/single.html b/layouts/recordings/single.html index 3e9a825..c3632d1 100644 --- a/layouts/recordings/single.html +++ b/layouts/recordings/single.html @@ -5,18 +5,34 @@ <title>{{ if .Title }}{{ .Title }} – {{ end }}Recordings</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> - 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} + :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} a:hover{text-decoration:underline} - .muted{color:#666;font-size:.9rem} + 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 #ccc;border-radius:8px;padding:6px 10px} + .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 { + .content br:not(.keep) { display: none; } .content p { @@ -35,7 +51,10 @@ {{ $back := (cond (ne .Parent nil) .Parent.RelPermalink "/recordings/") }} <a class="btn" href="{{ $back }}">← Back</a> </div> - <div class="muted">{{ .Date.Format "2006-01-02" }}</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 }} @@ -88,5 +107,24 @@ </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> |