From nobody Fri Sep 23 14:46:23 2022 X-Original-To: dev-commits-doc-all@mlmmj.nyi.freebsd.org Received: from mx1.freebsd.org (mx1.freebsd.org [IPv6:2610:1c1:1:606c::19:1]) by mlmmj.nyi.freebsd.org (Postfix) with ESMTP id 4MYw2R4v9Qz4d9MF for ; Fri, 23 Sep 2022 14:46:23 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from mxrelay.nyi.freebsd.org (mxrelay.nyi.freebsd.org [IPv6:2610:1c1:1:606c::19:3]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256 client-signature RSA-PSS (4096 bits) client-digest SHA256) (Client CN "mxrelay.nyi.freebsd.org", Issuer "R3" (verified OK)) by mx1.freebsd.org (Postfix) with ESMTPS id 4MYw2R4Zsrz4Cd2; Fri, 23 Sep 2022 14:46:23 +0000 (UTC) (envelope-from git@FreeBSD.org) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1663944383; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=nlW7FZ77UbpdUco8ulZruvQCGMNRt3D9hxZr+fD8mWs=; b=jM+Apn1DxBH2TRXsFVpDvaHUMrRJPDG/jJLVD3yMTdGQ5FKLKk0ipI20Q7hZgY70wWRuiy mEwSmn7JQm0JDoCzXCTHG9f7mKZ+WyDP4Av4WLMVClvUPlyqgMrrEv/9Qry1AnxGIgjynb FnhihjP137x+xSbpwhTYRK4h459U6dPOV87flL/Fhl4o7NgRhZ+BONttnbnOX7QPngnUls 9hZmSVP0XNlMH8RBiqOjCwrsnG13z84AlqI7fgttNSoj41A++GWItEuLrOC0Mn84+Z7Rnv QEBSq/oZPsLf78fllPBeOg5aD3teNf9UVYlCAh9qSCU5NTDm+FqVjpm8mX8Ijg== Received: from gitrepo.freebsd.org (gitrepo.freebsd.org [IPv6:2610:1c1:1:6068::e6a:5]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256) (Client did not present a certificate) by mxrelay.nyi.freebsd.org (Postfix) with ESMTPS id 4MYw2R3cLnzmSX; Fri, 23 Sep 2022 14:46:23 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from gitrepo.freebsd.org ([127.0.1.44]) by gitrepo.freebsd.org (8.16.1/8.16.1) with ESMTP id 28NEkNaM022210; Fri, 23 Sep 2022 14:46:23 GMT (envelope-from git@gitrepo.freebsd.org) Received: (from git@localhost) by gitrepo.freebsd.org (8.16.1/8.16.1/Submit) id 28NEkNJe022209; Fri, 23 Sep 2022 14:46:23 GMT (envelope-from git) Date: Fri, 23 Sep 2022 14:46:23 GMT Message-Id: <202209231446.28NEkNJe022209@gitrepo.freebsd.org> To: doc-committers@FreeBSD.org, dev-commits-doc-all@FreeBSD.org From: Sergio Carlavilla Delgado Subject: git: e987b56919 - main - Use new header and footer for the Documentation Portal List-Id: Commit messages for all branches of the doc repository List-Archive: https://lists.freebsd.org/archives/dev-commits-doc-all List-Help: List-Post: List-Subscribe: List-Unsubscribe: Sender: owner-dev-commits-doc-all@freebsd.org X-BeenThere: dev-commits-doc-all@freebsd.org MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Git-Committer: carlavilla X-Git-Repository: doc X-Git-Refname: refs/heads/main X-Git-Reftype: branch X-Git-Commit: e987b569194a4a0a8c3042c239aaaf5e91f83669 Auto-Submitted: auto-generated ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1663944383; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=nlW7FZ77UbpdUco8ulZruvQCGMNRt3D9hxZr+fD8mWs=; b=sOOui5SkXaj2Os/EOaHz5m5YQDGuZPpSa/ywSNMo5yIGvbrffbZrI64okgRkd5aTv24CLH Ri3Ru/FDs2ZePZI9T06uqajaf/ncNJKC1n8bdwaHk5Y8L5whuRvdRlBKWZjJhffshCTGWr v6nfjT9ad6PKAh6pUE97Ko0t1Mh1R0cRfUcvzvKbk9xnJHEvN0dvN22JChbQUT53MpMTOo iLDAOedypdOb1p7hJqg3Htro9YrIrQ2+yiTC9KimHuaDF0qZuV9PAfyYQv0KmDPoD3PSu/ iu4Cf1owZheK9Ai17/OsOUvDcFCoO7esyT5H0wTA/aeLzhqM5KUV8vnHhLk9cg== ARC-Seal: i=1; s=dkim; d=freebsd.org; t=1663944383; a=rsa-sha256; cv=none; b=ptF0WAUHQwyr33bCWchhyXhRdmOusceduFD7QhVW+7nAmFJEoNR7pPkwZhoB2MA2FXNEtP CrNBPlHZ95NJWz7uq+Ot6yxRaSKJ7Qs+kSq5+MktgYfRIIgQ/ePtFpP35lzRvqo4ePDZAD bvZLVZxIMXqEgbXfEYGJbVkdRvD92tnAYl4I6+V8j1D+AocAVUWkX0sIlZNofgm2PuDcZn U5zwHyeHUIgg9BQE0M4Pk94owcihGaU/zPhMOPOUF8C1hQRHjfbufGzM3psVADzeuk0woE gp62FDqiLzCq9F43BR+qSKyBzHz12SdhShIPKR/voBja8yqG76yCB4Kanp7wPA== ARC-Authentication-Results: i=1; mx1.freebsd.org; none X-ThisMailContainsUnwantedMimeParts: N The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=e987b569194a4a0a8c3042c239aaaf5e91f83669 commit e987b569194a4a0a8c3042c239aaaf5e91f83669 Author: Sergio Carlavilla Delgado AuthorDate: 2022-09-23 14:45:10 +0000 Commit: Sergio Carlavilla Delgado 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 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 * 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 * 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 * 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 * 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 * 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 * 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 ***