]> Git in Space - website/blob - www/style.css
aa7447ba5f69006214fedd81fbda29305b690878
[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 margin : auto ;
80 height : auto ;
81 min-width : 80ch ;
82 width : 160ch ;
83 max-width : 100% ;
84 }
85
86 iframe {
87 border : none ;
88 width : 100% ;
89 height : 80ch ;
90 }