Add favicon and update navigation icons across documentation

- Added a favicon link to all tour pages in the Japanese documentation.
- Updated navigation links to include SVG icons for Home and GitHub.
- Changed language button to include an SVG icon for better visual representation.
- Improved theme toggle button to use SVG icons for light and dark modes.
- Refactored the documentation build commands in the justfile for clarity and consistency.
This commit is contained in:
yhirose
2026-03-01 23:00:54 -05:00
parent 2d669c3636
commit e906c31a79
42 changed files with 1667 additions and 138 deletions

View File

@@ -86,14 +86,22 @@ a:hover {
}
.header-nav a {
display: flex;
align-items: center;
gap: 4px;
color: var(--header-nav-link);
font-size: 0.9rem;
}
.header-nav a svg {
flex-shrink: 0;
opacity: 0.85;
}
.header-tools {
display: flex;
align-items: center;
gap: 8px;
gap: 2px;
}
.lang-selector {
@@ -101,17 +109,21 @@ a:hover {
}
.lang-btn {
display: flex;
align-items: center;
gap: 5px;
background: none;
border: 1px solid var(--text-muted);
border: none;
color: var(--text);
padding: 4px 10px;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
opacity: 0.8;
}
.lang-btn:hover {
border-color: var(--text);
opacity: 1;
}
.lang-popup {
@@ -423,16 +435,18 @@ a:hover {
/* Theme toggle */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--text-muted);
border: none;
color: var(--text);
padding: 4px 8px;
padding: 5px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
line-height: 1;
opacity: 0.8;
}
.theme-toggle:hover {
border-color: var(--text);
opacity: 1;
}

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -33,6 +33,10 @@
var btn = document.querySelector('.theme-toggle');
if (!btn) return;
// Feather Icons: sun (light mode) and moon (dark mode)
var sunSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
var moonSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
function getTheme() {
var stored = localStorage.getItem('preferred-theme');
if (stored) return stored;
@@ -45,7 +49,7 @@
} else {
document.documentElement.removeAttribute('data-theme');
}
btn.textContent = theme === 'light' ? '\u2600\uFE0F' : '\uD83C\uDF19';
btn.innerHTML = theme === 'light' ? sunSVG : moonSVG;
}
applyTheme(getTheme());