diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss index 1cf6d6f604..a8bc07873d 100644 --- a/documentation/themes/beastie/assets/styles/global.scss +++ b/documentation/themes/beastie/assets/styles/global.scss @@ -1,737 +1,738 @@ /* * 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; scroll-padding-top: var(--header-height); scroll-behavior: smooth; } @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; } } @supports (scrollbar-width:thin) { body * { scrollbar-width: thin; scrollbar-color: #D9D9D9 transparent; } } html, body { text-rendering: optimizeLegibility; line-height: calc(1ex / 0.32); } body { display: flex; flex-direction: column; color: var(--global-font-color); padding: 0; margin: 0; font-size: 16px; 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); transition: padding .15s; background-color: var(--global-background-color); .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; } } } .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 { 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; 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-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; } .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; } code { font-family: "DejaVu Sans Mono", monospace; font-size: 0.75rem; } .filename { font-weight: bolder; } details { 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); } } diff --git a/documentation/themes/beastie/assets/styles/variables.scss b/documentation/themes/beastie/assets/styles/variables.scss index cc027d10ba..adb22109e1 100644 --- a/documentation/themes/beastie/assets/styles/variables.scss +++ b/documentation/themes/beastie/assets/styles/variables.scss @@ -1,146 +1,149 @@ /* * 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; --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; --links-color: #0645AD; --pre-background-color: #F4F4F4; --pre-font-color: #444; --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; --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; --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; }