Skip to content

Commit 27f094d

Browse files
committed
Refine docs header layout and shorten nav labels
1 parent aa8ae18 commit 27f094d

5 files changed

Lines changed: 50 additions & 12 deletions

File tree

docs/01-quickstart.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
permalink: /01-quickstart.html
3+
title: Quick Start
34
---
45

56
# 01. FACET v2.1.3 Quick Start Guide

docs/05-examples-guide.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
permalink: /05-examples-guide.html
3+
title: Examples
34
---
45

56
# 05. FACET Examples Guide

docs/06-cli.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
permalink: /06-cli.html
3+
title: CLI
34
---
45

56
# 06. FACET CLI Reference

docs/14-v2.1.3-migration-checklist.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
permalink: /14-v2.1.3-migration-checklist.html
3+
title: Migration
34
---
45

56
# 14. FACET v2.1.3 Migration Checklist

docs/assets/main.scss

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,28 @@ body {
4545
background: transparent;
4646
}
4747

48+
.site-header {
49+
padding-top: 0.75rem;
50+
margin-bottom: 0.65rem;
51+
}
52+
53+
.site-header .wrapper {
54+
display: grid;
55+
gap: 0.65rem;
56+
}
57+
4858
.site-title,
4959
.site-title:visited {
5060
color: var(--ink);
5161
text-decoration: none;
5262
font-weight: 700;
63+
font-size: clamp(1.25rem, 2.2vw, 1.9rem);
64+
line-height: 1.2;
5365
letter-spacing: 0.01em;
5466
}
5567

5668
.site-nav {
57-
float: right;
69+
float: none;
5870
}
5971

6072
.site-nav .nav-trigger {
@@ -68,27 +80,42 @@ body {
6880
.site-nav .trigger {
6981
display: flex;
7082
flex-wrap: wrap;
71-
gap: 0.45rem;
72-
justify-content: flex-end;
73-
margin-top: 0.5rem;
83+
gap: 0.42rem;
84+
align-items: center;
85+
padding: 0.45rem;
86+
border: 1px solid #d2dfea;
87+
border-radius: 14px;
88+
background: linear-gradient(180deg, #f8fcff 0%, #eef5fb 100%);
89+
box-shadow: 0 6px 16px rgba(19, 43, 64, 0.08);
7490
}
7591

7692
.site-nav .page-link,
7793
.site-nav .page-link:visited {
7894
display: inline-block;
79-
padding: 0.42rem 0.72rem;
95+
padding: 0.4rem 0.68rem;
96+
border: 1px solid transparent;
8097
border-radius: 999px;
8198
color: var(--ink-soft);
8299
text-decoration: none;
83-
font-size: 0.92rem;
84-
transition: background-color 0.15s ease, color 0.15s ease;
100+
font-size: 0.86rem;
101+
font-weight: 600;
102+
letter-spacing: 0.01em;
103+
line-height: 1.25;
104+
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
85105
}
86106

87107
.site-nav .page-link:hover {
88-
background: #dff0f3;
108+
border-color: #c3d9e9;
109+
background: #ffffff;
89110
color: var(--brand-strong);
90111
}
91112

113+
.site-nav .page-link[aria-current="page"] {
114+
border-color: #b8d2e7;
115+
background: #ffffff;
116+
color: #12394f;
117+
}
118+
92119
.page-content {
93120
padding-top: 1.4rem;
94121
}
@@ -220,13 +247,20 @@ tr:nth-child(even) td {
220247
}
221248

222249
@media (max-width: 860px) {
223-
.site-nav {
224-
float: none;
225-
margin-top: 0.6rem;
250+
.site-header {
251+
padding-top: 0.55rem;
226252
}
227253

228254
.site-nav .trigger {
229-
justify-content: flex-start;
255+
justify-content: center;
256+
border-radius: 12px;
257+
padding: 0.4rem;
258+
}
259+
260+
.site-nav .page-link,
261+
.site-nav .page-link:visited {
262+
font-size: 0.84rem;
263+
padding: 0.36rem 0.58rem;
230264
}
231265

232266
.page-content .wrapper {

0 commit comments

Comments
 (0)