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 }