madoka.systems
a simple pds frontend for listing accounts and generating invite codes
1*,
2*::before,
3*::after {
4 box-sizing: border-box;
5}
6
7*:not(dialog) {
8 margin: 0;
9}
10
11@media (prefers-reduced-motion: no-preference) {
12 html {
13 interpolate-size: allow-keywords;
14 }
15}
16
17body {
18 line-height: 1.5;
19 -webkit-font-smoothing: antialiased;
20}
21
22img,
23picture,
24video,
25canvas,
26svg {
27 display: block;
28 max-width: 100%;
29}
30
31input,
32button,
33textarea,
34select {
35 font: inherit;
36}
37
38p,
39h1,
40h2,
41h3,
42h4,
43h5,
44h6 {
45 overflow-wrap: break-word;
46}
47
48p {
49 text-wrap: pretty;
50}
51
52h1,
53h2,
54h3,
55h4,
56h5,
57h6 {
58 text-wrap: balance;
59}
60
61@font-face {
62 font-family: "Host Grotesk";
63 font-optical-sizing: auto;
64 font-weight: 300 800;
65 font-style: normal;
66 font-display: swap;
67 src: url("/fonts/HostGrotesk-VariableFont.woff2") format("woff2-variations");
68}
69
70:root {
71 font-size: 16px;
72 text-rendering: optimizeLegibility;
73 -webkit-font-smoothing: antialiased;
74 -moz-osx-font-smoothing: grayscale;
75
76 @media (width >= 600px) {
77 font-size: 18px;
78 }
79
80 font-family: "Host Grotesk", sans-serif;
81
82 --color-bg: oklch(95% 0 0);
83 --color-surface: oklch(100% 0 0);
84 --color-fg: oklch(0% 0 0);
85}
86
87@media (prefers-color-scheme: dark) {
88 :root {
89 --color-bg: oklch(20% 0 0);
90 --color-surface: oklch(0% 0 0);
91 --color-fg: oklch(100% 0 0);
92 }
93}
94
95:root {
96 background-color: var(--color-bg);
97 color: var(--color-fg);
98}
99
100a {
101 color: inherit;
102 text-decoration: none;
103 font-weight: 700;
104 padding: 0.05rem 0.2rem;
105 margin-inline: -0.2rem;
106}
107
108a:hover,
109a:active {
110 color: var(--color-surface);
111 background-color: var(--color-fg);
112}
113
114a:focus {
115 outline: 2px solid var(--color-fg);
116 outline-offset: 2px;
117}
118
119h1 {
120 font-size: 2rem;
121 padding-bottom: 0.25rem;
122}
123
124h2 {
125 font-size: 1.5rem;
126 padding-bottom: 0.2rem;
127}
128
129h3 {
130 font-size: 1.25rem;
131 padding-bottom: 0.1rem;
132}
133
134h4 {
135 font-size: 1.125rem;
136}