boost/website-v2-docs
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2-docs.git synced 2026-01-19 04:42:17 +00:00
Code Issues Projects Releases Wiki Activity

Standard font size across elements

Browse Source
This commit is contained in:
Julio C. Estrada
2024-05-27 16:33:18 -04:00
committed by GitHub
parent d10d7f2897
commit 65dfedd03d
10 changed files with 77 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
antora-ui/.stylelintrc
View File

@@ -3,5 +3,8 @@
"rules": {
"comment-empty-line-before": null,
"no-descending-specificity": null,
"value-keyword-case": ["lower", {
"ignoreKeywords": ["/^BlinkMacSystemFont$/", "/^Roboto$/", "/^Oxygen-Sans$/", "/^Ubuntu$/", "/^Cantarell$/", "/^Helvetica Neue$/", "/^Consolas$/", "/^Menlo$/", "/^Courier$/"]
}]
}
}

1
antora-ui/src/css/base.css
View File

@@ -22,6 +22,7 @@ body {
color: var(--body-font-color);
font-family: var(--body-font-family);
line-height: var(--body-line-height);
font-size: inherit;
margin: 0;
tab-size: 4;
word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */

85
antora-ui/src/css/doc.css
View File

@@ -1,6 +1,6 @@
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
font-family: var(--doc-font-family);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
@@ -25,7 +25,7 @@
.doc h5,
.doc h6 {
color: var(--heading-font-color);
font-weight: var(--heading-font-weight);
font-weight: var(--alt-heading-font-weight);
hyphens: none;
line-height: 1.3;
margin: 1rem 0 0;
@@ -33,7 +33,7 @@
}
.doc > h1.page:first-child {
font-size: calc(36 / var(--rem-base) * 1rem);
font-size: var(--doc-heading-font-size);
margin: 1.5rem 0;
}
@@ -151,7 +151,7 @@
}
.doc pre {
font-size: calc(16 / var(--rem-base) * 1rem);
font-size: inherit;
line-height: 1.5;
margin: 0;
}
@@ -219,7 +219,8 @@
}
.doc table.tableblock {
font-size: calc(15 / var(--rem-base) * 1rem);
font-size: inherit;
border: 0;
}
.doc .tablecontainer,
@@ -242,6 +243,11 @@
padding: 0.5rem;
}
.doc table.tableblock tr th {
background-color: var(--color-smoke-70);
border: 1px solid var(--color-gray-15);
}
.doc table.tableblock,
.doc table.tableblock > * > tr > * {
border: 0 solid var(--table-border-color);
@@ -261,11 +267,11 @@
.doc table.grid-all > thead th,
.doc table.grid-rows > thead th {
border-bottom-width: 2.5px;
border-bottom-width: 1px;
}
.doc table.frame-all {
border-width: 1px;
border-width: 0;
}
.doc table.frame-ends {
@@ -333,11 +339,14 @@
.doc .admonitionblock {
margin: 1.4rem 0 0;
padding: 1rem;
background: var(--admonition-background);
border: var(--admonition-border);
}
.doc .admonitionblock p,
.doc .admonitionblock td.content {
font-size: calc(16 / var(--rem-base) * 1rem);
font-size: inherit;
}
.doc .admonitionblock td.content > :not(.title):first-child,
@@ -346,7 +355,7 @@
}
.doc .admonitionblock pre {
font-size: calc(15 / var(--rem-base) * 1rem);
font-size: inherit;
}
.doc .admonitionblock > table {
@@ -355,56 +364,57 @@
width: 100%;
}
.doc .admonitionblock > table tr {
display: flex;
flex-direction: column;
gap: 0.25em;
}
.doc .admonitionblock td.content {
padding: 1rem 1rem 0.75rem;
background: var(--admonition-background);
padding: 0 1.7rem;
width: 100%;
word-wrap: anywhere;
}
.doc .admonitionblock .icon {
position: absolute;
top: 0;
left: 0;
font-size: calc(15 / var(--rem-base) * 1rem);
padding: 0 0.5rem;
height: 1.25rem;
font-size: inherit;
padding: 0 0 0 1.25rem;
line-height: 1;
font-weight: var(--admonition-label-font-weight);
text-transform: uppercase;
border-radius: 0.45rem;
transform: translate(-0.5rem, -50%);
color: var(--color-black) !important;
min-height: 1.25rem;
}
.doc .admonitionblock.caution .icon {
background-color: var(--caution-color);
color: var(--caution-on-color);
background: no-repeat url("../img/caution.svg");
}
.doc .admonitionblock.important .icon {
background-color: var(--important-color);
color: var(--important-on-color);
background: no-repeat url("../img/important.svg");
}
.doc .admonitionblock.note .icon {
background-color: var(--note-color);
color: var(--note-on-color);
background: no-repeat url("../img/note.svg");
}
.doc .admonitionblock.tip .icon {
background-color: var(--tip-color);
color: var(--tip-on-color);
background: no-repeat url("../img/tip.svg");
}
.doc .admonitionblock.warning .icon {
background-color: var(--warning-color);
color: var(--warning-on-color);
background: no-repeat url("../img/warning.svg");
}
.doc .admonitionblock .icon i {
display: inline-flex;
align-items: center;
height: 100%;
padding: 0 0.35rem;
}
.doc .admonitionblock .icon i::after {
@@ -459,18 +469,18 @@
.doc .quoteblock,
.doc .verseblock {
background: var(--quote-background);
border-left: 5px solid var(--quote-border-color);
background: var(--color-smoke-10);
border-left: 3px solid var(--quote-border-color);
color: var(--quote-font-color);
}
.doc .quoteblock {
padding: 0.25rem 2rem 1.25rem;
padding: 0.25rem 1.5rem 1.25rem;
}
.doc .quoteblock .attribution {
color: var(--quote-attribution-font-color);
font-size: calc(15 / var(--rem-base) * 1rem);
font-size: inherit;
margin-top: 0.75rem;
}
@@ -487,7 +497,7 @@
}
.doc .verseblock {
font-size: 1.15em;
font-size: inherit;
padding: 1rem 2rem;
}
@@ -624,12 +634,12 @@
.doc .videoblock .title,
.doc .tableblock caption {
color: var(--caption-font-color);
font-size: calc(16 / var(--rem-base) * 1rem);
font-size: inherit;
font-style: var(--caption-font-style);
font-weight: var(--caption-font-weight);
hyphens: none;
letter-spacing: 0.01em;
padding-bottom: 0.075rem;
padding-bottom: 0.35rem;
}
.doc .tableblock caption {
@@ -706,8 +716,8 @@
.doc .exampleblock > .content,
.doc details.result > .content {
background: var(--example-background);
border: 0.25rem solid var(--example-border-color);
border-radius: 0.5rem;
border: 0.125rem solid var(--example-border-color);
border-radius: 0;
padding: 0.75rem;
}
@@ -750,11 +760,12 @@
.doc pre.highlight code,
.doc .listingblock pre:not(.highlight),
.doc .literalblock pre {
background: var(--pre-background);
box-shadow: inset 0 0 1.75px var(--pre-border-color);
background: none;
border: 1px solid var(--color-gray-15);
display: block;
overflow-x: auto;
padding: 0.875em;
padding: 0.685em;
font-size: inherit;
}
.doc .listingblock > .content {

1
antora-ui/src/css/toolbar.css
View File

@@ -9,6 +9,7 @@
justify-content: flex-start;
position: sticky;
top: var(--navbar-height);
z-index: var(--z-index-toolbar);
}
.toolbar a {

37
antora-ui/src/css/vars.css
View File

@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
:root {
/* colors */
--color-white: #fff;
@@ -9,6 +7,7 @@
--color-smoke-70: #f0f0f0;
--color-smoke-90: #eaf0f3;
--color-gray-10: #c1c1c1;
--color-gray-15: #dcdcdc;
--color-gray-30: #9c9c9c;
--color-gray-40: #8e8e8e;
--color-gray-50: #808080;
@@ -20,15 +19,14 @@
--color-jet-80: rgb(49 74 87);
--color-black: #000;
/* fonts */
--rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
--body-font-size: 1.0625em; /* 17px */
--body-font-size--desktop: 1.125em; /* 18px */
--body-font-size--print: 0.9375em; /* 15px */
--body-line-height: 1.15;
--rem-base: 16; /* used to compute rem value from desired pixel value (e.g., calc(16 / var(--rem-base) * 1rem) = 16px) */
--body-font-size: 0.83333rem; /* 13.33px */
--body-font-size--desktop: 1rem; /* 16px */
--body-font-size--print: 0.9375rem; /* 15px */
--body-font-color: var(--color-jet-70);
--body-font-family: "Cairo", sans-serif;
--body-font-weight-bold: 500;
--monospace-font-family: "Roboto Mono", monospace;
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--body-font-weight-bold: 600;
--monospace-font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--monospace-font-weight-bold: 500;
/* base */
--body-background: var(--color-white);
@@ -75,13 +73,15 @@
--warning-color: #e18114;
--warning-on-color: var(--color-white);
/* doc */
--doc-font-color: var(--color-jet-50);
--doc-font-size: inherit;
--doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
--doc-line-height: 1.6;
--doc-heading-font-size: 1.375rem;
--doc-font-family: var(--body-font-family);
--doc-font-color: var(--color-black);
--doc-font-size: var(--body-font-size);
--doc-font-size--desktop: var(--body-font-size);
--doc-line-height: 1.15;
--doc-margin: 0 auto;
--doc-margin--desktop: 0 2rem;
--heading-font-color: var(--color-jet-80);
--heading-font-color: var(--color-black);
--heading-font-weight: normal;
--alt-heading-font-weight: var(--body-font-weight-bold);
--section-divider-color: var(--panel-border-color);
@@ -91,7 +91,8 @@
--abstract-background: var(--color-smoke-70);
--abstract-font-color: var(--color-jet-20);
--abstract-border-color: var(--panel-border-color);
--admonition-background: var(--panel-background);
--admonition-background: var(--color-white);
--admonition-border: 1px solid var(--color-gray-15);
--admonition-label-font-weight: var(--body-font-weight-bold);
--caption-font-color: var(--color-gray-70);
--caption-font-style: italic;
@@ -103,14 +104,14 @@
--kbd-background: var(--panel-background);
--kbd-border-color: var(--color-gray-10);
--pre-background: var(--panel-background);
--pre-border-color: var(--panel-border-color);
--pre-border-color: var(--color-gray-50);
--pre-annotation-font-color: var(--color-gray-50);
--quote-background: var(--panel-background);
--quote-border-color: var(--color-gray-70);
--quote-font-color: var(--color-gray-70);
--quote-attribution-font-color: var(--color-gray-40);
--sidebar-background: var(--color-smoke-90);
--table-border-color: var(--panel-border-color);
--table-border-color: var(--color-gray-15);
--table-stripe-background: var(--panel-background);
--table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
/* toc */

1
antora-ui/src/img/caution.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M15.8 12.526 9.483.88A1.668 1.668 0 0 0 8.8.2a1.693 1.693 0 0 0-2.284.68L.2 12.526A1.678 1.678 0 0 0 1.686 15h12.628a1.7 1.7 0 0 0 1.308-.615 1.67 1.67 0 0 0 .178-1.859ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-3.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4Z" fill="#FF9100"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 499 B

1
antora-ui/src/img/important.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M7.75 0A7.749 7.749 0 0 0 0 7.75a7.749 7.749 0 0 0 7.75 7.75 7.749 7.749 0 0 0 7.75-7.75A7.749 7.749 0 0 0 7.75 0Z" fill="#EED202"/><path d="M9.488 11.3c0 .827-.673 1.5-1.5 1.5-.828 0-1.5-.673-1.5-1.5s.672-1.5 1.5-1.5c.827 0 1.5.673 1.5 1.5ZM6.66 3.672l.255 5.1a.45.45 0 0 0 .45.428h1.243a.45.45 0 0 0 .45-.428l.255-5.1a.45.45 0 0 0-.45-.472H7.111a.45.45 0 0 0-.45.472Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 579 B

1
antora-ui/src/img/note.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.75 2A1.75 1.75 0 0 0 0 3.75v8.5A1.75 1.75 0 0 0 1.75 14h12.5A1.75 1.75 0 0 0 16 12.25v-8.5A1.75 1.75 0 0 0 14.25 2H1.75Z" fill="#217EE7"/><path d="M2.258 5.244a.81.81 0 0 0-.258.59.81.81 0 0 0 .258.589.91.91 0 0 0 .624.244h8.236a.91.91 0 0 0 .624-.244.81.81 0 0 0 .258-.59.81.81 0 0 0-.258-.589.91.91 0 0 0-.624-.244H2.882a.91.91 0 0 0-.624.244ZM7.588 8.333H2.882a.91.91 0 0 0-.624.244.81.81 0 0 0-.258.59.81.81 0 0 0 .258.589.91.91 0 0 0 .624.244h4.706a.91.91 0 0 0 .624-.244.81.81 0 0 0 .259-.59.81.81 0 0 0-.259-.589.91.91 0 0 0-.624-.244Z" fill="#fff"/><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-8.5Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75Z" fill="#217EE7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 912 B

1
antora-ui/src/img/tip.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 14c0 .333.267.667.667.667h2.666c.4 0 .667-.334.667-.667v-.667H6V14ZM8 1.333A4.638 4.638 0 0 0 3.333 6c0 1.6.8 3 2 3.8v1.533c0 .334.267.667.667.667h4c.4 0 .667-.333.667-.667V9.8c1.2-.867 2-2.267 2-3.8 0-2.6-2.067-4.667-4.667-4.667Z" fill="#5CB85C"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

1
antora-ui/src/img/warning.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M1 4.862 5 1h6l4 3.862v5.793L10.5 15h-5L1 10.655V4.862Z" fill="#FF5252"/><path d="M8.53 4.22a.75.75 0 0 0-1.28.53v3.5a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.22-.53ZM7.293 11.707a1 1 0 1 0 1.414-1.414 1 1 0 0 0-1.414 1.414Z" fill="#fff"/><path d="m15 5-4-4H5L1 5v6l4 4h6l4-4V5Z" stroke="#FF5252"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 490 B