Mercurial > lab > homepage

comparison site/css/windowmaker.css @ 0:edf035b5437a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
It starts with
author yakumo_izuru
date Fri, 30 May 2025 19:26:52 -0300
parents
children 380da6d0a7e9
comparison
equal deleted inserted replaced
-1:000000000000 0:edf035b5437a
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;
14 font-family: "ArialPixel";
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;
177 }
178
179 #wrapper {
180 position: relative;
181 width: 800px;
182 margin: 0 auto;
183 margin-top: 1em;
184 margin-bottom: 1em;
185 box-shadow: 0 0 15px #0033aa;
186 background-color: #ddddff;
187 border: 1px solid black;
188 }
189
190 #resizel, #resizer {
191 margin: 0;
192 padding: 0;
193 height: 6px;
194 width: 28px;
195 border-left: 1px solid white;
196 border-top: 1px solid white;
197 border-right: 1px solid #555555;
198 }
199
200 #resizebar {
201 position: absolute;
202 bottom: 2px;
203 display: inline-flex;
204 width: 100%;
205 margin: 0;
206 margin-top: 0px;
207 padding: 0;
208 background: #aaaaaa;
209 height: 5px;
210 border-top: 1px solid #555555;
211 }
212
213 #resizebar-inner {
214 margin: 0;
215 padding: 0;
216 margin-top: 0px;
217 height: 6px;
218 width: 100%;
219 border-left: 1px solid white;
220 border-top: 1px solid white;
221 border-right: 1px solid #555555;
222 }
223
224 /* TOC */
225 .contents p {
226 margin: 0.2em;
227 }
228
229 /* pre/code highlighted theme - taken from wombat256grf vim colorscheme */
230 .highlight { background-color: #242424 }
231 .highlight .c { color: #99968b; font-style: italic} /* Comment */
232 .highlight .err { color: #dddddd} /* Error */
233 .highlight .g { color: #dddddd } /* Generic */
234 .highlight .k { color: #87afff } /* Keyword */
235 .highlight .l { color: #dddddd } /* Literal */
236 .highlight .n { color: #dddddd } /* Name */
237 .highlight .o { color: #dddddd } /* Operator */
238 .highlight .x { color: #dddddd } /* Other */
239 .highlight .p { color: #dddddd } /* Punctuation */
240 .highlight .cm { color: #99968b; font-style: italic} /* Comment.Multiline */
241 .highlight .cp { color: #e5786d } /* Comment.Preproc */
242 .highlight .c1 { color: #99968b; font-style: italic} /* Comment.Single */
243 .highlight .cs { color: #99968b; font-style: italic} /* Comment.Special */
244 .highlight .gd { color: #dddddd } /* Generic.Deleted */
245 .highlight .ge { color: #dddddd } /* Generic.Emph */
246 .highlight .gr { color: #dddddd } /* Generic.Error */
247 .highlight .gh { color: #f6f3e8; font-weight: bold} /* Generic.Heading */
248 .highlight .gi { color: #dddddd } /* Generic.Inserted */
249 .highlight .go { color: #888888 } /* Generic.Output */
250 .highlight .gp { color: #dddddd } /* Generic.Prompt */
251 .highlight .gs { color: #dddddd } /* Generic.Strong */
252 .highlight .gu { color: #f6f3e8; font-weight: bold} /* Generic.Subheading */
253 .highlight .gt { color: #dddddd } /* Generic.Traceback */
254 .highlight .kc { color: #87afff } /* Keyword.Constant */
255 .highlight .kd { color: #87afff } /* Keyword.Declaration */
256 .highlight .kn { color: #87afff } /* Keyword.Namespace */
257 .highlight .kp { color: #87afff } /* Keyword.Pseudo */
258 .highlight .kr { color: #87afff } /* Keyword.Reserved */
259 .highlight .kt { color: #caeb82 } /* Keyword.Type */
260 .highlight .ld { color: #dddddd } /* Literal.Date */
261 .highlight .m { color: #e5786d } /* Literal.Number */
262 .highlight .s { color: #95e454; font-style: italic} /* Literal.String */
263 .highlight .na { color: #caeb82 } /* Name.Attribute */
264 .highlight .nb { color: #dddddd } /* Name.Builtin */
265 .highlight .nc { color: #dddddd } /* Name.Class */
266 .highlight .no { color: #e5786d } /* Name.Constant */
267 .highlight .nd { color: #dddddd } /* Name.Decorator */
268 .highlight .ni { color: #ffdead } /* Name.Entity */
269 .highlight .ne { color: #dddddd } /* Name.Exception */
270 .highlight .nf { color: #caeb82 } /* Name.Function */
271 .highlight .nl { color: #dddddd } /* Name.Label */
272 .highlight .nn { color: #dddddd } /* Name.Namespace */
273 .highlight .nx { color: #dddddd } /* Name.Other */
274 .highlight .py { color: #dddddd } /* Name.Property */
275 .highlight .nt { color: #87afff } /* Name.Tag */
276 .highlight .nv { color: #caeb82 } /* Name.Variable */
277 .highlight .ow { color: #dddddd } /* Operator.Word */
278 .highlight .w { color: #dddddd } /* Text.Whitespace */
279 .highlight .mf { color: #e5786d } /* Literal.Number.Float */
280 .highlight .mh { color: #e5786d } /* Literal.Number.Hex */
281 .highlight .mi { color: #e5786d } /* Literal.Number.Integer */
282 .highlight .mo { color: #e5786d } /* Literal.Number.Oct */
283 .highlight .sb { color: #95e454; font-style: italic } /* Literal.String.Backtick */
284 .highlight .sc { color: #95e454; font-style: italic } /* Literal.String.Char */
285 .highlight .sd { color: #95e454; font-style: italic } /* Literal.String.Doc */
286 .highlight .s2 { color: #95e454; font-style: italic } /* Literal.String.Double */
287 .highlight .se { color: #95e454; font-style: italic } /* Literal.String.Escape */
288 .highlight .sh { color: #95e454; font-style: italic } /* Literal.String.Heredoc */
289 .highlight .si { color: #95e454; font-style: italic } /* Literal.String.Interpol */
290 .highlight .sx { color: #95e454; font-style: italic } /* Literal.String.Other */
291 .highlight .sr { color: #95e454; font-style: italic } /* Literal.String.Regex */
292 .highlight .s1 { color: #95e454; font-style: italic } /* Literal.String.Single */
293 .highlight .ss { color: #95e454; font-style: italic } /* Literal.String.Symbol */
294 .highlight .bp { color: #dddddd } /* Name.Builtin.Pseudo */
295 .highlight .vc { color: #caeb82 } /* Name.Variable.Class */
296 .highlight .vg { color: #caeb82 } /* Name.Variable.Global */
297 .highlight .vi { color: #caeb82 } /* Name.Variable.Instance */
298 .highlight .il { color: #e5786d } /* Literal.Number.Integer.Long */
299
300 .gutter{
301 background-color: black;
302 color: #857b6f;
303 }
304
305 .post > .highlight .lineno {
306 display:inline-block;
307 padding: 0 5px;
308 border-right:1px solid #ccc;
309 }
310
311 .post > .highlight pre code {
312 display: block;
313 white-space: pre;
314 overflow-x: auto;
315 word-wrap: normal;
316 }
317
318 /* To display a "Command Line" to be typed by user */
319 code code.command {
320 display: inline-block;
321 font-family: monospace;
322 border: 1px solid #606085;
323 width: 95%;
324 padding: 2mm 1em;
325 }
326 /* To highlight arguments that user should adapt */
327 code.command > i {
328 font-style: italic;
329 color: #40505A;
330 }
331
332 /* ********** Table for a list of man pages ********** */
333 table.manlist {
334 border: 1px solid black;
335 background-color: #AEAAAE;
336 margin-top: 0mm;
337 margin-bottom: 5mm;
338 margin-left: 10mm;
339 margin-right: 10mm;
340 padding: 1mm;
341 }
342 table.manlist th {
343 background-color: #545854;
344 color: #E8E8E8;
345 padding: 0.5mm 2mm;
346 border: 1px inset;
347 }
348 table.manlist tr:hover {
349 /* When the mouse is over a line, we highlight the whole line
350 because it is very convenient for reading */
351 background-color: #AECAAE;
352 }
353 table.manlist td {
354 color: #000000;
355 }
356 table.manlist td.name {
357 font-family: monospace;
358 width: 1px; /* This prevents the column from stretching */
359 }
360 table.manlist td.name a {
361 display: inline-block;
362 width: 100%;
363 }
364 table.manlist td.section {
365 text-align: center;
366 width: 1px; /* This prevents the column from stretching */
367 }
368 table.manlist a {
369 color: #000040;
370 }
371
372 /* main content */
373 article {padding: 1em}
374
375 /*
376 * size specific styles
377 */
378
379 /* large screens. size: 64 * 2 + width of the wrapper (800) == 928 + margin */
380 @media screen and (min-width: 940px) {
381
382 /* menu as a vertical dock */
383 aside {
384 position: fixed;
385 right: 0;
386 top: 0;
387 width: 64px;
388 }
389
390 nav.menu li#dock {background-image: url(/img/dock_dock.png)}
391 nav.menu li#home {background-image: url(/img/dock_home.png)}
392 nav.menu li#themes {background-image: url(/img/dock_themes.png)}
393
394 nav.menu {padding: 0}
395 nav.menu {background-color: #ddddff}
396
397 nav.menu ul {
398 padding: 0;
399 margin: 0;
400 list-style:none;
401 }
402
403 nav.menu li {
404 float: left;
405 margin: 0;
406 padding: 0;
407 list-style: none;
408 display: inline;
409 }
410
411 nav.menu a {
412 padding: 3px 12px;
413 text-decoration: none;
414 color: #999;
415 line-height: 100%;
416 }
417
418 nav.menu a:hover {color: #BBB}
419
420 nav.menu form {display: inline}
421
422 nav.menu .current a {color: #fff}
423
424 nav.menu li {
425 display: block;
426 width: 64px;
427 height: 64px;
428 border: 0;
429 padding:0;
430 }
431
432 nav.menu li a {
433 display: block;
434 width: 64px;
435 height: 64px;
436 border: 0;
437 padding:0;
438 line-height: 0;
439 font-size: 0;
440 color: transparent;
441 }
442
443 }
444
445 /* small screens */
446 @media screen and (max-width: 939px) {
447
448 #wrapper {
449 width: 100%;
450 margin: 0;
451 border: 0;
452 }
453
454 /* menu as a horizontal, scrollable icon list */
455 article {width: auto}
456
457 nav.menu {padding: 0 1em 0 1em}
458
459 nav.menu ul {
460 border: 3px groove black;
461 padding: 0;
462 margin: 0;
463 list-style:none;
464 display: flex;
465 flex-wrap: nowrap;
466 overflow-x: auto;
467 }
468
469 nav.menu li {
470 float: left;
471 margin: 0;
472 padding: 0;
473 list-style: none;
474 display: inline;
475 }
476
477 nav.menu a {
478 padding: 3px 12px;
479 text-decoration: none;
480 color: #999;
481 line-height: 100%;
482 }
483
484 nav.menu a:hover {color: #BBB}
485 nav.menu form {display: inline}
486 nav.menu .current a {color: #fff}
487
488 nav.menu li {
489 display: block;
490 width: 64px;
491 height: 64px;
492 border: 0;
493 padding:0;
494 }
495
496 nav.menu li a {
497 display: block;
498 width: 64px;
499 height: 64px;
500 border: 0;
501 padding:0;
502 line-height: 0;
503 font-size: 0;
504 color: transparent;
505 }
506
507 nav.menu li#dock {display: none}
508 nav.menu li#home {background-image: url(/img/prefs_home.png)}
509 nav.menu li#themes {background-image: url(/img/prefs_themes.png})}
510 .highlight {
511 padding: 0;
512 margin: 0;
513 }
514 }
515
516 /* very small - usually mobile phone screens */
517 @media screen and (max-width: 600px) {
518 body { background-image: url('/img/reimu_mobile.jpg');
519 header h1 a {font-size: 1.5em}
520 }
521 @media (prefers-color-scheme: dark) {
522 body {
523 background-image: url('/img/yukari.jpg');
524 background-position: 35% 35%;
525 background-color: black;
526 }
527 }