1  html {
  2    font-size: $font-size-base;
  3    scroll-behavior: smooth;
  4    touch-action: manipulation;
  5    scrollbar-gutter: stable;
  6  }
  7  
  8  body {
  9    min-width: $body-min-width;
 10    color: var(--body-font-color);
 11    background: var(--body-background);
 12  
 13    // letter-spacing: 0.33px;
 14    font-weight: $body-font-weight;
 15    text-rendering: optimizeLegibility;
 16    -webkit-font-smoothing: antialiased;
 17    -moz-osx-font-smoothing: grayscale;
 18  
 19    box-sizing: border-box;
 20    * {
 21      box-sizing: inherit;
 22    }
 23  }
 24  
 25  h1,
 26  h2,
 27  h3,
 28  h4,
 29  h5 {
 30    font-weight: $body-font-weight;
 31  }
 32  
 33  a {
 34    text-decoration: none;
 35    color: var(--color-link);
 36  }
 37  
 38  img {
 39    vertical-align: baseline;
 40  }
 41  
 42  :focus {
 43    @include outline;
 44  }
 45  
 46  aside nav ul {
 47    padding: 0;
 48    margin: 0;
 49    list-style: none;
 50  
 51    li {
 52      margin: 1em 0;
 53      position: relative;
 54    }
 55  
 56    a {
 57      display: block;
 58    }
 59  
 60    a:hover {
 61      opacity: 0.5;
 62    }
 63  
 64    ul {
 65      padding-inline-start: $padding-16;
 66    }
 67  }
 68  
 69  ul.pagination {
 70    display: flex;
 71    justify-content: center;
 72    list-style-type: none;
 73    padding-inline-start: 0px;
 74  
 75    .page-item a {
 76      padding: $padding-16;
 77    }
 78  }
 79  
 80  .container {
 81    max-width: $container-max-width;
 82    margin: 0 auto;
 83  }
 84  
 85  .book-icon {
 86    filter: var(--icon-filter);
 87  }
 88  
 89  a .book-icon {
 90    height: 1em;
 91    width: 1em;
 92    margin-inline-end: .5em;
 93  }
 94  
 95  .book-brand {
 96    margin-top: 0;
 97    margin-bottom: $padding-16;
 98  
 99    img {
100      height: 1.5em;
101      width: 1.5em;
102      margin-inline-end: $padding-8;
103    }
104  }
105  
106  .book-menu {
107    flex: 0 0 $menu-width;
108    font-size: $font-size-14;
109  
110    .book-menu-content {
111      width: $menu-width;
112      padding: $padding-16;
113      background: var(--body-background);
114  
115      @include fixed;
116    }
117  
118    a,
119    label {
120      color: inherit;
121      cursor: pointer;
122      word-wrap: break-word;
123    }
124  
125    a.active {
126      color: var(--color-link);
127    }
128  
129    input.toggle + label + ul {
130      display: none;
131    }
132  
133    input.toggle:checked + label + ul {
134      display: block;
135    }
136  
137    input.toggle + label::after {
138      content: "▸";
139    }
140  
141    input.toggle:checked + label::after {
142      content: "▾";
143    }
144  }
145  
146  // for RTL support
147  body[dir="rtl"] .book-menu {
148    input.toggle + label::after {
149      content: "◂";
150    }
151  
152    input.toggle:checked + label::after {
153      content: "▾";
154    }
155  }
156  
157  .book-section-flat {
158    margin: $padding-16 * 2 0;
159  
160    > a,
161    > span,
162    > label {
163      font-weight: bolder;
164    }
165  
166    > ul {
167      padding-inline-start: 0;
168    }
169  }
170  
171  .book-page {
172    min-width: $body-min-width;
173    flex-grow: 1;
174    padding: $padding-16;
175  }
176  
177  .book-post {
178    margin-bottom: $padding-16 * 2;
179  
180    .book-post-date img {
181      height: 1em;
182      width: 1em;
183      margin-inline-end: .5em;
184    }
185  
186    .book-post-content > :first-child {
187      margin-top: $padding-16;
188    }
189  }
190  
191  .book-header {
192    display: none;
193    margin-bottom: $padding-16;
194  
195    label {
196      line-height: 0;
197    }
198  
199    h3 {
200      overflow: hidden;
201      text-overflow: ellipsis;
202      margin: 0 $padding-16;
203    }
204  
205    img.book-icon {
206      height: 1.5em;
207      width: 1.5em;
208    }
209  }
210  
211  .book-search {
212    position: relative;
213    margin: $padding-16 0;
214    border-bottom: 1px solid transparent;
215  
216    input {
217      width: 100%;
218      padding: $padding-8;
219  
220      border: 0;
221      border-radius: $border-radius;
222  
223      background: var(--gray-100);
224      color: var(--body-font-color);
225  
226      &:required + .book-search-spinner {
227        display: block;
228      }
229    }
230  
231    .book-search-spinner {
232      position: absolute;
233      top: 0;
234      margin: $padding-8;
235      margin-inline-start: calc(100% - #{$padding-16 + $padding-8});
236  
237      width: $padding-16;
238      height: $padding-16;
239  
240      border: $padding-1 solid transparent;
241      border-top-color: var(--body-font-color);
242      border-radius: 50%;
243  
244      @include spin(1s);
245    }
246  
247    small {
248      opacity: 0.5;
249    }
250  }
251  
252  .book-toc {
253    flex: 0 0 $toc-width;
254    font-size: $font-size-12;
255  
256    .book-toc-content {
257      width: $toc-width;
258      padding: $padding-16;
259  
260      @include fixed;
261    }
262  
263    img {
264      height: 1em;
265      width: 1em;
266    }
267  
268    nav > ul > li:first-child {
269      margin-top: 0;
270    }
271  }
272  
273  .book-footer {
274    padding-top: $padding-16;
275    font-size: $font-size-14;
276  }
277  
278  .book-comments {
279    margin-top: $padding-16;
280  }
281  
282  .book-languages {
283    margin-block-end: $padding-16 * 2;
284  
285    ul {
286      padding-inline-start: 1.5em;
287    }
288  }
289  
290  // Responsive styles
291  .book-menu-content,
292  .book-toc-content,
293  .book-page,
294  .book-header aside,
295  .markdown {
296    transition: 0.2s ease-in-out;
297    transition-property: transform, margin, opacity, visibility;
298    will-change: transform, margin, opacity;
299  }
300  
301  @media screen and (max-width: $mobile-breakpoint) {
302    #menu-control,
303    #toc-control {
304      display: inline;
305    }
306  
307    .book-menu {
308      visibility: hidden;
309      margin-inline-start: -$menu-width;
310      z-index: 1;
311    }
312  
313    .book-toc {
314      display: none;
315    }
316  
317    .book-header {
318      display: block;
319    }
320  
321    #menu-control:focus ~ main label[for="menu-control"] {
322      @include outline;
323    }
324  
325    #menu-control:checked ~ main {
326      .book-menu {
327        visibility: initial;
328      }
329  
330      .book-menu .book-menu-content {
331        transform: translateX($menu-width);
332        box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
333      }
334  
335      .book-page {
336        opacity: 0.25;
337      }
338  
339      .book-menu-overlay {
340        display: block;
341        position: absolute;
342        top: 0;
343        bottom: 0;
344        left: 0;
345        right: 0;
346      }
347    }
348  
349    #toc-control:focus ~ main label[for="toc-control"] {
350      @include outline;
351    }
352  
353    #toc-control:checked ~ main {
354      .book-header aside {
355        display: block;
356      }
357    }
358  
359    // for RTL support
360    body[dir="rtl"] #menu-control:checked ~ main {
361      .book-menu .book-menu-content {
362        transform: translateX(-$menu-width);
363      }
364    }
365  }
366  
367  // Extra space for big screens
368  @media screen and (min-width: $container-max-width) {
369    .book-page,
370    .book-menu .book-menu-content,
371    .book-toc .book-toc-content {
372      padding: $padding-16 * 2 $padding-16;
373    }
374  }