Eric Bower
·
17 Apr 23
main.css
1:root[data-theme='theme-light'] {
2 --primary-color: #eee;
3 --highlight-color: #0000ee;
4 --highlight-secondary: #551a8b;
5 --text-color: #080808;
6 --bg-color: #ffffff;
7}
8
9:root[data-theme='theme-dark'] {
10 --primary-color: #414558;
11 --highlight-color: #8be9fd;
12 --highlight-secondary: #bd93f9;
13 --text-color: #f2f2f2;
14 --bg-color: #282a36;
15 --yellow: #ffff80;
16 --pink: #ff80bf;
17 --orange: #ffca80;
18 --green: #50fa7b;
19}
20
21.green {
22 background-color: var(--green);
23}
24
25.yellow {
26 background-color: var(--yellow);
27}
28
29.pink {
30 background-color: var(--pink);
31}
32
33.orange {
34 background-color: var(--orange);
35}
36
37.purple {
38 background-color: var(--highlight-secondary);
39}
40
41.flex {
42 display: flex;
43}
44
45html {
46 overflow-x: hidden;
47}
48
49body {
50 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
51 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
52 background-color: var(--bg-color);
53 color: var(--text-color);
54 width: 100%;
55 height: 100%;
56 font-size: 16px;
57 padding: 0;
58 margin: 0;
59 overflow-x: hidden;
60}
61
62a {
63 color: var(--highlight-color);
64}
65
66a:visited {
67 color: var(--highlight-secondary);
68}
69
70h1,h2,h3,h4,h5,h6 {
71 margin: 0;
72 padding: 0;
73}
74
75pre {
76 padding: 15px;
77 background-color: var(--primary-color);
78 border-radius: 3px;
79 overflow-x: auto;
80}
81
82code {
83 background-color: var(--primary-color);
84}
85
86input {
87 border: 0;
88 outline: none !important;
89 background-color: var(--bg-color);
90 color: var(--highlight-color);
91 border-bottom: 1px solid var(--highlight-color);
92 font-size: 1.5rem;
93 border-radius: 0;
94}
95
96input:focus {
97 border: 0;
98 border-bottom: 1px solid var(--highlight-secondary);
99 color: var(--highlight-secondary);
100}
101
102button {
103 padding: 10px 15px;
104 margin: 0 10px;
105 background-color: var(--highlight-color);
106 color: var(--primary-color);
107 cursor: pointer;
108 outline: 0;
109 border: 1px solid var(--primary-color);
110 border-radius: 3px;
111}
112
113button:disabled {
114 cursor: default;
115 background-color: var(--primary-color);
116}
117
118button:hover:enabled {
119 background-color: var(--highlight-secondary);
120}
121
122img {
123 max-width: 100%;
124 height: auto;
125}
126
127.hidden {
128 display: none !important;
129}
130
131.active {
132 color: var(--pink) !important;
133}
134
135/* index */
136.tagline {
137 grid-row: 1;
138 grid-column: 1;
139}
140
141.search_view {
142 grid-column: 2;
143 grid-row: 1;
144 position: relative;
145}
146
147.rightbar {
148 grid-row: 1 / 3;
149 grid-column: 3;
150 margin-bottom: 5px;
151 display: flex;
152 flex-direction: column;
153}
154
155.ad {
156 margin: 10px 0;
157 padding: 10px;
158 border: 1px solid var(--text-color);
159}
160
161.search_icon {
162 position: absolute;
163 top: 12px;
164 left: 0;
165}
166
167#app {
168 display: flex;
169 justify-content: center;
170}
171
172#app_content {
173 max-width: 100%;
174 height: 100%;
175}
176
177.search_clear_icon {
178 position: absolute;
179 top: 15px;
180 right: 0;
181 cursor: pointer;
182}
183
184#search {
185 width: 100%;
186 height: 47px;
187 padding-left: 30px;
188 padding-right: 30px;
189}
190
191.search_results {
192 font-size: 12px;
193 margin: 0;
194 margin-top: 5px;
195 margin-bottom: 5px;
196}
197
198.search_container {
199 display: grid;
200 height: calc(100% - 65px);
201 grid-template-columns: minmax(250px, 400px) minmax(350px, 600px) 300px;
202 grid-template-rows: 50px 1fr;
203 column-gap: 10px;
204 margin: 0 25px;
205}
206
207.sidebar {
208 grid-column: 1;
209 grid-row: 2;
210}
211
212.plugins {
213 grid-column: 2;
214 grid-row: 2;
215}
216
217.plugins_container {
218 width: 100%;
219}
220
221@media only screen and (max-width: 700px) {
222 .search_container {
223 grid-template-columns: 100%;
224 margin: 0 15px;
225 }
226
227 .sidebar {
228 display: none;
229 }
230
231 .rightbar {
232 display: none;
233 }
234
235 .search_view {
236 grid-column: 1;
237 }
238
239 .plugins {
240 grid-column: 1;
241 }
242}
243
244/* nav */
245.nav {
246 display: flex;
247 justify-content: space-between;
248 align-items: center;
249 padding: 0 25px 15px 25px;
250 overflow: hidden;
251}
252
253.links {
254 display: flex;
255 justify-content: space-between;
256 width: 200px;
257}
258
259.link {
260 font-size: 20px;
261 text-decoration: none;
262 color: var(--text-color);
263}
264
265.link:hover {
266 color: var(--highlight-color);
267 text-decoration: underline;
268}
269
270.menu-overlay {
271 position: fixed;
272 top: 0;
273 left: 0;
274 width: 100vw;
275 height: 100vh;
276 background-color: rgba(0, 0, 0, 0.6);
277 z-index: 1;
278}
279
280.menu-container {
281 display: none;
282}
283
284.menu {
285 position: fixed;
286 top: 0;
287 right: 0;
288 width: 80vw;
289 height: 100vh;
290 flex-direction: column;
291 align-items: end;
292 background-color: var(--bg-color);
293 z-index: 1;
294 padding: 0 15px;
295 padding-top: 0;
296 border-left: 1px solid var(--primary-color);
297}
298
299.menu-header {
300 display: flex;
301 justify-content: space-between;
302 align-items: center;
303}
304
305.menu-body {
306 display: flex;
307 flex-direction: column;
308}
309
310.menu-body a {
311 margin: 10px 0;
312}
313
314.menu-btn {
315 display: none;
316 cursor: pointer;
317 width: 24px;
318 height: 24px;
319}
320
321.logo {
322 display: flex;
323 align-items: center;
324}
325
326.gh {
327 margin-left: 15px;
328}
329
330.logo-header {
331 text-decoration: none;
332 color: var(--text-color);
333 margin-right: 10px;
334}
335
336.logo-header:visited {
337 color: var(--text-color);
338}
339
340@media only screen and (max-width: 700px) {
341 .nav {
342 padding: 0 15px;
343 }
344
345 .links {
346 display: none;
347 }
348
349 .link {
350 margin: 10px 0;
351 }
352
353 .menu-btn {
354 display: block;
355 }
356
357 .menu-container {
358 display: flex;
359 justify-content: center;
360 align-items: center;
361 }
362}
363
364/* plugin item */
365.container {
366 display: flex;
367 flex-direction: column;
368 padding: 15px 0;
369 min-height: 170px;
370 width: 100%;
371 border-bottom: 1px solid var(--primary-color);
372}
373
374.date {
375 font-size: 12px;
376}
377
378.header {
379 display: flex;
380 align-items: center;
381 margin-bottom: 5px;
382}
383
384.desc {
385 margin-top: 8px;
386}
387
388.item_header {
389 flex: 1;
390 display: flex;
391 align-items: center;
392}
393
394.metrics {
395 font-size: 12px;
396 width: 175px;
397 min-width: 175px;
398 display: flex;
399 justify-content: space-between;
400}
401
402.metric-item {
403 display: flex;
404 justify-content: center;
405 align-items: center;
406 cursor: pointer;
407}
408
409.tags {
410 margin-top: 5px;
411}
412
413/* tag item */
414.tag {
415 padding: 5px;
416 margin: 5px 5px 5px 0;
417 border: 1px solid black;
418 white-space: pre-wrap;
419 word-break: break-word;
420 display: inline-block;
421 cursor: pointer;
422 color: var(--primary-color);
423 font-size: 0.8rem;
424}
425
426.tag:hover {
427 background-color: var(--highlight-color);
428}
429
430/* icon */
431.icon {
432 width: 24px;
433 height: 24px;
434 margin-right: 5px;
435}
436
437/* about page */
438.about_container {
439 display: flex;
440 justify-content: center;
441}
442
443.about_view {
444 width: 600px;
445}
446
447.intro {
448 display: flex;
449 align-items: center;
450 justify-content: center;
451 margin-bottom: 8px;
452}
453
454.blurb {
455 margin-right: 8px;
456}
457
458.profile {
459 border-radius: 9999px;
460 width: 100px;
461 height: 100px;
462}
463
464@media only screen and (max-width: 700px) {
465 .about_container {
466 padding: 0 15px;
467 }
468}
469
470/* plugin page */
471.plugin_container {
472 display: flex;
473 justify-content: center;
474 width: 100%;
475}
476
477.view {
478 max-width: 800px;
479 width: 95%;
480 padding: 0 10px 30px 10px;
481}
482
483.header {
484 display: flex;
485 align-items: center;
486}
487
488.header > a {
489 margin-left: 15px;
490 display: flex;
491 align-items: center;
492}
493
494/* plugin view */
495.timestamps {
496 display: flex;
497 justify-content: space-between;
498 background-color: var(--primary-color);
499 padding: 15px;
500 margin: 15px 0;
501}
502
503.ts_header {
504 margin-bottom: 10px;
505}
506
507.meta {
508 margin-bottom: 20px;
509}
510
511.metrics_view {
512 display: flex;
513 justify-content: space-between;
514}
515
516.metric {
517 display: flex;
518 align-items: center;
519 cursor: pointer;
520}
521
522.tags_view {
523 margin-bottom: 10px;
524}