Re: git: c9c518d9db - main - New design for the FreeBSD website. This is not the end of the road, this is the beginning of a continuous improvement in our website.
Date: Fri, 15 May 2026 18:21:16 UTC
On Fri, 15 May 2026 at 20:20, Sergio Carlavilla Delgado
<carlavilla@freebsd.org> wrote:
>
> The branch main has been updated by carlavilla:
>
> URL: https://cgit.FreeBSD.org/doc/commit/?id=c9c518d9dbb70240c23810f300ce4a5ba60442c6
>
> commit c9c518d9dbb70240c23810f300ce4a5ba60442c6
> Author: Mark McBride <mark@markmcb.com>
> AuthorDate: 2026-05-15 18:18:52 +0000
> Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
> CommitDate: 2026-05-15 18:18:52 +0000
>
> New design for the FreeBSD website.
> This is not the end of the road, this is the beginning of a
> continuous improvement in our website.
>
> Respecting our users privacy, the website can work without
> JavaScript enabled.
>
> Tested on:
> * FreeBSD: Firefox, Chrome
> * Debian GNU/Linux: Firefox, Chrome
> * Windows 10: Firefox, Chrome, Edge, IE11
> * Windows 11: Firefox, Chrome, Edge
> * Android 16: Firefox, Chrome
> * iOS: Firefox, Safari
>
> Thanks for all the people who sent feedback about the new design:
> * adrian@
> * bapt@
> * bcr@
> * bz@
> * christos@
> * cperciva@
> * dbaio@
> * dch@
> * dteske@
> * emaste@
> * fernape@
> * fluffy@
> * gnn@
> * imp@
> * jrtc27@
> * linimon@
> * lwhsu@
> * maxim@
> * mp@
> * philip@
> * se@
> * vladlen@
> * ziaee@
> * Minsoo Choo <minsoochoo0122@proton.me>
> * The FreeBSD Foundation
>
> Approved by: doceng@, core@
> Co-authored-by: carlavilla@, Mark Phillips <mark@freebsdfoundation.org>
> Differential Revision: D53910
> Sponsored by: Work done by Mark Phillips was sponsored by the FreeBSD Foundation
> ---
> website/themes/beastie/LICENSE | 2 +-
> website/themes/beastie/assets/styles/main.css | 1547 ++++++++++++++++++++
> website/themes/beastie/i18n/de.toml | 591 --------
> website/themes/beastie/i18n/en.toml | 392 +++--
> website/themes/beastie/i18n/es.toml | 548 -------
> website/themes/beastie/i18n/fr.toml | 591 --------
> website/themes/beastie/i18n/ja.toml | 395 -----
> website/themes/beastie/i18n/nl.toml | 567 -------
> website/themes/beastie/i18n/ru.toml | 698 +++------
> website/themes/beastie/i18n/zh-cn.toml | 586 --------
> website/themes/beastie/i18n/zh-tw.toml | 685 +++------
> website/themes/beastie/layouts/404.html | 17 +-
> .../beastie/layouts/_partials/advisories.html | 27 +-
> .../layouts/_partials/commercial-consulting.html | 4 +-
> .../layouts/_partials/commercial-hardware.html | 4 +-
> .../beastie/layouts/_partials/commercial-isp.html | 4 +-
> .../beastie/layouts/_partials/commercial-misc.html | 4 +-
> .../layouts/_partials/commercial-software.html | 4 +-
> .../beastie/layouts/_partials/errata-notices.html | 27 +-
> .../themes/beastie/layouts/_partials/events.html | 57 +-
> website/themes/beastie/layouts/_partials/news.html | 89 +-
> .../themes/beastie/layouts/_partials/press.html | 77 +-
> .../themes/beastie/layouts/_partials/sidenav.html | 115 +-
> .../beastie/layouts/_partials/site-footer.html | 105 +-
> .../beastie/layouts/_partials/site-head.html | 82 +-
> .../beastie/layouts/_partials/site-header.html | 244 ++-
> .../beastie/layouts/_partials/site-navigation.html | 159 --
> .../beastie/layouts/_shortcodes/form-ports.html | 10 +-
> .../layouts/_shortcodes/form-search-mail.html | 18 +-
> .../layouts/_shortcodes/form-search-man.html | 6 +-
> .../layouts/_shortcodes/form-search-mid-id.html | 8 +-
> .../_shortcodes/form-search-mid-message.html | 8 +-
> .../layouts/_shortcodes/form-search-ports.html | 6 +-
> .../layouts/_shortcodes/form-search-site.html | 25 +-
> .../_shortcodes/get-event-last-year-info.html | 2 +-
> .../layouts/_shortcodes/get-usergroups-info.html | 2 +-
> website/themes/beastie/layouts/baseof.html | 5 +-
> .../themes/beastie/layouts/commercial/list.html | 2 +-
> .../themes/beastie/layouts/commercial/single.html | 2 +-
> website/themes/beastie/layouts/events/list.html | 13 +-
> website/themes/beastie/layouts/events/list.ics | 2 +-
> website/themes/beastie/layouts/events/rss.xml | 2 +-
> website/themes/beastie/layouts/events/single.html | 13 +-
> website/themes/beastie/layouts/home.html | 85 ++
> website/themes/beastie/layouts/index.html | 258 ----
> website/themes/beastie/layouts/list.html | 9 +-
> website/themes/beastie/layouts/list.ics | 2 +-
> website/themes/beastie/layouts/news/list.html | 13 +-
> website/themes/beastie/layouts/news/rss.xml | 2 +-
> website/themes/beastie/layouts/news/single.html | 13 +-
> website/themes/beastie/layouts/press/list.html | 13 +-
> website/themes/beastie/layouts/press/rss.xml | 2 +-
> website/themes/beastie/layouts/press/single.html | 13 +-
> website/themes/beastie/layouts/security/list.html | 6 +-
> website/themes/beastie/layouts/security/rss.xml | 4 +-
> .../themes/beastie/layouts/security/single.html | 6 +-
> website/themes/beastie/layouts/single.html | 9 +-
> .../beastie/static/images/25thanniversary.png | Bin 36622 -> 0 bytes
> .../beastie/static/images/FreeBSD-logo-dark.png | Bin 0 -> 34108 bytes
> .../beastie/static/images/FreeBSD-logo-light.png | Bin 0 -> 34601 bytes
> .../static/images/FreeBSD-monochromatic.svg | 82 ++
> .../themes/beastie/static/images/beastie-right.svg | 347 +++++
> website/themes/beastie/static/images/beastie.png | Bin 10761 -> 34117 bytes
> .../themes/beastie/static/images/blt_gry_arrow.png | Bin 190 -> 0 bytes
> website/themes/beastie/static/images/community.png | Bin 0 -> 9802 bytes
> .../themes/beastie/static/images/documentation.png | Bin 0 -> 7883 bytes
> website/themes/beastie/static/images/favicon.png | Bin 0 -> 45404 bytes
> website/themes/beastie/static/images/jails.png | Bin 0 -> 8701 bytes
> website/themes/beastie/static/images/language.png | Bin 0 -> 4772 bytes
> .../themes/beastie/static/images/logo-164x164.png | Bin 27808 -> 0 bytes
> website/themes/beastie/static/images/logo.png | Bin 2599 -> 0 bytes
> website/themes/beastie/static/images/nav_rgt.png | Bin 208 -> 0 bytes
> .../themes/beastie/static/images/nav_tbl_btm.png | Bin 218 -> 0 bytes
> .../themes/beastie/static/images/nav_tbl_top.png | Bin 212 -> 0 bytes
> .../themes/beastie/static/images/networking.png | Bin 0 -> 8897 bytes
> website/themes/beastie/static/images/openzfs.png | Bin 0 -> 68189 bytes
> .../beastie/static/images/virtualization.png | Bin 0 -> 10075 bytes
> website/themes/beastie/theme.toml | 5 +-
> 78 files changed, 3484 insertions(+), 5130 deletions(-)
>
> diff --git a/website/themes/beastie/LICENSE b/website/themes/beastie/LICENSE
> index 48fa5ca070..c0033b8acd 100644
> --- a/website/themes/beastie/LICENSE
> +++ b/website/themes/beastie/LICENSE
> @@ -20,4 +20,4 @@ ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
> LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
> ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
> (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
> -SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
> +SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
> \ No newline at end of file
> diff --git a/website/themes/beastie/assets/styles/main.css b/website/themes/beastie/assets/styles/main.css
> new file mode 100644
> index 0000000000..cf5f78a012
> --- /dev/null
> +++ b/website/themes/beastie/assets/styles/main.css
> @@ -0,0 +1,1547 @@
> +/*
> + * Copyright (c) 1994-2026, The FreeBSD Documentation Project
> + * Copyright (c) 2021-2026, Sergio Carlavilla <carlavilla@FreeBSD.org>
> + * Copyright (c) 2023, Mark McBride <mark@markmcb.com>
> + * Copyright (c) 2023, Mark Phillips <mark@freebsdfoundation.org>
> + * All rights reserved.
> + *
> + * Redistribution and use in source and binary forms, with or without
> + * modification, are permitted provided that the following conditions
> + * are met:
> + * 1. Redistributions of source code must retain the above copyright
> + * notice, this list of conditions and the following disclaimer.
> + * 2. Redistributions in binary form must reproduce the above copyright
> + * notice, this list of conditions and the following disclaimer in
> + * the documentation and/or other materials provided with the distribution.
> + *
> + * THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
> + * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
> + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
> + * ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE
> + * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
> + * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
> + * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
> + * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
> + * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
> + * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
> + * SUCH DAMAGE.
> + *
> + */
> +:root {
> + --main-tag-padding: 30px 40px;
> + --max-width: 1200px;
> + --max-width-header: 1350px;
> + --max-width-pages: 1500px;
> + --header-height: 4.5rem;
> +
> + --size-300: .75rem;
> + --size-400: 1rem;
> + --size-500: 1.33rem;
> + --size-550: 1.55rem;
> + --size-600: 1.77rem;
> + --size-700: 2.3rem;
> + --size-750: 2.4rem;
> +
> + --white: #FFF;
> + --black: #000;
> +
> + /* Light theme */
> + --light-global-font-color: #444;
> + --light-global-background-color: #FFF;
> + --light-header-background: #AB2B28;
> + --light-header-font-color: #FFF;
> + --light-footer-background-color: #F0F1F5;
> + --light-background-accent-color: #F9F0F0;
> + --light-background-frontpage-band-color: #FFF6F6;
> + --light-table-header-background-color: #F1F3F1;
> + --light-table-header-font-color: #444;
> + --light-lines-color: #DDD;
> + --light-links-color: #990000;
> + --light-pre-background-color: #F4F4F4;
> + --light-pre-font-color: #444;
> + --light-feeds-background: #F9F0F0;
> + --light-example-block-font-color: #444;
> + --light-freebsd-logo-horizontal-image: url("/images/FreeBSD-logo-dark.png");
> +
> + /* Dark theme */
> + --dark-global-font-color: #EEEFF1;
> + --dark-global-background-color: #333333;
> + --dark-header-background: #AB2B28;
> + --dark-header-font-color: #EEEFF1;
> + --dark-footer-background-color: #2B2B2B;
> + --dark-background-accent-color: #333;
> + --dark-background-frontpage-band-color: #333333;
> + --dark-table-header-background-color: #F1F3F1;
> + --dark-table-header-font-color: #444;
> + --dark-lines-color: #4D4D4D;
> + --dark-links-color: #FF8A80;
> + --dark-pre-background-color: #272727;
> + --dark-pre-font-color: #EEEFF1;
> + --dark-feeds-background: #222;
> + --dark-example-block-font-color: #272727;
> + --dark-freebsd-logo-horizontal-image: url("/images/FreeBSD-logo-light.png");
> +
> + /* Shared theme values */
> + --download-release-section-background-color: #FACC2E;
> + --download-release-section-font-color: #990000;
> + --download-section-background-color: #AB2B28;
> + --download-section-font-color: #FFF;
> +
> + --admonition-font-color: #444;
> + --admonition-note-color: #19407C;
> + --admonition-note-background-color: #EAF1FB;
> + --admonition-warning-color: #BF6900;
> + --admonition-warning-background-color: #FFF4E6;
> + --admonition-important-color: #BF0000;
> + --admonition-important-background-color: #FFE6E6;
> + --admonition-caution-color: #BF3400;
> + --admonition-caution-background-color: #FFECE6;
> + --admonition-tip-color: #43B929;
> + --admonition-tip-background-color: #EDFAEA;
> +
> + --example-block-color: #F1BB16;
> + --example-block-background-color: #FEF8E7;
> +
> + --openzfs-image: url("/images/openzfs.png");
> + --virtualization-image: url("/images/virtualization.png");
> + --jails-image: url("/images/jails.png");
> + --networking-image: url("/images/networking.png");
> + --documentation-image: url("/images/documentation.png");
> + --community-image: url("/images/community.png");
> +
> +}
> +
> +#page {
> + --global-font-color: var(--light-global-font-color);
> + --global-background-color: var(--light-global-background-color);
> + --header-background: var(--light-header-background);
> + --header-font-color: var(--light-header-font-color);
> + --footer-background-color: var(--light-footer-background-color);
> + --background-accent-color: var(--light-background-accent-color);
> + --background-frontpage-band-color: var(--light-background-frontpage-band-color);
> + --table-header-background-color: var(--light-table-header-background-color);
> + --table-header-font-color: var(--light-table-header-font-color);
> + --lines-color: var(--light-lines-color);
> + --links-color: var(--light-links-color);
> + --pre-background-color: var(--light-pre-background-color);
> + --pre-font-color: var(--light-pre-font-color);
> + --feeds-background: var(--light-feeds-background);
> + --example-block-font-color: var(--light-example-block-font-color);
> +
> + --admonition-links-color: #0645AD;
> +
> + --freebsd-logo-horizontal-image: var(--light-freebsd-logo-horizontal-image);
> +
> +}
> +
> +@media (prefers-color-scheme: dark) {
> + #page {
> + --global-font-color: var(--dark-global-font-color);
> + --global-background-color: var(--dark-global-background-color);
> + --header-background: var(--dark-header-background);
> + --header-font-color: var(--dark-header-font-color);
> + --footer-background-color: var(--dark-footer-background-color);
> + --background-accent-color: var(--dark-background-accent-color);
> + --background-frontpage-band-color: var(--dark-background-frontpage-band-color);
> + --table-header-background-color: var(--dark-table-header-background-color);
> + --table-header-font-color: var(--dark-table-header-font-color);
> + --lines-color: var(--dark-lines-color);
> + --links-color: var(--dark-links-color);
> + --pre-background-color: var(--dark-pre-background-color);
> + --pre-font-color: var(--dark-pre-font-color);
> + --feeds-background: var(--dark-feeds-background);
> + --example-block-font-color: var(--dark-example-block-font-color);
> +
> + --admonition-links-color: #1A79FF;
> +
> + --freebsd-logo-horizontal-image: var(--dark-freebsd-logo-horizontal-image);
> +
> + }
> +}
> +
> +.theme-switch:checked ~ #page {
> + --global-font-color: var(--dark-global-font-color);
> + --global-background-color: var(--dark-global-background-color);
> + --header-background: var(--dark-header-background);
> + --header-font-color: var(--dark-header-font-color);
> + --footer-background-color: var(--dark-footer-background-color);
> + --background-accent-color: var(--dark-background-accent-color);
> + --background-frontpage-band-color: var(--dark-background-frontpage-band-color);
> + --table-header-background-color: var(--dark-table-header-background-color);
> + --table-header-font-color: var(--dark-table-header-font-color);
> + --lines-color: var(--dark-lines-color);
> + --links-color: var(--dark-links-color);
> + --pre-background-color: var(--dark-pre-background-color);
> + --pre-font-color: var(--dark-pre-font-color);
> + --feeds-background: var(--dark-feeds-background);
> + --example-block-font-color: var(--dark-example-block-font-color);
> +
> + --admonition-links-color: #1A79FF;
> +
> + --freebsd-logo-horizontal-image: var(--dark-freebsd-logo-horizontal-image);
> +
> +}
> +
> +@media (prefers-color-scheme: dark) {
> + .theme-switch:checked ~ #page {
> + --global-font-color: var(--light-global-font-color);
> + --global-background-color: var(--light-global-background-color);
> + --header-background: var(--light-header-background);
> + --header-font-color: var(--light-header-font-color);
> + --footer-background-color: var(--light-footer-background-color);
> + --background-accent-color: var(--light-background-accent-color);
> + --background-frontpage-band-color: var(--light-background-frontpage-band-color);
> + --table-header-background-color: var(--light-table-header-background-color);
> + --table-header-font-color: var(--light-table-header-font-color);
> + --lines-color: var(--light-lines-color);
> + --links-color: var(--light-links-color);
> + --pre-background-color: var(--light-pre-background-color);
> + --pre-font-color: var(--light-pre-font-color);
> + --feeds-background: var(--light-feeds-background);
> + --example-block-font-color: var(--light-example-block-font-color);
> +
> + --admonition-links-color: #0645AD;
> +
> + --freebsd-logo-horizontal-image: var(--light-freebsd-logo-horizontal-image);
> +
> + }
> +}
> +
> +@media (max-width: 599px) {
> + :root {
> + --main-tag-padding: 30px 15px;
> + }
> +}
> +
> +@media (min-width: 600px) and (max-width: 1199px) {
> + :root {
> + --main-tag-padding: 30px 20px;
> + }
> +}
> +
> +@media (min-width: 1200px) {
> + :root {
> + --main-tag-padding: 30px 40px;
> + }
> +}
> +
> +*, *::before, *::after {
> + box-sizing: border-box;
> +}
> +
> +:focus-visible {
> + outline: 2px solid var(--links-color);
> + outline-offset: 2px;
> +}
> +
> +:focus:not(:focus-visible) {
> + outline: none;
> +}
> +
> +html {
> + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
> + scroll-padding-top: var(--header-height);
> + scroll-behavior: auto;
> +}
> +
> +html,
> +body {
> + text-rendering: optimizeLegibility;
> + line-height: 1.5;
> +}
> +
> +body {
> + padding: 0;
> + margin: 0;
> + font-size: 100%;
> + font-weight: 400;
> + font-style: normal;
> + cursor: auto;
> +}
> +
> +#page {
> + display: flex;
> + flex-direction: column;
> + min-height: 100vh;
> + color: var(--global-font-color);
> + background-color: var(--global-background-color);
> +}
> +
> +/* HTML Tags */
> +h1, h2, h3, h4, h5, h6 {
> + margin: 0;
> + padding-bottom: .3rem;
> +}
> +
> +:is(h1, h2, h3, h4) {
> + line-height: 1.3;
> +}
> +
> +:is(h1, h2) {
> + font-weight: 900;
> +}
> +
> +h1 { font-size: var(--size-750); }
> +h2 { font-size: var(--size-600); }
> +h3 { font-size: var(--size-550); padding-top: .8rem; }
> +h4 { font-size: var(--size-500); }
> +h5 { font-size: var(--size-400); }
> +h6 { font-size: var(--size-300); }
> +
> +:is(h2, h3, h4, h5, h6) > .anchor {
> + text-decoration: none;
> +}
> +
> +:is(h2, h3, h4, h5, h6) > .anchor:hover {
> + text-decoration: none;
> +}
> +
> +:is(h2, h3, h4, h5, h6) > .anchor::before {
> + visibility: hidden;
> + margin-left: .3rem;
> + content: "#";
> + color: var(--global-font-color);
> +}
> +
> +:is(h2, h3, h4, h5, h6):hover .anchor::before,
> +:is(h2, h3, h4, h5, h6):focus-within .anchor::before {
> + visibility: visible;
> +}
> +
> +hr {
> + margin-top: 1rem;
> + margin-bottom: 1rem;
> + border: 0;
> + border-top: 1px solid var(--lines-color);
> +}
> +
> +a {
> + text-decoration: none;
> + color: var(--links-color);
> +}
> +
> +a:hover {
> + text-decoration: underline;
> +}
> +
> +img {
> + max-width: 100%;
> +}
> +
> +figcaption {
> + font-size: var(--size-300);
> + font-style: italic;
> + margin-top: 1rem;
> +}
> +
> +pre {
> + display: block;
> + width: 100%;
> + max-width: 100%;
> + margin: 0;
> + padding: 1rem;
> + box-sizing: border-box;
> + overflow: auto hidden;
> + white-space: pre;
> + word-break: normal;
> + overflow-wrap: normal;
> + border-radius: .25rem;
> + font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
> + background-color: var(--pre-background-color);
> + font-size: 1rem;
> + color: var(--pre-font-color);
> + line-height: 1.4;
> +}
> +
> +p {
> + text-justify: inter-word;
> +}
> +
> +b, dt, strong, th {
> + font-weight: bolder;
> +}
> +
> +dt {
> + font-style: italic;
> +}
> +
> +blockquote {
> + padding-left: var(--size-600);
> + border-left: 5px solid;
> + font-style: italic;
> +}
> +
> +code {
> + padding: .12rem .2rem;
> + border-radius: .25rem;
> + background-color: var(--pre-background-color);
> + font-family: "DejaVu Sans Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
> + color: var(--pre-font-color);
> +}
> +
> +kbd {
> + font-family: "DejaVu Sans", "DejaVu Sans Bold";
> + display: inline-block;
> + color: rgba(0,0,0,.8);
> + font-size: .65em;
> + line-height: 1.45;
> + background-color: #f7f7f7;
> + border: 1px solid #ccc;
> + border-radius: 3px;
> + box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 0.1em var(--white) inset;
> + margin: 0 .15em;
> + padding: .2em .5em;
> + vertical-align: middle;
> + position: relative;
> + top: -0.1em;
> + white-space: nowrap;
> +}
> +
> +details {
> + margin: 1rem 0;
> +}
> +
> +details summary {
> + cursor: pointer;
> +}
> +
> +/* Header section */
> +header {
> + padding: .5rem 1rem;
> + background-color: var(--header-background);
> + font-size: clamp(13px, 0.8vw, 15px);
> +}
> +
> +.header-container {
> + display: flex;
> + width: 100%;
> + max-width: var(--max-width-header);
> + margin-left: auto;
> + margin-right: auto;
> + align-items: center;
> +}
> +
> +.logo-menu-bars-container {
> + display: flex;
> + align-items: center;
> +}
> +
> +.logo {
> + display: flex;
> + align-items: center;
> + margin-right: 1rem;
> +}
> +
> +header nav {
> + margin-left: 0;
> + margin-right: 0;
> +}
> +
> +header ul {
> + margin: 0;
> + padding: 0;
> + list-style: none;
> + overflow: hidden;
> +}
> +
> +header ul li {
> + list-style: none;
> +}
> +
> +.menu-bars {
> + display: none;
> + margin-left: auto;
> + color: var(--white);
> + cursor: pointer;
> +}
> +
> +input[type='checkbox'] {
> + display: none;
> +}
> +
> +.menu {
> + display: flex;
> + padding: 0;
> + margin: 0;
> +}
> +
> +.menu-item {
> + display: flex;
> + margin-right: 1rem;
> + align-items: center;
> + color: var(--white);
> +}
> +
> +.menu-item a {
> + padding: 1rem 0;
> + color: inherit;
> +}
> +
> +.menu-item a,
> +.donate a {
> + text-decoration: none;
> + font-weight: 600;
> +}
> +
> +.menu-item a:hover,
> +.donate a:hover {
> + text-decoration: none;
> +}
> +
> +.donate a {
> + color: var(--black);
> +}
> +
> +.heart {
> + font-size: 1.2rem;
> + color: #E38582;
> +}
> +
> +.heart:hover {
> + color: #D1332E;
> +}
> +
> +.menu-item i {
> + margin-left: .1rem;
> +}
> +
> +.sub-menu {
> + visibility: hidden;
> + position: absolute;
> + top: 3rem;
> + padding: 1rem .75rem;
> + min-width: 250px;
> + background-color: var(--white);
> + border-radius: .4rem;
> + color: #444;
> + border: 1px solid #CDCDCD;
> + z-index: 999;
> +}
> +
> +.sub-menu:hover {
> + visibility: visible;
> +}
> +
> +.menu-item a:hover+.sub-menu {
> + visibility: visible;
> +}
> +
> +.sub-menu li {
> + margin-top: 0;
> + padding: .75rem .6rem;
> +}
> +
> +.sub-menu .title {
> + border-bottom: 1px solid #E5E7EB;
> +}
> +
> +.sub-menu li a {
> + font-weight: normal;
> +}
> +
> +.sub-menu .title a {
> + font-weight: bolder;
> +}
> +
> +.search-donate-container {
> + display: flex;
> + align-items: center;
> + margin-left: auto;
> +}
> +
> +.search {
> + display: flex;
> + width: 150px;
> + min-width: 150px;
> + border-radius: .4rem;
> + background-color: var(--white);
> + border: 1px solid var(--white);
> + margin-right: .5rem;
> +}
> +
> +.search input[type='text'] {
> + display: inline-block;
> + width: 100%;
> + min-width: 0;
> + padding: .3rem .5rem;
> + border: none;
> + border-radius: .4rem;
> + appearance: none;
> + outline: none;
> + background-color: var(--white);
> + color: var(--black);
> +}
> +
> +.search button {
> + flex: 0 0 2rem;
> + width: 2rem;
> + padding: 0;
> + background-color: var(--white);
> + border: none;
> + border-radius: .4rem;
> +}
> +
> +.search button i {
> + color: var(--black);
> +}
> +
> +.donate {
> + margin-left: .5rem;
> +}
> +
> +.donate a {
> + display: inline-block;
> + padding: .45rem .85rem;
> + background-color: var(--white);
> + border-radius: .4rem;
> +}
> +
> +.i18n {
> + position: relative;
> + display: inline-block;
> +}
> +
> +.lang-toggle {
> + display: flex;
> + list-style: none;
> + cursor: pointer;
> +}
> +
> +.lang-toggle img {
> + height: 1.5rem;
> + width: 1.5rem;
> +}
> +
> +.lang-dropdown {
> + display: none;
> + position: absolute;
> + top: 100%;
> + right: 0;
> + background: var(--white);
> + border: 1px solid var(--lines-color);
> + box-shadow: 0 4px 6px rgba(0,0,0,0.1);
> + list-style: none;
> + margin: 0;
> + padding: 0;
> + min-width: 120px;
> + z-index: 10;
> +}
> +
> +.i18n[open] .lang-dropdown {
> + display: block;
> +}
> +
> +.lang-dropdown li a {
> + display: block;
> + padding: 8px 12px;
> + text-decoration: none;
> + color: #444;
> +}
> +
> +.lang-dropdown li a:hover {
> + background: #F5F5F5;
> +}
> +
> +.lang-dropdown .current-lang {
> + font-weight: bold;
> + background: #F0F0F0;
> + pointer-events: none;
> +}
> +
> +@media screen and (max-width: 1300px) {
> + .header-container {
> + flex-direction: column;
> + }
> +
> + .logo-menu-bars-container {
> + width: 100%;
> + padding: .5rem 0;
> + }
> +
> + nav {
> + width: 100%;
> + margin: 0;
> + padding: 0;
> + }
> +
> + .menu-bars {
> + display: block;
> + }
> +
> + .menu {
> + display: none;
> + width: 100%;
> + }
> +
> + #menu-bars:checked~nav .menu {
> + display: block;
> + }
> +
> + .menu-item {
> + flex-direction: column;
> + width: 100%;
> + margin-right: 0px;
> + border-top: 1px solid var(--white);
> + cursor: pointer;
> + }
> +
> + .menu-item a {
> + width: 100%;
> + }
> +
> + .menu-item a:hover+.sub-menu {
> + visibility: visible;
> + }
> +
> + .menu-item-description {
> + display: flex;
> + width: 100%;
> + cursor: pointer;
> + }
> +
> + .menu-item-description i {
> + margin-left: auto;
> + }
> +
> + .sub-menu {
> + display: none;
> + flex-direction: column;
> + width: 100%;
> + padding: 0px;
> + position: static;
> + visibility: visible;
> + border: none;
> + background-color: inherit;
> + color: inherit;
> + box-shadow: inherit;
> + }
> +
> + .sub-menu .title {
> + display: none;
> + border-bottom: none;
> + }
> +
> + .sub-menu li {
> + padding-left: 0px;
> + padding-right: 0px;
> + }
> +
> + #about:checked~.sub-menu,
> + #download:checked~.sub-menu,
> + #documentation:checked~.sub-menu,
> + #community:checked~.sub-menu,
> + #developers:checked~.sub-menu,
> + #support:checked~.sub-menu {
> + display: flex;
> + }
> +
> + .search-donate-container {
> + display: none;
> + }
> +
> + .search {
> + width: 100%;
> + min-width: 0;
> + }
> +
> + #menu-bars:checked~.search-donate-container {
> + display: flex;
> + flex-direction: column;
> + width: 100%;
> + margin-left: unset;
> + padding-top: .2rem;
> + }
> +
> + .donate {
> + display: flex;
> + width: 100%;
> + margin-left: unset;
> + padding-top: .8rem;
> + }
> +
> + .donate a {
> + width: 100%;
> + text-align: center;
> + }
> +
> + .donate a .heart {
> + font-size: 1.2rem;
> + color: #D1332E;
> + }
> +}
> +
> +@media screen and (min-width: 900px) {
> + header {
> + padding: .5rem 2rem;
> + }
> +}
> +
> +@media screen and (min-width: 1451px) {
> + header {
> + padding: .5rem 5rem;
> + }
> +}
> +
> +/* Home page */
> +.front-page-band-on {
> + background: var(--background-frontpage-band-color);
> +}
> +
> +.front-page-band-content {
> + max-width: var(--max-width);
> + margin: 0px auto;
> + padding: var(--main-tag-padding);
> + padding-top: 20px;
> + padding-bottom: 20px;
> +}
> +
> +.main-section {
> + margin: 1rem 0 0 0;
> +}
> +
> +.freebsd-horizontal .logo-box-image {
> + background-image: var(--freebsd-logo-horizontal-image);
> +}
> +
> +.logo-box {
> + width: 100px;
> + height: 100px;
> + float: right;
> + margin: 5px 10px 20px 20px;
> +}
> +
> +.logo-box-image {
> + width: 100%;
> + height: 100%;
> + margin: auto;
> + background-repeat: no-repeat;
> + background-position: center center;
> + background-size: contain;
> +}
> +
> +.front-page-logo {
> + float: none;
> + width: auto;
> + height: clamp(100px, 30vw, 180px);
> +}
> +
> +.front-page-tagline {
> + line-height: normal;
> + font-weight: 400;
> + font-size: 30px;
> + text-align: center;
> *** 8954 LINES SKIPPED ***
>
Sorry about the title, seems I forgot to add a new line :'(