Skip to content

Commit 032143e

Browse files
lepturelepture
committed
fix: design nav links
1 parent a1a9016 commit 032143e

9 files changed

Lines changed: 54 additions & 224 deletions

File tree

‎src/css/base.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,3 @@ iconify-icon {
2020
width: 1em;
2121
height: 1em;
2222
}
23-
24-
.container {
25-
max-width: 860px;
26-
margin: 0 auto;
27-
padding: 0 1.5rem;
28-
box-sizing: border-box;
29-
}

‎src/css/layout/components/docsearch.css‎

Lines changed: 7 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,11 @@
1-
/* fix style for algolia docsearch */
2-
html.light,
3-
html.dark {
4-
--docsearch-background-color: var(--background-color);
5-
--docsearch-icon-color: var(--gray-11);
6-
--docsearch-secondary-text-color: var(--gray-11);
7-
--docsearch-modal-background: var(--background-color);
8-
9-
--docsearch-primary-color: var(--accent-9);
10-
--docsearch-soft-primary-color: var(--accent-a2);
11-
--docsearch-subtle-color: var(--gray-4);
12-
--docsearch-text-color: var(--text-color);
13-
--docsearch-key-background: var(--gray-1);
14-
15-
--docsearch-searchbox-background: var(--gray-3);
16-
--docsearch-searchbox-focus-background: var(--background-color);
17-
--docsearch-muted-color: var(--gray-10);
18-
--docsearch-focus-color: var(--accent-a8);
19-
--docsearch-highlight-color: var(--accent-a11);
20-
--docsearch-hit-color: var(--text-color);
21-
--docsearch-hit-background: var(--gray-a2);
22-
--docsearch-hit-highlight-color: var(--accent-a3);
23-
--docsearch-hit-shadow: inset 0 0 1px 0 var(--gray-a11);
24-
--docsearch-container-background: var(--gray-a5);
25-
}
26-
html.light {
27-
--docsearch-footer-background: var(--gray-3);
28-
}
29-
html.dark {
30-
--docsearch-footer-background: var(--gray-4);
31-
--docsearch-modal-shadow: inset 1px 1px 0 0 #373737,0 3px 8px 0 #141414;
1+
.searchbox .DocSearch-Button-Keys,
2+
.searchbox .DocSearch-Button-Placeholder {
3+
display: none;
324
}
335

34-
.js-search .DocSearch-Button {
35-
margin: 0;
6+
.searchbox .DocSearch-Button {
7+
width: 32px;
368
height: 32px;
37-
width: auto;
38-
box-sizing: border-box;
39-
}
40-
41-
.js-search .DocSearch-Search-Icon {
42-
width: 1rem;
43-
height: 1rem;
44-
}
45-
46-
@media (max-width: 767px) {
47-
html.light,
48-
html.dark {
49-
--docsearch-searchbox-background: transparent;
50-
}
9+
padding: 0;
10+
justify-content: center;
5111
}

‎src/css/layout/components/nav-links.css‎

Lines changed: 16 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
ul.nav-links {
2-
list-style: none;
3-
margin: 0;
4-
padding: 0;
5-
}
6-
71
.nav-link > button {
82
display: inline-flex;
93
align-items: center;
@@ -44,166 +38,27 @@ ul.nav-links {
4438
cursor: pointer;
4539
}
4640

47-
.nav-link > button > svg,
48-
.nav-link > a > svg {
49-
transition: transform 0.2s ease;
50-
}
51-
52-
.nav-link:hover > [aria-controls] > svg,
53-
.nav-link > [aria-expanded="true"] > svg {
54-
transform: rotate(180deg);
55-
}
56-
57-
.nav-sub-links {
58-
list-style: none;
59-
padding: 0;
60-
margin: 0;
61-
}
62-
63-
.nav-sub-link > a {
64-
display: flex;
65-
align-items: center;
66-
white-space: normal;
67-
gap: 0.825rem;
68-
text-decoration: none;
69-
color: var(--heading-color);
70-
}
71-
72-
.nav-sub-links {
73-
display: flex;
74-
flex-wrap: wrap;
75-
flex-direction: column;
76-
gap: 1rem;
77-
transition: height 0.2s ease;
78-
padding-left: 1.8rem;
79-
padding-right: 1.8rem;
80-
}
81-
82-
.nav-sub-links[aria-hidden="true"] {
83-
height: 0;
84-
visibility: hidden;
85-
}
86-
87-
.nav-sub-links[aria-hidden="false"] {
88-
height: auto;
89-
visibility: visible;
90-
padding-top: 1rem;
91-
padding-bottom: 1rem;
92-
}
93-
94-
.nav-sub-links[data-grid="true"] {
95-
flex-direction: row;
96-
}
97-
98-
.nav-sub-links[data-grid="true"] .nav-sub-link {
99-
flex-basis: calc(50% - 2rem);
100-
min-width: 240px;
101-
max-width: 320px;
102-
}
103-
104-
.nav-sub-link-icon {
105-
display: flex;
106-
align-items: center;
107-
justify-content: center;
41+
button[aria-controls="nav-links"] {
10842
width: 32px;
10943
height: 32px;
110-
border: 1px solid var(--gray-a6);
111-
border-radius: 4px;
112-
color: var(--gray-a10);
113-
font-size: 18px;
114-
}
115-
116-
.nav-sub-link > a:hover .nav-sub-link-icon {
117-
background-color: var(--accent-9);
118-
border-color: var(--accent-9);
119-
color: var(--accent-contrast);
120-
}
121-
122-
.nav-sub-link-title {
123-
line-height: 1;
124-
flex-grow: 1;
125-
}
126-
127-
.nav-sub-link-title strong {
128-
font-size: 0.92rem;
129-
font-weight: 600;
130-
}
131-
132-
.nav-sub-link-title span {
133-
display: block;
134-
color: var(--gray-a10);
135-
margin-top: 0.25rem;
136-
font-weight: 400;
137-
font-size: 0.86rem;
138-
}
139-
140-
.nav-sub-link > a:hover span {
141-
color: var(--accent-a9);
142-
}
143-
144-
@media (max-width: 639px) {
145-
.nav-sub-links[data-grid="true"] .nav-sub-link {
146-
flex-basis: 100%;
147-
max-width: none;
148-
}
149-
}
150-
151-
@media (max-width: 767px) {
152-
.nav-link > a,
153-
.nav-link > button {
154-
display: flex;
155-
width: 100%;
156-
align-items: center;
157-
justify-content: space-between;
158-
padding: 0.8rem 1.6rem;
159-
font-weight: 500;
160-
}
161-
.nav-sub-links {
162-
padding-left: 1.8rem;
163-
padding-right: 1.8rem;
164-
}
165-
.nav-link > a:focus,
166-
.nav-link > button:focus {
167-
background: var(--accent-a3);
168-
}
44+
padding: 0;
45+
justify-content: center;
46+
align-items: center;
16947
}
17048

171-
@media (min-width: 768px) {
172-
.nav-links {
173-
display: flex;
174-
align-items: center;
175-
gap: 1rem;
176-
}
177-
.nav-link {
178-
display: inline-flex;
179-
align-items: center;
180-
min-height: 48px;
181-
}
182-
183-
ul.nav-sub-links {
49+
@media (width < 48rem) {
50+
#nav-links[aria-hidden="false"] {
18451
position: absolute;
185-
background-color: var(--background-color);
186-
top: 48px;
187-
border-radius: 6px;
188-
box-shadow:
189-
0 0 0 1px var(--gray-a3),
190-
0 2px 3px -2px var(--gray-a3),
191-
0 3px 12px -4px rgba(0, 0, 0, 0.1),
192-
0 4px 16px -8px rgba(0, 0, 0, 0.1);
52+
top: 65px;
53+
right: 1.5rem;
54+
display: flex;
55+
padding: 1rem;
56+
border-radius: 4px;
57+
background-color: white;
19358
z-index: 9;
194-
max-width: 560px;
195-
min-width: 240px;
196-
}
197-
198-
.nav-link:hover .nav-sub-links,
199-
.nav-sub-links[aria-hidden="false"] {
200-
height: auto;
201-
visibility: visible;
202-
padding-top: 1.6rem;
203-
padding-bottom: 1.6rem;
204-
}
205-
206-
.nav-sub-links > li {
207-
padding: 0.2rem 0;
59+
box-shadow: 0 0 0 1px var(--gray-a3),
60+
0 2px 3px -2px var(--gray-a3),
61+
0 3px 12px -4px rgba(0, 0, 0, 0.1),
62+
0 4px 16px -8px rgba(0, 0, 0, 0.1);
20863
}
20964
}

‎src/css/layout/entry-page.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,10 @@
6464
display: none;
6565
}
6666
}
67+
68+
@media (max-width: 1100px) {
69+
.entry-head {
70+
padding-left: 1.5rem;
71+
padding-right: 1.5rem;
72+
}
73+
}

‎templates/_layouts/components/nav-links.j2‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ul class="nav-links">
1+
<ul class="nav-links hidden flex-col md:flex md:flex-row md:gap-4 md:items-center" id="nav-links">
22
{%- for item in theme_nav_links -%}
33
{%- if item.new_tab -%}
44
<li class="nav-link">

‎templates/_layouts/components/nav-menu.j2‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{% if theme_nav_links %}
2+
<button class="js-menu flex md:hidden" aria-label="Menu" type="button" aria-expanded="false" aria-controls="nav-links">
3+
<iconify-icon icon="lucide:menu" />
4+
</button>
5+
{% endif %}

‎templates/_layouts/site-head.j2‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
<a class="site-head_brand" href="/">
33
{% include "./components/site-logo.j2" %}
44
</a>
5-
<div class="site-head_nav">
5+
<div class="flex items-center gap-4">
66
{% include "./components/nav-links.j2" %}
77
{% include "./components/searchbox.j2" %}
8+
{% include "./components/nav-menu.j2" %}
89
</div>
910
</div>

‎templates/note.j2‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
{% block body %}
3030
{% include "./_layouts/site-head.j2" %}
31-
<article role="main" class="h-entry">
31+
<article role="main" class="h-entry mt-8">
3232
{% if note.audio %}
3333
{% include "./_partials/episode-head.j2" %}
3434
{% else %}

‎templates/page.j2‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
{% block styles %}
2+
<style>:root{ --background-color: {{ theme_background_color|default("#F8F7F6") }} }</style>
3+
<link rel="preconnect" href="https://fonts.googleapis.com">
4+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
26
<link rel="stylesheet" href="{{ _static_url }}/base.css">
7+
<link rel="stylesheet" href="{{ _static_url }}/entry.css">
38
{% endblock %}
49

510
{% block scripts %}
@@ -9,13 +14,17 @@
914

1015
{% block body %}
1116
{% include "./_layouts/site-head.j2" %}
12-
<div class="container">
13-
<article role="main" class="h-entry">
17+
<article role="main" class="h-entry mt-8">
18+
<div class="entry-head">
1419
<h1 class="p-name">{{ page.title }}</h1>
15-
<div class="e-content">
16-
{{ page.content }}
20+
</div>
21+
<div class="entry-box">
22+
<div class="entry-box-inner">
23+
<div class="e-content">
24+
{{ page.content }}
25+
</div>
1726
</div>
18-
</article>
19-
</div>
27+
</div>
28+
</article>
2029
{% include "./_layouts/site-foot.j2" %}
2130
{% endblock %}

0 commit comments

Comments
 (0)