Re: git: e987b56919 - main - Use new header and footer for the Documentation Portal
Date: Fri, 23 Sep 2022 14:47:58 UTC
On Fri, 23 Sept 2022 at 14:46, Sergio Carlavilla Delgado
<carlavilla@freebsd.org> wrote:
>
> The branch main has been updated by carlavilla:
>
> URL: https://cgit.FreeBSD.org/doc/commit/?id=e987b569194a4a0a8c3042c239aaaf5e91f83669
>
> commit e987b569194a4a0a8c3042c239aaaf5e91f83669
> Author: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
> AuthorDate: 2022-09-23 14:45:10 +0000
> Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
> CommitDate: 2022-09-23 14:46:13 +0000
>
> Use new header and footer for the Documentation Portal
>
> Use the new header and footer for the Documentation Portal.
> Upgrade the SVG logos to display the (R) icon required by the
> FreeBSD Foundation
>
> Approved by: doceng
> ---
> documentation/themes/beastie/LICENSE | 2 +-
> .../themes/beastie/assets/js/copy-clipboard.js | 2 +-
> documentation/themes/beastie/assets/js/search.js | 2 +-
> .../themes/beastie/assets/js/theme-chooser.js | 2 +-
> .../beastie/assets/styles/documentation.scss | 11 +-
> .../themes/beastie/assets/styles/footer.scss | 267 ++++++++-------
> .../themes/beastie/assets/styles/global.scss | 5 +-
> .../themes/beastie/assets/styles/header.scss | 377 +++++++++++++++------
> .../themes/beastie/assets/styles/main.scss | 2 +-
> .../themes/beastie/assets/styles/variables.scss | 84 +++--
> documentation/themes/beastie/i18n/en.toml | 156 ++++++++-
> .../themes/beastie/layouts/books/list.html | 1 -
> .../themes/beastie/layouts/books/single.html | 1 -
> .../beastie/layouts/partials/site-footer.html | 138 +++++---
> .../beastie/layouts/partials/site-header.html | 118 ++++++-
> .../beastie/static/images/FreeBSD-colors.svg | 92 +++++
> .../static/images/FreeBSD-monochromatic.svg | 82 +++++
> 17 files changed, 969 insertions(+), 373 deletions(-)
>
> diff --git a/documentation/themes/beastie/LICENSE b/documentation/themes/beastie/LICENSE
> index e94c3e41c7..dba716913c 100644
> --- a/documentation/themes/beastie/LICENSE
> +++ b/documentation/themes/beastie/LICENSE
> @@ -1,4 +1,4 @@
> -Copyright (c) 2020-2022, The FreeBSD Project
> +Copyright (c) 1994-2022, The FreeBSD Project
> Copyright (c) 2020-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
>
>
> diff --git a/documentation/themes/beastie/assets/js/copy-clipboard.js b/documentation/themes/beastie/assets/js/copy-clipboard.js
> index 126f2bf8b1..8038e96141 100644
> --- a/documentation/themes/beastie/assets/js/copy-clipboard.js
> +++ b/documentation/themes/beastie/assets/js/copy-clipboard.js
> @@ -1,7 +1,7 @@
> /*
> BSD 2-Clause License
>
> -Copyright (c) 2001-2022, The FreeBSD Documentation Project
> +Copyright (c) 1994-2022, The FreeBSD Documentation Project
> Copyright (c) 2021-2022, Sergio Carlavilla
> All rights reserved.
>
> diff --git a/documentation/themes/beastie/assets/js/search.js b/documentation/themes/beastie/assets/js/search.js
> index 0cf9a29bb2..f2f1584ab6 100644
> --- a/documentation/themes/beastie/assets/js/search.js
> +++ b/documentation/themes/beastie/assets/js/search.js
> @@ -1,7 +1,7 @@
> /*
> BSD 2-Clause License
>
> -Copyright (c) 2001-2022, The FreeBSD Documentation Project
> +Copyright (c) 1994-2022, The FreeBSD Documentation Project
> Copyright (c) 2021-2022, Sergio Carlavilla
> All rights reserved.
>
> diff --git a/documentation/themes/beastie/assets/js/theme-chooser.js b/documentation/themes/beastie/assets/js/theme-chooser.js
> index cc52d7084b..40e4cd898f 100644
> --- a/documentation/themes/beastie/assets/js/theme-chooser.js
> +++ b/documentation/themes/beastie/assets/js/theme-chooser.js
> @@ -1,7 +1,7 @@
> /*
> BSD 2-Clause License
>
> -Copyright (c) 2001-2022, The FreeBSD Documentation Project
> +Copyright (c) 1994-2022, The FreeBSD Documentation Project
> Copyright (c) 2021-2022, Sergio Carlavilla
> All rights reserved.
>
> diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
> index 7826480db8..39d4c1d27f 100644
> --- a/documentation/themes/beastie/assets/styles/documentation.scss
> +++ b/documentation/themes/beastie/assets/styles/documentation.scss
> @@ -1,5 +1,5 @@
> /*
> - * Copyright (c) 2001-2022, The FreeBSD Documentation Project
> + * Copyright (c) 1994-2022, The FreeBSD Documentation Project
> * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
> * All rights reserved.
> *
> @@ -47,11 +47,10 @@
>
> .main-wrapper-article {
> display: flex;
> - margin-top: var(--header-height);
> justify-content: center;
> margin-left: auto;
> margin-right: auto;
> - max-width: 1440px;
> + max-width: var(--max-width);
> width: 100%;
>
> .article {
> @@ -70,11 +69,10 @@
>
> .main-wrapper-book {
> display: flex;
> - margin-top: var(--header-height);
> justify-content: center;
> margin-left: auto;
> margin-right: auto;
> - max-width: 1440px;
> + max-width: var(--max-width);
> width: 100%;
>
> .book-menu {
> @@ -99,6 +97,7 @@
> }
>
> #search-book {
> + margin-top: 1.5rem;
> margin-bottom: .75rem;
> border: 1px solid #CCC;
> border-radius: 4px;
> @@ -171,7 +170,7 @@
> padding: var(--documentation-padding);
> width: 90vw;
> min-width: 20rem;
> - max-width: 1440px;
> + max-width: var(--max-width);
> padding-left: 1.5rem;
> padding-right: 1.5rem;
> transition-duration: 0.2s;
> diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss
> index aece947208..947687c4fe 100644
> --- a/documentation/themes/beastie/assets/styles/footer.scss
> +++ b/documentation/themes/beastie/assets/styles/footer.scss
> @@ -1,5 +1,5 @@
> /*
> - * Copyright (c) 2001-2022, The FreeBSD Documentation Project
> + * Copyright (c) 1994-2022, The FreeBSD Documentation Project
> * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
> * All rights reserved.
> *
> @@ -27,159 +27,156 @@
> */
>
> footer {
> - display: flex;
> - flex-flow: row wrap;
> - padding: 30px 20px 20px 20px;
> + margin-top: 1rem;
> + padding: 1rem;
> color: var(--global-font-color);
> - background-color: var(--footer-background);
> - border-top: 1px solid var(--footer-border-color);
> - align-items: center;
> - justify-content: center;
> + background-color: var(--footer-background-color);
> +}
>
> - .container {
> - display: flex;
> - max-width: 1440px;
> - flex-flow: row wrap;
> - }
> +.footer-container {
> + display: grid;
> + gap: 1rem;
> + grid-template-columns: 1fr;
> + grid-template-areas:
> + "logo"
> + "about"
> + "documentation"
> + "community"
> + "legal"
> + "copyright";
> + max-width: var(--max-width);
> + margin-left: auto;
> + margin-right: auto;
> +}
>
> - > * {
> - flex: 1 100%;
> - }
> +.logo-column {
> + grid-area: logo;
> +}
>
> - .footer-project-language {
> - margin-right: 1.25em;
> - margin-bottom: 2em;
> -
> - h1 {
> - font-weight: bolder;
> - font-size: 1.5rem;
> - }
> -
> - .options-container {
> - display: flex;
> - align-items: center;
> -
> - .theme-container {
> - display: none;
> - margin-left: 2rem;
> -
> - select {
> - border: 1px solid #CCC;
> - border-radius: 4px;
> - box-sizing: border-box;
> - background-color: #FCFCFD;
> - color: #444;
> - }
> - }
> -
> - .language-container {
> - display: flex;
> - align-items: center;
> -
> - a {
> - display: flex;
> - align-items: center;
> - text-decoration: none;
> - color: var(--global-font-color);
> - border-radius: 1px;
> - padding: .3rem;
> -
> - img {
> - display: inline-flex;
> - padding-right: 10px;
> - align-items: center;
> - justify-content: center;
> - height: 1.5rem;
> - width: 1.5rem;
> - }
> - }
> - }
> -
> - }
> +.about-column {
> + grid-area: about;
> +}
>
> - }
> +.community-column {
> + grid-area: community;
> +}
>
> - .footer-nav {
> - display: flex;
> - list-style: none;
> - margin: 0;
> - padding: 0;
> -
> - > * {
> - flex: 1 50%;
> - margin-right: 1.25em;
> - }
> -
> - .title {
> - font-weight: bolder;
> - font-size: 15px;
> - border-bottom: 1px solid var(--white);
> - }
> -
> - h2 {
> - border: none !important;
> - }
> -
> - ul {
> - list-style: none;
> - padding-left: 0;
> -
> - li {
> - line-height: 2em;
> -
> - a {
> - text-decoration: none;
> - color: var(--global-font-color);
> - }
> - }
> - }
> - }
> +.documentation-column {
> + grid-area: documentation;
> +}
>
> - .footer-nav > li {
> - margin-bottom: 2rem;
> - }
> +.legal-column {
> + grid-area: legal;
> +}
>
> - .copyright {
> - display: flex;
> - flex-wrap: wrap;
> - width: 100%;
> - color: var(--global-font-color);
> -
> - .love {
> - display: flex;
> - align-items: center;
> - font-weight: bolder;
> -
> - .heart {
> - color: red;
> - }
> - }
> - }
> +.copyright-column {
> + grid-area: copyright;
> + padding-top: 1rem;
> + border-top: 1px solid #E5E7EB;
> + line-height: 1rem;
> + font-size: .8rem;
> +}
>
> +.column-title {
> + margin-top: 0;
> + font-size: inherit;
> + border-bottom: none;
> }
>
> -@media screen and (min-width: 24rem) {
> - .copyright .love {
> - margin-left: auto;
> - }
> +.column-elements-container {
> + margin: .5rem 0;
> + padding: 0;
> + list-style: none;
> +}
> +
> +.column-elements-container li {
> + margin-top: .7rem;
> +}
> +
> +.column-element {
> + text-decoration: none;
> + line-height: 2rem;
> + color: inherit;
> + font-size: inherit;
> +}
> +
> +.heart {
> + color: red;
> }
>
> -@media screen and (min-width: 40rem) {
> - .footer-project-language {
> - flex: 1 0px;
> +.options-container {
> + display: flex;
> + align-items: center;
> +}
> +
> +.theme-container {
> + display: none;
> + margin-left: 2rem;
> +}
> +
> +.theme-container select {
> + border: 1px solid #CCC;
> + border-radius: 4px;
> + box-sizing: border-box;
> + background-color: #FCFCFD;
> + color: #444;
> +}
> +
> +.language-container {
> + display: flex;
> + align-items: center;
> +}
> +
> +.language-container a {
> + display: flex;
> + align-items: center;
> + text-decoration: none;
> + color: var(--global-font-color);
> + border-radius: 1px;
> + padding: .3rem;
> +}
> +
> +.language-container a img {
> + display: inline-flex;
> + padding-right: 10px;
> + align-items: center;
> + justify-content: center;
> + height: 1.5rem;
> + width: 1.5rem;
> +}
> +
> +@media screen and (min-width: 450px) {
> + .footer-container {
> + gap: 2rem;
> + grid-template-columns: 1fr 1fr;
> + grid-template-areas:
> + "logo logo"
> + "about community"
> + "documentation legal"
> + "copyright copyright";
> }
> +}
>
> - .footer-nav > * {
> - flex: 1;
> +@media screen and (min-width: 900px) {
> + footer {
> + padding: 2rem;
> }
>
> - .footer-nav {
> - flex: 2 0px;
> + .footer-container {
> + grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
> + grid-template-areas:
> + "logo about documentation community legal"
> + "copyright copyright copyright copyright copyright";
> + gap: 1rem;
> }
> }
>
> -@media screen and (max-width: 41rem) {
> - .footer-nav {
> - display: block !important;
> +@media screen and (min-width: 1451px) {
> + footer {
> + padding: 2rem 5rem;
> + }
> +
> + .footer-container {
> + gap: 2rem;
> }
> }
> diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
> index 77c1ece932..83537922e5 100644
> --- a/documentation/themes/beastie/assets/styles/global.scss
> +++ b/documentation/themes/beastie/assets/styles/global.scss
> @@ -1,5 +1,5 @@
> /*
> - * Copyright (c) 2001-2022, The FreeBSD Documentation Project
> + * Copyright (c) 1994-2022, The FreeBSD Documentation Project
> * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
> * All rights reserved.
> *
> @@ -60,11 +60,10 @@ body {
> .main-wrapper {
> display: flex;
> flex-direction: column;
> - margin-top: var(--header-height);
> justify-content: center;
> margin-left: auto;
> margin-right: auto;
> - max-width: 1440px;
> + max-width: var(--max-width);
> transition: padding .15s;
> background-color: var(--global-background-color);
>
> diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss
> index 04c953103e..fbb50b15cf 100644
> --- a/documentation/themes/beastie/assets/styles/header.scss
> +++ b/documentation/themes/beastie/assets/styles/header.scss
> @@ -1,5 +1,5 @@
> /*
> - * Copyright (c) 2001-2022, The FreeBSD Documentation Project
> + * Copyright (c) 1994-2022, The FreeBSD Documentation Project
> * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
> * All rights reserved.
> *
> @@ -27,147 +27,314 @@
> */
>
> header {
> - position: fixed;
> + position: sticky;
> + top: 0;
> + z-index: 9999;
> + padding: .5rem 1rem;
> background-color: var(--header-background);
> - box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
> +}
> +
> +.header-container {
> + display: flex;
> width: 100%;
> - z-index: 9999;
> + max-width: var(--max-width);
> + margin-left: auto;
> + margin-right: auto;
> + align-items: center;
> +}
>
> - nav {
> - display: block;
> - max-width: 1440px;
> - width: 100%;
> - margin-left: auto;
> - margin-right: auto;
> - }
> +.logo-menu-bars-container {
> + display: flex;
> + align-items: center;
> +}
>
> - ul {
> - margin: 0;
> - padding: 0;
> - list-style: none;
> - overflow: hidden;
> - background-color: var(--header-background);
> +.logo {
> + display: flex;
> + align-items: center;
> + margin-right: 1rem;
> +}
>
> - li {
> - list-style: none;
> +header nav {
> + margin-left: 0;
> + margin-right: 0;
> +}
>
> - a {
> - display: block;
> - padding: 20px 20px;
> - border-right: 1px solid var(--header-background);
> - text-decoration: none;
> - color: var(--header-font-color);
> - font-weight: bolder;
> - }
> - }
> - }
> +header ul {
> + margin: 0;
> + padding: 0;
> + list-style: none;
> + overflow: hidden;
> +}
>
> - .logo {
> - display: block;
> - float: left;
> - font-size: 2em;
> - padding: 10px 20px;
> - padding-bottom: 0px;
> - text-decoration: none;
> - }
> +header ul li {
> + list-style: none;
> +}
>
> - .menu {
> - clear: both;
> - max-height: 0;
> - transition: max-height .2s ease-out;
> +.menu-bars {
> + display: none;
> + margin-left: auto;
> + color: var(--white);
> + cursor: pointer;
> +}
>
> - .first-element{
> - border-top: 1px solid transparent;
> - box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
> - }
> - }
> +input[type='checkbox'] {
> + display: none;
> +}
>
> - .menu-icon {
> - cursor: pointer;
> - display: inline-block;
> - float: right;
> - padding: 28px 20px;
> - position: relative;
> - user-select: none;
> - margin-top: 5px;
> -
> - .navicon {
> - background: var(--white);
> - display: block;
> - height: 2px;
> - position: relative;
> - transition: background .2s ease-out;
> - width: 18px;
> - }
> - }
> -}
> -
> -header li a:hover,
> -header .menu-btn:hover {
> - background-color: var(--header-background);
> +.menu {
> + display: flex;
> + padding: 0;
> + margin: 0;
> +}
> +
> +.menu-item {
> + display: flex;
> + margin-right: 1rem;
> + align-items: center;
> + color: var(--white) !important;
> + margin-top: 0px !important;
> +}
> +
> +.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;
> }
>
> -header .menu-icon .navicon:before,
> -header .menu-icon .navicon:after {
> - background: var(--white);
> - content: '';
> - display: block;
> - height: 100%;
> +.donate a {
> + color: var(--black) !important;
> +}
> +
> +.menu-item i {
> + margin-left: .1rem;
> +}
> +
> +.sub-menu {
> + visibility: hidden;
> position: absolute;
> - transition: all .2s ease-out;
> - width: 100%;
> + top: 55px;
> + padding: 1rem .75rem;
> + min-width: 250px;
> + background-color: var(--white);
> + border-radius: .4rem;
> + color: #444;
> + border: 1px solid #CDCDCD;
> + z-index: 999;
> }
>
> -header .menu-icon .navicon:before {
> - top: 5px;
> +.sub-menu:hover {
> + visibility: visible;
> }
>
> -header .menu-icon .navicon:after {
> - top: -5px;
> +.menu-item a:hover+.sub-menu {
> + visibility: visible;
> }
>
> -header .menu-btn {
> - display: none;
> +.sub-menu li {
> + margin-top: 0;
> + padding: .75rem .6rem;
> }
>
> -header .menu-btn:checked ~ .menu {
> - max-height: 300px;
> +.sub-menu .title {
> + border-bottom: 1px solid #E5E7EB;
> }
>
> -header .menu-btn:checked ~ .menu-icon .navicon {
> - background: transparent;
> +.sub-menu li a {
> + font-weight: normal !important;
> }
>
> -header .menu-btn:checked ~ .menu-icon .navicon:before {
> - transform: rotate(-45deg);
> +.sub-menu .title a {
> + font-weight: bolder !important;
> }
>
> -header .menu-btn:checked ~ .menu-icon .navicon:after {
> - transform: rotate(45deg);
> +.search-donate-container {
> + display: flex;
> + align-items: center;
> + margin-top: 0px;
> + margin-left: auto;
> }
>
> -header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
> -header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
> - top: 0;
> +.search {
> + display: flex;
> + border-radius: .4rem;
> + background-color: var(--white);
> + border: 1px solid var(--white);
> + margin-top: 0px;
> +}
> +
> +.search input[type='text'] {
> + display: inline-block;
> + width: 100%;
> + padding: .3rem .8rem;
> + border: none;
> + border-radius: .4rem;
> + appearance: none;
> + outline: none;
> +}
> +
> +.search button {
> + background-color: var(--white);
> + border: none;
> + border-radius: .4rem;
> +}
> +
> +.donate {
> + margin-left: .5rem;
> +}
> +
> +.donate a {
> + display: inline-block;
> + padding: .5rem 1rem;
> + background-color: var(--white);
> + border-radius: .4rem;
> }
>
> -@media (min-width: 55em) {
> - header li {
> - float: left;
> - list-style: none;
> +.donate a i,
> +.heart i {
> + color: #E38582;
> +}
> +
> +.donate:hover a i,
> +.heart:hover i {
> + color: #D1332E;
> +}
> +
> +@media screen and (max-width: 1100px) {
> + .header-container {
> + flex-direction: column;
> }
>
> - header li a {
> - padding: 20px 30px;
> + .logo-menu-bars-container {
> + width: 100%;
> + padding: .5rem 0;
> }
>
> - header .menu {
> - clear: none;
> - float: right;
> - max-height: none;
> + nav {
> + width: 100%;
> + margin: 0;
> + padding: 0;
> + }
> +
> + .menu-bars {
> + display: block;
> + }
> +
> + .menu {
> + display: none;
> + width: 100%;
> + }
> +
> + #menu-bars:checked~nav .menu {
> + display: block !important;
> + }
> +
> + .menu-item {
> + flex-direction: column;
> + width: 100%;
> + margin-right: 0px;
> + border-top: 1px solid var(--white);
> + cursor: pointer;
> + }
> +
> + .menu-item a {
> + width: 100%;
> }
>
> - header .menu-icon {
> + .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 {
> + display: flex;
> + }
> +
> + .search-donate-container {
> + display: none;
> + }
> +
> + .search {
> + width: 100%;
> + }
> +
> + #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 i {
> + color: #D1332E;
> + }
> +}
> +
> +@media screen and (min-width: 900px) {
> + header {
> + padding: .5rem 2rem;
> + }
> +}
> +
> +@media screen and (min-width: 1451px) {
> + header {
> + padding: .5rem 5rem;
> }
> }
> diff --git a/documentation/themes/beastie/assets/styles/main.scss b/documentation/themes/beastie/assets/styles/main.scss
> index 8d3fdbb1c9..e2d1a98f03 100644
> --- a/documentation/themes/beastie/assets/styles/main.scss
> +++ b/documentation/themes/beastie/assets/styles/main.scss
> @@ -1,5 +1,5 @@
> /*
> - * Copyright (c) 2001-2022, The FreeBSD Documentation Project
> + * Copyright (c) 1994-2022, The FreeBSD Documentation Project
> * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
> * All rights reserved.
> *
> diff --git a/documentation/themes/beastie/assets/styles/variables.scss b/documentation/themes/beastie/assets/styles/variables.scss
> index 717f154347..2cb677a321 100644
> --- a/documentation/themes/beastie/assets/styles/variables.scss
> +++ b/documentation/themes/beastie/assets/styles/variables.scss
> @@ -1,5 +1,5 @@
> /*
> - * Copyright (c) 2001-2022, The FreeBSD Documentation Project
> + * Copyright (c) 1994-2022, The FreeBSD Documentation Project
> * Copyright (c) 2021-2022, Sergio Carlavilla <carlavilla@FreeBSD.org>
> * All rights reserved.
> *
> @@ -27,9 +27,10 @@
> */
>
> :root {
> + --max-width: 1450px;
> --header-height: 4.5rem;
> --documentation-padding: 0px 20px 20px 20px;
> - --size-200: 0.50rem;
> +
> --size-300: 0.75rem;
> --size-400: 1rem;
> --size-500: 1.33rem;
> @@ -37,24 +38,20 @@
> --size-600: 1.77rem;
> --size-700: 2.30rem;
> --size-750: 2.40rem;
> - --size-800: 3.15rem;
> - --size-900: 4.2rem;
> -
> - --flow-space: var(--size-700);
> }
>
> .theme-light {
> --white: #FFF;
> --black: #000;
> --global-font-color: #444;
> - --header-background: #9F0E0F;
> + --header-background: #AB2B28;
> --header-font-color: #FFF;
> --global-background-color: #FFF;
> --card-background-color: #F0F1F5;
> --card-border-color: #F0F1F5;
> --table-header-background-color: #F1F3F1;
> --table-header-font-color: #444;
> - --footer-background: #F0F1F5;
> + --footer-background-color: #F0F1F5;
> --footer-border-color: #F0F1F5;
> --lines-color: #DDD;
> --links-color: #0645AD;
> @@ -77,56 +74,57 @@
> --example-block-color: #F1BB16;
> --example-block-background-color: #FEF8E7;
> --example-block-font-color: #444;
> +
> + --footer-logo: "";
> }
>
> .theme-dark {
> - --white: #FFF;
> - --black: #000;
> - --global-font-color: #EEEFF1;
> - --header-background: #9F0E0F;
> - --header-font-color: #EEEFF1;
> - --global-background-color: #333333;
> - --card-background-color: #272727;
> - --card-border-color: #272727;
> - --table-header-background-color: #F1F3F1;
> - --table-header-font-color: #444;
> - --footer-background: #2B2B2B;
> - --footer-border-color: #2B2B2B;
> - --lines-color: #4d4d4d;
> - --links-color: #BAD7FF;
> - --pre-background-color: #272727;
> - --pre-font-color: #EEEFF1;
> - --copy-clipboard-tooltip-background-color: #43453B;
> + --white: #FFF;
> + --black: #000;
> + --global-font-color: #EEEFF1;
> + --header-background: #AB2B28;
> *** 754 LINES SKIPPED ***
>
Forgot to mention that I also corrected the copyright dates.
In a couple of days I'll upgrade to CSS Grid too to improve the UX of
the portal.
Also another few minor improvements will be committed this weekend.