CoCalc -- main.css

GitHub Repository: freebsd/freebsd-doc
Path: blob/main/website/themes/beastie/assets/styles/main.css
¹⁸⁰⁹⁶ views
1
/*
2
 * Copyright (c) 1994-2026, The FreeBSD Documentation Project
3
 * Copyright (c) 2021-2026, Sergio Carlavilla <[email protected]>
4
 * Copyright (c) 2023, Mark McBride <[email protected]>
5
 * Copyright (c) 2023, Mark Phillips <[email protected]>
6
 * All rights reserved.
7
 *
8
 * Redistribution and use in source and binary forms, with or without
9
 * modification, are permitted provided that the following conditions
10
 * are met:
11
 * 1. Redistributions of source code must retain the above copyright
12
 *    notice, this list of conditions and the following disclaimer.
13
 * 2. Redistributions in binary form must reproduce the above copyright
14
 *    notice, this list of conditions and the following disclaimer in
15
 *    the documentation and/or other materials provided with the distribution.
16
 *
17
 * THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
18
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
19
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
20
 * ARE DISCLAIMED.  IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
21
 * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
22
 * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
23
 * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
24
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
25
 * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
26
 * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
27
 * SUCH DAMAGE.
28
 *
29
 */
30
:root {
31
  --main-tag-padding: 30px 40px;
32
  --max-width: 1200px;
33
  --max-width-header: 1350px;
34
  --max-width-pages: 1500px;
35
  --header-height: 4.5rem;
36

37
  --size-300: .75rem;
38
  --size-400: 1rem;
39
  --size-500: 1.33rem;
40
  --size-550: 1.55rem;
41
  --size-600: 1.77rem;
42
  --size-700: 2.3rem;
43
  --size-750: 2.4rem;
44

45
  --white: #FFF;
46
  --black: #000;
47

48
  /* Light theme */
49
  --light-global-font-color: #444;
50
  --light-global-background-color: #FFF;
51
  --light-header-background: #AB2B28;
52
  --light-header-font-color: #FFF;
53
  --light-footer-background-color: #F0F1F5;
54
  --light-background-accent-color: #F9F0F0;
55
  --light-background-frontpage-band-color: #FFF6F6;
56
  --light-table-header-background-color: #F1F3F1;
57
  --light-table-header-font-color: #444;
58
  --light-lines-color: #DDD;
59
  --light-links-color: #990000;
60
  --light-pre-background-color: #F4F4F4;
61
  --light-pre-font-color: #444;
62
  --light-feeds-background: #F9F0F0;
63
  --light-example-block-font-color: #444;
64
  --light-freebsd-logo-horizontal-image: url("/images/FreeBSD-logo-dark.png");
65

66
  /* Dark theme */
67
  --dark-global-font-color: #EEEFF1;
68
  --dark-global-background-color: #333333;
69
  --dark-header-background: #AB2B28;
70
  --dark-header-font-color: #EEEFF1;
71
  --dark-footer-background-color: #2B2B2B;
72
  --dark-background-accent-color: #333;
73
  --dark-background-frontpage-band-color: #333333;
74
  --dark-table-header-background-color: #F1F3F1;
75
  --dark-table-header-font-color: #444;
76
  --dark-lines-color: #4D4D4D;
77
  --dark-links-color: #FF8A80;
78
  --dark-pre-background-color: #272727;
79
  --dark-pre-font-color: #EEEFF1;
80
  --dark-feeds-background: #222;
81
  --dark-example-block-font-color: #272727;
82
  --dark-freebsd-logo-horizontal-image: url("/images/FreeBSD-logo-light.png");
83

84
  /* Shared theme values */
85
  --download-release-section-background-color: #FACC2E;
86
  --download-release-section-font-color: #990000;
87
  --download-section-background-color: #AB2B28;
88
  --download-section-font-color: #FFF;
89

90
  --admonition-font-color: #444;
91
  --admonition-note-color: #19407C;
92
  --admonition-note-background-color: #EAF1FB;
93
  --admonition-warning-color: #BF6900;
94
  --admonition-warning-background-color: #FFF4E6;
95
  --admonition-important-color: #BF0000;
96
  --admonition-important-background-color: #FFE6E6;
97
  --admonition-caution-color: #BF3400;
98
  --admonition-caution-background-color: #FFECE6;
99
  --admonition-tip-color: #43B929;
100
  --admonition-tip-background-color: #EDFAEA;
101

102
  --example-block-color: #F1BB16;
103
  --example-block-background-color: #FEF8E7;
104

105
  --openzfs-image: url("/images/openzfs.svg");
106
  --virtualization-image: url("/images/virtualization.png");
107
  --jails-image: url("/images/jails.svg");
108
  --networking-image: url("/images/networking.svg");
109
  --documentation-image: url("/images/documentation.svg");
110
  --community-image: url("/images/community.svg");
111

112
}
113

114
#page {
115
  --global-font-color: var(--light-global-font-color);
116
  --global-background-color: var(--light-global-background-color);
117
  --header-background: var(--light-header-background);
118
  --header-font-color: var(--light-header-font-color);
119
  --footer-background-color: var(--light-footer-background-color);
120
  --background-accent-color: var(--light-background-accent-color);
121
  --background-frontpage-band-color: var(--light-background-frontpage-band-color);
122
  --table-header-background-color: var(--light-table-header-background-color);
123
  --table-header-font-color: var(--light-table-header-font-color);
124
  --lines-color: var(--light-lines-color);
125
  --links-color: var(--light-links-color);
126
  --pre-background-color: var(--light-pre-background-color);
127
  --pre-font-color: var(--light-pre-font-color);
128
  --feeds-background: var(--light-feeds-background);
129
  --example-block-font-color: var(--light-example-block-font-color);
130

131
  --admonition-links-color: #0645AD;
132

133
  --freebsd-logo-horizontal-image: var(--light-freebsd-logo-horizontal-image);
134

135
}
136

137
@media (prefers-color-scheme: dark) {
138
  #page {
139
    --global-font-color: var(--dark-global-font-color);
140
    --global-background-color: var(--dark-global-background-color);
141
    --header-background: var(--dark-header-background);
142
    --header-font-color: var(--dark-header-font-color);
143
    --footer-background-color: var(--dark-footer-background-color);
144
    --background-accent-color: var(--dark-background-accent-color);
145
    --background-frontpage-band-color: var(--dark-background-frontpage-band-color);
146
    --table-header-background-color: var(--dark-table-header-background-color);
147
    --table-header-font-color: var(--dark-table-header-font-color);
148
    --lines-color: var(--dark-lines-color);
149
    --links-color: var(--dark-links-color);
150
    --pre-background-color: var(--dark-pre-background-color);
151
    --pre-font-color: var(--dark-pre-font-color);
152
    --feeds-background: var(--dark-feeds-background);
153
    --example-block-font-color: var(--dark-example-block-font-color);
154

155
    --admonition-links-color: #1A79FF;
156

157
    --freebsd-logo-horizontal-image: var(--dark-freebsd-logo-horizontal-image);
158

159
  }
160
}
161

162
.theme-switch:checked ~ #page {
163
  --global-font-color: var(--dark-global-font-color);
164
  --global-background-color: var(--dark-global-background-color);
165
  --header-background: var(--dark-header-background);
166
  --header-font-color: var(--dark-header-font-color);
167
  --footer-background-color: var(--dark-footer-background-color);
168
  --background-accent-color: var(--dark-background-accent-color);
169
  --background-frontpage-band-color: var(--dark-background-frontpage-band-color);
170
  --table-header-background-color: var(--dark-table-header-background-color);
171
  --table-header-font-color: var(--dark-table-header-font-color);
172
  --lines-color: var(--dark-lines-color);
173
  --links-color: var(--dark-links-color);
174
  --pre-background-color: var(--dark-pre-background-color);
175
  --pre-font-color: var(--dark-pre-font-color);
176
  --feeds-background: var(--dark-feeds-background);
177
  --example-block-font-color: var(--dark-example-block-font-color);
178

179
  --admonition-links-color: #1A79FF;
180

181
  --freebsd-logo-horizontal-image: var(--dark-freebsd-logo-horizontal-image);
182

183
}
184

185
@media (prefers-color-scheme: dark) {
186
  .theme-switch:checked ~ #page {
187
    --global-font-color: var(--light-global-font-color);
188
    --global-background-color: var(--light-global-background-color);
189
    --header-background: var(--light-header-background);
190
    --header-font-color: var(--light-header-font-color);
191
    --footer-background-color: var(--light-footer-background-color);
192
    --background-accent-color: var(--light-background-accent-color);
193
    --background-frontpage-band-color: var(--light-background-frontpage-band-color);
194
    --table-header-background-color: var(--light-table-header-background-color);
195
    --table-header-font-color: var(--light-table-header-font-color);
196
    --lines-color: var(--light-lines-color);
197
    --links-color: var(--light-links-color);
198
    --pre-background-color: var(--light-pre-background-color);
199
    --pre-font-color: var(--light-pre-font-color);
200
    --feeds-background: var(--light-feeds-background);
201
    --example-block-font-color: var(--light-example-block-font-color);
202

203
    --admonition-links-color: #0645AD;
204

205
    --freebsd-logo-horizontal-image: var(--light-freebsd-logo-horizontal-image);
206

207
  }
208
}
209

210
@media (max-width: 599px) {
211
  :root {
212
    --main-tag-padding: 30px 15px;
213
  }
214
}
215

216
@media (min-width: 600px) and (max-width: 1199px) {
217
  :root {
218
    --main-tag-padding: 30px 20px;
219
  }
220
}
221

222
@media (min-width: 1200px) {
223
  :root {
224
    --main-tag-padding: 30px 40px;
225
  }
226
}
227

228
*, *::before, *::after {
229
  box-sizing: border-box;
230
}
231

232
:focus-visible {
233
  outline: 2px solid var(--links-color);
234
  outline-offset: 2px;
235
}
236

237
:focus:not(:focus-visible) {
238
  outline: none;
239
}
240

241
html {
242
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
243
  scroll-padding-top: var(--header-height);
244
  scroll-behavior: auto;
245
}
246

247
html,
248
body {
249
  text-rendering: optimizeLegibility;
250
  line-height: 1.5;
251
}
252

253
body {
254
  padding: 0;
255
  margin: 0;
256
  font-size: 100%;
257
  font-weight: 400;
258
  font-style: normal;
259
  cursor: auto;
260
}
261

262
#page {
263
  display: flex;
264
  flex-direction: column;
265
  min-height: 100vh;
266
  color: var(--global-font-color);
267
  background-color: var(--global-background-color);
268
}
269

270
/* HTML Tags */
271
h1, h2, h3, h4, h5, h6 {
272
  margin: 0;
273
  padding-bottom: .3rem;
274
}
275

276
:is(h1, h2, h3, h4) {
277
  line-height: 1.3;
278
}
279

280
:is(h1, h2) {
281
  font-weight: 900;
282
}
283

284
h1 { font-size: var(--size-750); }
285
h2 { font-size: var(--size-600); }
286
h3 { font-size: var(--size-550); padding-top: .8rem; }
287
h4 { font-size: var(--size-500); }
288
h5 { font-size: var(--size-400); }
289
h6 { font-size: var(--size-300); }
290

291
:is(h2, h3, h4, h5, h6) > .anchor {
292
  text-decoration: none;
293
}
294

295
:is(h2, h3, h4, h5, h6) > .anchor:hover {
296
  text-decoration: none;
297
}
298

299
:is(h2, h3, h4, h5, h6) > .anchor::before {
300
  visibility: hidden;
301
  margin-left: .3rem;
302
  content: "#";
303
  color: var(--global-font-color);
304
}
305

306
:is(h2, h3, h4, h5, h6):hover .anchor::before,
307
:is(h2, h3, h4, h5, h6):focus-within .anchor::before {
308
  visibility: visible;
309
}
310

311
hr {
312
  margin-top: 1rem;
313
  margin-bottom: 1rem;
314
  border: 0;
315
  border-top: 1px solid var(--lines-color);
316
}
317

318
a {
319
  text-decoration: none;
320
  color: var(--links-color);
321
}
322

323
a:hover {
324
  text-decoration: underline;
325
}
326

327
img {
328
  max-width: 100%;
329
}
330

331
figcaption {
332
  font-size: var(--size-300);
333
  font-style: italic;
334
  margin-top: 1rem;
335
}
336

337
pre {
338
  display: block;
339
  width: 100%;
340
  max-width: 100%;
341
  margin: 0;
342
  padding: 1rem;
343
  box-sizing: border-box;
344
  overflow: auto hidden;
345
  white-space: pre;
346
  word-break: normal;
347
  overflow-wrap: normal;
348
  border-radius: .25rem;
349
  font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
350
  background-color: var(--pre-background-color);
351
  font-size: 1rem;
352
  color: var(--pre-font-color);
353
  line-height: 1.4;
354
}
355

356
p {
357
  text-justify: inter-word;
358
}
359

360
b, dt, strong, th {
361
  font-weight: bolder;
362
}
363

364
dt {
365
  font-style: italic;
366
}
367

368
blockquote {
369
  padding-left: var(--size-600);
370
  border-left: 5px solid;
371
  font-style: italic;
372
}
373

374
code {
375
  padding: .12rem .2rem;
376
  border-radius: .25rem;
377
  background-color: var(--pre-background-color);
378
  font-family: "DejaVu Sans Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
379
  color: var(--pre-font-color);
380
}
381

382
kbd {
383
  font-family: "DejaVu Sans", "DejaVu Sans Bold";
384
  display: inline-block;
385
  color: rgba(0,0,0,.8);
386
  font-size: .65em;
387
  line-height: 1.45;
388
  background-color: #f7f7f7;
389
  border: 1px solid #ccc;
390
  border-radius: 3px;
391
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 0.1em var(--white) inset;
392
  margin: 0 .15em;
393
  padding: .2em .5em;
394
  vertical-align: middle;
395
  position: relative;
396
  top: -0.1em;
397
  white-space: nowrap;
398
}
399

400
details {
401
  margin: 1rem 0;
402
}
403

404
details summary {
405
  cursor: pointer;
406
}
407

408
/* Header section */
409
header {
410
  padding: .5rem 1rem;
411
  background-color: var(--header-background);
412
  font-size: clamp(13px, 0.8vw, 15px);
413
}
414

415
.header-container {
416
  display: flex;
417
  width: 100%;
418
  max-width: var(--max-width-header);
419
  margin-left: auto;
420
  margin-right: auto;
421
  align-items: center;
422
}
423

424
.logo-menu-bars-container {
425
  display: flex;
426
  align-items: center;
427
}
428

429
.logo {
430
  display: flex;
431
  align-items: center;
432
  margin-right: 1rem;
433
}
434

435
header nav {
436
  margin-left: 0;
437
  margin-right: 0;
438
}
439

440
header ul {
441
  margin: 0;
442
  padding: 0;
443
  list-style: none;
444
  overflow: hidden;
445
}
446

447
header ul li {
448
  list-style: none;
449
}
450

451
.menu-bars {
452
  display: none;
453
  width: 2rem;
454
  height: 2rem;
455
  margin-left: auto;
456
  color: var(--white);
457
  cursor: pointer;
458
  align-items: center;
459
  justify-content: center;
460
  position: relative;
461
}
462

463
.menu-bars::before {
464
  content: "";
465
  display: block;
466
  width: 1.5rem;
467
  height: 2px;
468
  background-color: currentColor;
469
  border-radius: 999px;
470
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
471
}
472

473
input[type='checkbox'] {
474
  display: none;
475
}
476

477
.menu {
478
  display: flex;
479
  padding: 0;
480
  margin: 0;
481
}
482

483
.menu-item {
484
  display: flex;
485
  margin-right: 1rem;
486
  align-items: center;
487
  color: var(--white);
488
}
489

490
.menu-item a {
491
  padding: 1rem 0;
492
  color: inherit;
493
}
494

495
.menu-item a,
496
.donate a {
497
  text-decoration: none;
498
  font-weight: 600;
499
}
500

501
.menu-item a:hover,
502
.donate a:hover {
503
  text-decoration: none;
504
}
505

506
.donate a {
507
  color: var(--black);
508
}
509

510
.heart {
511
  font-size: 1.2rem;
512
  color: #E38582;
513
}
514

515
.heart:hover {
516
  color: #D1332E;
517
}
518

519
.menu-item i {
520
  margin-left: .1rem;
521
}
522

523
.sub-menu {
524
  visibility: hidden;
525
  position: absolute;
526
  top: 3rem;
527
  padding: 1rem .75rem;
528
  min-width: 250px;
529
  background-color: var(--white);
530
  border-radius: .4rem;
531
  color: #444;
532
  border: 1px solid #CDCDCD;
533
  z-index: 999;
534
}
535

536
.sub-menu:hover {
537
  visibility: visible;
538
}
539

540
.menu-item a:hover+.sub-menu {
541
  visibility: visible;
542
}
543

544
.sub-menu li {
545
  margin-top: 0;
546
  padding: .75rem .6rem;
547
}
548

549
.sub-menu .title {
550
  border-bottom: 1px solid #E5E7EB;
551
}
552

553
.sub-menu li a {
554
  font-weight: normal;
555
}
556

557
.sub-menu .title a {
558
  font-weight: bolder;
559
}
560

561
.search-donate-container {
562
  display: flex;
563
  align-items: center;
564
  margin-left: auto;
565
}
566

567
.search {
568
  display: flex;
569
  width: 150px;
570
  min-width: 150px;
571
  border-radius: .4rem;
572
  background-color: var(--white);
573
  border: 1px solid var(--white);
574
  margin-right: .5rem;
575
}
576

577
.search input[type='text'] {
578
  display: inline-block;
579
  width: 100%;
580
  min-width: 0;
581
  padding: .3rem .5rem;
582
  border: none;
583
  border-radius: .4rem;
584
  appearance: none;
585
  outline: none;
586
  background-color: var(--white);
587
  color: var(--black);
588
}
589

590
.search button {
591
  flex: 0 0 2rem;
592
  width: 2rem;
593
  padding: 0;
594
  background-color: var(--white);
595
  border: none;
596
  border-radius: .4rem;
597
}
598

599
.search button i {
600
  color: var(--black);
601
}
602

603
.donate {
604
  margin-left: .5rem;
605
}
606

607
.donate a {
608
  display: inline-block;
609
  padding: .45rem .85rem;
610
  background-color: var(--white);
611
  border-radius: .4rem;
612
}
613

614
.i18n {
615
  position: relative;
616
  display: inline-block;
617
}
618

619
.lang-toggle {
620
  display: flex;
621
  list-style: none;
622
  cursor: pointer;
623
}
624

625
.lang-toggle img {
626
  height: 1.5rem;
627
  width: 1.5rem;
628
}
629

630
.lang-dropdown {
631
  display: none;
632
  position: absolute;
633
  top: 100%;
634
  right: 0;
635
  background: var(--white);
636
  border: 1px solid var(--lines-color);
637
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
638
  list-style: none;
639
  margin: 0;
640
  padding: 0;
641
  min-width: 120px;
642
  z-index: 10;
643
}
644

645
.i18n[open] .lang-dropdown {
646
  display: block;
647
}
648

649
.lang-dropdown li a {
650
  display: block;
651
  padding: 8px 12px;
652
  text-decoration: none;
653
  color: #444;
654
}
655

656
.lang-dropdown li a:hover {
657
  background: #F5F5F5;
658
}
659

660
.lang-dropdown .current-lang {
661
  font-weight: bold;
662
  background: #F0F0F0;
663
  pointer-events: none;
664
}
665

666
@media screen and (max-width: 1300px) {
667
  .header-container {
668
    flex-direction: column;
669
  }
670

671
  .logo-menu-bars-container {
672
    width: 100%;
673
    padding: .5rem 0;
674
  }
675

676
  nav {
677
    width: 100%;
678
    margin: 0;
679
    padding: 0;
680
  }
681

682
  .menu-bars {
683
    display: flex;
684
  }
685

686
  .menu {
687
    display: none;
688
    width: 100%;
689
  }
690

691
  #menu-bars:checked~nav .menu {
692
    display: block;
693
  }
694

695
  .menu-item {
696
    flex-direction: column;
697
    width: 100%;
698
    margin-right: 0px;
699
    border-top: 1px solid var(--white);
700
    cursor: pointer;
701
  }
702

703
  .menu-item a {
704
    width: 100%;
705
  }
706

707
  .menu-item a:hover+.sub-menu {
708
    visibility: visible;
709
  }
710

711
  .menu-item-description {
712
    display: flex;
713
    width: 100%;
714
    cursor: pointer;
715
  }
716

717
  .menu-item-description i {
718
    margin-left: auto;
719
  }
720

721
  .sub-menu {
722
    display: none;
723
    flex-direction: column;
724
    width: 100%;
725
    padding: 0px;
726
    position: static;
727
    visibility: visible;
728
    border: none;
729
    background-color: inherit;
730
    color: inherit;
731
    box-shadow: inherit;
732
  }
733

734
  .sub-menu .title {
735
    display: none;
736
    border-bottom: none;
737
  }
738

739
  .sub-menu li {
740
    padding-left: 0px;
741
    padding-right: 0px;
742
  }
743

744
  #about:checked~.sub-menu,
745
  #download:checked~.sub-menu,
746
  #documentation:checked~.sub-menu,
747
  #community:checked~.sub-menu,
748
  #developers:checked~.sub-menu,
749
  #support:checked~.sub-menu {
750
    display: flex;
751
  }
752

753
  .search-donate-container {
754
    display: none;
755
  }
756

757
  .search {
758
    width: 100%;
759
    min-width: 0;
760
  }
761

762
  #menu-bars:checked~.search-donate-container {
763
  display: flex;
764
  flex-direction: column;
765
  width: 100%;
766
  margin-left: unset;
767
  padding-top: .2rem;
768
  }
769

770
  .donate {
771
    display: flex;
772
    width: 100%;
773
    margin-left: unset;
774
    padding-top: .8rem;
775
  }
776

777
  .donate a {
778
    width: 100%;
779
    text-align: center;
780
  }
781

782
  .donate a .heart {
783
    font-size: 1.2rem;
784
    color: #D1332E;
785
  }
786
}
787

788
@media screen and (min-width: 900px) {
789
  header {
790
    padding: .5rem 2rem;
791
  }
792
}
793

794
@media screen and (min-width: 1451px) {
795
  header {
796
    padding: .5rem 5rem;
797
  }
798
}
799

800
/* Home page */
801
.front-page-band-on {
802
  background: var(--background-frontpage-band-color);
803
}
804

805
.front-page-band-content {
806
  max-width: var(--max-width);
807
  margin: 0px auto;
808
  padding: var(--main-tag-padding);
809
  padding-top: 20px;
810
  padding-bottom: 20px;
811
}
812

813
.main-section {
814
  margin: 1rem 0 0 0;
815
}
816

817
.freebsd-horizontal .logo-box-image {
818
  background-image: var(--freebsd-logo-horizontal-image);
819
}
820

821
.logo-box {
822
  width: 100px;
823
  height: 100px;
824
  float: right;
825
  margin: 5px 10px 20px 20px;
826
}
827

828
.logo-box-image {
829
  width: 100%;
830
  height: 100%;
831
  margin: auto;
832
  background-repeat: no-repeat;
833
  background-position: center center;
834
  background-size: contain;
835
}
836

837
.front-page-logo {
838
  float: none;
839
  width: auto;
840
  height: clamp(100px, 30vw, 180px);
841
}
842

843
.front-page-tagline {
844
  line-height: normal;
845
  font-weight: 400;
846
  font-size: 30px;
847
  text-align: center;
848
}
849

850
.downloads-container {
851
  display: flex;
852
  flex-wrap: wrap;
853
  justify-content: center;
854
  margin: 0 auto;
855
}
856

857
.download-section {
858
  flex: 0 0 20%;
859
  min-width: 275px;
860
  margin: 0;
861
  margin-top: 50px;
862
  text-align: center;
863
}
864

865
.download-section-title {
866
  padding: 2px 0px;
867
  border-radius: 5px;
868
  font-size: 18px;
869
  font-weight: 500;
870
  margin: 0 0 5px 0;
871
}
872

873
.download-button-release {
874
  background: var(--download-release-section-background-color);
875
  color: var(--download-release-section-font-color);
876
  padding: 5px 10px;
877
  border-radius: 5px;
878
  font-size: 14px;
879
  font-weight: 500;
880
}
881

882
.download-button {
883
  background: var(--download-section-background-color);
884
  color: var(--download-section-font-color);
885
  padding: 5px 10px;
886
  border-radius: 5px;
887
  font-size: 14px;
888
  font-weight: 500;
889
}
890

891
.download-links {
892
  margin: 5px 0 0 0;
893
}
894

895
.additional-downloads {
896
  margin: 5px 0;
897
}
898

899
.why-freebsd-flex {
900
  display: flex;
901
  flex-wrap: wrap;
902
  gap: 30px;
903
  margin-top: 30px;
904
}
905

906
.why-freebsd-flex-item {
907
  flex: 1 1 30%;
908
  min-width: 280px;
909
}
910

911
.why-freebsd-flex-item p {
912
  padding: 0 20px 0 0;
913
}
914

915
.why-freebsd-flex-item h3 {
916
  margin-top: 0;
917
  border-radius: 5px;
918
  padding: 2px 10px 0 0px;
919
}
920

921
.openzfs .logo-box-image {
922
  background-image: var(--openzfs-image);
923
}
924

925
.bhyve .logo-box-image {
926
  background-image: var(--virtualization-image);
927
}
928

929
.jails .logo-box-image {
930
  background-image: var(--jails-image);
931
}
932

933
.network .logo-box-image {
934
  background-image: var(--networking-image);
935
}
936

937
.docs .logo-box-image {
938
  background-image: var(--documentation-image);
939
}
940

941
.community .logo-box-image {
942
  background-image: var(--community-image);
943
}
944

945
/* Feeds section in home page */
946
.feed-flex {
947
  display: flex;
948
  flex-wrap: wrap;
949
  gap: 30px 20px;
950
}
951

952
.feed-flex-item {
953
  background: var(--feeds-background);
954
  line-height: 1.3em;
955
  border-radius: 7px;
956
}
957

958
.feed-flex-item a {
959
  text-decoration: none;
960
}
961

962
.feed-flex-item a:hover {
963
  text-decoration: underline;
964
}
965

966
.feed-flex-item {
967
  flex: 1 1 15%;
968
  padding: 1rem 1.5rem;
969
  min-width: 150px;
970
  border-radius: 1rem;
971
  font-size: .8em;
972
}
973

974
.feed-flex-item .feed-item {
975
  margin: 0;
976
  padding: 0 0 5px 0;
977
}
978

979
.feed-flex-item .feed-source {
980
  display: flex;
981
  align-items: center;
982
  gap: .3rem;
983
}
984

985
.feed-flex-item .feed-source a {
986
  color: var(--links-color);
987
}
988

989
.rssimage {
990
  margin-top: .35rem;
991
}
992

993
/* Normal page */
994
#content {
995
  display: flex;
996
  gap: 2rem;
997
  max-width: var(--max-width-pages);
998
  margin: 0 auto;
999
  padding: 2rem 1rem;
1000
}
1001

1002
#sidenav {
1003
  display: flex;
1004
  width: 200px;
1005
  padding: 1rem;
1006
  border-right: 1px solid #D4D4D4;
1007
}
1008

1009
#sidenav ul {
1010
  list-style: none;
1011
  margin: 0;
1012
  padding: 0;
1013
}
1014

1015
#sidenav li {
1016
  margin: .5rem 0;
1017
}
1018

1019
#contentwrap {
1020
  min-width: 0;
1021
}
1022

1023
#contentwrap h1 {
1024
  margin-top: 0;
1025
  padding-bottom: 1.2rem;
1026
}
1027

1028
@media (max-width: 768px) {
1029
  #sidewrap {
1030
    display: none;
1031
  }
1032
}
1033

1034
/* Downloads page*/
1035
.tblDownload ul {
1036
  list-style: none;
1037
  padding: 0 10px;
1038
}
1039

1040
/* 404 */
1041
.error-section {
1042
  display: flex;
1043
  width: 100%;
1044
  max-width: var(--max-width);
1045
  min-height: 70vh;
1046
  margin: 0 auto;
1047
  align-items: center;
1048
  justify-content: center;
1049
}
1050

1051
.error-container {
1052
  display: flex;
1053
  flex-direction: column;
1054
  width: 100%;
1055
  align-items: center;
1056
  justify-content: center;
1057
}
1058

1059
@media (max-width: 480px) {
1060
  .error-container h1 {
1061
    font-size: 1.8rem;
1062
  }
1063
}
1064

1065
/* Callouts */
1066
.conum {
1067
  display: inline-block;
1068
  color: var(--white);
1069
  background-color: #000;
1070
  border-radius: 100px;
1071
  text-align: center;
1072
  font-size: .75em;
1073
  width: 1.67em;
1074
  height: 1.67em;
1075
  font-style: normal;
1076
  font-weight: bold;
1077
}
1078

1079
.conum[data-value] {
1080
  color: var(--white);
1081
  text-align: center;
1082
  font-size: .75em;
1083
  line-height: 1.67em;
1084
  font-style: normal;
1085
  font-weight: bold;
1086
}
1087

1088
.conum[data-value]::after {
1089
  content: attr(data-value);
1090
}
1091

1092
.colist td {
1093
  padding-top: 4px;
1094
  padding-bottom: 4px;
1095
  vertical-align: top;
1096
}
1097

1098
.colist tr td b,
1099
.programlisting b {
1100
  display: none;
1101
}
1102

1103
.rouge b {
1104
  display: none;
1105
}
1106

1107
/* Tables */
1108
table caption {
1109
  text-rendering: optimizeLegibility;
1110
  text-align: left;
1111
  font-weight: bolder;
1112
  font-size: 1rem;
1113
}
1114

1115
table.tableblock {
1116
  display: block;
1117
  margin: auto;
1118
  margin-bottom: 1.25em;
1119
  max-width: 100%;
1120
  border-collapse: collapse;
1121
  overflow-x: auto;
1122
}
1123

1124
table.tableblock th {
1125
  text-align: left;
1126
  background-color: var(--table-header-background-color);
1127
  color: var(--table-header-font-color);
1128
  text-rendering: optimizeLegibility;
1129
  padding: .5em .625em .625em;
1130
  border: 0 solid #dedede;
1131
  border-width: 0 1px 1px 0;
1132
}
1133

1134
table.tableblock td {
1135
  text-align: left;
1136
  border: 0 solid #dedede;
1137
  text-rendering: optimizeLegibility;
1138
  line-height: 1.6;
1139
  padding: .5em .625em .625em;
1140
  font-size: inherit;
1141
  border-width: 0 1px 1px 0;
1142
  vertical-align: top;
1143
}
1144

1145
table.tableblock td.icon {
1146
  border: none;
1147
}
1148

1149
table.tableblock td:first-of-type,
1150
table.tableblock th:first-of-type {
1151
  border-left: none;
1152
}
1153

1154
table.tableblock td:last-of-type,
1155
table.tableblock th:last-of-type {
1156
  border-right: none;
1157
}
1158

1159
table.stretch {
1160
  width: 100%;
1161
}
1162

1163
/* Admonitions */
1164
.admonitionblock {
1165
  margin: 1.4rem 0;
1166
  padding: 1rem;
1167
  color: var(--admonition-font-color);
1168
}
1169

1170
.admonitionblock table {
1171
  table-layout: fixed;
1172
  position: relative;
1173
  width: 100%;
1174
}
1175

1176
.admonitionblock table tbody tr td.icon {
1177
  position: absolute;
1178
  top: 0;
1179
  left: 0;
1180
  line-height: 1;
1181
  padding-bottom: 0.5rem;
1182
}
1183

1184
.admonitionblock table tbody tr td.icon i {
1185
  display: inline-flex;
1186
  align-items: center;
1187
  width: auto;
1188
  background-position-x: 0.5em;
1189
  vertical-align: initial;
1190
  font-style: normal;
1191
}
1192

1193
.admonitionblock table tbody tr td.icon i::after {
1194
  content: attr(title);
1195
  font-family: 'Inter var', sans-serif;
1196
  font-weight: bolder;
1197
  padding: 0 0.5em;
1198
  margin: -0.05em;
1199
}
1200

1201
.admonitionblock table tbody tr td.icon .icon-note::before {
1202
  content: "\f05a";
1203
  color: var(--admonition-note-color);
1204
}
1205

1206
.admonitionblock table tbody tr td.icon .icon-tip::before {
1207
  content: "\f0eb";
1208
  color: var(--admonition-tip-color);
1209
}
1210

1211
.admonitionblock table tbody tr td.icon .icon-warning::before {
1212
  content: "\f071";
1213
  color: var(--admonition-warning-color);
1214
}
1215

1216
.admonitionblock table tbody tr td.icon .icon-caution::before {
1217
  content: "\f06d";
1218
  color: var(--admonition-caution-color);
1219
}
1220

1221
.admonitionblock table tbody tr td.icon .icon-important::before {
1222
  content: "\f06a";
1223
  color: var(--admonition-important-color);
1224
}
1225

1226
.admonitionblock table tbody tr td.icon [class^="fa icon-"] {
1227
  font-size: 1.2rem;
1228
  cursor: default;
1229
}
1230

1231
.admonitionblock table tbody tr td.content {
1232
  width: 100%;
1233
  word-wrap: anywhere;
1234
}
1235

1236
.admonitionblock table tbody tr td.content .title {
1237
  margin-top: 2rem;
1238
}
1239

1240
.admonitionblock table tbody tr td.content .paragraph {
1241
  padding-top: 0.5rem;
1242
}
1243

1244
.admonitionblock table tbody tr td.content a {
1245
  color: var(--admonition-links-color);
1246
}
1247

1248
.note {
1249
  border-left: 5px solid var(--admonition-note-color);
1250
  background-color: var(--admonition-note-background-color);
1251
}
1252

1253
.warning {
1254
  border-left: 5px solid var(--admonition-warning-color);
1255
  background-color: var(--admonition-warning-background-color);
1256
}
1257

1258
.important {
1259
  border-left: 5px solid var(--admonition-important-color);
1260
  background-color: var(--admonition-important-background-color);
1261
}
1262

1263
.caution {
1264
  border-left: 5px solid var(--admonition-caution-color);
1265
  background-color: var(--admonition-caution-background-color);
1266
}
1267

1268
.tip {
1269
  border-left: 5px solid var(--admonition-tip-color);
1270
  background-color: var(--admonition-tip-background-color);
1271
}
1272

1273
/* Example */
1274
.example,
1275
.exampleblock {
1276
  border-left: 5px solid var(--example-block-color);
1277
  padding: 1rem;
1278
  background-color: var(--example-block-background-color);
1279
}
1280

1281
.exampleblock {
1282
  margin: .75rem 0;
1283
  color: var(--example-block-font-color);
1284
}
1285

1286
.exampleblock .title {
1287
  font-weight: bolder;
1288
  font-family: sans-serif;
1289
}
1290

1291
.exampleblock .content .literalblock .content {
1292
  background: #fefde6;
1293
  border: none;
1294
  color: var(--global-font-color);
1295
}
1296

1297
.exampleblock .content a {
1298
  color: var(--admonition-links-color);
1299
}
1300

1301
.procedure {
1302
  border-left: 5px solid #b3b3b3;
1303
  padding: 1rem;
1304
  margin-bottom: 1.4rem;
1305
}
1306

1307
/* Misc */
1308
.imageblock .title {
1309
  margin-top: .5rem;
1310
  padding-bottom: 0;
1311
  font-weight: bolder;
1312
  font-style: italic;
1313
}
1314

1315
.literalblock {
1316
  margin: .75em 0;
1317
  overflow-x: auto;
1318
  overflow-y: hidden;
1319
  max-width: 100%;
1320
}
1321

1322
.literalblock .content {
1323
  min-width: 0;
1324
  max-width: 100%;
1325
  overflow-x: auto;
1326
  overflow-y: hidden;
1327
}
1328

1329
.fa {
1330
  font-family: FontAwesome;
1331
  font-style: normal;
1332
}
1333

1334
.listingblock {
1335
  margin: .75em 0;
1336
  position: relative;
1337
}
1338

1339
.listingblock .title {
1340
  position: absolute;
1341
  top: -1em;
1342
  left: 1em;
1343
}
1344

1345
.highlight {
1346
  padding: 1.5em 2em;
1347
}
1348

1349
.highlight code {
1350
  font-size: .75rem;
1351
  padding: 0;
1352
  border-radius: inherit;
1353
  background-color: transparent;
1354
  color: inherit;
1355
}
1356

1357
.highlight:hover code::before {
1358
  content: attr(data-lang);
1359
  position: absolute;
1360
  top: .5em;
1361
  right: 3em;
1362
}
1363

1364
.filename {
1365
  font-weight: bolder;
1366
}
1367

1368
.right {
1369
  display: block;
1370
  float: right;
1371
}
1372

1373
/* Footer section */
1374
footer {
1375
  margin-top: 1rem;
1376
  padding: 1rem;
1377
  color: var(--global-font-color);
1378
  background-color: var(--footer-background-color);
1379
}
1380

1381
.footer-container {
1382
  display: grid;
1383
  gap: 1rem;
1384
  grid-template-columns: 1fr;
1385
  grid-template-areas:
1386
  "logo"
1387
  "about"
1388
  "documentation"
1389
  "community"
1390
  "legal"
1391
  "copyright";
1392
  max-width: var(--max-width);
1393
  margin-left: auto;
1394
  margin-right: auto;
1395
}
1396

1397
.logo-column {
1398
  grid-area: logo;
1399
}
1400

1401
.about-column {
1402
  grid-area: about;
1403
}
1404

1405
.community-column {
1406
  grid-area: community;
1407
}
1408

1409
.documentation-column {
1410
  grid-area: documentation;
1411
}
1412

1413
.legal-column {
1414
  grid-area: legal;
1415
}
1416

1417
.copyright-column {
1418
  grid-area: copyright;
1419
  padding-top: 1rem;
1420
  border-top: 1px solid #E5E7EB;
1421
  line-height: 1rem;
1422
  font-size: .8rem;
1423
}
1424

1425
.column-title {
1426
  margin-top: 0;
1427
  font-size: inherit;
1428
  border-bottom: none;
1429
}
1430

1431
.column-elements-container {
1432
  margin: .5rem 0;
1433
  padding: 0;
1434
  list-style: none;
1435
}
1436

1437
.column-elements-container li {
1438
  margin-top: .7rem;
1439
}
1440

1441
.column-element {
1442
  text-decoration: none;
1443
  line-height: 2rem;
1444
  color: inherit;
1445
  font-size: inherit;
1446
}
1447

1448
.theme-switch {
1449
  position: fixed !important;
1450
  top: 0;
1451
  left: 0;
1452
  display: block !important;
1453
  width: 1px;
1454
  height: 1px;
1455
  overflow: hidden;
1456
  opacity: 0;
1457
  pointer-events: none;
1458
}
1459

1460
.theme-container {
1461
  display: block;
1462
}
1463

1464
.theme-switch-label {
1465
  display: inline-flex;
1466
  align-items: center;
1467
  justify-content: center;
1468
  width: 2.25rem;
1469
  height: 2.25rem;
1470
  cursor: pointer;
1471
  border: 1px solid var(--lines-color);
1472
  border-radius: 999px;
1473
  color: var(--global-font-color);
1474
  background-color: var(--global-background-color);
1475
}
1476

1477
.theme-switch-label:hover {
1478
  text-decoration: none;
1479
  background-color: var(--background-accent-color);
1480
}
1481

1482
.theme-icon {
1483
  font-size: 1rem;
1484
  line-height: 1;
1485
}
1486

1487
.theme-icon-light {
1488
  display: none;
1489
}
1490

1491
.theme-icon-dark {
1492
  display: inline-block;
1493
}
1494

1495
@media (prefers-color-scheme: dark) {
1496
  #page .theme-icon-light {
1497
    display: inline-block;
1498
  }
1499

1500
  #page .theme-icon-dark {
1501
    display: none;
1502
  }
1503
}
1504

1505
.theme-switch:checked ~ #page .theme-icon-light {
1506
  display: inline-block;
1507
}
1508

1509
.theme-switch:checked ~ #page .theme-icon-dark {
1510
  display: none;
1511
}
1512

1513
@media (prefers-color-scheme: dark) {
1514
  .theme-switch:checked ~ #page .theme-icon-light {
1515
    display: none;
1516
  }
1517

1518
  .theme-switch:checked ~ #page .theme-icon-dark {
1519
    display: inline-block;
1520
  }
1521
}
1522

1523
.theme-switch:focus-visible ~ #page .theme-switch-label {
1524
  outline: 2px solid var(--links-color);
1525
  outline-offset: 3px;
1526
}
1527

1528
@media screen and (min-width: 450px) {
1529
  .footer-container {
1530
    gap: 2rem;
1531
    grid-template-columns: 1fr 1fr;
1532
    grid-template-areas:
1533
    "logo logo"
1534
    "about community"
1535
    "documentation legal"
1536
    "copyright copyright";
1537
  }
1538
}
1539

1540
@media screen and (min-width: 900px) {
1541
  footer {
1542
    padding: 2rem;
1543
  }
1544

1545
  .footer-container {
1546
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
1547
    grid-template-areas:
1548
    "logo about documentation community legal"
1549
    "copyright copyright copyright copyright copyright";
1550
    gap: 1rem;
1551
  }
1552
}
1553

1554
@media screen and (min-width: 1451px) {
1555
  footer {
1556
    padding: 2rem 5rem;
1557
  }
1558

1559
  .footer-container {
1560
    gap: 2rem;
1561
  }
1562
}
1563

1564
Product

Resources

Company
