]>
Commit | Line | Data |
---|---|---|
1 | @charset "utf-8"; | |
2 | ||
3 | /* Variables for light & dark modes. */ | |
4 | ||
5 | :root { | |
6 | --nano-content-bg-color: #fff; | |
7 | --nano-content-fg-color: #440077; | |
8 | --nano-inverted-bg-color: #407; | |
9 | --nano-inverted-fg-color: #fff; | |
10 | --nano-a-color: #407; | |
11 | --nano-a-visited-color: #51188E; | |
12 | --nano-a-active-color: #F00; | |
13 | --nano-a-inverted-color: #fff; | |
14 | } | |
15 | ||
16 | @media (prefers-color-scheme: dark) { | |
17 | :root { | |
18 | --nano-content-bg-color: #111; | |
19 | --nano-content-fg-color: #cc88ff; | |
20 | --nano-inverted-bg-color: #9200ff; | |
21 | --nano-inverted-fg-color: #fff; | |
22 | --nano-a-color: #c8f; | |
23 | --nano-a-visited-color: #b7f; | |
24 | --nano-a-active-color: #F00; | |
25 | --nano-a-inverted-color: #fff; | |
26 | } | |
27 | } | |
28 | ||
29 | body { | |
30 | color: var(--nano-content-fg-color); | |
31 | background-color: var(--nano-content-bg-color); | |
32 | } | |
33 | .inverted { | |
34 | color: var(--nano-inverted-fg-color); | |
35 | background-color: var(--nano-inverted-bg-color); | |
36 | } | |
37 | ||
38 | a { | |
39 | color: var(--nano-a-color); | |
40 | } | |
41 | a:visited { | |
42 | color: var(--nano-a-visited-color); | |
43 | } | |
44 | a:active { | |
45 | color: var(--nano-a-active-color); | |
46 | } | |
47 | ||
48 | .inverted a { | |
49 | color: var(--nano-a-inverted-color); | |
50 | } | |
51 | ||
52 | * { | |
53 | box-sizing: border-box; | |
54 | } | |
55 | ||
56 | .onecolumn { | |
57 | float: left; | |
58 | width: 45%; | |
59 | padding: 5%; | |
60 | } | |
61 | ||
62 | table { | |
63 | border-spacing: 0px; | |
64 | border-collapse: separate; | |
65 | } | |
66 | ||
67 | table#homepage { | |
68 | padding-top: 3em; | |
69 | padding-bottom: 3em; | |
70 | } | |
71 | ||
72 | table#top td, | |
73 | div#bottom .indented { | |
74 | padding-left: 1ch; | |
75 | padding-right: 1ch; | |
76 | } | |
77 | ||
78 | table#docs, | |
79 | table#download { | |
80 | width: 80%; | |
81 | } | |
82 | ||
83 | div#bottom { | |
84 | display: flex; | |
85 | flex-wrap: wrap; | |
86 | } | |
87 | div#bottom span.menuitem { | |
88 | flex-basis: 25%; | |
89 | flex-grow: 1; | |
90 | flex-shrink: 0; | |
91 | line-height: 1em; | |
92 | white-space: nowrap; | |
93 | } | |
94 | ||
95 | /* Mobile (i.e. phones) */ | |
96 | @media only screen and (max-width: 768px) { | |
97 | body { | |
98 | margin: 0px; | |
99 | } | |
100 | ||
101 | blockquote { | |
102 | margin: 1em 0 1em 0; | |
103 | } | |
104 | ||
105 | table#homepage { | |
106 | font-size: x-small; | |
107 | } | |
108 | ||
109 | table#top td, | |
110 | div#bottom .indented { | |
111 | padding-left: 0.5ch; | |
112 | padding-right: 0.5ch; | |
113 | } | |
114 | ||
115 | div#bottom span.menuitem { | |
116 | font-size: large; | |
117 | line-height: inherit; | |
118 | } | |
119 | ||
120 | table#docs, | |
121 | table#download { | |
122 | width: 100%; | |
123 | } | |
124 | ||
125 | #screenshots ul { | |
126 | padding-left: 0; | |
127 | } | |
128 | } | |
129 | ||
130 | @media only screen and (max-width: 600px) { | |
131 | div#bottom span.menuitem { | |
132 | flex-basis: 50%; | |
133 | line-height: 1.5em; | |
134 | } | |
135 | } |