Skip to content

Commit a23d0db

Browse files
lemonadernlemonadern
committed
fix(toc): move mobile toc outside article
1 parent ea7410b commit a23d0db

3 files changed

Lines changed: 77 additions & 69 deletions

File tree

‎templates/_head_extend.html‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -70,21 +70,25 @@
7070
}
7171

7272
body.post aside nav a,
73-
article.prose .mobile-toc a {
73+
.post-body .mobile-toc a {
7474
transition: color 120ms ease;
7575
}
7676

7777
body.post aside nav a.active,
7878
body.post aside nav a.in-view,
79-
article.prose .mobile-toc a.active,
80-
article.prose .mobile-toc a.in-view {
79+
.post-body .mobile-toc a.active,
80+
.post-body .mobile-toc a.in-view {
8181
color: var(--text-color);
8282
}
8383

8484
.mobile-toc {
8585
display: none;
8686
}
8787

88+
body.post article.post-header-article {
89+
padding-bottom: 0;
90+
}
91+
8892
.post-pagination {
8993
display: grid;
9094
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -216,20 +220,20 @@
216220
display: none;
217221
}
218222

219-
article.prose .mobile-toc {
223+
.post-body .mobile-toc {
220224
display: block;
221-
margin: 0 15px 1.75rem;
225+
margin: 0 15px 2.5rem;
222226
border: 1px solid color-mix(in srgb, var(--text-decoration-color) 70%, transparent);
223227
border-radius: 12px;
224228
background: color-mix(in srgb, var(--primary-color) 1.5%, var(--bg-color));
225229
overflow: hidden;
226230
box-shadow: none;
227231
}
228232

229-
article.prose .mobile-toc summary {
233+
.post-body .mobile-toc summary {
230234
cursor: pointer;
231235
list-style: none;
232-
padding: 0.28rem 0.5rem;
236+
padding: 0.6rem 0.85rem;
233237
color: var(--text-pale-color);
234238
font-size: 0.88rem;
235239
font-weight: 500;
@@ -241,52 +245,52 @@
241245
background: transparent;
242246
}
243247

244-
article.prose .mobile-toc summary::-webkit-details-marker {
248+
.post-body .mobile-toc summary::-webkit-details-marker {
245249
display: none;
246250
}
247251

248-
article.prose .mobile-toc summary::after {
252+
.post-body .mobile-toc summary::after {
249253
content: "+";
250254
color: var(--text-pale-color);
251255
font-size: 0.9rem;
252256
line-height: 1;
253257
flex-shrink: 0;
254258
}
255259

256-
article.prose .mobile-toc[open] summary::after {
260+
.post-body .mobile-toc[open] summary::after {
257261
content: "-";
258262
}
259263

260-
article.prose .mobile-toc nav {
264+
.post-body .mobile-toc nav {
261265
padding: 0 0.5rem 0.34rem;
262266
color: var(--text-pale-color);
263267
}
264268

265-
article.prose .mobile-toc ul {
269+
.post-body .mobile-toc ul {
266270
margin: 0;
267-
padding-left: 1.1rem;
271+
padding: 0 0 0.4rem 1.5rem;
268272
}
269273

270-
article.prose .mobile-toc li + li {
274+
.post-body .mobile-toc li + li {
271275
margin-top: 0.45rem;
272276
}
273277

274-
article.prose .mobile-toc ul ul {
278+
.post-body .mobile-toc ul ul {
275279
margin-top: 0.45rem;
276280
}
277281

278-
article.prose .mobile-toc a {
282+
.post-body .mobile-toc a {
279283
color: var(--text-pale-color);
280284
text-decoration: none;
281285
font-size: 0.88rem;
282286
}
283287

284-
article.prose .mobile-toc a:hover {
288+
.post-body .mobile-toc a:hover {
285289
color: var(--primary-color);
286290
}
287291

288-
article.prose .mobile-toc a.active,
289-
article.prose .mobile-toc a.in-view {
292+
.post-body .mobile-toc a.active,
293+
.post-body .mobile-toc a.in-view {
290294
color: var(--text-color);
291295
}
292296
}

‎templates/nightly-post.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,15 @@
8484
<main>
8585
{{ macros::back_link(path = get_url(path=current_section.path)) }}
8686

87-
<div>
87+
<div class="post-body">
8888
{% if page.extra.copy is defined %}{% set allow_copy = page.extra.copy %}{% else %}{% set allow_copy = current_section.extra.copy %}{% endif %}
8989
{% if page.extra.heading_hashes is defined %}{% set show_heading_hashes = page.extra.heading_hashes %}{% else %}{% set show_heading_hashes = false %}{% endif %}
9090
{% if allow_copy %}
9191
{% set copy_icon = load_data(path="icon/copy.svg") %}
9292
{% set check_icon = load_data(path="icon/check.svg") %}
9393
<div id="copy-cfg" style="display: none;" data-copy-icon="{{ copy_icon }}" data-check-icon="{{ check_icon }}"></div>
9494
{% endif %}
95-
<article class="prose{% if show_heading_hashes %} show-heading-hashes{% endif %}">
95+
<article class="prose post-header-article">
9696
<h1>{{ page.title }}</h1>
9797
{% if page.description %}
9898
<p class="nightly-desc">{{ page.description }}</p>
@@ -108,31 +108,33 @@ <h1>{{ page.title }}</h1>
108108
</div>
109109
{% endif %}
110110
</div>
111+
</article>
111112

112-
{% if show_toc and page.toc %}
113-
<details class="mobile-toc">
114-
<summary>Table of Contents</summary>
115-
<nav aria-label="Table of contents">
116-
<ul>
117-
{% for h2 in page.toc %}
118-
<li>
119-
<a class="h2" href="#{{ h2.id | safe }}">{{ h2.title }}</a>
120-
{% if h2.children %}
121-
<ul>
122-
{% for h3 in h2.children %}
123-
<li>
124-
<a class="h3" href="#{{ h3.id | safe }}">{{ h3.title }}</a>
125-
</li>
126-
{% endfor %}
127-
</ul>
128-
{% endif %}
129-
</li>
130-
{% endfor %}
131-
</ul>
132-
</nav>
133-
</details>
134-
{% endif %}
113+
{% if show_toc and page.toc %}
114+
<details class="mobile-toc">
115+
<summary>Table of Contents</summary>
116+
<nav aria-label="Table of contents">
117+
<ul>
118+
{% for h2 in page.toc %}
119+
<li>
120+
<a class="h2" href="#{{ h2.id | safe }}">{{ h2.title }}</a>
121+
{% if h2.children %}
122+
<ul>
123+
{% for h3 in h2.children %}
124+
<li>
125+
<a class="h3" href="#{{ h3.id | safe }}">{{ h3.title }}</a>
126+
</li>
127+
{% endfor %}
128+
</ul>
129+
{% endif %}
130+
</li>
131+
{% endfor %}
132+
</ul>
133+
</nav>
134+
</details>
135+
{% endif %}
135136

137+
<article class="prose{% if show_heading_hashes %} show-heading-hashes{% endif %}">
136138
{% if page.extra.outdate_alert is defined %}
137139
{% set show_outdate_alert = page.extra.outdate_alert %}
138140
{% elif current_section.extra.outdate_alert is defined %}

‎templates/post.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,15 @@
8484
<main>
8585
{{ macros::back_link(path = get_url(path=current_section.path)) }}
8686

87-
<div>
87+
<div class="post-body">
8888
{% if page.extra.copy is defined %}{% set allow_copy = page.extra.copy %}{% else %}{% set allow_copy = current_section.extra.copy %}{% endif %}
8989
{% if page.extra.heading_hashes is defined %}{% set show_heading_hashes = page.extra.heading_hashes %}{% else %}{% set show_heading_hashes = false %}{% endif %}
9090
{% if allow_copy %}
9191
{% set copy_icon = load_data(path="icon/copy.svg") %}
9292
{% set check_icon = load_data(path="icon/check.svg") %}
9393
<div id="copy-cfg" style="display: none;" data-copy-icon="{{ copy_icon }}" data-check-icon="{{ check_icon }}"></div>
9494
{% endif %}
95-
<article class="prose{% if show_heading_hashes %} show-heading-hashes{% endif %}">
95+
<article class="prose post-header-article">
9696
<h1>{{ page.title }}</h1>
9797
<div id="post-info">
9898
<div id="date">
@@ -115,31 +115,33 @@ <h1>{{ page.title }}</h1>
115115
</div>
116116
{% endif %}
117117
</div>
118+
</article>
118119

119-
{% if show_toc and page.toc %}
120-
<details class="mobile-toc">
121-
<summary>Table of Contents</summary>
122-
<nav aria-label="Table of contents">
123-
<ul>
124-
{% for h2 in page.toc %}
125-
<li>
126-
<a class="h2" href="#{{ h2.id | safe }}">{{ h2.title }}</a>
127-
{% if h2.children %}
128-
<ul>
129-
{% for h3 in h2.children %}
130-
<li>
131-
<a class="h3" href="#{{ h3.id | safe }}">{{ h3.title }}</a>
132-
</li>
133-
{% endfor %}
134-
</ul>
135-
{% endif %}
136-
</li>
137-
{% endfor %}
138-
</ul>
139-
</nav>
140-
</details>
141-
{% endif %}
120+
{% if show_toc and page.toc %}
121+
<details class="mobile-toc">
122+
<summary>Table of Contents</summary>
123+
<nav aria-label="Table of contents">
124+
<ul>
125+
{% for h2 in page.toc %}
126+
<li>
127+
<a class="h2" href="#{{ h2.id | safe }}">{{ h2.title }}</a>
128+
{% if h2.children %}
129+
<ul>
130+
{% for h3 in h2.children %}
131+
<li>
132+
<a class="h3" href="#{{ h3.id | safe }}">{{ h3.title }}</a>
133+
</li>
134+
{% endfor %}
135+
</ul>
136+
{% endif %}
137+
</li>
138+
{% endfor %}
139+
</ul>
140+
</nav>
141+
</details>
142+
{% endif %}
142143

144+
<article class="prose{% if show_heading_hashes %} show-heading-hashes{% endif %}">
143145
{% if page.extra.outdate_alert is defined %}
144146
{% set show_outdate_alert = page.extra.outdate_alert %}
145147
{% elif current_section.extra.outdate_alert is defined %}

0 commit comments

Comments
 (0)