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