Date: Fri, 15 May 2026 20:21:16 +0200 From: Sergio Carlavilla <carlavilla@freebsd.org> To: doc-committers@freebsd.org, dev-commits-doc-all@freebsd.org Cc: Mark McBride <mark@markmcb.com> Subject: 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. Message-ID: <CAFwocyMax8qJEfCASmzMWPE2Fft%2BqOLo7VMCH3dZfvfcs26dFQ@mail.gmail.com> In-Reply-To: <6a0763cc.23028.1a78f902@gitrepo.freebsd.org>
index | next in thread | previous in thread | raw e-mail
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 :'(home | help
Want to link to this message? Use this
URL: <https://mail-archive.FreeBSD.org/cgi/mid.cgi?CAFwocyMax8qJEfCASmzMWPE2Fft%2BqOLo7VMCH3dZfvfcs26dFQ>