Mercurial > lab > homepage
comparison site/css/menu.css @ 0:edf035b5437a
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 /* | |
| 2 * ---------------------------------------------------------------------------- | |
| 3 * "THE BEER-WARE LICENSE" (Revision 42.1+yakumolabs): | |
| 4 * <eternal-servant@yakumo.dev> wrote this file. As long as you retain this notice you | |
| 5 * can do whatever you want with this stuff. If we meet some day, and you think | |
| 6 * this stuff is worth it, you can buy me a Yukari Yakumo fumo (or related merch) in return Izuru Yakumo | |
| 7 * ---------------------------------------------------------------------------- | |
| 8 */ | |
| 9 | |
| 10 /* | |
| 11 * This is a hand-written layout which aims to replicate the user interface of | |
| 12 * GoldSrc-based game menus as much as possible. | |
| 13 * It contains a lot of hacks just to make stuff work. | |
| 14 * Mobile support is a non-goal (it works, but wallpaper doesn't fit for obvious reasons) | |
| 15 */ | |
| 16 | |
| 17 @import "/css/font.css"; | |
| 18 | |
| 19 /* | |
| 20 * Color schemes (Human mode) | |
| 21 */ | |
| 22 :root { | |
| 23 --bg: #ffffff; | |
| 24 --fg: #000000; | |
| 25 --link: #000000; | |
| 26 --link-hover: #800080; | |
| 27 --link-visited: #ff0000; | |
| 28 --border: #9d9d9d; | |
| 29 } | |
| 30 | |
| 31 body { | |
| 32 background-image: url('/img/reimu.jpg'); | |
| 33 background-position: 40% 10%; | |
| 34 background-repeat: no-repeat; | |
| 35 background-color: var(--bg); | |
| 36 font-family: 'ArialPixel', sans-serif; | |
| 37 font-weight: bold; | |
| 38 } | |
| 39 div.content { | |
| 40 color: var(--fg); | |
| 41 } | |
| 42 .menu { | |
| 43 position: absolute; | |
| 44 text-align: justified; | |
| 45 float: left; | |
| 46 bottom: 2px; | |
| 47 left: 5px; | |
| 48 right: 30px; | |
| 49 top: 420px; | |
| 50 } | |
| 51 .menu a { | |
| 52 color: var(--link); | |
| 53 } | |
| 54 .menu a:hover { | |
| 55 color: var(--link-hover); | |
| 56 } | |
| 57 .menu a:visited { | |
| 58 color: var(--link-visited); | |
| 59 } | |
| 60 .footer { | |
| 61 margin-top: 85ch; | |
| 62 position: relative; | |
| 63 text-align: center; | |
| 64 } | |
| 65 .powered_by { | |
| 66 float: right; | |
| 67 } | |
| 68 | |
| 69 @media(prefers-color-scheme: dark) { | |
| 70 /* | |
| 71 * Color schemes (Youkai mode) | |
| 72 */ | |
| 73 :root { | |
| 74 --bg: #000000; | |
| 75 --fg: #ffffff; | |
| 76 --link: #ffffff; | |
| 77 --link-hover: #ffd700; | |
| 78 --link-visited: #ffa500; | |
| 79 --border: #494949; | |
| 80 } | |
| 81 body { | |
| 82 background-image: url('/img/yukari.jpg'); | |
| 83 background-position: 35% 35%; | |
| 84 } | |
| 85 } | |
| 86 @media screen and (max-width: 600px) { | |
| 87 body { | |
| 88 background-image: url('/img/reimu_mobile.jpg'); | |
| 89 } | |
| 90 .footer { | |
| 91 display: none | |
| 92 } | |
| 93 .menu { | |
| 94 font-size: 20px; | |
| 95 } | |
| 96 .powered_by { | |
| 97 display: none; | |
| 98 } | |
| 99 } |
