mirror of
https://github.com/boostorg/boostlook.git
synced 2026-02-26 16:42:14 +00:00
fix: refine typography
- Scale inline code in headings to 0.85em with font-weight 400 - Reduce inline code in paragraphs from 0.96em to 0.88em - Match line-height (1.5rem) across p, ul, and ol elements - Widen condensed text from wdth 80 to 87.5 - Reduce heading margin-top from 2rem to 1.5rem
This commit is contained in:
julioest
@@ -911,7 +911,7 @@ body :not(pre):not([class^="L"]) > code {
|
||||
/* Base Container */
|
||||
.boostlook {
|
||||
font-family: var(--font-family-body, "Noto Sans") !important;
|
||||
font-variation-settings: "wght" 350, "wdth" 80;
|
||||
font-variation-settings: "wght" 350, "wdth" 87.5;
|
||||
background: var(--surface-background-main-base-primary, #fff);
|
||||
}
|
||||
|
||||
@@ -934,10 +934,10 @@ body :not(pre):not([class^="L"]) > code {
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
display: block;
|
||||
line-height: var(--typography-line-height-xl, 1.75rem);
|
||||
margin-top: var(--padding-padding-xl, 2rem);
|
||||
margin-top: var(--padding-padding-lg, 1.5rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
margin-bottom: 0.5rem;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -1288,7 +1288,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
/* Text Emphasis */
|
||||
.boostlook b,
|
||||
.boostlook strong {
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1422,7 +1422,7 @@ html.dark .boostlook .listingblock > .content > pre {
|
||||
color: var(--text-main-text-body-primary, #2a2c30);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-md, 1.25rem);
|
||||
letter-spacing: unset;
|
||||
padding-bottom: var(--padding-padding-2xs, 0.5rem);
|
||||
@@ -1572,7 +1572,7 @@ html.dark .boostlook .listingblock > .content > pre {
|
||||
font-family: "Noto Sans";
|
||||
font-size: var(--typography-font-size-2xs, 0.75rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
text-transform: uppercase;
|
||||
@@ -1658,7 +1658,7 @@ html.dark .boostlook .listingblock > .content > pre {
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
text-align: center;
|
||||
font-size: var(--typography-font-size-sm, 1rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
|
||||
}
|
||||
|
||||
@@ -1669,9 +1669,9 @@ html.dark .boostlook .listingblock > .content > pre {
|
||||
.boostlook .doc .colist > table code:not(:has(> code)) {
|
||||
display: inline;
|
||||
color: var(--text-code-neutral, #0d0e0f);
|
||||
font-size: 0.96em;
|
||||
font-size: 0.88em;
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-md);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -2012,7 +2012,7 @@ html.dark .boostlook .hljs-code {
|
||||
padding: var(--padding-padding-xs, 0.75rem);
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-sm, 1rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
text-decoration: none;
|
||||
@@ -2042,7 +2042,7 @@ html.dark .boostlook .hljs-code {
|
||||
position: static;
|
||||
color: var(--text-main-text-body-quaternary, #949a9e);
|
||||
font-size: var(--typography-font-size-2xs, 0.75rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
transform: revert;
|
||||
@@ -2232,7 +2232,7 @@ html.dark .boostlook .hljs-code {
|
||||
.boostlook:not(:has(.doc)) .notices .message p {
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-variation-settings: "wght" 400, "wdth" 80;
|
||||
font-variation-settings: "wght" 400, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -2375,7 +2375,7 @@ html.dark .boostlook .hljs-code {
|
||||
border: none;
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-variation-settings: "wght" 400, "wdth" 80;
|
||||
font-variation-settings: "wght" 400, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -2400,7 +2400,7 @@ html.dark .boostlook .hljs-code {
|
||||
color: var(--text-code-neutral, #0d0e0f);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
margin-bottom: 0;
|
||||
@@ -2427,7 +2427,7 @@ html.dark .boostlook .hljs-code {
|
||||
|
||||
.boostlook .dlist dl dt code,
|
||||
.boostlook:not(:has(.doc)) .variablelist dl dt code {
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
font-family: var(--font-family-code, 'Monaspace Neon');
|
||||
}
|
||||
|
||||
@@ -2471,7 +2471,7 @@ html.dark .boostlook .hljs-code {
|
||||
.boostlook .dlist dl dd em,
|
||||
.boostlook:not(:has(.doc)) .variablelist dl dd em {
|
||||
font: inherit;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
}
|
||||
|
||||
/* Edit Page Link */
|
||||
@@ -2480,7 +2480,7 @@ html.dark .boostlook .hljs-code {
|
||||
text-align: right;
|
||||
font-size: var(--typography-font-size-2xs, 0.75rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
padding: 0 var(--padding-padding-2xs, 0.5rem);
|
||||
@@ -2507,7 +2507,7 @@ html.dark .boostlook .hljs-code {
|
||||
padding-bottom: var(--padding-padding-sm);
|
||||
color: var(--text-main-text-body-quaternary, #949a9e);
|
||||
font-size: var(--typography-font-size-xs);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -2585,6 +2585,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.boostlook ul.itemizedlist > li,
|
||||
@@ -2596,6 +2597,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li,
|
||||
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li {
|
||||
font: inherit;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.boostlook ul.itemizedlist > li + li,
|
||||
@@ -2645,6 +2647,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
counter-increment: list-counter;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.boostlook .olist.arabic > ol > li::before,
|
||||
@@ -2681,6 +2684,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
counter-increment: list-counter;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem);
|
||||
}
|
||||
|
||||
.boostlook .olist.loweralpha > ol > li::before {
|
||||
@@ -2695,7 +2699,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
justify-content: center;
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -2710,7 +2714,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
justify-content: center;
|
||||
font-family: "Noto Sans";
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 350, "wdth" 80;
|
||||
font-variation-settings: "wght" 350, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem);
|
||||
font-size: var(--typography-font-size-sm, 1rem);
|
||||
text-align: center;
|
||||
@@ -2840,7 +2844,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
color: var(--text-main-text-body-primary, #2a2c30);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
|
||||
padding: 0;
|
||||
padding-bottom: var(--padding-padding-2xs, 0.5rem);
|
||||
@@ -2849,7 +2853,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
.boostlook #content table.tableblock caption > *,
|
||||
.boostlook:not(:has(.doc)) div.table .title > * {
|
||||
font: inherit;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -2923,7 +2927,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
background: var(--surface-background-main-surface-primary, #f5f6f8);
|
||||
color: var(--text-main-text-primary, #000000);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
|
||||
}
|
||||
|
||||
@@ -2984,7 +2988,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
.boostlook #content table.tableblock td strong,
|
||||
.boostlook:not(:has(.doc)) table.table td strong,
|
||||
.boostlook#libraryReadMe > table td strong {
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
}
|
||||
|
||||
.boostlook #content table.tableblock td code,
|
||||
@@ -3282,7 +3286,7 @@ div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook))
|
||||
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a {
|
||||
color: var(--text-main-text-body-quaternary, #949a9e);
|
||||
font-size: var(--typography-font-size-2xs, 0.75rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -3349,7 +3353,7 @@ div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook))
|
||||
font-size: var(--typography-font-size-2xs, 0.75rem);
|
||||
line-height: var(--typography-line-height-sm, 1rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
}
|
||||
|
||||
/* TOC code in links */
|
||||
@@ -3514,7 +3518,7 @@ html.is-clipped--nav:has(.boostlook) div#content {
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-lg, 1.25rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-xl, 1.75rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -3768,7 +3772,7 @@ html.dark .boostlook pre.rouge .cm {
|
||||
list-style: none;
|
||||
color: var(--text-main-text-body-tetriary, #62676b);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -4284,7 +4288,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) {
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-2xl, 1.75rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-3xl, 2.5rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
margin: 0;
|
||||
@@ -4305,7 +4309,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #conte
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-lg, 1.25rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-xl, 1.75rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -4420,7 +4424,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #cont
|
||||
padding: var(--spacing-size-3xs, 0.25rem);
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-2xs, 0.75rem);
|
||||
font-variation-settings: "wght" 600, "wdth" 80;
|
||||
font-variation-settings: "wght" 600, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -4470,6 +4474,18 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
|
||||
margin: var(--padding-padding-xs, 0.75rem) 0;
|
||||
}
|
||||
|
||||
.boostlook :is(h1, h2, h3, h4, h5) code,
|
||||
.boostlook .doc :is(h1, h2, h3, h4, h5) code {
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
font-size: 0.85em;
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
display: initial;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
@@ -4548,7 +4564,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
|
||||
color: var(--text-main-text-primary, #18191b);
|
||||
font-size: var(--typography-font-size-md, 1.125rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -4578,7 +4594,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
|
||||
color: var(--text-main-text-body-tetriary, #62676b);
|
||||
font-size: var(--typography-font-size-xs, 0.875rem);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
}
|
||||
@@ -4618,7 +4634,7 @@ div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spi
|
||||
.boostlook:not(:has(.doc)) .copyright-footer {
|
||||
color: var(--text-main-text-body-quaternary, #949a9e);
|
||||
font-size: var(--typography-font-size-xs);
|
||||
font-variation-settings: "wght" 500, "wdth" 80;
|
||||
font-variation-settings: "wght" 500, "wdth" 87.5;
|
||||
line-height: var(--typography-line-height-sm, 1rem);
|
||||
letter-spacing: var(--spacing-size-size-0, 0rem);
|
||||
text-align: left;
|
||||
|
||||
Reference in New Issue
Block a user