Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
freebsd
GitHub Repository: freebsd/freebsd-doc
Path: blob/main/website/themes/beastie/static/css/layout.css
18096 views
1
/*
2
* FreeBSD.org - Layout Styles
3
*
4
* $FreeBSD$
5
*/
6
7
/* Container Definitions */
8
9
/* Page Container */
10
11
#container {
12
margin: 0em auto;
13
width: 90%;
14
max-width: 1600px;
15
text-align: left; /* Win IE5 */
16
}
17
18
/* Header */
19
header {
20
display: flex;
21
flex-direction: row;
22
height: 75px;
23
}
24
25
#headerlogoright {
26
display: flex;
27
flex-direction: column;
28
margin-left: auto;
29
align-items: center;
30
justify-content: center;
31
}
32
33
/* Search */
34
35
@media screen {
36
#search {
37
text-align: right;
38
padding: 0;
39
color: #666;
40
}
41
42
#search form {
43
margin: 0; /* need for IE Mac */
44
text-align: right; /* need for IE Mac */
45
white-space: nowrap; /* for Opera */
46
}
47
48
#search form label {
49
color: #666;
50
}
51
52
#search form #submit {
53
background: transparent;
54
color: #fff;
55
border-right: 1px solid #DADADA;
56
border-bottom: 1px solid #DADADA;
57
border-top: 1px solid #DADADA;
58
border-left: 1px solid #DADADA;
59
padding: 1px 5px 1px 5px;
60
}
61
62
#search form #words {
63
width: 65%;
64
border: 1px solid #DADADA;
65
background: #FFFFFF;
66
color: #666;
67
padding: 2px 2px 2px 5px;
68
}
69
}
70
71
@media print {
72
#search { display: none; }
73
}
74
75
/* Mirror Select */
76
77
#mirror {
78
text-align: right;
79
padding: 0;
80
margin: 0;
81
margin-top: 6px;
82
color: #666;
83
}
84
85
#mirror form {
86
padding-top: 5px;
87
right: 0;
88
margin: 0; /* need for IE Mac */
89
text-align: right; /* need for IE Mac */
90
white-space: nowrap; /* for Opera */
91
}
92
93
#mirror form label {
94
color: #666;
95
font-size: 0.8em;
96
}
97
98
#mirror form select {
99
font-size: 0.8em;
100
}
101
102
#mirror form #mirrorsel {
103
font-size: 0.8em;
104
width: 150px;
105
border: 1px solid #DADADA;
106
background: #FFFFFF;
107
color: #666;
108
}
109
110
#mirror input {
111
font-size: 0.8em;
112
background: transparent;
113
color: #666;
114
border: 1px solid #DADADA;
115
}
116
117
/* Content */
118
119
#content {
120
clear: both;
121
display: block;
122
}
123
124
#frontcontainer {
125
width: 100%;
126
}
127
128
#frontfeaturecontainer {
129
clear: both;
130
}
131
132
#frontfeatureleft{
133
width: 30%;
134
margin: 0;
135
padding: 0;
136
float: left;
137
}
138
139
#frontfeatureleft h2 {
140
border: none;
141
margin-top: 0;
142
}
143
144
#frontfeatureleft p {
145
margin: 0 0 1em 0;
146
}
147
148
#frontfeaturecontent {
149
margin: 10px 10px 10px 13px;
150
}
151
152
#frontfeaturemiddle {
153
float: left;
154
margin-top: 20px;
155
background: url(../images/beastie.png) no-repeat center left;
156
min-height: 196px;
157
width: 30%;
158
}
159
160
#frontfeatureright {
161
position: relative;
162
border: 0px;
163
padding: 0px;
164
margin: 0px;
165
width: 30%;
166
float: right;
167
}
168
169
.center {
170
text-align: center;
171
}
172
173
.right {
174
display: block;
175
float: right;
176
}
177
178
.screen {
179
overflow: auto;
180
font-family: monospace;
181
padding: 1ex;
182
background-color: #edc;
183
border: 1px solid #ccc;
184
border-radius: 4px;
185
}
186
187
.screen pre, .programlisting pre {
188
margin: 0;
189
}
190
191
.programlisting {
192
overflow: auto;
193
font-family: monospace;
194
padding: 1ex;
195
background-color: #eee;
196
border: 1px solid #ccc;
197
border-radius: 4px;
198
}
199
200
.warning {
201
color: #9F1313;
202
background: #f8e8e8;
203
border: 1px solid #e59595;
204
width: 90%;
205
border-radius: 4px;
206
padding: 0 2ex;
207
margin: .75em 3em .75em 1em;
208
line-height: 1.3;
209
}
210
211
.note {
212
color: #222;
213
background: #eee;
214
border: 1px solid #ccc;
215
width: 90%;
216
border-radius: 4px;
217
padding: 0 2ex;
218
margin: .75em 3em .75em 1em;
219
line-height: 1.3;
220
}
221
222
.important {
223
font-style: italic;
224
border: 1px solid #a00;
225
border-left-color: rgb(170, 0, 0);
226
border-left-style: solid;
227
border-left-width: 1px;
228
border-left: 12px solid #c00;
229
width: 90%;
230
border-radius: 4px;
231
padding: 2ex;
232
margin: .75em 3em .75em 1em;
233
line-height: 1.3;
234
}
235
236
/* News/Events/Media/Security Box */
237
238
#frontnemscontainer {
239
width: 100%;
240
background: #eee;
241
display: inline;
242
float: left;
243
margin-top: 8px;
244
margin-bottom: 8px;
245
}
246
247
#frontnews {
248
width: 24%;
249
margin: 0;
250
padding: 0;
251
float: left;
252
}
253
254
#frontnewscontent {
255
margin: 17px 15px 24px 18px;
256
}
257
258
#frontevents {
259
width: 24%;
260
margin: 0;
261
padding: 0;
262
float: left;
263
}
264
265
#fronteventscontent {
266
margin: 17px 15px 24px 14px;
267
}
268
269
#frontmedia {
270
width: 24%;
271
margin: 0;
272
padding: 0;
273
float: left;
274
}
275
276
#frontmediacontent {
277
margin: 17px 15px 24px 14px;
278
}
279
280
#frontsecurity {
281
width: 24%;
282
margin: 0;
283
padding: 0;
284
float: left;
285
}
286
287
#frontsecuritycontent {
288
margin: 17px 15px 24px 14px;
289
}
290
291
/* No way to get equal columns in pure CSS - setting height is a temporary hack */
292
.frontseparator {
293
width: 0.5%;
294
height: 500px;
295
margin: 0;
296
padding: 0;
297
background-color: #fff;
298
float: left;
299
}
300
301
.newseventswrap {
302
padding-left: 5px;
303
}
304
305
.newseventslist {
306
list-style: none;
307
margin: 0;
308
padding: 0;
309
display: inline;
310
}
311
312
.newseventslist img.rssimage {
313
display: inline;
314
border: 0;
315
vertical-align: bottom;
316
}
317
318
.newseventslist li {
319
padding: 0 0.3em 0 0.5em;
320
display: inline;
321
border-right: 1px solid #B6B6B6;
322
}
323
324
.newseventslist li a {
325
}
326
327
.newseventslist li.last-child {
328
border-right: 0;
329
padding-right: 0;
330
display: inline-block;
331
line-height: 0.9em;
332
}
333
334
.newseventslist li.first-child {
335
margin: 0;
336
padding-left: 12px;
337
background-image: url(../images/blt_red_arrow.png);
338
background-repeat: no-repeat;
339
background-position: 0px 0.5em;
340
}
341
342
.newseventslist li.only-child {
343
border-right: 0;
344
padding-left: 0;
345
}
346
347
/* Shortcuts */
348
349
#frontshortcuts {
350
margin: 0;
351
padding: 0;
352
color: #666;
353
}
354
355
#frontshortcutscontent {
356
float: right;
357
margin: 0;
358
padding: 0;
359
padding-left: 15px;
360
padding-top: 20px;
361
}
362
363
#frontshortcutslist {
364
margin: 0;
365
padding: 0;
366
margin-left: 5px;
367
margin-top: 5px;
368
list-style: none;
369
}
370
371
#frontshortcutslist li {
372
margin: 0;
373
padding-left: 12px;
374
background-image: url(../images/blt_red_arrow.png);
375
background-repeat: no-repeat;
376
background-position: 0px 0.5em;
377
}
378
379
/* Latest Releases */
380
381
#frontreleases {
382
padding: 0;
383
margin: 8px;
384
margin-left: 210px;
385
margin-top: 5px;
386
padding-bottom: 20px;
387
color: #666;
388
width: 85%;
389
}
390
391
#frontreleasescontent {
392
margin: 0;
393
padding: 0;
394
}
395
396
#frontreleaseslist {
397
margin: 0;
398
padding: 0;
399
margin-left: 5px;
400
margin-top: 5px;
401
list-style: none;
402
}
403
404
#frontreleaseslist li {
405
margin: 0;
406
padding-left: 12px;
407
background-image: url(../images/blt_red_arrow.png);
408
background-repeat: no-repeat;
409
background-position: 0px 0.5em;
410
}
411
412
/* New User Box */
413
414
/* height and width details */
415
.frontnewtop div, .frontnewtop, .frontnewbot div, .frontnewbot {
416
width: 100%;
417
height: 12px;
418
}
419
420
.frontnewcontent {
421
margin: 0;
422
padding: 0;
423
margin-top: -4px;
424
margin-bottom: -4px;
425
text-align: center;
426
font-size: 1.1em;
427
font-weight: bold;
428
}
429
430
.frontnewcontent a, .frontnewcontent a:link, .frontnewcontent a:visited, .frontnewcontent a:hover, .frontnewcontent a:active {
431
color: #990000;
432
text-decoration: none;
433
}
434
435
.frontnewroundbox {
436
float: left;
437
margin: 0;
438
margin-top: 30px;
439
padding: 0;
440
width: 130px;
441
background-color: #D8D8D8;
442
border-radius: 10px;
443
}
444
445
/* Donate Button */
446
.donate {
447
background-color: white;
448
border-radius: 10px;
449
padding: 2% 8%;
450
margin-bottom: 3%;
451
text-align: center;
452
font-weight: bold;
453
cursor: pointer;
454
}
455
456
.donate a, .donate a:link, .donate a:visited, .donate a:hover, .donate a:active {
457
color: #990000;
458
text-decoration: none;
459
}
460
461
/* Get FreeBSD Box */
462
463
/* height and width details */
464
.frontgettop div, .frontgettop, .frontgetbot div, .frontgetbot {
465
width: 100%;
466
height: 18px;
467
font-size: 1px;
468
}
469
470
.frontgetcontent {
471
margin: 0;
472
padding: 0;
473
margin-top: -8px;
474
margin-bottom: -8px;
475
text-align: center;
476
font-size: 1.3em;
477
font-weight: bold;
478
}
479
480
.frontgetcontent a, .frontgetcontent a:link, .frontgetcontent a:visited, .frontgetcontent a:hover, .frontgetcontent a:active {
481
color: #990000;
482
text-decoration: none;
483
}
484
485
.frontgetroundbox {
486
margin-top: 10px;
487
margin-left: 210px;
488
padding: 0;
489
width: 325px;
490
background-color: #facc2e;
491
border-radius: 15px;
492
}
493
494
.frontgetroundbox.newtofreebsd {
495
margin-top: 50px;
496
background-color: #eee;
497
}
498
499
/* Secondary Pages */
500
501
@media screen {
502
#sidewrap {
503
float: left;
504
width: 166px;
505
margin-top: 15px;
506
margin-right: -170px;
507
}
508
509
#rightwrap {
510
float: right;
511
width: 166px;
512
margin-left: 15px;
513
}
514
515
#contentwrap {
516
margin-left: 170px;
517
padding-top: 15px;
518
}
519
}
520
521
@media print {
522
#sidewrap, #rightwrap { display: none; }
523
#contentwrap { margin-left: 16px; padding-top: 15px; }
524
}
525
526
/* Footer */
527
528
footer {
529
font-size: 0.9em;
530
text-align: center;
531
color: #737373;
532
line-height: 1.3em;
533
padding-bottom: 15px;
534
padding-top: 15px;
535
clear: both;
536
}
537
538
/* Misc Classes */
539
540
.clearboth {
541
clear: both;
542
margin: 0;
543
padding: 0;
544
}
545
546
.blockhide {
547
display: none;
548
height: 0;
549
width: 0;
550
overflow: hidden;
551
position: absolute; /* IE5 Mac */
552
}
553
554
img {
555
border: 0;
556
}
557
558
/* Table of contents */
559
#toctitle {
560
font-weight: bold;
561
line-height: 1.3;
562
margin: 1em 0;
563
margin-left: 0;
564
color: #990000;
565
font-size: 115%;
566
}
567
568