Date: Fri, 15 May 2026 18:19:56 +0000 From: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org> To: doc-committers@FreeBSD.org, dev-commits-doc-all@FreeBSD.org Cc: Mark McBride <mark@markmcb.com> Subject: 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. Message-ID: <6a0763cc.23028.1a78f902@gitrepo.freebsd.org>
index | next in thread | raw e-mail
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 ***home | help
Want to link to this message? Use this
URL: <https://mail-archive.FreeBSD.org/cgi/mid.cgi?6a0763cc.23028.1a78f902>