Skip to content

Commit d604f5a

Browse files
DirectXMan12DirectXMan12
committed
Add custom CSS for marker docs
This adds custom CSS to the book to for marker docs. Avert your eyes, lest you stare too deeply into the source and begin to cascade yourself. A more detailed description of what's going on can be found in general.css, which contains the custom logic.
1 parent 3f24ddf commit d604f5a

File tree

1 file changed

+355
-0
lines changed

1 file changed

+355
-0
lines changed

‎docs/book/theme/css/general.css‎

Lines changed: 355 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
1+
/* Base styles and content styles */
2+
3+
@import 'variables.css';
4+
5+
html {
6+
font-family: "Open Sans", sans-serif;
7+
color: var(--fg);
8+
background-color: var(--bg);
9+
text-size-adjust: none;
10+
}
11+
12+
body {
13+
margin: 0;
14+
font-size: 1rem;
15+
overflow-x: hidden;
16+
}
17+
18+
code {
19+
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
20+
font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
21+
}
22+
23+
.left { float: left; }
24+
.right { float: right; }
25+
.hidden { display: none; }
26+
.play-button.hidden { display: none; }
27+
28+
h2, h3 { margin-top: 2.5em; }
29+
h4, h5 { margin-top: 2em; }
30+
31+
.header + .header h3,
32+
.header + .header h4,
33+
.header + .header h5 {
34+
margin-top: 1em;
35+
}
36+
37+
a.header:target h1:before,
38+
a.header:target h2:before,
39+
a.header:target h3:before,
40+
a.header:target h4:before {
41+
display: inline-block;
42+
content: "»";
43+
margin-left: -30px;
44+
width: 30px;
45+
}
46+
47+
.page {
48+
outline: 0;
49+
padding: 0 var(--page-padding);
50+
}
51+
.page-wrapper {
52+
box-sizing: border-box;
53+
}
54+
.js .page-wrapper {
55+
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
56+
}
57+
58+
.content {
59+
overflow-y: auto;
60+
padding: 0 15px;
61+
padding-bottom: 50px;
62+
}
63+
.content main {
64+
margin-left: auto;
65+
margin-right: auto;
66+
max-width: var(--content-max-width);
67+
}
68+
.content a { text-decoration: none; }
69+
.content a:hover { text-decoration: underline; }
70+
.content img { max-width: 100%; }
71+
.content .header:link,
72+
.content .header:visited {
73+
color: var(--fg);
74+
}
75+
.content .header:link,
76+
.content .header:visited:hover {
77+
text-decoration: none;
78+
}
79+
80+
table {
81+
margin: 0 auto;
82+
border-collapse: collapse;
83+
}
84+
table td {
85+
padding: 3px 20px;
86+
border: 1px var(--table-border-color) solid;
87+
}
88+
table thead {
89+
background: var(--table-header-bg);
90+
}
91+
table thead td {
92+
font-weight: 700;
93+
border: none;
94+
}
95+
table thead tr {
96+
border: 1px var(--table-header-bg) solid;
97+
}
98+
/* Alternate background colors for rows */
99+
table tbody tr:nth-child(2n) {
100+
background: var(--table-alternate-bg);
101+
}
102+
103+
104+
blockquote {
105+
margin: 20px 0;
106+
padding: 0 20px;
107+
color: var(--fg);
108+
background-color: var(--quote-bg);
109+
border-top: .1em solid var(--quote-border);
110+
border-bottom: .1em solid var(--quote-border);
111+
}
112+
113+
114+
:not(.footnote-definition) + .footnote-definition,
115+
.footnote-definition + :not(.footnote-definition) {
116+
margin-top: 2em;
117+
}
118+
.footnote-definition {
119+
font-size: 0.9em;
120+
margin: 0.5em 0;
121+
}
122+
.footnote-definition p {
123+
display: inline;
124+
}
125+
126+
.tooltiptext {
127+
position: absolute;
128+
visibility: hidden;
129+
color: #fff;
130+
background-color: #333;
131+
transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
132+
left: -8px; /* Half of the width of the icon */
133+
top: -35px;
134+
font-size: 0.8em;
135+
text-align: center;
136+
border-radius: 6px;
137+
padding: 5px 8px;
138+
margin: 5px;
139+
z-index: 1000;
140+
}
141+
.tooltipped .tooltiptext {
142+
visibility: visible;
143+
}
144+
145+
/* From here on out is custom stuff */
146+
147+
/* marker docs styles */
148+
149+
/* NB(directxman12): The general gist of this is that we use semantic markup
150+
* for the actual HTML as much as possible, and then use CSS to look pretty and
151+
* extract the actual relevant information. Theoretically, this'll let us do
152+
* stuff like transform the information for different screen widths. */
153+
154+
/* the marker */
155+
.marker {
156+
display: flex;
157+
flex-wrap: wrap;
158+
align-items: center;
159+
margin-bottom: 0.25em;
160+
}
161+
162+
/* the marker name */
163+
.marker > dt.name::before {
164+
content: '// +';
165+
}
166+
.marker > dt.name {
167+
font-weight: bold;
168+
order: 0; /* hack around the ::before's positioning to get it after the line */
169+
}
170+
171+
/* the target blob */
172+
.marker::before {
173+
content: "on " attr(data-target);
174+
padding: 1px 6px;
175+
border-radius: 20%;
176+
background: var(--quote-bg);
177+
margin-left: 0.5em;
178+
font-weight: normal;
179+
opacity: 0.75;
180+
font-size: 0.75em;
181+
order: 2; /* hack around the ::before's positioning to get it after the line */
182+
}
183+
184+
/* deprecated markers */
185+
.marker.deprecated[data-target] {
186+
/* use attribute marker for specificity */
187+
order: 4;
188+
opacity: 0.65;
189+
}
190+
191+
.marker.deprecated::before {
192+
content: "deprecated (on " attr(data-target) ")";
193+
color: red;
194+
}
195+
.marker.deprecated:not([data-deprecated=""])::before {
196+
content: "use " attr(data-deprecated) " (on " attr(data-target) ")";
197+
color: red;
198+
}
199+
200+
/* the summary arguments (hidden in non-summary view) */
201+
.marker dd.args {
202+
margin-left: 0;
203+
font-family: mono;
204+
order: 1; /* hack around the ::before's positioning to get it after the line */
205+
}
206+
.marker dl.args.summary {
207+
display: inline-block;
208+
margin-bottom: 0;
209+
margin-top: 0;
210+
}
211+
/* TODO(directxman12): optional */
212+
.marker dl.args.summary dt {
213+
display: inline-block;
214+
font-style: inherit;
215+
}
216+
.marker dl.args.summary dt:first-child::before {
217+
content: ':';
218+
}
219+
.marker dl.args.summary dt::before {
220+
content: ',';
221+
}
222+
.marker dl.args.summary dt:first-of-type:last-of-type::before {
223+
content: '';
224+
}
225+
/* hide in non-summary view */
226+
.marker dd.args {
227+
display: none
228+
}
229+
230+
/* the description */
231+
.marker dd.description {
232+
order: 3; /* hack around the ::before's positioning to get it after the line */
233+
width: 100%;
234+
display: flex;
235+
flex-direction: column;
236+
}
237+
238+
/* all arguments */
239+
.marker dl.args dt.argument::after {
240+
content: '=';
241+
}
242+
.marker dl.args dd.type {
243+
font-style: italic;
244+
}
245+
.marker .argument {
246+
display: inline-block;
247+
margin-left: 0;
248+
}
249+
.marker .argument.type {
250+
font-size: 0.875em;
251+
}
252+
.marker .literal {
253+
font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
254+
font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
255+
}
256+
.marker .argument.type::before {
257+
content: '‹';
258+
}
259+
.marker .argument.type::after {
260+
content: '›';
261+
}
262+
263+
/* summary args */
264+
.marker .args.summary .argument.optional {
265+
opacity: 0.75;
266+
}
267+
268+
/* anonymous marker args */
269+
.marker.anonymous .description details {
270+
order: 1;
271+
flex: 1; /* don't cause arg syntax to wrap */
272+
}
273+
.marker.anonymous .description .args {
274+
order: 0; /* go before the description */
275+
276+
/* all on a single line */
277+
margin-top: 0;
278+
margin-bottom: 0;
279+
margin-right: 1em;
280+
}
281+
.marker.anonymous .description {
282+
flex-direction: row;
283+
}
284+
.marker .description dl.args:empty {
285+
margin-top: 0;
286+
}
287+
288+
.marker .type .slice::before {
289+
content: '[]';
290+
}
291+
292+
/* description args */
293+
.marker .description dt.argument.optional::before {
294+
content: "opt";
295+
padding: 1px 4px;
296+
border-radius: 20%;
297+
background: var(--quote-bg);
298+
opacity: 0.5;
299+
margin-left: -3em;
300+
float: left;
301+
}
302+
303+
/* help text */
304+
.marker summary.no-details {
305+
list-style: none;
306+
}
307+
.marker summary.no-details::-webkit-details-marker {
308+
display: none;
309+
}
310+
311+
/* summary view */
312+
#markers-summarize:checked ~ dl > .marker dd.args {
313+
display: inline-block
314+
}
315+
#markers-summarize:checked ~ dl > .marker dd.description dl.args {
316+
display: none
317+
}
318+
#markers-summarize:checked ~ dl > .marker dd.description {
319+
margin-bottom: 0.25em;
320+
}
321+
322+
#markers-summarize {
323+
display: none;
324+
}
325+
label[for="markers-summarize"]::before {
326+
margin-right: 0.5em;
327+
content: '\25bc';
328+
display: inline-block;
329+
}
330+
#markers-summarize:checked ~ label[for="markers-summarize"]::before {
331+
content: '\25b6';
332+
}
333+
334+
/* misc */
335+
/* marker details should be indented to be in line with the summary,
336+
* which is indented due to the expando
337+
*/
338+
.marker details > p {
339+
margin-left: 1em;
340+
}
341+
342+
/* sort by target */
343+
.marker[data-target="package"] {
344+
order: 2;
345+
}
346+
.marker[data-target="type"] {
347+
order: 1;
348+
}
349+
.marker[data-target="field"] {
350+
order: 0;
351+
}
352+
.markers {
353+
display: flex;
354+
flex-direction: column;
355+
}

0 commit comments

Comments
 (0)