Skip to content

Commit 9e3b44c

Browse files
xnzonexnzone
committed
update book menu
1 parent ee374ef commit 9e3b44c

File tree

12 files changed

+398
-13
lines changed

12 files changed

+398
-13
lines changed

‎assets/scss/bookmenu.scss‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
$menu-width: 16rem !default;
2+
$font-size-base: 16px !default;
3+
$font-size-14: 0.875rem !default;
4+
$padding-16: 1rem !default;
5+
$padding-8: 0.5rem !default;
6+
$container-max-width: 118rem !default;
7+
$body-min-width: 20rem !default;
8+
$padding-4: 0.25rem !default;
9+
10+
11+
$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + 16rem;
12+
13+
@mixin fixed {
14+
position: fixed;
15+
top: 0;
16+
bottom: 0;
17+
overflow-x: hidden;
18+
overflow-y: auto;
19+
}
20+
21+
@mixin outline {
22+
outline-style: auto;
23+
outline-color: currentColor;
24+
outline-color: -webkit-focus-ring-color;
25+
}
26+
27+
input.toggle {
28+
height: 0;
29+
width: 0;
30+
overflow: hidden;
31+
opacity: 0;
32+
position: absolute;
33+
}
34+
35+
aside .book-nav ul {
36+
padding: 0;
37+
margin: 0;
38+
list-style: none;
39+
40+
li {
41+
margin: 1em 0;
42+
position: relative;
43+
}
44+
45+
a {
46+
display: block;
47+
}
48+
49+
a:hover {
50+
opacity: 0.5;
51+
}
52+
53+
ul {
54+
padding-inline-start: $padding-16;
55+
}
56+
}
57+
58+
59+
.flex {
60+
display: flex;
61+
}
62+
63+
.book-container {
64+
max-width: $container-max-width;
65+
margin: 0 auto;
66+
}
67+
68+
.book-menu {
69+
flex: 0 0 $menu-width;
70+
font-size: $font-size-base;
71+
72+
.book-menu-content {
73+
width: $menu-width;
74+
padding: $padding-16;
75+
background: white;
76+
margin-top: 100px;
77+
78+
@include fixed;
79+
}
80+
81+
a,
82+
label {
83+
color: inherit;
84+
cursor: pointer;
85+
word-wrap: break-word;
86+
}
87+
88+
a.active {
89+
color: var(--color-link);
90+
}
91+
92+
input.toggle + label + ul {
93+
display: none;
94+
}
95+
96+
input.toggle:checked + label + ul {
97+
display: block;
98+
}
99+
100+
input.toggle + label::after {
101+
content: ">";
102+
}
103+
104+
input.toggle:checked + label::after {
105+
content: "^";
106+
}
107+
}
108+
109+
// for RTL support
110+
body[dir="rtl"] .book-menu {
111+
input.toggle + label::after {
112+
content: "<";
113+
}
114+
115+
input.toggle:checked + label::after {
116+
content: "^";
117+
}
118+
}
119+
120+
.book-section-flat {
121+
margin: $padding-16 * 2 0;
122+
123+
> a,
124+
> span,
125+
> label {
126+
font-weight: bolder;
127+
}
128+
129+
> ul {
130+
padding-inline-start: 0;
131+
}
132+
}
133+
134+
// Responsive styles
135+
.book-menu-content,
136+
.book-page,
137+
.book-menu-header aside {
138+
transition: 0.2s ease-in-out;
139+
transition-property: transform, margin, opacity, visibility;
140+
will-change: transform, margin, opacity;
141+
}
142+
143+
@media screen and (max-width: $mobile-breakpoint) {
144+
#menu-control,
145+
#toc-control {
146+
display: inline;
147+
}
148+
149+
.book-menu {
150+
visibility: hidden;
151+
margin-inline-start: -$menu-width;
152+
font-size: $font-size-base;
153+
z-index: 1;
154+
}
155+
156+
.book-toc {
157+
display: none;
158+
}
159+
160+
.book-menu-header {
161+
display: block!important;
162+
margin-top: -105px;
163+
}
164+
165+
#menu-control:focus ~ main label[for="menu-control"] {
166+
@include outline;
167+
}
168+
169+
#menu-control:checked ~ main {
170+
.book-menu {
171+
visibility: initial;
172+
}
173+
174+
.book-menu .book-menu-content {
175+
transform: translateX($menu-width);
176+
box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
177+
}
178+
179+
.book-page {
180+
opacity: 0.25;
181+
}
182+
183+
.book-menu-overlay {
184+
display: block;
185+
position: absolute;
186+
top: 0;
187+
bottom: 0;
188+
left: 0;
189+
right: 0;
190+
}
191+
}
192+
193+
#toc-control:focus ~ main label[for="toc-control"] {
194+
@include outline;
195+
}
196+
197+
#toc-control:checked ~ main {
198+
.book-menu-header aside {
199+
display: block;
200+
}
201+
}
202+
203+
// for RTL support
204+
body[dir="rtl"] #menu-control:checked ~ main {
205+
.book-menu .book-menu-content {
206+
transform: translateX(-$menu-width);
207+
}
208+
}
209+
}
210+
211+
// Extra space for big screens
212+
@media screen and (min-width: 80rem) {
213+
.book-page,
214+
.book-menu .book-menu-content,
215+
.book-toc .book-toc-content {
216+
padding: $padding-16 * 2 $padding-16;
217+
}
218+
}
219+
220+
.hidden {
221+
display: none;
222+
}
223+
224+
.align-center {
225+
align-items: center;
226+
}
227+
228+
.justify-between {
229+
justify-content: space-between;
230+
}
231+
232+
.book-icon {
233+
filter: var(--icon-filter);
234+
}
235+
236+
.book-page {
237+
min-width: $body-min-width;
238+
flex-grow: 1;
239+
padding: $padding-16;
240+
}
241+
242+
.book-menu-header {
243+
display: none;
244+
margin-bottom: $padding-16;
245+
246+
label {
247+
line-height: 0;
248+
}
249+
250+
img.book-icon {
251+
height: 1.5em;
252+
width: 1.5em;
253+
}
254+
}
255+
256+
257+
$startLevel: 1;
258+
$endLevel: 6;
259+
260+
.book-page {
261+
@for $currentLevel from $startLevel through $endLevel {
262+
> h#{$currentLevel} {
263+
counter-increment: h#{$currentLevel};
264+
counter-reset: h#{$currentLevel + 1};
265+
266+
$content: "";
267+
@for $n from $startLevel through $currentLevel {
268+
$content: $content + 'counter(h#{$n})"."';
269+
}
270+
271+
&::before {
272+
content: unquote($content) " ";
273+
}
274+
}
275+
}
276+
}
277+
278+
@media print {
279+
.book-menu,
280+
.book-footer,
281+
.book-toc {
282+
display: none;
283+
}
284+
285+
.book-menu-header,
286+
.book-menu-header aside {
287+
display: block;
288+
}
289+
290+
main {
291+
// Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897
292+
display: block !important;
293+
}
294+
}
295+
296+
// Future
297+
.book-menu .book-nav {
298+
scrollbar-color: transparent var(--gray-500);
299+
}
300+
301+
.book-toc .book-nav ul {
302+
li {
303+
counter-increment: item;
304+
305+
&:first-child {
306+
counter-reset: item;
307+
}
308+
309+
&:before {
310+
content: counters(item, ".") ". ";
311+
float: left;
312+
margin-inline-end: $padding-4;
313+
}
314+
}
315+
}

‎assets/scss/post.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.post {
22
max-width: 768px;
3-
padding: 1.6rem 3.2rem;
3+
// padding: 1.6rem 3.2rem;
44
margin: 0 auto;
55

66
&__header {

‎assets/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@import "pagination.scss";
1010
@import "search.scss";
1111
@import "tags.scss";
12+
@import "bookmenu.scss";
1213

1314
html {
1415
font-size: 62.50%;

‎layouts/404.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
{{ define "main" }}
2+
<div class="container">
3+
<main class="main">
4+
{{ template "body" . }}
5+
<!-- The part of the page that begins to differ between templates -->
6+
</main>
7+
8+
{{- partialCached "footer.html" . }}
9+
</div>
10+
{{ end }}
11+
12+
{{ define "body" }}
213
<section class="not-found">
314
<h3>404</h3>
415
<span>page not found</span>

‎layouts/_default/baseof.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,8 @@
66
<body>
77
<!-- Code that all your templates share, like a header -->
88
{{- partial "header.html" . -}}
9-
<div class="container">
10-
<main class="main">
119
{{ block "main" . }}
1210
<!-- The part of the page that begins to differ between templates -->
1311
{{ end }}
14-
</main>
15-
16-
{{- partialCached "footer.html" . }}
17-
</div>
1812
</body>
1913
</html>

‎layouts/_default/list.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
{{- define "main" }}
1+
{{ define "main" }}
2+
<div class="container">
3+
<main class="main">
4+
{{ template "body" . }}
5+
<!-- The part of the page that begins to differ between templates -->
6+
</main>
7+
8+
{{- partialCached "footer.html" . }}
9+
</div>
10+
{{ end }}
11+
12+
{{- define "body" }}
213
<section class="tags">
314
<div class="tags__header">
415
<h2 class="tags__title">{{ .Title }}</h2>

‎layouts/_default/search.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
{{- define "main" }}
1+
{{ define "main" }}
2+
<div class="container">
3+
<main class="main">
4+
{{ template "body" . }}
5+
<!-- The part of the page that begins to differ between templates -->
6+
</main>
7+
8+
{{- partialCached "footer.html" . }}
9+
</div>
10+
{{ end }}
11+
12+
{{- define "body" }}
213
<div class="search-container">
314
<form class="search">
415
<label class="search__label">

0 commit comments

Comments
 (0)