From f57e1756ff6f25c49f8626d867f03f6954d938ab Mon Sep 17 00:00:00 2001 From: cdw9 Date: Fri, 10 Jan 2025 22:57:52 +0000 Subject: [PATCH] chore: Update boostlook.css from boostlook repository --- static/css/boostlook.css | 206 ++++++++++++++------------------------- 1 file changed, 74 insertions(+), 132 deletions(-) diff --git a/static/css/boostlook.css b/static/css/boostlook.css index e7f35fa3..15fc8e51 100644 --- a/static/css/boostlook.css +++ b/static/css/boostlook.css @@ -76,6 +76,9 @@ --bl-header-height: 2.5rem; /* Standard header height */ /* Light Theme Variables - Color scheme for light mode */ + /* General Variables */ + --light-bl-secondary-color: rgb(2, 132, 199); + /* Background and Border Colors */ --light-bl-background: rgb(255, 255, 255); --light-bl-border-color: rgb(209, 209, 209); @@ -126,6 +129,9 @@ * Dark Theme Variables * Color palette and design tokens for dark mode */ + /* General Variables */ + --dark-bl-secondary-color: rgb(125, 211, 252); + /* Background and Border Colors */ --dark-bl-background: rgb(5, 26, 38); --dark-bl-border-color: rgb(3, 25, 37); @@ -221,6 +227,9 @@ /* Light Theme (Default) Configuration */ html { + /* General Variables */ + --bl-secondary-color: var(--light-bl-secondary-color); + /* Background and Borders */ --bl-background: var(--light-bl-background); --bl-border-color: var(--light-bl-border-color); @@ -280,6 +289,9 @@ html { /* Dark Theme Configuration */ html.dark { + /* General Variables */ + --bl-secondary-color: var(--dark-bl-secondary-color); + /* Background and Borders */ --bl-background: var(--dark-bl-background); --bl-border-color: var(--dark-bl-border-color); @@ -492,8 +504,8 @@ p, h1, h2, h3, h4, h5, h6 { .boostlook h6 { display: block; line-height: 1; - margin-top: 1em; - margin-bottom: 1em; + margin-top: 2rem; + margin-bottom: 1rem; font-weight: 500; } @@ -505,17 +517,6 @@ p, h1, h2, h3, h4, h5, h6 { .boostlook h5 { font-size: 1.25rem; } /* Subtopic headings */ .boostlook h6 { font-size: 1rem; } /* Minor headings */ -/* Heading Spacing */ -.boostlook h1, -.boostlook h2, -.boostlook h3, -.boostlook h4, -.boostlook h5, -.boostlook h6 { - margin-top: 2rem; - margin-bottom: 1rem; -} - /* Document-specific heading adjustments */ .boostlook .doc h2:not(.discrete) { margin-left: 0; @@ -542,6 +543,9 @@ p, h1, h2, h3, h4, h5, h6 { .boostlook p { font-size: 1rem; margin-bottom: 1.5rem; + color: var(--bl-text-color); + padding-top: initial !important; + padding-bottom: initial !important; } /* Special paragraph cases */ @@ -571,20 +575,15 @@ p, h1, h2, h3, h4, h5, h6 { .boostlook code, .boostlook pre code, .boostlook .doc .content pre code { + border-color: var(--bl-code-border-color); + color: var(--bl-code-text-color); + padding: 1.2em .8em; font-family: "Noto Sans Mono", monospace; margin-bottom: 1.25rem; overflow-x: auto !important; scrollbar-width: none !important; } -/* Hide scrollbars but keep functionality */ -.boostlook code::-webkit-scrollbar, -.boostlook pre code::-webkit-scrollbar, -.boostlook .doc .content pre code::-webkit-scrollbar { - width: 0; - height: 0; -} - /* Emphasis within code */ .boostlook em, .boostlook code em { @@ -620,6 +619,17 @@ p, h1, h2, h3, h4, h5, h6 { } /* Code Styling */ +.boostlook h2 a code { + color: var(--bl-nav-link-color); + font-size: 1.65rem; +} + +.boostlook h3 a code, +.boostlook h3 a:hover code { + color: var(--bl-nav-link-color) !important; + font-size: 1.5rem; +} + .boostlook code, .boostlook p code, .boostlook li code, @@ -710,6 +720,12 @@ p, h1, h2, h3, h4, h5, h6 { color: var(--bl-hljs-section-color); } +.boostlook .hljs-attribute, +.boostlook .hljs-name, +.boostlook .hljs-tag { + color: var(--bl-hljs-attribute-color); +} + /* Link States */ .boostlook p a:visited, .boostlook table a, @@ -717,12 +733,6 @@ p, h1, h2, h3, h4, h5, h6 { color: var(--bl-link-color); } -.boostlook .hljs-attribute, -.boostlook .hljs-name, -.boostlook .hljs-tag { - color: var(--bl-hljs-attribute-color); -} - /* Pagination */ .boostlook nav.pagination span::before { color: var(--bl-pagination-color); @@ -787,6 +797,7 @@ p, h1, h2, h3, h4, h5, h6 { * 2. Navigation/TOC scrollbars * 3. Content area scrollbars * 4. Template-specific adjustments + * 5. Code block scrollbars */ /* Hide root scrollbars for Antora template */ @@ -861,6 +872,14 @@ html:has(#docsiframe) { height: 100vh; } +/* Hide scrollbars but keep functionality */ +.boostlook code::-webkit-scrollbar, +.boostlook pre code::-webkit-scrollbar, +.boostlook .doc .content pre code::-webkit-scrollbar { + width: 0; + height: 0; +} + /*----------------- Styles specific to AsciiDoctor content start -----------------*/ /** @@ -1002,28 +1021,15 @@ html:has(#docsiframe) { } #boost-legacy-docs-wrapper h3.title, -#boost-legacy-docs-wrapper.boostlook h3, -#libraryReadMe.boostlook h3 { +#boost-legacy-docs-wrapper.boostlook h3 { font-weight: 550; margin-bottom: 0.5rem; font-feature-settings: normal; } -/* Code in Headings */ -.boostlook h2 a code { - color: var(--bl-nav-link-color); - font-size: 1.65rem; -} - -.boostlook h3 a code, -.boostlook h3 a:hover code { - color: var(--bl-nav-link-color) !important; - font-size: 1.5rem; -} - /* Rouge Syntax Highlighting */ .boostlook pre.rouge .o { - font-weight: normal; + font-weight: 400; } .boostlook pre.rouge code span { @@ -1171,12 +1177,6 @@ html:has(#docsiframe) { font-size: 0.875rem !important; } -.boostlook p { - color: var(--bl-text-color); - padding-top: initial !important; - padding-bottom: initial !important; -} - /* Navigation Menu */ .boostlook .nav-panel-menu { overflow: visible; @@ -1352,54 +1352,6 @@ html:has(#docsiframe) { /*----------------- Styles specific to Antora Templates end -----------------*/ -/*----------------- Styles specific to website-v2 start -----------------*/ - -/** - * Website-v2 Specific Styles - * Styles for the Boost website version 2, focusing on: - * 1. Library and Release README formatting - * 2. Content spacing and margins - * 3. Code block presentation - * 4. Documentation-specific adjustments - */ - -/* Library/Releases Readmes */ -.boostlook#libraryReadMe li p { - display: inline; -} - -.boostlook#libraryReadMe { - margin-left: 0; -} - -.boostlook#libraryReadMe ul { - margin-bottom: 1.5rem; -} - -/* Code Block Formatting */ -.boostlook#libraryReadMe pre { - padding: 0; -} - -.boostlook#libraryReadMe pre code { - background-color: var(--bl-code-background); - margin-bottom: 0; -} - -.boostlook .doc .content pre code { - border-color: var(--bl-code-border-color); - color: var(--bl-code-text-color); - padding: 1.2em .8em; -} - -/* Syntax Highlighting Fix */ -.boostlook#libraryReadMe .language- span { - color: inherit; - font-weight: initial; -} - -/*----------------- Styles specific to website-v2 end -----------------*/ - /*---------- Quickbook docs styling fixes -----------*/ /** @@ -1413,26 +1365,22 @@ html:has(#docsiframe) { */ /* Heading Styles */ -#boost-legacy-docs-wrapper.boostlook h1, -#libraryReadMe.boostlook h1 { +#boost-legacy-docs-wrapper.boostlook h1 { font-size: 1.8rem; } -#boost-legacy-docs-wrapper.boostlook h2, -#libraryReadMe.boostlook h2 { +#boost-legacy-docs-wrapper.boostlook h2 { font-size: 1.65rem; border-bottom: 1px solid #eaf0f3; border-bottom: 1px solid var(--bl-table-border-color); font-weight: 500; } -#boost-legacy-docs-wrapper.boostlook h3, -#libraryReadMe.boostlook h3 { +#boost-legacy-docs-wrapper.boostlook h3 { font-size: 1.5rem; } -#boost-legacy-docs-wrapper.boostlook h4, -#libraryReadMe.boostlook h4 { +#boost-legacy-docs-wrapper.boostlook h4 { font-size: 1.35rem; } @@ -1589,8 +1537,14 @@ body > .chapter, } /* Spirit Navigation */ -.boostlook:not(:has(.doc)) .spirit-nav a img { - display: none; +.boostlook:not(:has(.doc)) .spirit-nav { + position: absolute; + top: 0.2rem; + right: calc(((100% - 75rem) / 2)); + text-align: right; + margin: 0.75rem; + max-width: 80rem; + display: flex; } .boostlook:not(:has(.doc)) .spirit-nav a, @@ -1598,6 +1552,7 @@ body > .chapter, font-family: 'Material Symbols Outlined'; font-size: 18px; display: inline-block; + padding-left: 0.5em; width: 24px; height: 24px; color: var(--bl-nav-link-color); @@ -1610,6 +1565,16 @@ body > .chapter, text-decoration: none; } +.boostlook:not(:has(.doc)) .spirit-nav a img { + display: none; + border-width: 0px; +} + +.dark .boostlook:not(:has(.doc)) .spirit-nav img { + -webkit-filter: invert(100%); + filter: invert(100%); +} + /* Spirit Navigation Icons */ .boostlook:not(:has(.doc)) .spirit-nav a[accesskey='p']::after { content: "arrow_back"; @@ -1654,7 +1619,7 @@ body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) { .boostlook:not(:has(.doc)) h5 { font-style: italic; - font-weight: normal; + font-weight: 400; font-size: 110%; } @@ -1707,31 +1672,6 @@ body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) { border: 1px solid var(--bl-border-color); } -/* Spirit Navigation */ -.boostlook:not(:has(.doc)) .spirit-nav { - position: absolute; - top: 0.2rem; - right: calc(((100% - 75rem) / 2)); - text-align: right; - margin: 0.75rem; - max-width: 80rem; - display: flex; -} - -.boostlook:not(:has(.doc)) .spirit-nav a { - color: var(--secondary-color); - padding-left: 0.5em; -} - -.boostlook:not(:has(.doc)) .spirit-nav img { - border-width: 0px; -} - -.dark .boostlook:not(:has(.doc)) .spirit-nav img { - -webkit-filter: invert(100%); - filter: invert(100%); -} - /* Table of Contents */ .boostlook:not(:has(.doc)) div.toc { font-size: 80%; @@ -1892,6 +1832,7 @@ body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) { .boostlook#libraryReadMe h1 { font-size: 1.875rem; font-variation-settings: "wght" 600; + line-height: 1em; border-bottom: 1px solid var(--bl-border-color); } @@ -1899,6 +1840,7 @@ body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) { margin-top: 0.75rem; font-size: 1.5rem; font-variation-settings: "wght" 600; + line-height: 1em; border-bottom: 1px solid var(--bl-border-color); }