ignore local boostlook.css file

This commit is contained in:
Julio Estrada
2024-10-10 09:30:00 -04:00
committed by Julio C. Estrada
parent 11d70e4687
commit 7ab800c377
2 changed files with 1 additions and 588 deletions

View File

@@ -1,6 +1,5 @@
/build/
/node_modules/
/public/
# TODO: Uncomment when the new look is ready
# /src/css/boostlook.css
/src/css/boostlook.css

View File

@@ -1,586 +0,0 @@
/**
* README:
* This stylesheet contains styles for both AsciiDoctor and Antora templates.
* The `boostlook` class is applied across both, but due to differences in their HTML structure,
* specific CSS rules are necessary to target each appropriately.
*
* High-Level HTML Structure:
*
* - Antora Template:
* <div class="boostlook">
* <div class="card nav-container">...</div>
* <div class="doc">...</div>
* </div>
*
* - AsciiDoctor Template:
* <div class="boostlook">
* <div id="header">...</div>
* <div id="content">...</div>
* <div id="footer">...</div>
* </div>
*
* - For Antora templates:
* The `.boostlook .doc` selector targets elements within the `.doc` class, and the
* `.boostlook .nav-container` selector targets elements within the `.nav-container` class,
* both of which are specific to the Antora HTML structure.
*
* - For AsciiDoctor templates:
* The `.boostlook:not(:has(.doc))` selector is used to target elements that do not have
* a `.doc` child, applying styles specific to AsciiDoctor content.
* Since the `.doc` class is not present in the structure above, the styles defined for
* `.boostlook:not(:has(.doc))` will apply.
*/
/*----------------- Root Variables - Start -----------------*/
:root {
--bl-primary-color: rgb(255, 159, 0);
--bl-header-height: 2.5rem;
/* Light Theme Variables */
--light-bl-background: rgb(255, 255, 255);
--light-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23000000'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
--light-bl-card-background-color: rgb(255, 255, 255);
--light-bl-code-background: rgb(255, 255, 255);
--light-bl-code-border-color: rgb(220, 220, 220);
--light-bl-code-text-color: inherit;
--light-bl-link-color: rgb(0, 90, 156);
--light-bl-link-hover-color: rgba(0, 90, 156, 0.7);
--light-bl-hljs-attribute-color: rgb(70, 130, 180);
--light-bl-hljs-doctag-color: rgb(221, 17, 68);
--light-bl-hljs-keyword-color: rgb(51, 51, 51);
--light-bl-hljs-number-color: rgb(0, 128, 128);
--light-bl-hljs-section-color: rgb(153, 0, 0);
--light-bl-nav-link-color: rgb(0, 0, 0);
--light-bl-pasteboard-color: rgb(209, 213, 219);
--light-bl-pre-background: rgb(248, 248, 248);
--light-bl-primary-color: rgb(255, 159, 0);
--light-bl-quote-background: rgb(255, 255, 255);
--light-bl-table-border-color: rgb(232, 232, 232);
--light-bl-table-head-background: rgb(248, 248, 248);
/* Dark Theme Variables */
--dark-bl-border-color: rgb(209, 228, 242);
--dark-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23ccc'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
--dark-bl-code-background: rgb(20, 20, 20);
--dark-bl-code-border-color: transparent;
--dark-bl-code-text-color: rgb(255, 255, 255);
--dark-bl-link-color: rgb(125 211 252);
--dark-bl-link-hover-color: rgb(100, 160, 210);
--dark-bl-hljs-attribute-color: rgb(70, 130, 180);
--dark-bl-hljs-doctag-color: rgb(255, 99, 132);
--dark-bl-hljs-keyword-color: rgb(173, 216, 230);
--dark-bl-hljs-number-color: rgb(72, 209, 204);
--dark-bl-hljs-section-color: rgb(255, 69, 58);
--dark-bl-nav-link-color: rgb(0, 0, 0);
--dark-bl-pagination-color: rgb(200, 200, 200);
--dark-bl-quote-background: rgb(11, 59, 82);
--dark-bl-quote-word-color: rgb(209, 228, 242);
--dark-bl-tabpanel-background: rgb(28, 50, 59);
--dark-bl-text-color: rgb(209, 228, 242);
}
/*----------------- Root Variables - End -----------------*/
/*----------------- HTML Variables - Start -----------------*/
html {
--bl-background: var(--light-bl-background);
--bl-caret-svg: var(--light-bl-caret-svg);
--bl-card-background-color: var(--light-bl-card-background-color);
--bl-code-background: var(--light-bl-code-background);
--bl-code-border-color: var(--light-bl-code-border-color);
--bl-code-text-color: var(--light-bl-code-text-color);
--bl-hljs-doctag-color: var(--light-bl-hljs-doctag-color);
--bl-hljs-attribute-color: var(--light-bl-hljs-attribute-color);
--bl-hljs-keyword-color: var(--light-bl-hljs-keyword-color);
--bl-hljs-number-color: var(--light-bl-hljs-number-color);
--bl-hljs-section-color: var(--light-bl-hljs-section-color);
--bl-link-color: var(--light-bl-link-color);
--bl-link-hover-color: var(--light-bl-link-hover-color);
--bl-nav-link-color: var(--light-bl-nav-link-color);
--bl-pasteboard-color: var(--light-bl-pasteboard-color);
--bl-pre-background: var(--light-bl-pre-background);
--bl-quote-background: var(--light-bl-quote-background);
--bl-table-border-color: var(--light-bl-table-border-color);
--bl-table-head-background: var(--light-bl-table-head-background);
}
html.dark {
--bl-border-color: var(--dark-bl-border-color);
--bl-caret-svg: var(--dark-bl-caret-svg);
--bl-code-background: var(--dark-bl-code-background);
--bl-code-border-color: var(--dark-bl-code-border-color);
--bl-code-text-color: var(--dark-bl-code-text-color);
--bl-hljs-attribute-color: var(--dark-bl-hljs-attribute-color);
--bl-hljs-doctag-color: var(--dark-bl-hljs-doctag-color);
--bl-hljs-keyword-color: var(--dark-bl-hljs-keyword-color);
--bl-hljs-number-color: var(--dark-bl-hljs-number-color);
--bl-hljs-section-color: var(--dark-bl-hljs-section-color);
--bl-link-color: var(--dark-bl-link-color);
--bl-link-hover-color: var(--dark-bl-link-hover-color);
--bl-nav-link-color: var(--dark-bl-nav-link-color);
--bl-pagination-color: var(--dark-bl-pagination-color);
--bl-quote-background: var(--dark-bl-quote-background);
--bl-quote-word-color: var(--dark-bl-quote-word-color);
--bl-tabpanel-background: var(--dark-bl-tabpanel-background);
--bl-text-color: var(--dark-bl-text-color);
}
/*----------------- HTML Variables - End -----------------*/
/*----------------- Font-Face Declarations start -----------------*/
@font-face {
font-family: "Noto Sans Display";
font-style: normal;
font-weight: normal;
font-stretch: semi-condensed;
font-display: block;
src: url('/_/fonts/NotoSansDisplay.ttf') format('truetype'),
url('../../../../tools/boostlook/NotoSansDisplay.ttf') format('truetype'),
url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format('truetype');
}
@font-face {
font-family: "Noto Sans Italic";
font-style: italic;
font-weight: normal;
font-stretch: semi-condensed;
font-display: block;
src: url("/font/NotoSansDisplay-Italic.ttf") format("truetype"),
url("../../../../tools/boostlook/NotoSansDisplay-Italic.ttf") format("truetype"),
url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format('truetype');
}
@font-face {
font-family: "Noto Sans Mono";
font-style: normal;
font-weight: normal;
font-stretch: semi-condensed;
font-display: block;
src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"),
url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype');
}
/*----------------- Font-Face Declarations end -----------------*/
/*----------------- CSS Reset start -----------------*/
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
}
/*----------------- CSS Reset end -----------------*/
/*----------------- Global Styles for .boostlook start -----------------*/
.boostlook {
font-family: "Noto Sans Display" !important;
font-stretch: condensed;
}
.boostlook h1,
.boostlook h2,
.boostlook h3,
.boostlook h4,
.boostlook h5,
.boostlook h6 {
display: block;
line-height: 1;
margin-top: 1em;
margin-bottom: 1em;
font-weight: 500;
}
.boostlook h1 { font-size: 1.75em; }
.boostlook h2 { font-size: 1.5em; }
.boostlook h3 { font-size: 1.375em; }
.boostlook h4 { font-size: 1.25em; }
.boostlook h5 { font-size: 1.125em; }
.boostlook h6 { font-size: 1em; }
.boostlook p {
font-size: 1rem;
margin: 1em 0em;
}
.boostlook a,
.boostlook .doc a {
color: var(--bl-link-color);
text-decoration: none;
}
.boostlook a:hover,
.boostlook .doc a:hover {
color: var(--bl-link-hover-color);
cursor: pointer;
text-decoration: none;
}
.boostlook code {
font-family: "Noto Sans Mono", monospace;
}
.boostlook h6:has(+table) {
margin-left: 1em;
}
.boostlook p code,
.boostlook table code,
.boostlook p tt,
.boostlook p kbd,
.boostlook p samp,
.boostlook p pre {
background-color: transparent !important;
}
.boostlook .content div:has(> table) {
overflow-x: auto;
}
.boostlook p code,
.boostlook .colist > table code {
color: var(--bl-code-text-color) !important;
}
.boostlook .quoteblock,
.boostlook .verseblock {
background: var(--bl-quote-background);
border-left: 3px solid var(--bl-border-color);
color: var(--bl-text-color);
}
.boostlook .quoteblock::before,
.boostlook .verseblock::before {
color: var(--bl-quote-word-color);
}
.boostlook .tabpanel {
background-color: var(--bl-tabpanel-background);
}
.boostlook .hljs-keyword,
.boostlook .hljs-selector-tag,
.boostlook .hljs-subst {
color: var(--bl-hljs-keyword-color);
}
.boostlook .hljs-number {
color: var(--bl-hljs-number-color);
}
.boostlook .hljs-doctag,
.boostlook .hljs-string {
color: var(--bl-hljs-doctag-color);
}
.boostlook .hljs-section,
.boostlook .hljs-selector-id,
.boostlook .hljs-title {
color: var(--bl-hljs-section-color);
}
.boostlook p a:visited,
.boostlook table a,
.boostlook .pagination a {
color: var(--bl-link-color);
}
.boostlook .hljs-attribute,
.boostlook .hljs-name,
.boostlook .hljs-tag {
color: var(--bl-hljs-attribute-color);
}
.boostlook nav.pagination span::before {
color: var(--bl-pagination-color);
}
/*----------------- Global Styles for .boostlook end -----------------*/
/*----------------- Styles specific to AsciiDoctor content start -----------------*/
.article.toc2.toc-left {
min-height: 100vh;
max-width: 80rem;
margin-left: auto;
margin-right: auto;
background-color: var(--bl-pasteboard-color);
position: relative;
}
.boostlook pre {
font-family: "Noto Sans Mono", monospace;
background-color: var(--bl-pre-background);
margin: 1em;
padding: 1rem;
overflow-x: auto;
}
.boostlook table {
border-collapse: collapse;
margin: 1em;
border: 1px solid var(--bl-table-border-color);
}
.boostlook th {
background-color: var(--bl-table-head-background);
text-align: left;
padding: 0.25em 0.55em;
font-weight: 550;
}
.boostlook td {
border: 1px solid var(--bl-table-border-color);
padding: 0.25em 0.55em;
}
.boostlook #header > h1 {
margin-top: 0;
}
.boostlook #toc > ul.sectlevel1 {
padding-left: 0;
}
.boostlook #toc ul {
margin: 0;
padding: 0 0 0 0.5rem;
line-height: 1.5;
font-size: 0.85rem;
list-style: none;
}
.boostlook #toc .sectlevel1 > li > a {
font-weight: bolder;
}
.boostlook #toc #toctitle {
font-size: 1.5rem;
}
.boostlook #toc ul li a {
font-size: 1rem;
}
.boostlook,
.boostlook #toc.toc2 {
background-color: var(--bl-card-background-color);
padding: 1rem 1.5rem;
}
.boostlook #toc.toc2 {
padding-left: 0;
}
.boostlook #toggle-toc {
display: none;
}
.boostlook #content .sect3:has(.tableblock) {
overflow-x: auto;
}
@media screen and (min-width: 768px) {
.article.toc2.toc-left {
padding: 1rem;
}
.boostlook,
.boostlook #toc.toc2 {
border-radius: 0.5rem;
}
.boostlook #toc.toc2 {
position: fixed;
width: 17rem;
left: max(1rem, calc(50% - 39rem));
top: 1rem;
overflow-y: auto;
overflow-x: hidden;
z-index: 1000;
height: calc(100vh - 2rem);
padding: 1rem;
}
.boostlook {
margin-left: 18rem;
}
.boostlook #toggle-toc {
display: block;
position: fixed;
top: 2.375rem;
left: calc(max(1rem, calc(50% - 39rem)) + 14rem);
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 0;
padding: 0;
cursor: pointer;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%235f6368"><path d="m680-280-56-56 103-104H520v-80h207L624-624l56-56 200 200-200 200Zm-400 0L80-480l200-200 56 56-103 104h207v80H233l103 104-56 56Z"/></svg>');
background-repeat: no-repeat;
background-position: center;
border-radius: 0.3125rem;
width: 2rem;
text-indent: -9999px;
z-index: 1001;
}
.boostlook #toggle-toc:hover {
background-color: #f0f0f0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.boostlook #toggle-toc:active {
background-color: #e0e0e0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
html.toc-hidden .boostlook #toggle-toc {
left: calc(max(1rem, calc(50% - 39rem)) - 1rem);
}
}
html:not(.toc-hidden) .boostlook #toc {
display: block;
}
html.toc-hidden .boostlook #toc {
display: none;
}
html.toc-hidden .boostlook {
margin-left: 0;
}
/*----------------- Styles specific to AsciiDoctor content end -----------------*/
/*----------------- Styles specific to Antora Templates start -----------------*/
/* Typography */
.boostlook .doc,
.boostlook .doc i {
line-height: 1.5;
font-family: "Noto Sans Display";
}
.boostlook .nav-menu .title {
font-size: 1.5rem;
}
.boostlook .breadcrumbs ul li {
font-size: 0.875rem !important;
}
/* Navigation Menu */
.boostlook .nav-panel-menu {
overflow: visible;
}
.boostlook .nav-close {
display: none;
}
.boostlook .nav-menu > .nav-list > .nav-list {
margin-left: 0;
}
.boostlook .nav-menu > .nav-list > .nav-list > li {
font-weight: bolder;
}
.boostlook .nav-menu .nav-list li {
line-height: 1.5;
}
.boostlook .nav-link,
.boostlook .nav-menu a{
cursor: pointer;
color: var(--bl-nav-link-color);
margin-right: -0.5rem;
}
.boostlook .nav-link:hover,
.boostlook .nav-menu a:hover {
color: var(--bl-link-hover-color);
}
.boostlook .nav-text {
color: #828282;
}
/* Active Page Indicator */
.boostlook .nav-list .is-current-page.is-active {
position: relative;
}
.boostlook .is-current-page.is-active::before {
content: "";
position: absolute;
top: 38%;
width: 16px;
height: 16px;
margin-left: -1.25rem;
background-image: var(--bl-caret-svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 16px;
}
/* Breadcrumbs */
.boostlook .breadcrumbs {
display: block;
}
.boostlook .breadcrumbs ul li:first-of-type {
display: flex;
}
/* Code Block */
.boostlook .doc .content pre code {
background-color: var(--bl-code-background);
border-color: var(--bl-code-border-color);
}
/* Layout */
.boostlook .article .content {
gap: 1rem;
}
/* .boostlook #content:has(.toc.sidebar) {
display: flex;
} */
/* Table of Contents */
.boostlook .toc .toc-menu a {
border-left: 0;
padding: .25rem 0 0 0;
}
/*----------------- Styles specific to Antora Templates end -----------------*/