diff --git a/website/themes/beastie/assets/styles/main.css b/website/themes/beastie/assets/styles/main.css index c1a1726995..2b6054f16c 100644 --- a/website/themes/beastie/assets/styles/main.css +++ b/website/themes/beastie/assets/styles/main.css @@ -1,1562 +1,1562 @@ /* * Copyright (c) 1994-2026, The FreeBSD Documentation Project * Copyright (c) 2021-2026, Sergio Carlavilla * Copyright (c) 2023, Mark McBride * Copyright (c) 2023, Mark Phillips * All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in * the documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE * ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF * SUCH DAMAGE. * */ :root { --main-tag-padding: 30px 40px; --max-width: 1200px; --max-width-header: 1350px; --max-width-pages: 1500px; --header-height: 4.5rem; --size-300: .75rem; --size-400: 1rem; --size-500: 1.33rem; --size-550: 1.55rem; --size-600: 1.77rem; --size-700: 2.3rem; --size-750: 2.4rem; --white: #FFF; --black: #000; /* Light theme */ --light-global-font-color: #444; --light-global-background-color: #FFF; --light-header-background: #AB2B28; --light-header-font-color: #FFF; --light-footer-background-color: #F0F1F5; --light-background-accent-color: #F9F0F0; --light-background-frontpage-band-color: #FFF6F6; --light-table-header-background-color: #F1F3F1; --light-table-header-font-color: #444; --light-lines-color: #DDD; --light-links-color: #990000; --light-pre-background-color: #F4F4F4; --light-pre-font-color: #444; --light-feeds-background: #F9F0F0; --light-example-block-font-color: #444; --light-freebsd-logo-horizontal-image: url("/images/FreeBSD-logo-dark.png"); /* Dark theme */ --dark-global-font-color: #EEEFF1; --dark-global-background-color: #333333; --dark-header-background: #AB2B28; --dark-header-font-color: #EEEFF1; --dark-footer-background-color: #2B2B2B; --dark-background-accent-color: #333; --dark-background-frontpage-band-color: #333333; --dark-table-header-background-color: #F1F3F1; --dark-table-header-font-color: #444; --dark-lines-color: #4D4D4D; --dark-links-color: #FF8A80; --dark-pre-background-color: #272727; --dark-pre-font-color: #EEEFF1; --dark-feeds-background: #222; --dark-example-block-font-color: #272727; --dark-freebsd-logo-horizontal-image: url("/images/FreeBSD-logo-light.png"); /* Shared theme values */ --download-release-section-background-color: #FACC2E; --download-release-section-font-color: #990000; --download-section-background-color: #AB2B28; --download-section-font-color: #FFF; --admonition-font-color: #444; --admonition-note-color: #19407C; --admonition-note-background-color: #EAF1FB; --admonition-warning-color: #BF6900; --admonition-warning-background-color: #FFF4E6; --admonition-important-color: #BF0000; --admonition-important-background-color: #FFE6E6; --admonition-caution-color: #BF3400; --admonition-caution-background-color: #FFECE6; --admonition-tip-color: #43B929; --admonition-tip-background-color: #EDFAEA; --example-block-color: #F1BB16; --example-block-background-color: #FEF8E7; --openzfs-image: url("/images/openzfs.png"); --virtualization-image: url("/images/virtualization.png"); --jails-image: url("/images/jails.png"); --networking-image: url("/images/networking.svg"); - --documentation-image: url("/images/documentation.png"); + --documentation-image: url("/images/documentation.svg"); --community-image: url("/images/community.png"); } #page { --global-font-color: var(--light-global-font-color); --global-background-color: var(--light-global-background-color); --header-background: var(--light-header-background); --header-font-color: var(--light-header-font-color); --footer-background-color: var(--light-footer-background-color); --background-accent-color: var(--light-background-accent-color); --background-frontpage-band-color: var(--light-background-frontpage-band-color); --table-header-background-color: var(--light-table-header-background-color); --table-header-font-color: var(--light-table-header-font-color); --lines-color: var(--light-lines-color); --links-color: var(--light-links-color); --pre-background-color: var(--light-pre-background-color); --pre-font-color: var(--light-pre-font-color); --feeds-background: var(--light-feeds-background); --example-block-font-color: var(--light-example-block-font-color); --admonition-links-color: #0645AD; --freebsd-logo-horizontal-image: var(--light-freebsd-logo-horizontal-image); } @media (prefers-color-scheme: dark) { #page { --global-font-color: var(--dark-global-font-color); --global-background-color: var(--dark-global-background-color); --header-background: var(--dark-header-background); --header-font-color: var(--dark-header-font-color); --footer-background-color: var(--dark-footer-background-color); --background-accent-color: var(--dark-background-accent-color); --background-frontpage-band-color: var(--dark-background-frontpage-band-color); --table-header-background-color: var(--dark-table-header-background-color); --table-header-font-color: var(--dark-table-header-font-color); --lines-color: var(--dark-lines-color); --links-color: var(--dark-links-color); --pre-background-color: var(--dark-pre-background-color); --pre-font-color: var(--dark-pre-font-color); --feeds-background: var(--dark-feeds-background); --example-block-font-color: var(--dark-example-block-font-color); --admonition-links-color: #1A79FF; --freebsd-logo-horizontal-image: var(--dark-freebsd-logo-horizontal-image); } } .theme-switch:checked ~ #page { --global-font-color: var(--dark-global-font-color); --global-background-color: var(--dark-global-background-color); --header-background: var(--dark-header-background); --header-font-color: var(--dark-header-font-color); --footer-background-color: var(--dark-footer-background-color); --background-accent-color: var(--dark-background-accent-color); --background-frontpage-band-color: var(--dark-background-frontpage-band-color); --table-header-background-color: var(--dark-table-header-background-color); --table-header-font-color: var(--dark-table-header-font-color); --lines-color: var(--dark-lines-color); --links-color: var(--dark-links-color); --pre-background-color: var(--dark-pre-background-color); --pre-font-color: var(--dark-pre-font-color); --feeds-background: var(--dark-feeds-background); --example-block-font-color: var(--dark-example-block-font-color); --admonition-links-color: #1A79FF; --freebsd-logo-horizontal-image: var(--dark-freebsd-logo-horizontal-image); } @media (prefers-color-scheme: dark) { .theme-switch:checked ~ #page { --global-font-color: var(--light-global-font-color); --global-background-color: var(--light-global-background-color); --header-background: var(--light-header-background); --header-font-color: var(--light-header-font-color); --footer-background-color: var(--light-footer-background-color); --background-accent-color: var(--light-background-accent-color); --background-frontpage-band-color: var(--light-background-frontpage-band-color); --table-header-background-color: var(--light-table-header-background-color); --table-header-font-color: var(--light-table-header-font-color); --lines-color: var(--light-lines-color); --links-color: var(--light-links-color); --pre-background-color: var(--light-pre-background-color); --pre-font-color: var(--light-pre-font-color); --feeds-background: var(--light-feeds-background); --example-block-font-color: var(--light-example-block-font-color); --admonition-links-color: #0645AD; --freebsd-logo-horizontal-image: var(--light-freebsd-logo-horizontal-image); } } @media (max-width: 599px) { :root { --main-tag-padding: 30px 15px; } } @media (min-width: 600px) and (max-width: 1199px) { :root { --main-tag-padding: 30px 20px; } } @media (min-width: 1200px) { :root { --main-tag-padding: 30px 40px; } } *, *::before, *::after { box-sizing: border-box; } :focus-visible { outline: 2px solid var(--links-color); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } html { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; scroll-padding-top: var(--header-height); scroll-behavior: auto; } html, body { text-rendering: optimizeLegibility; line-height: 1.5; } body { padding: 0; margin: 0; font-size: 100%; font-weight: 400; font-style: normal; cursor: auto; } #page { display: flex; flex-direction: column; min-height: 100vh; color: var(--global-font-color); background-color: var(--global-background-color); } /* HTML Tags */ h1, h2, h3, h4, h5, h6 { margin: 0; padding-bottom: .3rem; } :is(h1, h2, h3, h4) { line-height: 1.3; } :is(h1, h2) { font-weight: 900; } h1 { font-size: var(--size-750); } h2 { font-size: var(--size-600); } h3 { font-size: var(--size-550); padding-top: .8rem; } h4 { font-size: var(--size-500); } h5 { font-size: var(--size-400); } h6 { font-size: var(--size-300); } :is(h2, h3, h4, h5, h6) > .anchor { text-decoration: none; } :is(h2, h3, h4, h5, h6) > .anchor:hover { text-decoration: none; } :is(h2, h3, h4, h5, h6) > .anchor::before { visibility: hidden; margin-left: .3rem; content: "#"; color: var(--global-font-color); } :is(h2, h3, h4, h5, h6):hover .anchor::before, :is(h2, h3, h4, h5, h6):focus-within .anchor::before { visibility: visible; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid var(--lines-color); } a { text-decoration: none; color: var(--links-color); } a:hover { text-decoration: underline; } img { max-width: 100%; } figcaption { font-size: var(--size-300); font-style: italic; margin-top: 1rem; } pre { display: block; width: 100%; max-width: 100%; margin: 0; padding: 1rem; box-sizing: border-box; overflow: auto hidden; white-space: pre; word-break: normal; overflow-wrap: normal; border-radius: .25rem; font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace; background-color: var(--pre-background-color); font-size: 1rem; color: var(--pre-font-color); line-height: 1.4; } p { text-justify: inter-word; } b, dt, strong, th { font-weight: bolder; } dt { font-style: italic; } blockquote { padding-left: var(--size-600); border-left: 5px solid; font-style: italic; } code { padding: .12rem .2rem; border-radius: .25rem; background-color: var(--pre-background-color); font-family: "DejaVu Sans Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; color: var(--pre-font-color); } kbd { font-family: "DejaVu Sans", "DejaVu Sans Bold"; display: inline-block; color: rgba(0,0,0,.8); font-size: .65em; line-height: 1.45; background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 0.1em var(--white) inset; margin: 0 .15em; padding: .2em .5em; vertical-align: middle; position: relative; top: -0.1em; white-space: nowrap; } details { margin: 1rem 0; } details summary { cursor: pointer; } /* Header section */ header { padding: .5rem 1rem; background-color: var(--header-background); font-size: clamp(13px, 0.8vw, 15px); } .header-container { display: flex; width: 100%; max-width: var(--max-width-header); margin-left: auto; margin-right: auto; align-items: center; } .logo-menu-bars-container { display: flex; align-items: center; } .logo { display: flex; align-items: center; margin-right: 1rem; } header nav { margin-left: 0; margin-right: 0; } header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } header ul li { list-style: none; } .menu-bars { display: none; width: 2rem; height: 2rem; margin-left: auto; color: var(--white); cursor: pointer; align-items: center; justify-content: center; position: relative; } .menu-bars::before { content: ""; display: block; width: 1.5rem; height: 2px; background-color: currentColor; border-radius: 999px; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; } input[type='checkbox'] { display: none; } .menu { display: flex; padding: 0; margin: 0; } .menu-item { display: flex; margin-right: 1rem; align-items: center; color: var(--white); } .menu-item a { padding: 1rem 0; color: inherit; } .menu-item a, .donate a { text-decoration: none; font-weight: 600; } .menu-item a:hover, .donate a:hover { text-decoration: none; } .donate a { color: var(--black); } .heart { font-size: 1.2rem; color: #E38582; } .heart:hover { color: #D1332E; } .menu-item i { margin-left: .1rem; } .sub-menu { visibility: hidden; position: absolute; top: 3rem; padding: 1rem .75rem; min-width: 250px; background-color: var(--white); border-radius: .4rem; color: #444; border: 1px solid #CDCDCD; z-index: 999; } .sub-menu:hover { visibility: visible; } .menu-item a:hover+.sub-menu { visibility: visible; } .sub-menu li { margin-top: 0; padding: .75rem .6rem; } .sub-menu .title { border-bottom: 1px solid #E5E7EB; } .sub-menu li a { font-weight: normal; } .sub-menu .title a { font-weight: bolder; } .search-donate-container { display: flex; align-items: center; margin-left: auto; } .search { display: flex; width: 150px; min-width: 150px; border-radius: .4rem; background-color: var(--white); border: 1px solid var(--white); margin-right: .5rem; } .search input[type='text'] { display: inline-block; width: 100%; min-width: 0; padding: .3rem .5rem; border: none; border-radius: .4rem; appearance: none; outline: none; background-color: var(--white); color: var(--black); } .search button { flex: 0 0 2rem; width: 2rem; padding: 0; background-color: var(--white); border: none; border-radius: .4rem; } .search button i { color: var(--black); } .donate { margin-left: .5rem; } .donate a { display: inline-block; padding: .45rem .85rem; background-color: var(--white); border-radius: .4rem; } .i18n { position: relative; display: inline-block; } .lang-toggle { display: flex; list-style: none; cursor: pointer; } .lang-toggle img { height: 1.5rem; width: 1.5rem; } .lang-dropdown { display: none; position: absolute; top: 100%; right: 0; background: var(--white); border: 1px solid var(--lines-color); box-shadow: 0 4px 6px rgba(0,0,0,0.1); list-style: none; margin: 0; padding: 0; min-width: 120px; z-index: 10; } .i18n[open] .lang-dropdown { display: block; } .lang-dropdown li a { display: block; padding: 8px 12px; text-decoration: none; color: #444; } .lang-dropdown li a:hover { background: #F5F5F5; } .lang-dropdown .current-lang { font-weight: bold; background: #F0F0F0; pointer-events: none; } @media screen and (max-width: 1300px) { .header-container { flex-direction: column; } .logo-menu-bars-container { width: 100%; padding: .5rem 0; } nav { width: 100%; margin: 0; padding: 0; } .menu-bars { display: flex; } .menu { display: none; width: 100%; } #menu-bars:checked~nav .menu { display: block; } .menu-item { flex-direction: column; width: 100%; margin-right: 0px; border-top: 1px solid var(--white); cursor: pointer; } .menu-item a { width: 100%; } .menu-item a:hover+.sub-menu { visibility: visible; } .menu-item-description { display: flex; width: 100%; cursor: pointer; } .menu-item-description i { margin-left: auto; } .sub-menu { display: none; flex-direction: column; width: 100%; padding: 0px; position: static; visibility: visible; border: none; background-color: inherit; color: inherit; box-shadow: inherit; } .sub-menu .title { display: none; border-bottom: none; } .sub-menu li { padding-left: 0px; padding-right: 0px; } #about:checked~.sub-menu, #download:checked~.sub-menu, #documentation:checked~.sub-menu, #community:checked~.sub-menu, #developers:checked~.sub-menu, #support:checked~.sub-menu { display: flex; } .search-donate-container { display: none; } .search { width: 100%; min-width: 0; } #menu-bars:checked~.search-donate-container { display: flex; flex-direction: column; width: 100%; margin-left: unset; padding-top: .2rem; } .donate { display: flex; width: 100%; margin-left: unset; padding-top: .8rem; } .donate a { width: 100%; text-align: center; } .donate a .heart { font-size: 1.2rem; color: #D1332E; } } @media screen and (min-width: 900px) { header { padding: .5rem 2rem; } } @media screen and (min-width: 1451px) { header { padding: .5rem 5rem; } } /* Home page */ .front-page-band-on { background: var(--background-frontpage-band-color); } .front-page-band-content { max-width: var(--max-width); margin: 0px auto; padding: var(--main-tag-padding); padding-top: 20px; padding-bottom: 20px; } .main-section { margin: 1rem 0 0 0; } .freebsd-horizontal .logo-box-image { background-image: var(--freebsd-logo-horizontal-image); } .logo-box { width: 100px; height: 100px; float: right; margin: 5px 10px 20px 20px; } .logo-box-image { width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center center; background-size: contain; } .front-page-logo { float: none; width: auto; height: clamp(100px, 30vw, 180px); } .front-page-tagline { line-height: normal; font-weight: 400; font-size: 30px; text-align: center; } .downloads-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; } .download-section { flex: 0 0 20%; min-width: 275px; margin: 0; margin-top: 50px; text-align: center; } .download-section-title { padding: 2px 0px; border-radius: 5px; font-size: 18px; font-weight: 500; margin: 0 0 5px 0; } .download-button-release { background: var(--download-release-section-background-color); color: var(--download-release-section-font-color); padding: 5px 10px; border-radius: 5px; font-size: 14px; font-weight: 500; } .download-button { background: var(--download-section-background-color); color: var(--download-section-font-color); padding: 5px 10px; border-radius: 5px; font-size: 14px; font-weight: 500; } .download-links { margin: 5px 0 0 0; } .additional-downloads { margin: 5px 0; } .why-freebsd-flex { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; } .why-freebsd-flex-item { flex: 1 1 30%; min-width: 280px; } .why-freebsd-flex-item p { padding: 0 20px 0 0; } .why-freebsd-flex-item h3 { margin-top: 0; border-radius: 5px; padding: 2px 10px 0 0px; } .openzfs .logo-box-image { background-image: var(--openzfs-image); } .bhyve .logo-box-image { background-image: var(--virtualization-image); } .jails .logo-box-image { background-image: var(--jails-image); } .network .logo-box-image { background-image: var(--networking-image); } .docs .logo-box-image { background-image: var(--documentation-image); } .community .logo-box-image { background-image: var(--community-image); } /* Feeds section in home page */ .feed-flex { display: flex; flex-wrap: wrap; gap: 30px 20px; } .feed-flex-item { background: var(--feeds-background); line-height: 1.3em; border-radius: 7px; } .feed-flex-item a { text-decoration: none; } .feed-flex-item a:hover { text-decoration: underline; } .feed-flex-item { flex: 1 1 15%; padding: 1rem 1.5rem; min-width: 150px; border-radius: 1rem; font-size: .8em; } .feed-flex-item .feed-item { margin: 0; padding: 0 0 5px 0; } .feed-flex-item .feed-source { display: flex; align-items: center; gap: .3rem; } .feed-flex-item .feed-source a { color: var(--links-color); } .rssimage { margin-top: .35rem; } /* Normal page */ #content { display: flex; gap: 2rem; max-width: var(--max-width-pages); margin: 0 auto; padding: 2rem 1rem; } #sidenav { display: flex; width: 200px; padding: 1rem; border-right: 1px solid #D4D4D4; } #sidenav ul { list-style: none; margin: 0; padding: 0; } #sidenav li { margin: .5rem 0; } #contentwrap { min-width: 0; } #contentwrap h1 { margin-top: 0; padding-bottom: 1.2rem; } @media (max-width: 768px) { #sidewrap { display: none; } } /* Downloads page*/ .tblDownload ul { list-style: none; padding: 0 10px; } /* 404 */ .error-section { display: flex; width: 100%; max-width: var(--max-width); min-height: 70vh; margin: 0 auto; align-items: center; justify-content: center; } .error-container { display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; } @media (max-width: 480px) { .error-container h1 { font-size: 1.8rem; } } /* Callouts */ .conum { display: inline-block; color: var(--white); 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: var(--white); 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; vertical-align: top; } .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; } table.tableblock 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; } table.tableblock 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; vertical-align: top; } table.tableblock td.icon { border: none; } table.tableblock td:first-of-type, table.tableblock th:first-of-type { border-left: none; } table.tableblock td:last-of-type, table.tableblock th:last-of-type { border-right: none; } table.stretch { width: 100%; } /* Admonitions */ .admonitionblock { margin: 1.4rem 0; padding: 1rem; color: var(--admonition-font-color); } .admonitionblock table { table-layout: fixed; position: relative; width: 100%; } .admonitionblock table tbody tr td.icon { position: absolute; top: 0; left: 0; line-height: 1; padding-bottom: 0.5rem; } .admonitionblock table tbody tr td.icon i { display: inline-flex; align-items: center; width: auto; background-position-x: 0.5em; vertical-align: initial; font-style: normal; } .admonitionblock table tbody tr td.icon i::after { content: attr(title); font-family: 'Inter var', sans-serif; font-weight: bolder; padding: 0 0.5em; margin: -0.05em; } .admonitionblock table tbody tr td.icon .icon-note::before { content: "\f05a"; color: var(--admonition-note-color); } .admonitionblock table tbody tr td.icon .icon-tip::before { content: "\f0eb"; color: var(--admonition-tip-color); } .admonitionblock table tbody tr td.icon .icon-warning::before { content: "\f071"; color: var(--admonition-warning-color); } .admonitionblock table tbody tr td.icon .icon-caution::before { content: "\f06d"; color: var(--admonition-caution-color); } .admonitionblock table tbody tr td.icon .icon-important::before { content: "\f06a"; color: var(--admonition-important-color); } .admonitionblock table tbody tr td.icon [class^="fa icon-"] { font-size: 1.2rem; cursor: default; } .admonitionblock table tbody tr td.content { width: 100%; word-wrap: anywhere; } .admonitionblock table tbody tr td.content .title { margin-top: 2rem; } .admonitionblock table tbody tr td.content .paragraph { padding-top: 0.5rem; } .admonitionblock table tbody tr td.content 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); } .exampleblock .title { font-weight: bolder; font-family: sans-serif; } .exampleblock .content .literalblock .content { background: #fefde6; border: none; color: var(--global-font-color); } .exampleblock .content a { color: var(--admonition-links-color); } .procedure { border-left: 5px solid #b3b3b3; padding: 1rem; margin-bottom: 1.4rem; } /* Misc */ .imageblock .title { margin-top: .5rem; padding-bottom: 0; font-weight: bolder; font-style: italic; } .literalblock { margin: .75em 0; overflow-x: auto; overflow-y: hidden; max-width: 100%; } .literalblock .content { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; } .fa { font-family: FontAwesome; font-style: normal; } .listingblock { margin: .75em 0; position: relative; } .listingblock .title { position: absolute; top: -1em; left: 1em; } .highlight { padding: 1.5em 2em; } .highlight code { font-size: .75rem; padding: 0; border-radius: inherit; background-color: transparent; color: inherit; } .highlight:hover code::before { content: attr(data-lang); position: absolute; top: .5em; right: 3em; } .filename { font-weight: bolder; } .right { display: block; float: right; } /* Footer section */ footer { margin-top: 1rem; padding: 1rem; color: var(--global-font-color); background-color: var(--footer-background-color); } .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; } .logo-column { grid-area: logo; } .about-column { grid-area: about; } .community-column { grid-area: community; } .documentation-column { grid-area: documentation; } .legal-column { grid-area: legal; } .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; } .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; } .theme-switch { position: fixed !important; top: 0; left: 0; display: block !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .theme-container { display: block; } .theme-switch-label { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; cursor: pointer; border: 1px solid var(--lines-color); border-radius: 999px; color: var(--global-font-color); background-color: var(--global-background-color); } .theme-switch-label:hover { text-decoration: none; background-color: var(--background-accent-color); } .theme-icon { font-size: 1rem; line-height: 1; } .theme-icon-light { display: none; } .theme-icon-dark { display: inline-block; } @media (prefers-color-scheme: dark) { #page .theme-icon-light { display: inline-block; } #page .theme-icon-dark { display: none; } } .theme-switch:checked ~ #page .theme-icon-light { display: inline-block; } .theme-switch:checked ~ #page .theme-icon-dark { display: none; } @media (prefers-color-scheme: dark) { .theme-switch:checked ~ #page .theme-icon-light { display: none; } .theme-switch:checked ~ #page .theme-icon-dark { display: inline-block; } } .theme-switch:focus-visible ~ #page .theme-switch-label { outline: 2px solid var(--links-color); outline-offset: 3px; } @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"; } } @media screen and (min-width: 900px) { footer { padding: 2rem; } .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 (min-width: 1451px) { footer { padding: 2rem 5rem; } .footer-container { gap: 2rem; } } diff --git a/website/themes/beastie/static/images/documentation.png b/website/themes/beastie/static/images/documentation.png deleted file mode 100644 index ff06d606c5..0000000000 Binary files a/website/themes/beastie/static/images/documentation.png and /dev/null differ diff --git a/website/themes/beastie/static/images/documentation.svg b/website/themes/beastie/static/images/documentation.svg new file mode 100644 index 0000000000..058d4be58a --- /dev/null +++ b/website/themes/beastie/static/images/documentation.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +