summaryrefslogtreecommitdiffstats
path: root/static/css
diff options
context:
space:
mode:
authorLudovic Courtès <ludo@gnu.org>2021-04-10 15:48:17 +0200
committerLudovic Courtès <ludo@gnu.org>2021-04-10 15:48:45 +0200
commit847a68fda79657fcc9ade4920c330858f8ffa070 (patch)
tree8e0c13d16964b459471d511f2cbb7db3b1587105 /static/css
Add skeleton of a Haunt web site.
Diffstat (limited to '')
-rw-r--r--static/css/code.css33
-rw-r--r--static/css/main.css321
2 files changed, 354 insertions, 0 deletions
diff --git a/static/css/code.css b/static/css/code.css
new file mode 100644
index 0000000..c308845
--- /dev/null
+++ b/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/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..16f4836
--- /dev/null
+++ b/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
43body,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
53pre {
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
67code {
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
81p {
82 max-width: 70rem;
83 margin-bottom: 0;
84}
85
86p + 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
190hr {
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
278h1 {
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
289h1:first-child {
290 font-size: 1.8rem;
291 margin-bottom: 3rem;
292 margin-top: 0;
293}
294
295.title a { border: none; }
296a {
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}
304a:visited {
305 color: #433;
306 border-color: #06d6a0;
307 border-style: none none solid none;
308 border-width: 2px;
309 text-decoration: none;
310}
311a img { outline : none; }
312img { border: none; }
313
314audio, 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; }