Skip to content

Commit 39afaf6

Browse files
ogwataogwata
committed
Update header nav and font
1 parent 54bef2d commit 39afaf6

File tree

2 files changed

+205
-19
lines changed

2 files changed

+205
-19
lines changed

‎public/styles/global.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
Web Fonts - Google Fonts読み込み
1010
========================================================================== */
1111

12+
/* Google Sans Flex: メインフォント */
13+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,400;8..144,500;8..144,700&display=swap');
14+
1215
/* Noto Sans JP: 丸付き数字（❶-❿）を確実にカバー */
1316
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
1417

@@ -48,8 +51,8 @@
4851
--color-border-dark: #cccccc;
4952

5053
/* タイポグラフィ */
51-
/* Noto Sans JP を先頭に配置、次に丸付き数字専用フォント */
52-
--font-sans: "Noto Sans JP", "Circled Numbers", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
54+
/* Google Sans Flex を先頭、次に日本語フォールバック */
55+
--font-sans: "Google Sans Flex", "Noto Sans JP", "Circled Numbers", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
5356
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
5457

5558
--font-size-base: 16px;

‎src/layouts/DocsLayout.astro‎

Lines changed: 200 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,56 @@ interface Props {
1717
1818
const { title, description = '', lang = 'en', showBreadcrumb = true, availableLanguages = [] } = Astro.props;
1919
const currentPath = Astro.url.pathname;
20+
21+
const isJa = lang === 'ja';
22+
const navLabels = isJa
23+
? {
24+
product: 'プロダクト',
25+
tutorial: 'チュートリアル',
26+
reference: 'リファレンス',
27+
faq: 'FAQ',
28+
docs: 'ドキュメント',
29+
contribution: 'コントリビューションガイド',
30+
}
31+
: {
32+
product: 'Product',
33+
tutorial: 'Tutorials',
34+
reference: 'Reference',
35+
faq: 'FAQ',
36+
docs: 'Documentation',
37+
contribution: 'Contribution Guides',
38+
};
39+
40+
const navLinks = {
41+
products: [
42+
{ label: 'Vivliostyle Viewer', href: `/${lang}/viewer/` },
43+
{ label: 'Vivliostyle CLI', href: `/${lang}/cli/` },
44+
{ label: 'VFM', href: `/${lang}/vfm/` },
45+
{ label: 'Vivliostyle Themes', href: `/${lang}/themes/` },
46+
],
47+
tutorial: {
48+
label: navLabels.tutorial,
49+
href: isJa ? 'https://vivliostyle.org/ja/tutorials/' : 'https://vivliostyle.org/en/tutorials/',
50+
external: true,
51+
},
52+
reference: {
53+
docs: [
54+
{ label: isJa ? 'サポートする CSS 機能' : 'Supported CSS Features', href: `/${lang}/reference/supported-css-features/` },
55+
{ label: isJa ? 'Core API リファレンス' : 'Core API Reference', href: `/${lang}/reference/api/` },
56+
],
57+
contribution: [
58+
{ label: 'Vivliostyle.js', href: `/${lang}/reference/contribution-guide/` },
59+
{ label: 'Vivliostyle CLI', href: `/${lang}/reference/contributing-cli/` },
60+
{ label: 'VFM', href: `/${lang}/reference/contributing-vfm/` },
61+
{ label: 'Vivliostyle Themes', href: `/${lang}/reference/contributing-themes/` },
62+
],
63+
},
64+
faq: {
65+
label: navLabels.faq,
66+
href: isJa ? 'https://vivliostyle.org/ja/faq/' : 'https://vivliostyle.org/en/faq/',
67+
external: true,
68+
},
69+
};
2070
---
2171
<!DOCTYPE html>
2272
<html lang={lang}>
@@ -79,20 +129,56 @@ const currentPath = Astro.url.pathname;
79129
<a href={`/${lang}/`} class="logo">
80130
<img src="/vivliostyle-docs.svg" alt="Vivliostyle Docs" class="logo-image" />
81131
</a>
82-
<nav class="header-nav">
83-
<a href={`/${lang}/viewer/`}>Viewer</a>
84-
<a href={`/${lang}/cli/`}>CLI</a>
85-
<a href={`/${lang}/vfm/`}>VFM</a>
86-
<a href={`/${lang}/themes/`}>Themes</a>
87-
<a href={`/${lang}/reference/`}>Reference</a>
88-
<a href="https://github.com/vivliostyle" class="github-link" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
89-
<svg viewBox="0 0 16 16" width="24" height="24" fill="currentColor">
90-
<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"></path>
91-
</svg>
132+
<nav class="header-nav" aria-label={isJa ? 'グローバルナビゲーション' : 'Global navigation'}>
133+
<details class="nav-accordion">
134+
<summary>{navLabels.product}</summary>
135+
<div class="nav-panel">
136+
{navLinks.products.map((item) => (
137+
<a href={item.href}>{item.label}</a>
138+
))}
139+
</div>
140+
</details>
141+
<a
142+
href={navLinks.tutorial.href}
143+
target={navLinks.tutorial.external ? '_blank' : undefined}
144+
rel={navLinks.tutorial.external ? 'noopener noreferrer' : undefined}
145+
>
146+
{navLinks.tutorial.label}
92147
</a>
93-
<a href={lang === 'ja' ? 'https://vivliostyle.org/ja/' : 'https://vivliostyle.org/'} class="vivliostyle-link" aria-label="Vivliostyle" target="_blank" rel="noopener noreferrer">
94-
<img src="/vivliostyle-logo72.png" alt="Vivliostyle" class="vivliostyle-icon" />
148+
<details class="nav-accordion">
149+
<summary>{navLabels.reference}</summary>
150+
<div class="nav-panel">
151+
<div class="nav-group">
152+
<span class="nav-group-title">{navLabels.docs}</span>
153+
{navLinks.reference.docs.map((item) => (
154+
<a href={item.href}>{item.label}</a>
155+
))}
156+
</div>
157+
<div class="nav-group">
158+
<span class="nav-group-title">{navLabels.contribution}</span>
159+
{navLinks.reference.contribution.map((item) => (
160+
<a href={item.href}>{item.label}</a>
161+
))}
162+
</div>
163+
</div>
164+
</details>
165+
<a
166+
href={navLinks.faq.href}
167+
target={navLinks.faq.external ? '_blank' : undefined}
168+
rel={navLinks.faq.external ? 'noopener noreferrer' : undefined}
169+
>
170+
{navLinks.faq.label}
95171
</a>
172+
<div class="nav-icon-links">
173+
<a href="https://github.com/vivliostyle" class="github-link" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
174+
<svg viewBox="0 0 16 16" width="24" height="24" fill="currentColor">
175+
<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"></path>
176+
</svg>
177+
</a>
178+
<a href={lang === 'ja' ? 'https://vivliostyle.org/ja/' : 'https://vivliostyle.org/'} class="vivliostyle-link" aria-label="Vivliostyle" target="_blank" rel="noopener noreferrer">
179+
<img src="/vivliostyle-logo72.png" alt="Vivliostyle" class="vivliostyle-icon" />
180+
</a>
181+
</div>
96182
</nav>
97183
<div class="header-actions">
98184
<SearchBox lang={lang as 'en' | 'ja'} />
@@ -192,20 +278,105 @@ const currentPath = Astro.url.pathname;
192278

193279
.header-nav {
194280
display: flex;
195-
gap: 1.5rem;
281+
gap: 1rem;
196282
flex: 1;
197283
align-items: center;
284+
min-width: 0;
198285
}
199-
200-
.header-nav a {
286+
287+
.header-nav a,
288+
.header-nav summary {
201289
color: var(--color-text);
202290
text-decoration: none;
203291
font-weight: 500;
292+
font-size: 0.95rem;
204293
}
205-
206-
.header-nav a:hover {
294+
295+
.header-nav summary {
296+
list-style: none;
297+
cursor: pointer;
298+
display: flex;
299+
align-items: center;
300+
gap: 0.35rem;
301+
font-size: 1.1rem;
302+
}
303+
304+
.header-nav summary::-webkit-details-marker {
305+
display: none;
306+
}
307+
308+
.header-nav summary::after {
309+
content: '';
310+
width: 0;
311+
height: 0;
312+
border-left: 4px solid transparent;
313+
border-right: 4px solid transparent;
314+
border-top: 5px solid currentColor;
315+
opacity: 0.6;
316+
transition: transform 0.2s ease;
317+
}
318+
319+
.header-nav a:hover,
320+
.header-nav summary:hover {
207321
color: var(--color-primary);
208322
}
323+
324+
.nav-accordion {
325+
position: relative;
326+
}
327+
328+
.nav-accordion[open] summary::after {
329+
transform: rotate(180deg);
330+
}
331+
332+
.nav-panel {
333+
position: absolute;
334+
top: calc(100% + 0.5rem);
335+
left: 0;
336+
background: var(--color-bg);
337+
border: 1px solid var(--color-border);
338+
border-radius: 8px;
339+
padding: 0.75rem;
340+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
341+
display: none;
342+
min-width: 240px;
343+
z-index: 1200;
344+
}
345+
346+
.nav-accordion[open] .nav-panel {
347+
display: grid;
348+
gap: 0.75rem;
349+
}
350+
351+
.nav-group {
352+
display: grid;
353+
gap: 0.4rem;
354+
}
355+
356+
.nav-group-title {
357+
font-size: 1rem;
358+
font-weight: 600;
359+
color: var(--color-text-muted);
360+
letter-spacing: 0.02em;
361+
}
362+
363+
.nav-panel a {
364+
font-weight: 500;
365+
font-size: 0.9rem;
366+
color: var(--color-text);
367+
padding-left: 1rem;
368+
}
369+
370+
.nav-panel a:hover {
371+
color: var(--color-primary);
372+
}
373+
374+
.nav-icon-links {
375+
margin-left: auto;
376+
display: flex;
377+
align-items: center;
378+
gap: 0.5rem;
379+
}
209380

210381
.header-nav .github-link,
211382
.header-nav .vivliostyle-link {
@@ -486,6 +657,18 @@ const currentPath = Astro.url.pathname;
486657
gap: 0.5rem;
487658
font-size: 0.85rem;
488659
}
660+
661+
.header-nav a {
662+
font-size: 0.9rem;
663+
}
664+
665+
.header-nav summary {
666+
font-size: 1rem;
667+
}
668+
669+
.nav-panel a {
670+
font-size: 0.85rem;
671+
}
489672

490673
.header-content {
491674
gap: 0.5rem;

0 commit comments

Comments
 (0)