summaryrefslogtreecommitdiff
path: root/doc/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'doc/style.css')
-rw-r--r--doc/style.css375
1 files changed, 339 insertions, 36 deletions
diff --git a/doc/style.css b/doc/style.css
index 027fc43..c647bc6 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -1,38 +1,341 @@
1body { max-width: 48em; margin: auto; line-height: 1.5; padding: 0.8em; word-wrap: break-word; } 1:root {
2pre { overflow-x: scroll; } 2 color-scheme: dark light;
3.snac-embedded-video, img { max-width: 100% } 3
4.snac-origin { font-size: 85% } 4 --primary-hue: 20;
5.snac-score { float: right; font-size: 85% } 5 --secondary-hue: 200;
6.snac-top-user { text-align: center; padding-bottom: 2em } 6 --saturation: 60%;
7.snac-top-user-name { font-size: 200% } 7 --lightness: 50%;
8.snac-top-user-id { font-size: 150% } 8
9.snac-announcement { border: black 1px solid; padding: 0.5em } 9 --light-gray: 95%;
10.snac-avatar { float: left; height: 2.5em; width: 2.5em; padding: 0.25em } 10 --dark-gray: 45%;
11.snac-author { font-size: 90%; text-decoration: none } 11
12.snac-author-tag { font-size: 80% } 12 --primary: hsl(var(--primary-hue) var(--saturation) var(--lightness));
13.snac-pubdate { color: #a0a0a0; font-size: 90% } 13 --secondary: hsl(var(--secondary-hue) var(--saturation) var(--lightness));
14.snac-top-controls { padding-bottom: 1.5em } 14}
15.snac-post { border-top: 1px solid #a0a0a0; padding-top: 0.5em; padding-bottom: 0.5em; } 15
16.snac-children { padding-left: 1em; border-left: 1px solid #a0a0a0; } 16@font-face {
17 font-family: "M PLUS 2";
18 font-display: swap;
19 src: url("/2/eris/s/MPLUS2.ttf"), local("M PLUS 2");
20}
21
22@font-face {
23 font-family: "M PLUS 1 Code";
24 font-display: swap;
25 src: url("/2/eris/s/MPLUS1Code.ttf"), local("M PLUS 1 Code");
26}
27
28html {
29 height: 100%;
30 width: 100%;
31 font-family: "M PLUS 2", sans-serif;
32 line-height: 120%;
33 text-rendering: optimizeLegibility;
34}
35
36/* TODO: Figure out how to float this shit to the right while still allowing wrapping on mobile and having it on the
37 same height as everything else */
38.snac-search-box {
39 font-size: 1rem;
40}
41
42h1 {
43 font-size: 150%;
44 line-height: 110%;
45}
46
47h2 {
48 font-size: 115%;
49}
50
51h3, h4, h5 {
52 font-size: 100%;
53}
54
55b {
56 color: hsl(var(--secondary-hue) var(--saturation) 30%);
57}
58
59u {
60 text-decoration-color: var(--secondary);
61}
62
63button, pre, code, input, textarea {
64 font-family: "M PLUS 1 Code", monospace;
65 border-radius: 4px;
66 color: var(--secondary);
67 background-color: hsl(0 0 var(--light-gray));
68}
69
70pre {
71 overflow-x: scroll;
72}
73
74/* TODO: consider max-width */
75body {
76 background: hsl(var(--primary-hue) 1% 99%);
77 height: 100%;
78 width: 100%;
79 margin: 0;
80}
81
82header {
83 background: hsl(var(--secondary-hue) 1% 74%);
84 margin-bottom: 1rem;
85 border-bottom: 1px solid black;
86
87 font-size: 125%;
88 line-height: 150%;
89
90 text-overflow: ellipsis;
91}
92
93header * {
94 margin-top: 0.1rem;
95 margin-left: 0.25rem;
96 margin-right: 0.25rem;
97}
98
99header > .left {
100 justify-content: left;
101}
102
103
104header > .right {
105 justify-content: right;
106}
107
108header > :first-child {
109 margin-left: 0.5rem;
110}
111
112.snac-embedded-video, img {
113 max-width: 100%;
114}
115
116body > header img {
117 padding: 0.25rem;
118 height: 3rem;
119 width: auto;
120}
121
122footer {
123 display: flex;
124 flex-direction: column;
125 justify-content: center;
126 text-align: center;
127 font-height: 80%;
128 margin-top: 1rem;
129 border-top: 1px solid black;
130}
131
132footer > p {
133 margin-bottom: 0.5rem;
134}
135
136a {
137 color: var(--secondary);
138 text-decoration: none;
139}
140
141a:hover {
142 color: var(--primary);
143 background-color: hsl(0 0 var(--light-gray));
144 border-radius: 4px;
145}
146
147/* Support for fiore */
148.snac-content {
149 white-space: pre-wrap;
150}
151
152.snac-content-attachments > a:hover {
153 background-color: transparent;
154 border-radius: 0;
155}
156
157a:visited {
158 color: var(--primary);
159}
160
161@media (min-width: 1140px) {
162 body > main {
163 margin-left: 9rem;
164 margin-right: 9rem;
165 }
166}
167
168@media (min-width: 800px) and (max-width: 1140px) {
169 body > main {
170 margin-left: 5rem;
171 margin-right: 5rem;
172 }
173}
174
175@media (max-width: 800px) {
176 body > main {
177 margin-left: 1rem;
178 margin-right: 1rem;
179 }
180}
181
182@media (prefers-color-scheme: dark) {
183 body, input, textarea {
184 background: hsl(var(--primary-hue) 1% 17%);
185 color: hsl(0 0 var(--light-gray));
186 }
187
188 header {
189 background: hsl(var(--secondary-hue) 1% 12%);
190 }
191
192 b {
193 color: hsl(var(--secondary-hue) var(--saturation) 75%);
194 }
195}
196
197.snac-origin {
198 font-size: 85%;
199}
200
201.snac-score {
202 float: right;
203 font-size: 85%;
204}
205
206.snac-top-user {
207 text-align: center;
208 padding-bottom: 2em;
209}
210
211.snac-top-user-name {
212 font-size: 200%;
213}
214
215.snac-top-user-id {
216 font-size: 150%
217}
218
219.snac-announcement {
220 border: black 1px solid;
221 padding: 0.5em;
222}
223
224.snac-avatar {
225 float: left;
226 /* TODO: Maybe max-height & max-width 2.5em? */
227 height: 2.5em;
228 padding: 0.25em;
229}
230
231.snac-author {
232 font-size: 90%;
233 text-decoration: none;
234}
235
236.snac-author-tag {
237 font-size: 80%;
238}
239
240.snac-pubdate {
241 color: hsl(0 0 var(--dark-gray));
242 font-size: 90%;
243}
244
245.snac-top-controls {
246 padding-bottom: 1.5em;
247}
248
249.snac-post {
250 border-top: 1px solid #a0a0a0;
251 padding-top: 0.5em;
252 padding-bottom: 0.5em;
253}
254
255.snac-children {
256 padding-left: 1em;
257 border-left: 1px solid #a0a0a0;
258}
259
17.snac-thread-cont { border-top: 1px dashed #a0a0a0; } 260.snac-thread-cont { border-top: 1px dashed #a0a0a0; }
18.snac-textarea { font-family: inherit; width: 100% } 261
19.snac-history { border: 1px solid #606060; border-radius: 3px; margin: 2.5em 0; padding: 0 2em } 262.snac-textarea {
20.snac-btn-mute { float: right; margin-left: 0.5em } 263 width: 100%;
21.snac-btn-unmute { float: right; margin-left: 0.5em } 264}
22.snac-btn-follow { float: right; margin-left: 0.5em } 265
23.snac-btn-unfollow { float: right; margin-left: 0.5em } 266.snac-history {
24.snac-btn-hide { float: right; margin-left: 0.5em } 267 border: 1px solid #606060;
25.snac-btn-delete { float: right; margin-left: 0.5em } 268 border-radius: 3px;
26.snac-btn-limit { float: right; margin-left: 0.5em } 269 margin: 2.5em 0;
27.snac-btn-unlimit { float: right; margin-left: 0.5em } 270 padding: 0 2em;
28.snac-footer { margin-top: 2em; font-size: 75% } 271}
29.snac-poll-result { margin-left: auto; margin-right: auto; } 272
30.snac-list-of-lists { padding-left: 0; } 273.snac-btn-mute {
31.snac-list-of-lists li { display: inline; border: 1px solid #a0a0a0; border-radius: 25px; 274 float: right;
32 margin-right: 0.5em; padding-left: 0.5em; padding-right: 0.5em; } 275 margin-left: 0.5em;
33.snac-no-more-unseen-posts { border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; padding: 0.5em 0; margin: 1em 0; } 276}
34@media (prefers-color-scheme: dark) { 277
35 body, input, textarea { background-color: #000; color: #fff; } 278.snac-btn-unmute {
36 a { color: #7799dd } 279 float: right;
37 a:visited { color: #aa99dd } 280 margin-left: 0.5em;
281}
282
283.snac-btn-follow {
284 float: right;
285 margin-left: 0.5em;
286}
287
288.snac-btn-unfollow {
289 float: right;
290 margin-left: 0.5em;
291}
292
293.snac-btn-hide {
294 float: right;
295 margin-left: 0.5em;
296}
297
298.snac-btn-delete {
299 float: right;
300 margin-left: 0.5em;
301}
302
303.snac-btn-limit {
304 float: right;
305 margin-left: 0.5em;
306}
307
308.snac-btn-unlimit {
309 float: right;
310 margin-left: 0.5em;
311}
312
313.snac-footer {
314 margin-top: 2em;
315 font-size: 75%;
316}
317
318.snac-poll-result {
319 margin-left: auto;
320 margin-right: auto;
321}
322
323.snac-list-of-lists {
324 padding-left: 0;
325}
326
327.snac-list-of-lists li {
328 display: inline;
329 border: 1px solid #a0a0a0;
330 border-radius: 4px;
331 margin-right: 0.5em;
332 padding-left: 0.5em;
333 padding-right: 0.5em;
334}
335
336.snac-no-more-unseen-posts {
337 border-top: 1px solid #a0a0a0;
338 border-bottom: 1px solid #a0a0a0;
339 padding: 0.5em 0;
340 margin: 1em 0;
38} 341}
HIC SVNT DRACONES