aboutsummaryrefslogtreecommitdiff
path: root/_sass/layout.scss
blob: c8ada8033589e9d158e256007e8076350724a086 (plain)
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
html, body {
	padding: 0;
	margin: 0;
}

.limitwidth {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 12px;
	padding-right: 12px;
}

nav {
	position: sticky;
	z-index: 2; // above toc

	top: 0;
	left: 0;
	right: 0;

	line-height: 20px;
}

article {
	margin-top: 24px;
	margin-bottom: 24px;
}

nav a {
	display: inline-block;
	padding: 2px 8px;
}

nav .right { float: right; }

header, footer { padding: 8px 0px; }

img, figcaption {
	display: block;
	max-width: 80%;
	margin: 0 auto;
}

// table of contents
aside {
	// make sure mouse events work on toc even if content is behind toc
	position: relative;
	z-index: 1;

	float: right;
	width: 40%;
	text-align: left;

	margin-left: 12px;
	margin-bottom: 6px;
	padding: 6px 0px;
}

aside ul {
	padding-left: 16px;
	margin: 0;
	// list-style-position: inside;
	list-style-type: square;
}

// indent first level
aside > ul { margin-left: 12px; }

// align description arrow with list bullet inside toc
summary { list-style-position: outside; }
// hide bullets for list items that can be expanded
li.stub::marker { content: ""; }
// give collapsable element arrow "clickable" cursor
summary::marker { cursor: pointer; }

blockquote {
	position: relative;
	padding-left: 12px;
	margin-top: 24px;
	margin-bottom: 24px;
}

blockquote, figure {
	margin-left: 0;
	margin-right: 0;
}

pre {
	overflow-x: auto;
	border-radius: 10px;
	padding: 6px 10px;
}

figure figcaption {
	margin-top: 6px;
}

// fix anchor scroll offset
h1, h2, h3, h4, h5, h6 { scroll-margin-top: 40px; }

footer ul {
	list-style: none;
	padding: 0;
}

.autocolumn {
	display: flex;
	gap: 24px;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}
.autocolumn .column {
	min-width: 250px;
	flex-grow: 1;
}

#search {
	display: flex;
	gap: 6px;
	margin: 24px 0px;
}
#search input[type=text] { flex-grow: 1; }

// center tables
table {
	margin-left: auto;
	margin-right: auto;
}