]> Git in Space - website/blob - www/style.css
Update fedi link and livestreaming page
[website] / www / style.css
1 @font-face { font-family : ComicMono ; src : url( 'ComicMono.ttf' ) ; }
2 @font-face {
3 font-family : ComicMono ;
4 font-weight : bold ;
5 src : url( 'ComicMono-Bold.ttf' ) ;
6 }
7
8 @media ( prefers-color-scheme : dark ) {
9 :root {
10 --b : #000 ;
11 --f : #f1ebeb ;
12 }
13 }
14
15 @media ( prefers-color-scheme : light ) {
16 :root {
17 --b : #f1ebeb ;
18 --f : #000 ;
19 }
20 }
21
22 body {
23 margin : 0 ;
24 padding : 0 ;
25 }
26
27 #theme {
28 position : absolute ;
29 left : -9999px ;
30 }
31
32 #theme ~ #content , #theme ~ #content * {
33 background-color : var( --b ) ;
34 color : var( --f ) ;
35 scrollbar-color : var( --f ) var( --b ) ;
36 }
37
38 #theme:checked ~ #content , #theme:checked ~ #content * {
39 background-color : var( --f ) ;
40 color : var( --b ) ;
41 scrollbar-color : var( --b ) var( --f ) ;
42 }
43
44 #content {
45 overflow : scroll ;
46 height : 100vh ;
47 }
48
49 #toggle {
50 text-decoration : underline ;
51 color : #55bcce !important ;
52 cursor : pointer ;
53 }
54
55 #toggle:hover { color : #66d9ee !important ; }
56
57 @media screen and ( max-width : 82ch ) {
58 pre { font-size : 2.2vw ; }
59 }
60
61 * { scrollbar-width : thin ; }
62
63 pre {
64 width : 80ch ;
65 max-width : 100% ;
66 margin : auto ;
67 padding : 1ch 0 ;
68 font-family : ComicMono , monospace ;
69 overflow : hidden ;
70 }
71
72 a { color : #55bcce !important ; }
73 a:hover { color : #66d9ee !important ; }
74 a:visited { color : #9358fe !important ; }
75 a:visited:hover { color : #ae82ff !important ; }
76
77 video {
78 display : block ;
79 height : auto ;
80 min-width : 80ch ;
81 width : 160ch ;
82 max-width : 100% ;
83 }
84
85 iframe {
86 display : block ;
87 border : none ;
88 width : 350px ;
89 max-width : 100% ;
90 height : 80ch ;
91 overflow : hidden ;
92 }
93
94 #vid {
95 display : flex ;
96 margin : auto ;
97 max-width : 100% ;
98 justify-content : center ;
99 }
100
101 @media screen and ( max-width : 850px ) {
102 #vid { flex-wrap : wrap ; }
103 iframe {
104 width : 100% ;
105 height : 40ch ;
106 }
107 }