diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss index 28e15c5544..7826480db8 100644 --- a/documentation/themes/beastie/assets/styles/documentation.scss +++ b/documentation/themes/beastie/assets/styles/documentation.scss @@ -1,392 +1,404 @@ /* * Copyright (c) 2001-2022, The FreeBSD Documentation Project * Copyright (c) 2021-2022, Sergio Carlavilla * 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. * */ .articles-books-list { list-style: none; padding-left: 10px; li { a { text-decoration: none; font-weight: bolder; color: var(--global-font); } p { margin-top: 0px; } } } .main-wrapper-article { display: flex; margin-top: var(--header-height); + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 1440px; + width: 100%; .article { flex-grow: 1; padding: var(--documentation-padding); width: 90vw; width: clamp(16rem, 90vw, 70rem); min-width: 20rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; transition: .2s ease-in-out; } } .main-wrapper-book { display: flex; margin-top: var(--header-height); + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 1440px; + width: 100%; .book-menu { flex: 0 0 16rem; font-size: .75rem; background-color: var(--global-background-color); .book-menu-content { width: 16rem; position: sticky; top: var(--header-height); bottom: 0; overflow-x: hidden; overflow-y: auto; background-color: var(--global-background-color); transition: .2s ease-in-out; h3 { margin: 1rem 0; - border-bottom: none; padding-left: .5rem; + border-bottom: none; } #search-book { - margin: 0 0 .75rem .75rem; + margin-bottom: .75rem; border: 1px solid #CCC; border-radius: 4px; box-shadow: inset 0 1px 3px #DDD; box-sizing: border-box; background-color: #FCFCFD; color: #444; width: 95%; + margin-left: .5rem; } input.toggle ~ .icon::after { display: inline-block; font: 1rem FontAwesome; text-rendering: auto; content: "\f105"; } input.toggle:checked ~ .icon::after { display: inline-block; font: 1rem FontAwesome; text-rendering: auto; content: "\f107"; } input.toggle ~ ul { display:none } input.toggle:checked ~ ul { display:block } #MenuContents { position: sticky; overflow: auto; max-height: calc(90vh); line-height: 2; ul { - margin: 0 0 0 .75rem; + margin: 0; padding: 0; + padding-left: .5rem; li { list-style: none; margin: 0; label { position: absolute; cursor: pointer; + font-size: 0.875rem; } a { color: var(--global-font-color); display: block; padding-left: 1rem; + padding-right: .5rem; + font-size: 0.875rem; } } } } } } .book { flex-grow: 1; padding: var(--documentation-padding); width: 90vw; min-width: 20rem; - margin-left: auto; - margin-right: auto; + max-width: 1440px; padding-left: 1.5rem; padding-right: 1.5rem; transition-duration: 0.2s; background-color: var(--global-background-color); h1 { margin: .8rem 0; } .book-menu-mobile { margin-top: 10px; .menu-control-button { border-radius: 2px; cursor: pointer; font-weight: 500; padding: 5px; border: 1px solid var(--lines-color); i { padding-right: 5px; } } } .buttons { display: flex; align-content: center; align-items: center; justify-content: center; flex-direction: row; .prev, .home, .next { display: flex; flex-direction: row; align-items: center; i { padding: 1rem; } } .home { margin-left: auto; margin-right: auto; i { padding-left: .2rem; padding-right: .2rem; } } .container { display: flex; flex-direction: column; .direction { font-weight: bolder; } } } } } .toc { flex: 0 0 16rem; font-size: .75rem; background-color: var(--global-background-color); .toc-content { width: 16rem; position: sticky; top: var(--header-height); bottom: 0; overflow-x: hidden; overflow-y: auto; transition: .2s ease-in-out; h3 { border-bottom: none; margin: 1rem 0; } #TableOfContents { position: sticky; overflow: auto; max-height: 60vh; ul { margin: 0; padding: 0; li { margin: 0; margin-bottom: .5rem; list-style: none; a { color: var(--global-font-color); display: inline-block; - padding: .25rem 0 .25rem .5rem; + padding: .25rem .5rem .25rem .5rem; margin-left: .5rem; + font-size: 0.875rem; text-decoration: none; - i { - margin-right: .5rem; - } - &:hover { - font-weight: 500; + text-decoration: underline; } } } } } .resources { h3 { margin: 1rem 0; } ul { margin: 0; padding: 0; li { list-style: none; margin: 0; a { color: var(--global-font-color); display: inline-block; - padding: .25rem 0 .25rem .5rem; + padding: .25rem .5rem .25rem .5rem; + font-size: 0.875rem; } i { margin-left: 1rem; } } } } } } .toc-mobile { h3 { border-bottom: none; } #TableOfContents, .resources { ul { list-style: none; margin: 0; padding: 0; li { margin: 0; a { color: var(--global-font-color); display: inline-block; padding: .25rem 0 .25rem .5rem; text-decoration: none; border-left: 1px solid var(--lines-color); &:hover { font-weight: bolder; } } } } } } .hidden { display: none; } input.toggle { height: 0; width: 0; overflow: hidden; opacity: 0; position: absolute; } @media (max-width: 55em) { .toc { display: none; } #menu-control { display: inline; } .book-menu { visibility: hidden; margin-inline-start: -16rem; z-index: 1; } #menu-control:checked ~ main { .book-menu { visibility: initial; } .book-menu .book-menu-content { transform: translateX(16rem); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); } .book { opacity: 0.25; } .book-menu-overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } } } @media (min-width: 55em) { .toc-mobile, .book-menu-mobile { display: none; } } diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss index 97981c93a7..aece947208 100644 --- a/documentation/themes/beastie/assets/styles/footer.scss +++ b/documentation/themes/beastie/assets/styles/footer.scss @@ -1,174 +1,185 @@ /* * Copyright (c) 2001-2022, The FreeBSD Documentation Project * Copyright (c) 2021-2022, Sergio Carlavilla * 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. * */ footer { display: flex; flex-flow: row wrap; padding: 30px 20px 20px 20px; color: var(--global-font-color); background-color: var(--footer-background); border-top: 1px solid var(--footer-border-color); align-items: center; + justify-content: center; + + .container { + display: flex; + max-width: 1440px; + flex-flow: row wrap; + } > * { flex: 1 100%; } .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-shadow: inset 0 1px 3px #DDD; 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; } } } } } .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); } } } } + .footer-nav > li { + margin-bottom: 2rem; + } + .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; } } } } @media screen and (min-width: 24rem) { .copyright .love { margin-left: auto; } } @media screen and (min-width: 40rem) { .footer-project-language { flex: 1 0px; } .footer-nav > * { flex: 1; } .footer-nav { flex: 2 0px; } } @media screen and (max-width: 41rem) { .footer-nav { display: block !important; } } diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss index 157cfd669c..c6e2bbaf6d 100644 --- a/documentation/themes/beastie/assets/styles/global.scss +++ b/documentation/themes/beastie/assets/styles/global.scss @@ -1,807 +1,811 @@ /* * Copyright (c) 2001-2022, The FreeBSD Documentation Project * Copyright (c) 2021-2022, Sergio Carlavilla * 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. * */ html { - font-family: 'Inter', sans-serif; + font-family: 'Inter', -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; } @supports (font-variation-settings: normal) { html { - font-family: 'Inter var', sans-serif; - } -} - -@supports (scrollbar-width:thin) { - body * { - scrollbar-width: thin; - scrollbar-color: #D9D9D9 transparent; + font-family: 'Inter var', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } html, body { text-rendering: optimizeLegibility; line-height: 1.5; } body { display: flex; flex-direction: column; color: var(--global-font-color); padding: 0; margin: 0; - font-size: 16px; + font-size: 100%; font-weight: 400; font-style: normal; cursor: auto; background-color: var(--global-background-color); } /* Main */ .main-wrapper { display: flex; flex-direction: column; - padding: 0rem 2rem 2rem 2rem; margin-top: var(--header-height); + justify-content: center; + margin-left: auto; + margin-right: auto; + max-width: 1440px; transition: padding .15s; background-color: var(--global-background-color); + .article { + .paragraph { + padding-left: .5rem; + } + } + .welcome-container { display: flex; width: 100%; margin-top: 2.5rem; text-align: center; align-items: center; flex-direction: column; .title-language-container { display: flex; width: 100%; justify-content: center; h2 { margin: 0; border-bottom: 0px; margin-left: auto; } a { margin-left: auto; img { display: inline-flex; padding-right: 10px; align-items: center; justify-content: center; height: 1.5rem; width: 1.5rem; } } } form { display: flex; width: 100%; background-color: var(--global-background-color); justify-content: center; input { display: block; width: 50%; padding: 10px 20px; border: 1px solid #CCC; border-radius: 4px; box-shadow: inset 0 1px 3px #DDD; box-sizing: border-box; background-color: #FCFCFD; color: #444; } } } .cards-container { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top: 3rem; margin-bottom: 3rem; .row { display: flex; flex-direction: row; justify-content: center; width: 100%; margin-bottom: 2rem; .card { display: flex; flex: 280px 0; margin-left: 16px; padding: 24px; border: 1px solid var(--card-border-color); background-color: var(--card-background-color); a { display: flex; flex-direction: column; text-decoration: none; h5 { color: var(--global-font-color); font-weight: 700; font-size: 22px; margin: 0px 0px 8px 0px; border-bottom: 0px; } p { color: var(--global-font-color); font-size: 18px; margin: 0px; margin-top: auto; text-align: inherit; } } } } } } ul.language-list { display: flex; flex-wrap: wrap; list-style: none; li { flex: 1 0 25%; list-style-type: none; max-width: 25%; a { cursor: pointer; color: var(--global-font-color); } } .selected { font-weight: bolder; } } @media (max-width: 55em) { .main-wrapper { padding: 0rem 1rem 2rem 1rem; .welcome-container { margin-bottom: 2.5rem; form { input { width: 100%; background-color: var(--white); } } } .cards-container { display: block; width: 100%; margin: 0; padding: 0; .row { display: block; width: 100%; .card { display: block; width: 100%; margin: 0px; margin-bottom: 2rem; padding: 0px; a { display: flex; padding: 20px; min-height: 100px; } } } } } } @media (min-width: 1200px) { .main-wrapper { .cards-container { .row { .card { width: 33.3%; } } } } } @media (min-width: 768px) { .main-wrapper { .cards-container { .row { .card { width: 50%; } } } } } .abstract-title { font-size: 24px; font-weight: 700; } h1, h2, h3, h4, h5, h6 { margin: 0; } h1, h2, h3, h4 { line-height: 1.3; } h1, h2 { font-weight: 900; } h1 { font-size: var(--size-750); } h2 { font-size: var(--size-600); } h3 { font-size: var(--size-550); } h4 { font-size: var(--size-500); } h5 { font-size: var(--size-400); } h6 { font-size: var(--size-300); } h2, h3, h4, h5, h6 { border-bottom: 1px solid var(--lines-color); } h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor, h1 .link, h2 .link, h3 .link, h4 .link, h5 .link, h6 .link { text-decoration: none !important; color: var(--global-font-color); } h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor { visibility: hidden; font-weight: normal; margin-right: 5px; } h1 .anchor::before, h2 .anchor::before, h3 .anchor::before, h4 .anchor::before, h5 .anchor::before, h6 .anchor::before { content: "\00a7"; } h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor { visibility: visible; font-weight: normal; margin-right: 5px; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid var(--lines-color); } a { text-decoration: none; color: var(--links-color); &:hover { text-decoration: underline; } } img { max-width: 100%; } .imageblock { .title { margin-top: .5rem; padding-bottom: 0; font-weight: bolder; font-style: italic; } } figcaption { font-size: var(--size-300); font-style: italic; margin-top: 1rem; } pre { border-radius: 0.25rem; - font-family: monospace; + 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; margin: 0 0 24px; overflow: auto !important; padding: 1rem; margin: 0; } 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; } .literalblock { margin: .75em 0; overflow: auto; .content { overflow: auto; } } /* callouts */ .conum { display: inline-block; color: #FFF !important; background-color: #000; border-radius: 100px; text-align: center; font-size: .75em; width: 1.67em; height: 1.67em; font-style: normal; font-weight: bold; } .conum[data-value] { color: #FFF !important; text-align: center; font-size: .75em; line-height: 1.67em; font-style: normal; font-weight: bold; } .conum[data-value]::after { content: attr(data-value); } .colist td { padding-top: 4px; padding-bottom: 4px; } .colist tr td b, .programlisting b { display: none; } .rouge b { display: none; } /* Tables */ table { caption { text-rendering: optimizeLegibility; text-align: left; font-weight: bolder; font-size: 1rem; } } table.tableblock { display: block; margin: auto; margin-bottom: 1.25em; max-width: 100%; border-collapse: collapse; overflow-x: auto; th { text-align: left; background-color: var(--table-header-background-color); color: var(--table-header-font-color); text-rendering: optimizeLegibility; padding: .5em .625em .625em; border: 0 solid #DEDEDE; border-width: 0 1px 1px 0; } td { text-align: left; border: 0 solid #DEDEDE; text-rendering: optimizeLegibility; line-height: 1.6; padding: .5em .625em .625em; font-size: inherit; border-width: 0 1px 1px 0; } td.icon { border: none; } td:first-of-type, th:first-of-type { border-left: none; } td:last-of-type, th:last-of-type { border-right: none; } } table.stretch { width: 100%; } /* Admonitions */ .admonitionblock { margin: 1.4rem 0; padding: 1rem; color: var(--admonition-font-color); table { table-layout: fixed; position: relative; width: 100%; tbody { tr { td.icon { position: absolute; top: 0; left: 0; line-height: 1; padding-bottom: .5rem; i { display: inline-flex; align-items: center; width: auto; background-position-x: .5em; vertical-align: initial; font-style: normal; &:after { content: attr(title); font-family: 'Inter var', sans-serif; font-weight: bolder; padding: 0 .5em; margin: -.05em; } } .icon-note::before { content:"\f05a"; color: var(--admonition-note-color); } .icon-tip::before { content:"\f0eb"; color: var(--admonition-tip-color) } .icon-warning::before { content:"\f071"; color: var(--admonition-warning-color); } .icon-caution::before { content:"\f06d"; color: var(--admonition-caution-color); } .icon-important::before { content:"\f06a"; color: var(--admonition-important-color); } } td.icon [class^="fa icon-"] { font-size: 1.2rem; cursor: default; } td.content { width: 100%; word-wrap: anywhere; .title { margin-top: 2rem; } .paragraph { padding-top: .5rem; } a { color: var(--admonition-links-color); } } } } } } .note { border-left: 5px solid var(--admonition-note-color); background-color: var(--admonition-note-background-color); } .warning { border-left: 5px solid var(--admonition-warning-color); background-color: var(--admonition-warning-background-color); } .important { border-left: 5px solid var(--admonition-important-color); background-color: var(--admonition-important-background-color); } .caution { border-left: 5px solid var(--admonition-caution-color); background-color: var(--admonition-caution-background-color); } .tip { border-left: 5px solid var(--admonition-tip-color); background-color: var(--admonition-tip-background-color); } /* Example */ .example, .exampleblock { border-left: 5px solid var(--example-block-color); padding: 1rem; background-color: var(--example-block-background-color); } .exampleblock { margin: .75rem 0; color: var(--example-block-font-color); .title { font-weight: bolder; font-family: 'Inter var', sans-serif; } .content { .literalblock { .content{ background: #fefde6 !important; border: none !important; color: var(--global-font-color); } } a { color: var(--admonition-links-color); } } } .procedure { border-left: 5px solid #B3B3B3; padding: 1rem; margin-bottom: 1.4rem; } /* Misc */ .fa { font-family: FontAwesome; font-style: normal; } .listingblock { margin: .75em 0; position: relative; } .highlight { padding-top: 1.5rem; padding-bottom: 1.5rem; } code { - font-family: "DejaVu Sans Mono", monospace; + font-family: "DejaVu Sans Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; font-size: 0.75rem; } .filename { font-weight: bolder; } details { + margin: 1rem 0; + summary { cursor: pointer; } } 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,.2),0 0 0 .1em #FFF inset; margin: 0 .15em; padding: .2em .5em; vertical-align: middle; position: relative; top: -.1em; white-space: nowrap; } .to-top { opacity: 1; visibility: visible; transition: .2s; position: fixed; bottom: 1.2rem; right: 1.5rem; z-index: 15; text-decoration: none; i { font-size: 2rem; color: var(--global-font-color); } } .copy-to-clipboard-wrapper { position: absolute; margin: 0; padding: .50rem; right: .5rem; top: 0rem; button { display: flex; flex-direction: column; border: none; cursor: pointer; align-items: center; width: 1rem; height: 1rem; background: none; &:focus { outline: none; } i { color: var(--white); } } .tooltip { visibility: hidden; opacity: 0; justify-content: center; margin-top: 1em; background-color: var(--copy-clipboard-tooltip-background-color); border-radius: .25em; padding: .5em; color: var(--white); z-index: 999; &:focus { outline: none; } } .show-tooltip { visibility: visible; opacity: 1; transition: visibility 0s easy 0s; } } diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss index bdc53aeb2f..04c953103e 100644 --- a/documentation/themes/beastie/assets/styles/header.scss +++ b/documentation/themes/beastie/assets/styles/header.scss @@ -1,166 +1,173 @@ /* * Copyright (c) 2001-2022, The FreeBSD Documentation Project * Copyright (c) 2021-2022, Sergio Carlavilla * 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. * */ header { position: fixed; background-color: var(--header-background); box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); width: 100%; z-index: 9999; + nav { + display: block; + max-width: 1440px; + width: 100%; + margin-left: auto; + margin-right: auto; + } + ul { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: var(--header-background); li { list-style: none; a { display: block; padding: 20px 20px; border-right: 1px solid var(--header-background); text-decoration: none; color: var(--header-font-color); font-weight: bolder; } } } .logo { display: block; float: left; font-size: 2em; padding: 10px 20px; padding-bottom: 0px; text-decoration: none; } .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; .first-element{ border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } } .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); } header .menu-icon .navicon:before, header .menu-icon .navicon:after { background: var(--white); content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } header .menu-icon .navicon:before { top: 5px; } header .menu-icon .navicon:after { top: -5px; } header .menu-btn { display: none; } header .menu-btn:checked ~ .menu { max-height: 300px; } header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } @media (min-width: 55em) { header li { float: left; list-style: none; } header li a { padding: 20px 30px; } header .menu { clear: none; float: right; max-height: none; } header .menu-icon { display: none; } - } diff --git a/documentation/themes/beastie/assets/styles/variables.scss b/documentation/themes/beastie/assets/styles/variables.scss index 48a87f7c14..717f154347 100644 --- a/documentation/themes/beastie/assets/styles/variables.scss +++ b/documentation/themes/beastie/assets/styles/variables.scss @@ -1,152 +1,152 @@ /* * Copyright (c) 2001-2022, The FreeBSD Documentation Project * Copyright (c) 2021-2022, Sergio Carlavilla * 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 { --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; --size-550: 1.55rem; --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-font-color: #FFF; - --global-background-color: #FCFCFD; + --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-border-color: #F0F1F5; - --lines-color: #E6ECF1; + --lines-color: #DDD; --links-color: #0645AD; --pre-background-color: #F4F4F4; --pre-font-color: #444; --copy-clipboard-tooltip-background-color: #43453B; --admonition-font-color: #444; --admonition-links-color: #0645AD; --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; --example-block-font-color: #444; } .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; --admonition-font-color: #444; --admonition-links-color: #1A79FF; --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; --example-block-font-color: #272727; } .theme-high-contrast { --white: #FFF; --black: #000; --global-font-color: #FFF; --header-background: #9F0E0F; --header-font-color: #FFF; --global-background-color: #000; --card-background-color: #000; --card-border-color: #FFF; --table-header-background-color: #FFF; --table-header-font-color: #000; --footer-background: #000; --footer-border-color: #FFF; --lines-color: #FFF; --links-color: #9F0E0F; --pre-background-color: #FFF; --pre-font-color: #000; --copy-clipboard-tooltip-background-color: #43453B; --admonition-font-color: #000; --admonition-note-color: #19407C; --admonition-links-color: #9F0E0F; --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; --example-block-font-color: #000; } diff --git a/documentation/themes/beastie/layouts/partials/site-footer.html b/documentation/themes/beastie/layouts/partials/site-footer.html index 7e00948dd1..06099138e9 100755 --- a/documentation/themes/beastie/layouts/partials/site-footer.html +++ b/documentation/themes/beastie/layouts/partials/site-footer.html @@ -1,65 +1,67 @@