|
0
|
1 @import "/css/font.css";
|
|
|
2
|
|
|
3 html {
|
|
|
4 margin: 0;
|
|
|
5 padding: 0;
|
|
|
6 }
|
|
|
7
|
|
|
8 body {
|
|
|
9 margin: 0;
|
|
|
10 padding: 0;
|
|
|
11 background-image: url('/img/reimu.jpg');
|
|
|
12 background-position: 40% 10%;
|
|
|
13 background-color: white;
|
|
2
|
14 font-family: 'Ume UI Gothic';
|
|
0
|
15 }
|
|
|
16
|
|
|
17 header {
|
|
|
18 padding: 1em;
|
|
|
19 margin-top: 0;
|
|
|
20 margin-bottom: 0;
|
|
|
21 padding-bottom: 0;
|
|
|
22 }
|
|
|
23
|
|
|
24 h1 {font-size: 1.7em}
|
|
|
25 a:link {color: #1e527e}
|
|
|
26 a:hover {color: #2c7abc}
|
|
|
27 a:visited {color: #371e7e}
|
|
|
28 a:visited {color: #574882}
|
|
|
29 img {max-width: 100%}
|
|
|
30
|
|
|
31 pre {
|
|
|
32 color: #dddddd;
|
|
|
33 overflow-x: auto;
|
|
|
34 padding: 0.3em;
|
|
|
35 }
|
|
|
36
|
|
|
37 .caption {
|
|
|
38 font-style: italic;
|
|
|
39 font-size: 0.8em;
|
|
|
40 line-height: 5px;
|
|
|
41 margin-bottom: 3em;
|
|
|
42 }
|
|
|
43
|
|
|
44 .caption {text-align: center}
|
|
|
45
|
|
|
46 .center:not(.section), .center>h1, .center>h2{ text-align: center }
|
|
|
47
|
|
|
48 p.screenshot a img {
|
|
|
49 border: 1px solid black;
|
|
|
50 box-shadow: 3px 7px 7px #606060;
|
|
|
51 top: 0;
|
|
|
52 bottom:0;
|
|
|
53 left: 0;
|
|
|
54 right:0;
|
|
|
55 margin: auto;
|
|
|
56 }
|
|
|
57
|
|
|
58 /* guided tour */
|
|
|
59
|
|
|
60 #window-maker h1.title { text-align: center }
|
|
|
61 #window-maker #guided-tour img {
|
|
|
62 display:block;
|
|
|
63 margin-left: auto;
|
|
|
64 margin-right: auto;
|
|
|
65 }
|
|
|
66
|
|
|
67 /* gallery */
|
|
|
68
|
|
|
69 p.gallery {
|
|
|
70 float: left;
|
|
|
71 margin: 5px;
|
|
|
72 width: 300px;
|
|
|
73 }
|
|
|
74
|
|
|
75 p.gallery a img {
|
|
|
76 border: 1px solid black;
|
|
|
77 box-shadow: 3px 7px 7px #606060;
|
|
|
78 top: 0;
|
|
|
79 bottom:0;
|
|
|
80 left: 0;
|
|
|
81 right:0;
|
|
|
82 margin: auto;
|
|
|
83 }
|
|
|
84
|
|
|
85 div.gallery img {
|
|
|
86 width: 100%;
|
|
|
87 height: auto;
|
|
|
88 }
|
|
|
89
|
|
|
90 .clear {
|
|
|
91 clear: left;
|
|
|
92 }
|
|
|
93
|
|
|
94 div.figure img {
|
|
|
95 display: block;
|
|
|
96 border: 1px solid black;
|
|
|
97 box-shadow: 3px 7px 7px #606060;
|
|
|
98 margin: 0 auto;
|
|
|
99 }
|
|
|
100
|
|
|
101 div.figure.borderless img {
|
|
|
102 border: 0
|
|
|
103 }
|
|
|
104
|
|
|
105 /* logo */
|
|
|
106 header h1 a {
|
|
|
107 font-family: "ArialPixel";
|
|
|
108 text-shadow: 0 4px 4px #666;
|
|
|
109 display: block;
|
|
|
110 padding-left: 1.4em;
|
|
|
111 background-image: url(/img/yukari-sigil.png);
|
|
|
112 background-position: left center;
|
|
|
113 background-repeat: no-repeat;
|
|
|
114 background-size: auto 100%;
|
|
|
115 text-decoration: none;
|
|
|
116 color: black;
|
|
|
117 font-size: 1.8em;
|
|
|
118 }
|
|
|
119
|
|
|
120 header h1 a:link {text-decoration: none}
|
|
|
121 header h1 a span.second {color: white}
|
|
|
122 header h1 a span.first {color: black}
|
|
|
123 header h1 a.span.third {color: red}
|
|
|
124
|
|
|
125 /* wrapper decorations */
|
|
|
126 #minimize, #close {
|
|
|
127 margin: 0;
|
|
|
128 padding: 0;
|
|
|
129 height: 20px;
|
|
|
130 width: 21px;
|
|
|
131 border-left: 1px solid #b6b6b6;
|
|
|
132 border-top: 1px solid #b6b6b6;
|
|
|
133 border-right: 1px solid #616161;
|
|
|
134 border-bottom: 1px solid #616161;
|
|
|
135 background-repeat: no-repeat;
|
|
|
136 background-position: center center;
|
|
|
137 }
|
|
|
138
|
|
|
139 #minimize {
|
|
|
140 margin-right: 1px;
|
|
|
141 background-image: url(/img/minimize.png);
|
|
|
142 }
|
|
|
143
|
|
|
144 #close {
|
|
|
145 margin-left: 1px;
|
|
|
146 background-image: url(/img/close.png);
|
|
|
147 }
|
|
|
148
|
|
|
149 #titlebar {
|
|
|
150 position: absolute;
|
|
|
151 top: 0px;
|
|
|
152 display: inline-flex;
|
|
|
153 width: 100%;
|
|
|
154 margin: 0;
|
|
|
155 margin-top: 0px;
|
|
|
156 padding: 0;
|
|
|
157 background: #016701;
|
|
|
158 height: 23px;
|
|
|
159 }
|
|
|
160
|
|
|
161 #titlebar-inner {
|
|
|
162 margin: 0;
|
|
|
163 padding: 0;
|
|
|
164 margin-top: 0px;
|
|
|
165 background: #016701;
|
|
|
166 height: 20px;
|
|
|
167 width: 100%;
|
|
|
168 border-left: 1px solid #b6b6b6;
|
|
|
169 border-top: 1px solid #b6b6b6;
|
|
|
170 border-right: 1px solid #616161;
|
|
|
171 border-bottom: 1px solid #616161;
|
|
|
172 font-size: 0.8em;
|
|
|
173 color: white;
|
|
|
174 font-weight: bold;
|
|
|
175 text-align: center;
|
|
|
176 line-height: 19px;
|
|
2
|
177 font-family: 'Ume UI Gothic O5';
|
|
0
|
178 }
|
|
|
179
|
|
|
180 #wrapper {
|
|
|
181 position: relative;
|
|
|
182 width: 800px;
|
|
|
183 margin: 0 auto;
|
|
|
184 margin-top: 1em;
|
|
|
185 margin-bottom: 1em;
|
|
|
186 box-shadow: 0 0 15px #0033aa;
|
|
|
187 background-color: #ddddff;
|
|
|
188 border: 1px solid black;
|
|
|
189 }
|
|
|
190
|
|
|
191 #resizel, #resizer {
|
|
|
192 margin: 0;
|
|
|
193 padding: 0;
|
|
|
194 height: 6px;
|
|
|
195 width: 28px;
|
|
|
196 border-left: 1px solid white;
|
|
|
197 border-top: 1px solid white;
|
|
|
198 border-right: 1px solid #555555;
|
|
|
199 }
|
|
|
200
|
|
|
201 #resizebar {
|
|
|
202 position: absolute;
|
|
|
203 bottom: 2px;
|
|
|
204 display: inline-flex;
|
|
|
205 width: 100%;
|
|
|
206 margin: 0;
|
|
|
207 margin-top: 0px;
|
|
|
208 padding: 0;
|
|
|
209 background: #aaaaaa;
|
|
|
210 height: 5px;
|
|
|
211 border-top: 1px solid #555555;
|
|
|
212 }
|
|
|
213
|
|
|
214 #resizebar-inner {
|
|
|
215 margin: 0;
|
|
|
216 padding: 0;
|
|
|
217 margin-top: 0px;
|
|
|
218 height: 6px;
|
|
|
219 width: 100%;
|
|
|
220 border-left: 1px solid white;
|
|
|
221 border-top: 1px solid white;
|
|
|
222 border-right: 1px solid #555555;
|
|
|
223 }
|
|
|
224
|
|
|
225 /* TOC */
|
|
|
226 .contents p {
|
|
|
227 margin: 0.2em;
|
|
|
228 }
|
|
|
229
|
|
|
230 /* pre/code highlighted theme - taken from wombat256grf vim colorscheme */
|
|
|
231 .highlight { background-color: #242424 }
|
|
|
232 .highlight .c { color: #99968b; font-style: italic} /* Comment */
|
|
|
233 .highlight .err { color: #dddddd} /* Error */
|
|
|
234 .highlight .g { color: #dddddd } /* Generic */
|
|
|
235 .highlight .k { color: #87afff } /* Keyword */
|
|
|
236 .highlight .l { color: #dddddd } /* Literal */
|
|
|
237 .highlight .n { color: #dddddd } /* Name */
|
|
|
238 .highlight .o { color: #dddddd } /* Operator */
|
|
|
239 .highlight .x { color: #dddddd } /* Other */
|
|
|
240 .highlight .p { color: #dddddd } /* Punctuation */
|
|
|
241 .highlight .cm { color: #99968b; font-style: italic} /* Comment.Multiline */
|
|
|
242 .highlight .cp { color: #e5786d } /* Comment.Preproc */
|
|
|
243 .highlight .c1 { color: #99968b; font-style: italic} /* Comment.Single */
|
|
|
244 .highlight .cs { color: #99968b; font-style: italic} /* Comment.Special */
|
|
|
245 .highlight .gd { color: #dddddd } /* Generic.Deleted */
|
|
|
246 .highlight .ge { color: #dddddd } /* Generic.Emph */
|
|
|
247 .highlight .gr { color: #dddddd } /* Generic.Error */
|
|
|
248 .highlight .gh { color: #f6f3e8; font-weight: bold} /* Generic.Heading */
|
|
|
249 .highlight .gi { color: #dddddd } /* Generic.Inserted */
|
|
|
250 .highlight .go { color: #888888 } /* Generic.Output */
|
|
|
251 .highlight .gp { color: #dddddd } /* Generic.Prompt */
|
|
|
252 .highlight .gs { color: #dddddd } /* Generic.Strong */
|
|
|
253 .highlight .gu { color: #f6f3e8; font-weight: bold} /* Generic.Subheading */
|
|
|
254 .highlight .gt { color: #dddddd } /* Generic.Traceback */
|
|
|
255 .highlight .kc { color: #87afff } /* Keyword.Constant */
|
|
|
256 .highlight .kd { color: #87afff } /* Keyword.Declaration */
|
|
|
257 .highlight .kn { color: #87afff } /* Keyword.Namespace */
|
|
|
258 .highlight .kp { color: #87afff } /* Keyword.Pseudo */
|
|
|
259 .highlight .kr { color: #87afff } /* Keyword.Reserved */
|
|
|
260 .highlight .kt { color: #caeb82 } /* Keyword.Type */
|
|
|
261 .highlight .ld { color: #dddddd } /* Literal.Date */
|
|
|
262 .highlight .m { color: #e5786d } /* Literal.Number */
|
|
|
263 .highlight .s { color: #95e454; font-style: italic} /* Literal.String */
|
|
|
264 .highlight .na { color: #caeb82 } /* Name.Attribute */
|
|
|
265 .highlight .nb { color: #dddddd } /* Name.Builtin */
|
|
|
266 .highlight .nc { color: #dddddd } /* Name.Class */
|
|
|
267 .highlight .no { color: #e5786d } /* Name.Constant */
|
|
|
268 .highlight .nd { color: #dddddd } /* Name.Decorator */
|
|
|
269 .highlight .ni { color: #ffdead } /* Name.Entity */
|
|
|
270 .highlight .ne { color: #dddddd } /* Name.Exception */
|
|
|
271 .highlight .nf { color: #caeb82 } /* Name.Function */
|
|
|
272 .highlight .nl { color: #dddddd } /* Name.Label */
|
|
|
273 .highlight .nn { color: #dddddd } /* Name.Namespace */
|
|
|
274 .highlight .nx { color: #dddddd } /* Name.Other */
|
|
|
275 .highlight .py { color: #dddddd } /* Name.Property */
|
|
|
276 .highlight .nt { color: #87afff } /* Name.Tag */
|
|
|
277 .highlight .nv { color: #caeb82 } /* Name.Variable */
|
|
|
278 .highlight .ow { color: #dddddd } /* Operator.Word */
|
|
|
279 .highlight .w { color: #dddddd } /* Text.Whitespace */
|
|
|
280 .highlight .mf { color: #e5786d } /* Literal.Number.Float */
|
|
|
281 .highlight .mh { color: #e5786d } /* Literal.Number.Hex */
|
|
|
282 .highlight .mi { color: #e5786d } /* Literal.Number.Integer */
|
|
|
283 .highlight .mo { color: #e5786d } /* Literal.Number.Oct */
|
|
|
284 .highlight .sb { color: #95e454; font-style: italic } /* Literal.String.Backtick */
|
|
|
285 .highlight .sc { color: #95e454; font-style: italic } /* Literal.String.Char */
|
|
|
286 .highlight .sd { color: #95e454; font-style: italic } /* Literal.String.Doc */
|
|
|
287 .highlight .s2 { color: #95e454; font-style: italic } /* Literal.String.Double */
|
|
|
288 .highlight .se { color: #95e454; font-style: italic } /* Literal.String.Escape */
|
|
|
289 .highlight .sh { color: #95e454; font-style: italic } /* Literal.String.Heredoc */
|
|
|
290 .highlight .si { color: #95e454; font-style: italic } /* Literal.String.Interpol */
|
|
|
291 .highlight .sx { color: #95e454; font-style: italic } /* Literal.String.Other */
|
|
|
292 .highlight .sr { color: #95e454; font-style: italic } /* Literal.String.Regex */
|
|
|
293 .highlight .s1 { color: #95e454; font-style: italic } /* Literal.String.Single */
|
|
|
294 .highlight .ss { color: #95e454; font-style: italic } /* Literal.String.Symbol */
|
|
|
295 .highlight .bp { color: #dddddd } /* Name.Builtin.Pseudo */
|
|
|
296 .highlight .vc { color: #caeb82 } /* Name.Variable.Class */
|
|
|
297 .highlight .vg { color: #caeb82 } /* Name.Variable.Global */
|
|
|
298 .highlight .vi { color: #caeb82 } /* Name.Variable.Instance */
|
|
|
299 .highlight .il { color: #e5786d } /* Literal.Number.Integer.Long */
|
|
|
300
|
|
|
301 .gutter{
|
|
|
302 background-color: black;
|
|
|
303 color: #857b6f;
|
|
|
304 }
|
|
|
305
|
|
|
306 .post > .highlight .lineno {
|
|
|
307 display:inline-block;
|
|
|
308 padding: 0 5px;
|
|
|
309 border-right:1px solid #ccc;
|
|
|
310 }
|
|
|
311
|
|
|
312 .post > .highlight pre code {
|
|
|
313 display: block;
|
|
|
314 white-space: pre;
|
|
|
315 overflow-x: auto;
|
|
|
316 word-wrap: normal;
|
|
|
317 }
|
|
|
318
|
|
|
319 /* To display a "Command Line" to be typed by user */
|
|
|
320 code code.command {
|
|
|
321 display: inline-block;
|
|
|
322 font-family: monospace;
|
|
|
323 border: 1px solid #606085;
|
|
|
324 width: 95%;
|
|
|
325 padding: 2mm 1em;
|
|
|
326 }
|
|
|
327 /* To highlight arguments that user should adapt */
|
|
|
328 code.command > i {
|
|
|
329 font-style: italic;
|
|
|
330 color: #40505A;
|
|
|
331 }
|
|
|
332
|
|
|
333 /* ********** Table for a list of man pages ********** */
|
|
|
334 table.manlist {
|
|
|
335 border: 1px solid black;
|
|
|
336 background-color: #AEAAAE;
|
|
|
337 margin-top: 0mm;
|
|
|
338 margin-bottom: 5mm;
|
|
|
339 margin-left: 10mm;
|
|
|
340 margin-right: 10mm;
|
|
|
341 padding: 1mm;
|
|
|
342 }
|
|
|
343 table.manlist th {
|
|
|
344 background-color: #545854;
|
|
|
345 color: #E8E8E8;
|
|
|
346 padding: 0.5mm 2mm;
|
|
|
347 border: 1px inset;
|
|
|
348 }
|
|
|
349 table.manlist tr:hover {
|
|
|
350 /* When the mouse is over a line, we highlight the whole line
|
|
|
351 because it is very convenient for reading */
|
|
|
352 background-color: #AECAAE;
|
|
|
353 }
|
|
|
354 table.manlist td {
|
|
|
355 color: #000000;
|
|
|
356 }
|
|
|
357 table.manlist td.name {
|
|
|
358 font-family: monospace;
|
|
|
359 width: 1px; /* This prevents the column from stretching */
|
|
|
360 }
|
|
|
361 table.manlist td.name a {
|
|
|
362 display: inline-block;
|
|
|
363 width: 100%;
|
|
|
364 }
|
|
|
365 table.manlist td.section {
|
|
|
366 text-align: center;
|
|
|
367 width: 1px; /* This prevents the column from stretching */
|
|
|
368 }
|
|
|
369 table.manlist a {
|
|
|
370 color: #000040;
|
|
|
371 }
|
|
|
372
|
|
|
373 /* main content */
|
|
|
374 article {padding: 1em}
|
|
|
375
|
|
|
376 /*
|
|
|
377 * size specific styles
|
|
|
378 */
|
|
|
379
|
|
|
380 /* large screens. size: 64 * 2 + width of the wrapper (800) == 928 + margin */
|
|
|
381 @media screen and (min-width: 940px) {
|
|
|
382
|
|
|
383 /* menu as a vertical dock */
|
|
|
384 aside {
|
|
|
385 position: fixed;
|
|
|
386 right: 0;
|
|
|
387 top: 0;
|
|
|
388 width: 64px;
|
|
|
389 }
|
|
|
390
|
|
|
391 nav.menu li#dock {background-image: url(/img/dock_dock.png)}
|
|
|
392 nav.menu li#home {background-image: url(/img/dock_home.png)}
|
|
|
393 nav.menu li#themes {background-image: url(/img/dock_themes.png)}
|
|
|
394
|
|
|
395 nav.menu {padding: 0}
|
|
|
396 nav.menu {background-color: #ddddff}
|
|
|
397
|
|
|
398 nav.menu ul {
|
|
|
399 padding: 0;
|
|
|
400 margin: 0;
|
|
|
401 list-style:none;
|
|
|
402 }
|
|
|
403
|
|
|
404 nav.menu li {
|
|
|
405 float: left;
|
|
|
406 margin: 0;
|
|
|
407 padding: 0;
|
|
|
408 list-style: none;
|
|
|
409 display: inline;
|
|
|
410 }
|
|
|
411
|
|
|
412 nav.menu a {
|
|
|
413 padding: 3px 12px;
|
|
|
414 text-decoration: none;
|
|
|
415 color: #999;
|
|
|
416 line-height: 100%;
|
|
|
417 }
|
|
|
418
|
|
|
419 nav.menu a:hover {color: #BBB}
|
|
|
420
|
|
|
421 nav.menu form {display: inline}
|
|
|
422
|
|
|
423 nav.menu .current a {color: #fff}
|
|
|
424
|
|
|
425 nav.menu li {
|
|
|
426 display: block;
|
|
|
427 width: 64px;
|
|
|
428 height: 64px;
|
|
|
429 border: 0;
|
|
|
430 padding:0;
|
|
|
431 }
|
|
|
432
|
|
|
433 nav.menu li a {
|
|
|
434 display: block;
|
|
|
435 width: 64px;
|
|
|
436 height: 64px;
|
|
|
437 border: 0;
|
|
|
438 padding:0;
|
|
|
439 line-height: 0;
|
|
|
440 font-size: 0;
|
|
|
441 color: transparent;
|
|
|
442 }
|
|
|
443
|
|
|
444 }
|
|
|
445
|
|
|
446 /* small screens */
|
|
|
447 @media screen and (max-width: 939px) {
|
|
|
448
|
|
|
449 #wrapper {
|
|
|
450 width: 100%;
|
|
|
451 margin: 0;
|
|
|
452 border: 0;
|
|
|
453 }
|
|
|
454
|
|
|
455 /* menu as a horizontal, scrollable icon list */
|
|
|
456 article {width: auto}
|
|
|
457
|
|
|
458 nav.menu {padding: 0 1em 0 1em}
|
|
|
459
|
|
|
460 nav.menu ul {
|
|
|
461 border: 3px groove black;
|
|
|
462 padding: 0;
|
|
|
463 margin: 0;
|
|
|
464 list-style:none;
|
|
|
465 display: flex;
|
|
|
466 flex-wrap: nowrap;
|
|
|
467 overflow-x: auto;
|
|
|
468 }
|
|
|
469
|
|
|
470 nav.menu li {
|
|
|
471 float: left;
|
|
|
472 margin: 0;
|
|
|
473 padding: 0;
|
|
|
474 list-style: none;
|
|
|
475 display: inline;
|
|
|
476 }
|
|
|
477
|
|
|
478 nav.menu a {
|
|
|
479 padding: 3px 12px;
|
|
|
480 text-decoration: none;
|
|
|
481 color: #999;
|
|
|
482 line-height: 100%;
|
|
|
483 }
|
|
|
484
|
|
|
485 nav.menu a:hover {color: #BBB}
|
|
|
486 nav.menu form {display: inline}
|
|
|
487 nav.menu .current a {color: #fff}
|
|
|
488
|
|
|
489 nav.menu li {
|
|
|
490 display: block;
|
|
|
491 width: 64px;
|
|
|
492 height: 64px;
|
|
|
493 border: 0;
|
|
|
494 padding:0;
|
|
|
495 }
|
|
|
496
|
|
|
497 nav.menu li a {
|
|
|
498 display: block;
|
|
|
499 width: 64px;
|
|
|
500 height: 64px;
|
|
|
501 border: 0;
|
|
|
502 padding:0;
|
|
|
503 line-height: 0;
|
|
|
504 font-size: 0;
|
|
|
505 color: transparent;
|
|
|
506 }
|
|
|
507
|
|
|
508 nav.menu li#dock {display: none}
|
|
|
509 nav.menu li#home {background-image: url(/img/prefs_home.png)}
|
|
|
510 nav.menu li#themes {background-image: url(/img/prefs_themes.png})}
|
|
|
511 .highlight {
|
|
|
512 padding: 0;
|
|
|
513 margin: 0;
|
|
|
514 }
|
|
|
515 }
|
|
|
516
|
|
|
517 /* very small - usually mobile phone screens */
|
|
|
518 @media screen and (max-width: 600px) {
|
|
|
519 body { background-image: url('/img/reimu_mobile.jpg');
|
|
|
520 header h1 a {font-size: 1.5em}
|
|
|
521 }
|
|
|
522 @media (prefers-color-scheme: dark) {
|
|
|
523 body {
|
|
|
524 background-image: url('/img/yukari.jpg');
|
|
|
525 background-position: 35% 35%;
|
|
|
526 background-color: black;
|
|
|
527 }
|
|
|
528 }
|
