diff options
Diffstat (limited to 'website/static/css')
-rw-r--r-- | website/static/css/code.css | 33 | ||||
-rw-r--r-- | website/static/css/main.css | 321 |
2 files changed, 354 insertions, 0 deletions
diff --git a/website/static/css/code.css b/website/static/css/code.css new file mode 100644 index 0000000..c308845 --- /dev/null +++ b/website/static/css/code.css | |||
@@ -0,0 +1,33 @@ | |||
1 | /* Syntax highlighting code, by David Thompson, borrowed | ||
2 | from: | ||
3 | https://git.dthompson.us/blog.git/blob_plain/refs/heads/haunt-migration:/css/dthompson.css | ||
4 | David Thompson gives permission for this to be GPLv3+ and CC BY-SA 4.0 | ||
5 | |||
6 | Modified significantly since. | ||
7 | */ | ||
8 | |||
9 | |||
10 | .syntax-special, .syntax-element { | ||
11 | color: #856; | ||
12 | font-weight: bold; | ||
13 | } | ||
14 | |||
15 | .syntax-symbol { | ||
16 | color: #423; | ||
17 | } | ||
18 | |||
19 | .syntax-string { | ||
20 | color: #484; | ||
21 | } | ||
22 | |||
23 | .syntax-keyword, .syntax-attribute { | ||
24 | color: #921; | ||
25 | } | ||
26 | |||
27 | .syntax-comment { | ||
28 | color: #666; | ||
29 | } | ||
30 | |||
31 | .syntax-open, .syntax-close { | ||
32 | color: #688; | ||
33 | } | ||
diff --git a/website/static/css/main.css b/website/static/css/main.css new file mode 100644 index 0000000..16f4836 --- /dev/null +++ b/website/static/css/main.css | |||
@@ -0,0 +1,321 @@ | |||
1 | @import url("code.css"); | ||
2 | |||
3 | @font-face { | ||
4 | font-family: 'Roboto'; | ||
5 | src: url('/static/fonts/Roboto-Light.ttf') format('truetype'); | ||
6 | font-weight: normal; | ||
7 | font-style: normal; | ||
8 | } | ||
9 | |||
10 | @font-face { | ||
11 | font-family: 'Roboto-Italic'; | ||
12 | src: url('/static/fonts/Roboto-LightItalic.ttf') format('truetype'); | ||
13 | font-weight: normal; | ||
14 | font-style: italic; | ||
15 | } | ||
16 | |||
17 | @font-face { | ||
18 | font-family: 'Roboto-Bold'; | ||
19 | src: url('/static/fonts/Roboto-Bold.ttf') format('truetype'); | ||
20 | font-weight: normal; | ||
21 | font-style: bold; | ||
22 | } | ||
23 | |||
24 | @font-face { | ||
25 | font-family: 'FiraMono'; | ||
26 | src: url('/static/fonts/FiraMono-Regular.ttf') format('truetype'); | ||
27 | font-weight: normal; | ||
28 | font-style: bold; | ||
29 | } | ||
30 | |||
31 | @media all {html {font-size: 20px;}} | ||
32 | @media all and (max-width:1260px){html {font-size: 20px;}} | ||
33 | @media all and (max-width:1000px){html {font-size: 20px;}} | ||
34 | @media all and (max-width:960px){html {font-size: 19px;}} | ||
35 | @media all and (max-width:920px){html {font-size: 18px;}} | ||
36 | @media all and (max-width:880px){html {font-size: 17px;}} | ||
37 | @media all and (max-width:840px){html {font-size: 16px;}} | ||
38 | @media all and (max-width:800px){html {font-size: 16px;}} | ||
39 | @media all and (max-width:760px){html {font-size: 16px;}} | ||
40 | |||
41 | /*#ffbf2d*/ | ||
42 | |||
43 | body,html { | ||
44 | background-color: #fff; | ||
45 | width: 100%; | ||
46 | height: 100%; | ||
47 | line-height: 1.6em; | ||
48 | padding: 0px; | ||
49 | margin: 0px; | ||
50 | font-family: 'Roboto', sans-serif; | ||
51 | } | ||
52 | |||
53 | pre { | ||
54 | border-style: none; | ||
55 | border-radius: 0.3em; | ||
56 | background-color: #f2efe4; | ||
57 | border-width: thin; | ||
58 | color: #423; | ||
59 | font-size: 0.9em; | ||
60 | padding: 10px; | ||
61 | text-align: left; | ||
62 | font-family: fixed-width; | ||
63 | overflow-x: auto; | ||
64 | margin-bottom: 0.8rem; | ||
65 | } | ||
66 | |||
67 | code { | ||
68 | font-family: 'FiraMono', monospace; | ||
69 | border-radius: 0.3em; | ||
70 | } | ||
71 | |||
72 | /* Arrange to have between 40 and 70 characters per line. */ | ||
73 | |||
74 | .width-control { | ||
75 | max-width: 800px; | ||
76 | width: 65%; | ||
77 | } | ||
78 | |||
79 | @media all and (max-width: 760px) { .width-control { width: 90%; } }; | ||
80 | |||
81 | p { | ||
82 | max-width: 70rem; | ||
83 | margin-bottom: 0; | ||
84 | } | ||
85 | |||
86 | p + p { | ||
87 | /*text-indent: 0.5rem;*/ | ||
88 | margin-top: 1.0rem; | ||
89 | } | ||
90 | |||
91 | #header { | ||
92 | background: #fff; | ||
93 | height: 90px; | ||
94 | width: 100%; | ||
95 | box-shadow: 0 3px 8px #ccc; | ||
96 | } | ||
97 | |||
98 | #header .logo { | ||
99 | padding: 10px; | ||
100 | display: block; | ||
101 | } | ||
102 | |||
103 | #header .baseline { | ||
104 | color: #073b4c; | ||
105 | font-size: 16px; | ||
106 | font-family: 'Roboto', sans-serif; | ||
107 | font-weight: bold; | ||
108 | display: none; /* overridden below */ | ||
109 | padding: 10px; | ||
110 | padding-top: 2px; | ||
111 | } | ||
112 | |||
113 | #header .members { | ||
114 | float: right; | ||
115 | } | ||
116 | |||
117 | @media screen and (min-width: 640px) { | ||
118 | #header .baseline { | ||
119 | display: block; | ||
120 | } | ||
121 | #header { | ||
122 | height: 110px; | ||
123 | } | ||
124 | } | ||
125 | |||
126 | #header.frontpage { | ||
127 | height: auto; | ||
128 | margin-bottom: 1em; | ||
129 | text-align: center; | ||
130 | padding-top: 2rem; | ||
131 | padding-bottom: 1rem; | ||
132 | } | ||
133 | |||
134 | #header.frontpage .logo { | ||
135 | padding: 0; | ||
136 | margin: 0 auto; | ||
137 | max-width: 100%; | ||
138 | } | ||
139 | |||
140 | #header.frontpage .baseline { | ||
141 | padding-top: 1rem; | ||
142 | } | ||
143 | |||
144 | #menubar { | ||
145 | margin: auto; | ||
146 | padding: 0px; | ||
147 | clear: both; | ||
148 | } | ||
149 | |||
150 | #header-inner { | ||
151 | margin: auto; | ||
152 | padding: 0px; | ||
153 | } | ||
154 | |||
155 | |||
156 | .latest-news { | ||
157 | margin-top: 20px; | ||
158 | padding-top: 0px; | ||
159 | padding-bottom: 0px; | ||
160 | padding-left: 10pt; | ||
161 | border-left: solid 10px #ffbf2d; | ||
162 | color: #533; | ||
163 | } | ||
164 | |||
165 | .news-brief { | ||
166 | } | ||
167 | |||
168 | #collaboration { | ||
169 | border-top: solid 4px #aaaaaa; | ||
170 | border-bottom: solid 4px #aaaaaa; | ||
171 | background: #ffffff; | ||
172 | width: 100%; | ||
173 | bottom: 0px; | ||
174 | } | ||
175 | #collaboration-inner { margin: 10px auto 10px auto; } | ||
176 | #collaboration .members { text-align: center; } | ||
177 | #collaboration p { padding: 0px 10px 0px 10px; } | ||
178 | #collaboration .members ul { display: inline-block; padding: 0px; margin: 0px; } | ||
179 | #collaboration .members li { | ||
180 | display: inline-block; padding: 0px 10px; 0px 0px; | ||
181 | vertical-align: middle; | ||
182 | } | ||
183 | |||
184 | .post { | ||
185 | background: #ffffff; | ||
186 | padding: 10px; | ||
187 | margin-bottom: 25px; | ||
188 | } | ||
189 | |||
190 | hr { | ||
191 | height: 3px; | ||
192 | background: url('/static/images/h-separator-darker.png'); | ||
193 | background-repeat: no-repeat; | ||
194 | background-position: center; | ||
195 | width: 100%; | ||
196 | border: none; | ||
197 | } | ||
198 | |||
199 | .post h1 { color: #433; } | ||
200 | .post h2 { color: #433; padding: 0pt; font-size: 1.3rem; } | ||
201 | |||
202 | .post-about { | ||
203 | color: #4D4D4D; | ||
204 | font-size: 0.9em; | ||
205 | margin-top: -3em; | ||
206 | } | ||
207 | |||
208 | #menubar ul { display: inline-block; padding: 0px; margin: 0px; } | ||
209 | #menubar li { | ||
210 | display: inline-block; | ||
211 | color: #000000; | ||
212 | height: 32px; | ||
213 | line-height: 32px; | ||
214 | list-style-type: none; | ||
215 | margin: 0px; | ||
216 | margin: 0px 13px 0px 0px; | ||
217 | text-transform: uppercase; | ||
218 | text-decoration: none; | ||
219 | font-size: small; | ||
220 | } | ||
221 | |||
222 | #menubar li img { | ||
223 | vertical-align: middle; | ||
224 | } | ||
225 | |||
226 | #menubar ul:first-child { | ||
227 | padding-left: 10px; | ||
228 | } | ||
229 | |||
230 | #content { | ||
231 | margin: auto; | ||
232 | padding: 0px; | ||
233 | } | ||
234 | |||
235 | #content .search-field { | ||
236 | border: solid thin #aaaaaa; | ||
237 | width: 100%; | ||
238 | padding: 7px; | ||
239 | -webkit-border-radius: 5px; | ||
240 | -moz-border-radius: 5px; | ||
241 | border-radius: 5px; | ||
242 | } | ||
243 | |||
244 | #content table { | ||
245 | border-spacing: 0px; | ||
246 | padding: 0px; | ||
247 | } | ||
248 | |||
249 | #content table td { padding: 3px 5px 3px 5px; height: 25px; } | ||
250 | |||
251 | #packages-table-wrapper { | ||
252 | font-size: 16px; | ||
253 | } | ||
254 | |||
255 | #stand-by { | ||
256 | background: #decd87; | ||
257 | -webkit-border-radius: 5px; | ||
258 | -moz-border-radius: 5px; | ||
259 | border-radius: 5px; | ||
260 | font-size: 16px; | ||
261 | } | ||
262 | |||
263 | #stand-by p { padding: 7px } | ||
264 | |||
265 | #footer-box { | ||
266 | width: 100%; | ||
267 | margin: auto; | ||
268 | text-align: center; | ||
269 | color: #333333; | ||
270 | font-size: 0.8rem; | ||
271 | } | ||
272 | |||
273 | #footer-box p { | ||
274 | max-width: 100%; | ||
275 | text-align: center; | ||
276 | } | ||
277 | |||
278 | h1 { | ||
279 | clear: both; | ||
280 | line-height: 125%; | ||
281 | margin-top: 1.3rem; | ||
282 | margin-bottom: .3rem; | ||
283 | padding: 0px; | ||
284 | display: block; | ||
285 | font-size: 1.6rem; | ||
286 | font-weight: 800; | ||
287 | } | ||
288 | |||
289 | h1:first-child { | ||
290 | font-size: 1.8rem; | ||
291 | margin-bottom: 3rem; | ||
292 | margin-top: 0; | ||
293 | } | ||
294 | |||
295 | .title a { border: none; } | ||
296 | a { | ||
297 | color: #000000; | ||
298 | outline: none; | ||
299 | border-style: none none solid none; | ||
300 | border-width: 2px; | ||
301 | border-color: #ef476f; | ||
302 | text-decoration: none; | ||
303 | } | ||
304 | a:visited { | ||
305 | color: #433; | ||
306 | border-color: #06d6a0; | ||
307 | border-style: none none solid none; | ||
308 | border-width: 2px; | ||
309 | text-decoration: none; | ||
310 | } | ||
311 | a img { outline : none; } | ||
312 | img { border: none; } | ||
313 | |||
314 | audio, video, .full-width { | ||
315 | display: block; | ||
316 | margin: 50px auto; | ||
317 | max-width: 100%; | ||
318 | } | ||
319 | |||
320 | #footer-box a { color: #333333; } | ||
321 | #footer-box a:visited { color: #333333; } | ||