/
_scaffold.sass
414 lines (346 loc) · 9.35 KB
/
_scaffold.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
// This file contains the styles for the overall layouting of the documentation
// skeleton, including the responsive changes as well as sidebar toggles.
//
// This is implemented as a mobile-last design, which isn't ideal, but it is
// reasonably good-enough and I got pretty tired by the time I'd finished this
// to move the rules around to fix this. Shouldn't take more than 3-4 hours,
// if you know what you're doing tho.
// HACK: Not all browsers account for the scrollbar width in media queries.
// This results in horizontal scrollbars in the breakpoint where we go
// from displaying everything to hiding the ToC. We accomodate for this by
// adding a bit of padding to the TOC drawer, disabling the horizontal
// scrollbar and allowing the scrollbars to cover the padding.
// https://www.456bereastreet.com/archive/201301/media_query_width_and_vertical_scrollbars/
// HACK: Always having the scrollbar visible, prevents certain browsers from
// causing the content to stutter horizontally between taller-than-viewport and
// not-taller-than-viewport pages.
html
overflow-x: hidden
overflow-y: scroll
scroll-behavior: smooth
.sidebar-scroll, .toc-scroll, article[role=main] *
// Override Firefox scrollbar style
scrollbar-width: thin
scrollbar-color: var(--color-foreground-border) transparent
// Override Chrome scrollbar styles
&::-webkit-scrollbar
width: 0.25rem
height: 0.25rem
&::-webkit-scrollbar-thumb
background-color: var(--color-foreground-border)
border-radius: 0.125rem
//
// Overalls
//
html,
body
height: 100%
color: var(--color-foreground-primary)
background: var(--color-background-primary)
article
color: var(--color-content-foreground)
background: var(--color-content-background)
.page
display: flex
// fill the viewport for pages with little content.
min-height: 100%
.mobile-header
width: 100%
height: var(--header-height)
background-color: var(--color-header-background)
color: var(--color-header-text)
border-bottom: 1px solid var(--color-header-border)
// Looks like sub-script/super-script have this, and we need this to
// be "on top" of those.
z-index: 10
// We don't show the header on large screens.
display: none
// Add shadow when scrolled
&.scrolled
border-bottom: none
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2)
.header-center
a
color: var(--color-header-text)
text-decoration: none
.main
display: flex
flex: 1
// Sidebar (left) also covers the entire left portion of screen.
.sidebar-drawer
box-sizing: border-box
border-right: 1px solid var(--color-sidebar-background-border)
background: var(--color-sidebar-background)
display: flex
justify-content: flex-end
// These next two lines took me two days to figure out.
width: calc((100% - #{$full-width}) / 2 + #{$sidebar-width})
min-width: $sidebar-width
// Scroll-along sidebars
.sidebar-container,
.toc-drawer
box-sizing: border-box
width: $sidebar-width
.toc-drawer
background: var(--color-toc-background)
// See HACK described on top of this document
padding-right: 1rem
.sidebar-sticky,
.toc-sticky
position: sticky
top: 0
height: min(100%, 100vh)
height: 100vh
display: flex
flex-direction: column
.sidebar-scroll,
.toc-scroll
flex-grow: 1
flex-shrink: 1
overflow: auto
scroll-behavior: smooth
// Central items.
.content
padding: 0 $content-padding
width: $content-width
display: flex
flex-direction: column
justify-content: space-between
.icon
display: inline-block
height: 1rem
width: 1rem
svg
width: 100%
height: 100%
//
// Accommodate announcement banner
//
.announcement
background-color: var(--color-announcement-background)
color: var(--color-announcement-text)
height: var(--header-height)
display: flex
align-items: center
overflow-x: auto
& + .page
min-height: calc(100% - var(--header-height))
.announcement-content
box-sizing: border-box
padding: 0.5rem
min-width: 100%
white-space: nowrap
text-align: center
a
color: var(--color-announcement-text)
text-decoration-color: var(--color-announcement-text)
&:hover
color: var(--color-announcement-text)
text-decoration-color: var(--color-link--hover)
////////////////////////////////////////////////////////////////////////////////
// Toggles for theme
////////////////////////////////////////////////////////////////////////////////
.no-js .theme-toggle-container // don't show theme toggle if there's no JS
display: none
.theme-toggle-container
vertical-align: middle
.theme-toggle
cursor: pointer
border: none
padding: 0
background: transparent
.theme-toggle svg
vertical-align: middle
height: 1.5rem
width: 1.5rem
color: var(--color-foreground-primary)
display: none
.theme-toggle-header
float: left
padding: .75rem 0.5rem
////////////////////////////////////////////////////////////////////////////////
// Toggles for elements
////////////////////////////////////////////////////////////////////////////////
.toc-overlay-icon, .nav-overlay-icon
display: none
cursor: pointer
.icon
color: var(--color-foreground-secondary)
height: 1.5rem
width: 1.5rem
.toc-header-icon, .nav-overlay-icon
// for when we set display: flex
justify-content: center
align-items: center
.toc-content-icon
height: 1.5rem
width: 1.5rem
.content-icon-container
float: right
display: flex
margin-top: 1.5rem
margin-left: 1rem
margin-bottom: 1rem
gap: 0.5rem
.edit-this-page svg
color: inherit
height: 1.5rem
width: 1.5rem
.sidebar-toggle
position: absolute
display: none
// <debugging things>
.sidebar-toggle[name="__toc"]
left: 20px
.sidebar-toggle:checked
left: 40px
// </debugging things>
.overlay
position: fixed
top: 0
width: 0
height: 0
transition: width 0ms, height 0ms, opacity 250ms ease-out
opacity: 0
background-color: rgba(0, 0, 0, 0.54)
.sidebar-overlay
z-index: 20
.toc-overlay
z-index: 40
// Keep things on top and smooth.
.sidebar-drawer
z-index: 30
transition: left 250ms ease-in-out
.toc-drawer
z-index: 50
transition: right 250ms ease-in-out
// Show the Sidebar
#__navigation:checked
& ~ .sidebar-overlay
width: 100%
height: 100%
opacity: 1
& ~ .page
.sidebar-drawer
top: 0
left: 0
// Show the toc sidebar
#__toc:checked
& ~ .toc-overlay
width: 100%
height: 100%
opacity: 1
& ~ .page
.toc-drawer
top: 0
right: 0
////////////////////////////////////////////////////////////////////////////////
// Back to top
////////////////////////////////////////////////////////////////////////////////
.back-to-top
text-decoration: none
display: none
position: fixed
left: 0
top: 1rem
padding: 0.5rem
padding-right: 0.75rem
border-radius: 1rem
font-size: 0.8125rem
background: var(--color-background-primary)
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), #6b728080 0px 0px 1px 0px
z-index: 10
margin-left: 50%
transform: translateX(-50%)
svg
height: 1rem
width: 1rem
fill: currentColor
display: inline-block
span
margin-left: 0.25rem
.show-back-to-top &
display: flex
align-items: center
////////////////////////////////////////////////////////////////////////////////
// Responsive layouting
////////////////////////////////////////////////////////////////////////////////
// Make things a bit bigger on bigger screens.
@media (min-width: $full-width + $sidebar-width)
html
font-size: 110%
@media (max-width: $full-width)
// Collapse "toc" into the icon.
.toc-content-icon
display: flex
.toc-drawer
position: fixed
height: 100vh
top: 0
right: -$sidebar-width
border-left: 1px solid var(--color-background-muted)
.toc-tree
border-left: none
font-size: var(--toc-font-size--mobile)
// Accomodate for a changed content width.
.sidebar-drawer
width: calc((100% - #{$full-width - $sidebar-width}) / 2 + #{$sidebar-width})
@media (max-width: $full-width - $sidebar-width)
// Collapse "navigation".
.nav-overlay-icon
display: flex
.sidebar-drawer
position: fixed
height: 100vh
width: $sidebar-width
top: 0
left: -$sidebar-width
// Swap which icon is visible.
.toc-header-icon
display: flex
.toc-content-icon, .theme-toggle-content
display: none
.theme-toggle-header
display: block
// Show the header.
.mobile-header
position: sticky
top: 0
display: flex
justify-content: space-between
align-items: center
.header-left,
.header-right
display: flex
height: var(--header-height)
padding: 0 var(--header-padding)
label
height: 100%
width: 100%
user-select: none
// Add a scroll margin for the content
:target
scroll-margin-top: var(--header-height)
// Show back-to-top below the header
.back-to-top
top: calc(var(--header-height) + 0.5rem)
// Center the page, and accommodate for the header.
.page
flex-direction: column
justify-content: center
.content
margin-left: auto
margin-right: auto
@media (max-width: $content-width + 2* $content-padding)
// Content should respect window limits.
.content
width: 100%
overflow-x: auto
@media (max-width: $content-width)
.content
padding: 0 $content-padding--small
// Don't float sidebars to the right.
article aside.sidebar
float: none
width: 100%
margin: 1rem 0