diff --git a/assets/css/swagger.css b/assets/css/swagger.css index 00f839e354..475bd445c0 100644 --- a/assets/css/swagger.css +++ b/assets/css/swagger.css @@ -25,13 +25,22 @@ body, padding-right: 0; } h2 { + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); font-weight: 500; + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } svg{ fill: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui .info h2.title { color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } .relearn-expander{ display: block; @@ -46,14 +55,10 @@ svg{ html { background-color: var(--INTERNAL-MAIN-BG-color) !important; -} -html { color-scheme: var(--INTERNAL-BROWSER-theme) !important; } html, body { background-color: var(--INTERNAL-MAIN-BG-color); -} -html, body { color: var(--INTERNAL-MAIN-TEXT-color); } a { @@ -74,7 +79,11 @@ select:-webkit-autofill { color: var(--INTERNAL-MAIN-TEXT-color) !important; } *:not(pre, pre *, code, .far, .fa, .glyphicon, [class*="vjs-"], .fab, .fa-github, .fas, .material-icons, .icofont, .typcn, mu, [class*="mu-"], .glyphicon, .icon) { + font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings) !important; + !font-weight: var(--INTERNAL-MAIN-font-weight) !important; font-family: var(--INTERNAL-MAIN-font) !important; + letter-spacing: var(--INTERNAL-MAIN-letter-spacing) !important; + line-height: 1.574 !important; } :root { --darkreader-neutral-background: var(--INTERNAL-MAIN-BG-color); @@ -105,6 +114,10 @@ select:-webkit-autofill { } .swagger-ui .opblock .opblock-section-header h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .opblock .opblock-summary-operation-id, .swagger-ui .opblock .opblock-summary-path, @@ -198,6 +211,10 @@ select:-webkit-autofill { .swagger-ui .opblock-external-docs-wrapper h4, .swagger-ui .opblock-title_normal h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .opblock-description-wrapper p, .swagger-ui .opblock-external-docs-wrapper p, @@ -206,9 +223,17 @@ select:-webkit-autofill { } .swagger-ui .responses-inner h4{ color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .responses-inner h5 { color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } .swagger-ui .response-col_status { color: var(--INTERNAL-MAIN-TEXT-color); @@ -228,6 +253,10 @@ select:-webkit-autofill { } .swagger-ui section h3 { color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } .swagger-ui .btn { color: var(--INTERNAL-MAIN-TEXT-color); @@ -249,18 +278,34 @@ select:-webkit-autofill { } .swagger-ui .dialog-ux .modal-ux-content h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .dialog-ux .modal-ux-header h3 { color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } .swagger-ui .model { color: var(--INTERNAL-MAIN-TEXT-color); } .swagger-ui section.models h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui section.models h5 { color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } .swagger-ui .model-title { color: var(--INTERNAL-MAIN-TITLES-TEXT-color); @@ -288,18 +333,40 @@ select:-webkit-autofill { } .swagger-ui .info h1 { color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); + text-align: center; + text-transform: uppercase; } .swagger-ui .info h2 { color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } .swagger-ui .info h3 { color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } .swagger-ui .info h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .info h5 { color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } .swagger-ui .info a { color: var(--INTERNAL-MAIN-LINK-color); @@ -318,18 +385,30 @@ select:-webkit-autofill { } .swagger-ui .scopes h2 { color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); } .swagger-ui .scopes h2 a { color: var(--INTERNAL-MAIN-LINK-color); } .swagger-ui .errors-wrapper .errors h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } .swagger-ui .errors-wrapper .errors small { color: var(--INTERNAL-MAIN-TITLES-TEXT-color); } .swagger-ui .errors-wrapper hgroup h4 { color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + !font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } body { background-color: var(--INTERNAL-MAIN-BG-color); diff --git a/assets/css/theme-blue.css b/assets/css/theme-blue.css index a424fc4f85..afab8fc2a7 100644 --- a/assets/css/theme-blue.css +++ b/assets/css/theme-blue.css @@ -1,7 +1,7 @@ :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ + --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ --MAIN-LINK-color: rgba( 28, 144, 243, 1 ); /* Color of links */ --MAIN-LINK-HOVER-color: rgba( 22, 122, 208, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ diff --git a/assets/css/theme-green.css b/assets/css/theme-green.css index fe8a63bdd8..b2d0cca75c 100644 --- a/assets/css/theme-green.css +++ b/assets/css/theme-green.css @@ -1,7 +1,7 @@ :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ + --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ --MAIN-LINK-color: rgba( 89, 154, 62, 1 ); /* Color of links */ --MAIN-LINK-HOVER-color: rgba( 63, 109, 44, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ diff --git a/assets/css/theme-learn.css b/assets/css/theme-learn.css index ce2a3fb2ac..28223ce19f 100644 --- a/assets/css/theme-learn.css +++ b/assets/css/theme-learn.css @@ -1,7 +1,7 @@ :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ + --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ --MAIN-LINK-color: rgba( 0, 189, 243, 1 ); /* Color of links */ --MAIN-LINK-HOVER-color: rgba( 0, 130, 167, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ diff --git a/assets/css/theme-neon.css b/assets/css/theme-neon.css index df93d5c25d..b89608cd5b 100644 --- a/assets/css/theme-neon.css +++ b/assets/css/theme-neon.css @@ -9,8 +9,8 @@ /* optional overwrites for specific headers */ --MAIN-TITLES-TEXT-color: rgba( 243, 0, 178, 1 ); /* text color of h2-h6 titles and transparent box titles */ - --MAIN-TITLES-H3-color: rgba( 255, 255, 0, 1 ); /* text color of h3-h6 titles */ - --MAIN-TITLES-H4-color: rgba( 154, 111, 255, 1 ); /* text color of h4-h6 titles */ + --MAIN-TITLES-H3-TEXT-color: rgba( 255, 255, 0, 1 ); /* text color of h3-h6 titles */ + --MAIN-TITLES-H4-TEXT-color: rgba( 154, 111, 255, 1 ); /* text color of h4-h6 titles */ --CODE-theme: neon; /* name of the chroma stylesheet file */ --CODE-BLOCK-color: rgba( 248, 248, 242, 1 ); /* fallback text color of block code; should be adjusted to your selected chroma style */ @@ -89,9 +89,9 @@ body h1 { 0 0 2px rgba( 255, 255, 255, 1 ), 0 0 4px rgba( 255, 255, 255, 1 ), 0 0 8px rgba( 255, 255, 255, 1 ), - 0 0 3px var(--INTERNAL-MAIN-TITLES-H1-color), - 0 0 6px var(--INTERNAL-MAIN-TITLES-H1-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H1-color); + 0 0 3px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color), + 0 0 6px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); } body h2 { @@ -100,9 +100,9 @@ body h2 { 0 0 1px rgba( 255, 255, 255, 1 ), 0 0 2px rgba( 255, 255, 255, 1 ), 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H2-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H2-color), - 0 0 10px var(--INTERNAL-MAIN-TITLES-H2-color); + 0 0 4px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color), + 0 0 10px var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); } body h3, body .article-subheading { @@ -111,9 +111,9 @@ body h3, body .article-subheading { 0 0 1px rgba( 255, 255, 255, 1 ), 0 0 2px rgba( 255, 255, 255, 1 ), 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H3-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H3-color), - 0 0 10px var(--INTERNAL-MAIN-TITLES-H3-color); + 0 0 4px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color), + 0 0 10px var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); } body h4 { @@ -122,9 +122,9 @@ body h4 { 0 0 1px rgba( 255, 255, 255, 1 ), 0 0 2px rgba( 255, 255, 255, 1 ), 0 0 8px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H4-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H4-color), - 0 0 10px var(--INTERNAL-MAIN-TITLES-H4-color); + 0 0 4px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color), + 0 0 10px var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); } body h5 { @@ -133,8 +133,8 @@ body h5 { 0 0 1px rgba( 255, 255, 255, 1 ), 0 0 3px rgba( 255, 255, 255, 1 ), 0 0 6px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H5-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H5-color); + 0 0 4px var(--INTERNAL-MAIN-TITLES-H5-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); } body h6 { @@ -143,10 +143,13 @@ body h6 { 0 0 1px rgba( 255, 255, 255, 1 ), 0 0 2px rgba( 255, 255, 255, 1 ), 0 0 4px rgba( 128, 128, 128, 1 ), - 0 0 4px var(--INTERNAL-MAIN-TITLES-H6-color), - 0 0 8px var(--INTERNAL-MAIN-TITLES-H6-color); + 0 0 4px var(--INTERNAL-MAIN-TITLES-H6-TEXT-color), + 0 0 8px var(--INTERNAL-MAIN-TITLES-H6-TEXT-color); } +.swagger-ui h1, +.swagger-ui h2, +.swagger-ui h3, .swagger-ui h4, .swagger-ui h5, .swagger-ui h6{ diff --git a/assets/css/theme-red.css b/assets/css/theme-red.css index 1efcc07c1f..27ccc359ab 100644 --- a/assets/css/theme-red.css +++ b/assets/css/theme-red.css @@ -1,7 +1,7 @@ :root { --MAIN-TEXT-color: rgba( 50, 50, 50, 1 ); /* Color of text by default */ --MAIN-TITLES-TEXT-color: rgba( 94, 94, 94, 1 ); /* Color of titles h2-h3-h4-h5-h6 */ - --MAIN-TITLES-H1-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ + --MAIN-TITLES-H1-TEXT-color: rgba( 34, 34, 34, 1 ); /* text color of h1 titles */ --MAIN-LINK-color: rgba( 243, 28, 28, 1 ); /* Color of links */ --MAIN-LINK-HOVER-color: rgba( 208, 22, 22, 1 ); /* Color of hovered links */ --MAIN-BG-color: rgba( 255, 255, 255, 1 ); /* color of text by default */ diff --git a/assets/css/theme.css b/assets/css/theme.css index e72915ba59..c4977ac2bc 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -117,11 +117,13 @@ body { color: var(--INTERNAL-MAIN-TEXT-color); display: flex; flex-direction: row-reverse; /* to allow body to have initial focus for PS in some browsers and better SEO and a11y */ - font-family: var(--INTERNAL-MAIN-font); font-size: 1.015625rem; - font-weight: 300; + font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-font-weight); + font-family: var(--INTERNAL-MAIN-font); height: 100%; justify-content: flex-end; + letter-spacing: var(--INTERNAL-MAIN-letter-spacing); line-height: 1.574; /* overflow: hidden; PSC removed for #242 #243 #244; to avoid browser scrollbar to flicker before we create our own */ width: 100%; @@ -341,8 +343,10 @@ a:focus, #R-sidebar .nav-title { color: var(--INTERNAL-MENU-SECTIONS-LINK-color); font-size: 2rem; - font-weight: 200; - letter-spacing: -.02175em; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); line-height: 110%; margin: 1.2rem 0 .8rem 0; padding-inline-start: 1rem; @@ -595,25 +599,6 @@ body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow ) { } } -#R-body-inner > .flex-block-wrapper article > .article-subheading { - font-weight: 200; - margin-top: 0; - text-align: center; -} -body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { - margin-top: 2rem; -} -@media screen and (max-width: 59.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { - margin-top: 1rem; - } -} -@media screen and (max-width: 47.999rem) { - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { - margin-top: .375rem; - } -} - body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow p { font-size: 1.2rem; text-align: justify; @@ -647,8 +632,6 @@ kbd { color: var(--INTERNAL-TEXT-color); -webkit-print-color-adjust: exact; color-adjust: exact; - font-family: var(--INTERNAL-CODE-font); - font-size: 0.75rem; line-height: 1; min-width: 0.75rem; padding: .125rem .3125rem .125rem .3125rem; @@ -658,10 +641,12 @@ kbd { } h1 { - color: var(--INTERNAL-MAIN-TITLES-H1-color); - font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); font-size: 3.25rem; - font-weight: 200; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); margin: 0.85rem 0 1rem 0; /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ overflow-wrap: break-word; @@ -686,43 +671,79 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 { } } -h2 { - color: var(--INTERNAL-MAIN-TITLES-H2-color); - font-family: var(--INTERNAL-MAIN-TITLES-H2-font); - font-size: 2.2rem; - font-weight: 500; +.article-subheading { + color: var(--INTERNAL-MAIN-TITLES-H1-TEXT-color); + font-size: 1.8rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H1-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H1-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H1-letter-spacing); + text-align: center; +} +#R-body-inner > .flex-block-wrapper article > .article-subheading { + margin-top: 0; +} +body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + margin-top: 2rem; +} +@media screen and (max-width: 59.999rem) { + body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + margin-top: 1rem; + } +} +@media screen and (max-width: 47.999rem) { + body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading { + margin-top: .375rem; + } } -h3, .article-subheading { - color: var(--INTERNAL-MAIN-TITLES-H3-color); - font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + +h2 { + color: var(--INTERNAL-MAIN-TITLES-H2-TEXT-color); + font-size: 2.2rem; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H2-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H2-letter-spacing); +} + +h3 { + color: var(--INTERNAL-MAIN-TITLES-H3-TEXT-color); font-size: 1.8rem; - font-weight: 500; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H3-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H3-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H3-letter-spacing); } h4 { - color: var(--INTERNAL-MAIN-TITLES-H4-color); - font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + color: var(--INTERNAL-MAIN-TITLES-H4-TEXT-color); font-size: 1.85rem; - font-weight: 300; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); } h5 { - color: var(--INTERNAL-MAIN-TITLES-H5-color); - font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + color: var(--INTERNAL-MAIN-TITLES-H5-TEXT-color); font-size: 1.6rem; - font-weight: 300; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H5-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H5-letter-spacing); } h6 { - color: var(--INTERNAL-MAIN-TITLES-H6-color); - font-family: var(--INTERNAL-MAIN-TITLES-H6-font); + color: var(--INTERNAL-MAIN-TITLES-H6-TEXT-color); font-size: 1.3rem; - font-weight: 300; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H6-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H6-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H6-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H6-letter-spacing); } h2, h3, .article-subheading, h4, h5, h6 { - letter-spacing: -.0625rem; margin: 1.5rem 0 1rem 0; /* big titles cause a horizontal scrollbar - fixing this by wrapping text */ overflow-wrap: break-word; @@ -883,8 +904,11 @@ code, kbd, pre:not(.mermaid), samp { - font-family: var(--INTERNAL-CODE-font); font-size: .934375rem; + font-variation-settings: var(--INTERNAL-CODE-font-variation-settings); + font-weight: var(--INTERNAL-CODE-font-weight); + font-family: var(--INTERNAL-CODE-font); + letter-spacing: var(--INTERNAL-CODE-letter-spacing); vertical-align: baseline; } @@ -1058,11 +1082,8 @@ tbody > tr:nth-child(even) > td { color: rgba( 255, 255, 255, 1 ); content: attr(aria-label); display: none; - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-size: .6875rem; - font-weight: normal; -webkit-font-smoothing: subpixel-antialiased; - letter-spacing: normal; line-height: 1.5; padding: 5px 8px; pointer-events: none; @@ -1386,7 +1407,6 @@ html[dir="rtl"] .topbar-button-next i { border-width: 1px; color: var(--INTERNAL-CODE-INLINE-color); cursor: pointer; - font-family: var(--INTERNAL-CODE-font); font-size: .934375rem; line-height: 1.15; } diff --git a/assets/css/variables.css b/assets/css/variables.css index e6a5dc8aac..5ea236ce23 100644 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -10,27 +10,59 @@ --INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, rgba( 255, 255, 255, 1 )); --INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, rgba( 16, 16, 16, 1 )); + --INTERNAL-MAIN-font: var(--MAIN-font, "Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); + --INTERNAL-MAIN-font-variation-settings: var(--MAIN-font-variation-settings, "wdth" 118, "GRAD" -200, "YTFI" 710); + --INTERNAL-MAIN-font-weight: var(--MAIN-font-weight, 300); + --INTERNAL-MAIN-letter-spacing: var(--MAIN-letter-spacing, .014em); + --INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, var(--INTERNAL-MAIN-TEXT-color)); + --INTERNAL-MAIN-TITLES-font: var(--MAIN-TITLES-font, var(--MAIN-TITLES-TEXT-font, var(--INTERNAL-MAIN-font))); + --INTERNAL-MAIN-TITLES-font-variation-settings: var(--MAIN-TITLES-font-variation-settings, "wdth" 118, "GRAD" 0, "YTFI" 710); + --INTERNAL-MAIN-TITLES-font-weight: var(--MAIN-TITLES-font-weight, 500); + --INTERNAL-MAIN-TITLES-letter-spacing: var(--MAIN-TITLES-letter-spacing, var(--INTERNAL-MAIN-letter-spacing)); - --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color)); - --INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color)); - --INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color)); - --INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color, var(--INTERNAL-MAIN-TITLES-H3-color)); - --INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-color)); - --INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-color)); - - --INTERNAL-MAIN-font: var(--MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); - --INTERNAL-MAIN-TITLES-TEXT-font: var(--MAIN-TITLES-TEXT-font, var(--INTERNAL-MAIN-font)); - + --INTERNAL-MAIN-TITLES-H1-TEXT-color: var(--MAIN-TITLES-H1-TEXT-color, var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color))); --INTERNAL-MAIN-TITLES-H1-font: var(--MAIN-TITLES-H1-font, var(--INTERNAL-MAIN-font)); - --INTERNAL-MAIN-TITLES-H2-font: var(--MAIN-TITLES-H2-font, var(--INTERNAL-MAIN-TITLES-TEXT-font)); + --INTERNAL-MAIN-TITLES-H1-font-variation-settings: var(--MAIN-TITLES-H1-font-variation-settings, "wdth" 118, "GRAD" -100, "YTFI" 710); + --INTERNAL-MAIN-TITLES-H1-font-weight: var(--MAIN-TITLES-H1-font-weight, 200); + --INTERNAL-MAIN-TITLES-H1-letter-spacing: var(--MAIN-TITLES-H1-letter-spacing, var(--INTERNAL-MAIN-letter-spacing)); + + --INTERNAL-MAIN-TITLES-H2-TEXT-color: var(--MAIN-TITLES-H2-TEXT-color, var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color))); + --INTERNAL-MAIN-TITLES-H2-font: var(--MAIN-TITLES-H2-font, var(--INTERNAL-MAIN-TITLES-font)); + --INTERNAL-MAIN-TITLES-H2-font-variation-settings: var(--MAIN-TITLES-H2-font-variation-settings, var(--INTERNAL-MAIN-TITLES-font-variation-settings)); + --INTERNAL-MAIN-TITLES-H2-font-weight: var(--MAIN-TITLES-H2-font-weight, var(--INTERNAL-MAIN-TITLES-font-weight)); + --INTERNAL-MAIN-TITLES-H2-letter-spacing: var(--MAIN-TITLES-H2-letter-spacing, var(--INTERNAL-MAIN-TITLES-letter-spacing)); + + --INTERNAL-MAIN-TITLES-H3-TEXT-color: var(--MAIN-TITLES-H3-TEXT-color, var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-TEXT-color))); --INTERNAL-MAIN-TITLES-H3-font: var(--MAIN-TITLES-H3-font, var(--INTERNAL-MAIN-TITLES-H2-font)); + --INTERNAL-MAIN-TITLES-H3-font-variation-settings: var(--MAIN-TITLES-H3-font-variation-settings, var(--INTERNAL-MAIN-TITLES-H2-font-variation-settings)); + --INTERNAL-MAIN-TITLES-H3-font-weight: var(--MAIN-TITLES-H3-font-weight, var(--INTERNAL-MAIN-TITLES-H2-font-weight)); + --INTERNAL-MAIN-TITLES-H3-letter-spacing: var(--MAIN-TITLES-H3-letter-spacing, var(--INTERNAL-MAIN-TITLES-H2-letter-spacing)); + + --INTERNAL-MAIN-TITLES-H4-TEXT-color: var(--MAIN-TITLES-H4-TEXT-color, var(--MAIN-TITLES-H4-color, var(--INTERNAL-MAIN-TITLES-H3-TEXT-color))); --INTERNAL-MAIN-TITLES-H4-font: var(--MAIN-TITLES-H4-font, var(--INTERNAL-MAIN-TITLES-H3-font)); + --INTERNAL-MAIN-TITLES-H4-font-variation-settings: var(--MAIN-TITLES-H4-font-variation-settings, "wdth" 118, "GRAD" -150, "YTFI" 710); + --INTERNAL-MAIN-TITLES-H4-font-weight: var(--MAIN-TITLES-H4-font-weight, 300); + --INTERNAL-MAIN-TITLES-H4-letter-spacing: var(--MAIN-TITLES-H4-letter-spacing, var(--INTERNAL-MAIN-TITLES-H3-letter-spacing)); + + --INTERNAL-MAIN-TITLES-H5-TEXT-color: var(--MAIN-TITLES-H5-TEXT-color, var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-TEXT-color))); --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font)); + --INTERNAL-MAIN-TITLES-H5-font-variation-settings: var(--MAIN-TITLES-H5-font-variation-settings, var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings)); + --INTERNAL-MAIN-TITLES-H5-font-weight: var(--MAIN-TITLES-H5-font-weight, var(--INTERNAL-MAIN-TITLES-H4-font-weight)); + --INTERNAL-MAIN-TITLES-H5-letter-spacing: var(--MAIN-TITLES-H5-letter-spacing, var(--INTERNAL-MAIN-TITLES-H4-letter-spacing)); + + --INTERNAL-MAIN-TITLES-H6-TEXT-color: var(--MAIN-TITLES-H6-TEXT-color, var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-TEXT-color))); --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font)); + --INTERNAL-MAIN-TITLES-H6-font-variation-settings: var(--MAIN-TITLES-H6-font-variation-settings, var(--INTERNAL-MAIN-TITLES-H5-font-variation-settings)); + --INTERNAL-MAIN-TITLES-H6-font-weight: var(--MAIN-TITLES-H6-font-weight, var(--INTERNAL-MAIN-TITLES-H5-font-weight)); + --INTERNAL-MAIN-TITLES-H6-letter-spacing: var(--MAIN-TITLES-H6-letter-spacing, var(--INTERNAL-MAIN-TITLES-H5-letter-spacing)); + + --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); + --INTERNAL-CODE-font-variation-settings: var(--CODE-font-variation-settings, normal); + --INTERNAL-CODE-font-weight: var(--CODE-font-weight, 300); + --INTERNAL-CODE-letter-spacing: var(--CODE-letter-spacing, normal); --INTERNAL-CODE-theme: var(--CODE-theme, relearn-light); - --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, rgba( 39, 40, 34, 1 ))); --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, rgba( 250, 250, 250, 1 ))); --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color))); @@ -110,7 +142,7 @@ --INTERNAL-PRINT-MAIN-BG-color: var(--PRINT-MAIN-BG-color, rgba( 255, 255, 255, 1 )); --INTERNAL-PRINT-CODE-font: var(--PRINT-CODE-font, "Consolas", menlo, monospace); --INTERNAL-PRINT-TAG-BG-color: var(--PRINT-TAG-BG-color, rgba( 125, 201, 3, 1 )); - --INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); + --INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif); --INTERNAL-PRINT-MAIN-TEXT-color: var(--PRINT-MAIN-TEXT-color, rgba( 16, 16, 16, 1 )); --INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default); --INTERNAL-PRINT-OPENAPI-theme: var(--PRINT-OPENAPI-theme, var(--PRINT-SWAGGER-theme, light)); diff --git a/exampleSite/content/introduction/releasenotes/7/0.en.md b/exampleSite/content/introduction/releasenotes/7/0.en.md index 679a97653f..28511f6880 100644 --- a/exampleSite/content/introduction/releasenotes/7/0.en.md +++ b/exampleSite/content/introduction/releasenotes/7/0.en.md @@ -51,3 +51,19 @@ weight = -0 In addition you are now able to overwrite the default file name of the search index and the default page name of the dedicated search page by changing `searchIndexURL` and `searchPageURL` respectively in your `hugo.toml`. See the [updated documentation](configuration/sidebar/search/) for reference. + +## Change + +- {{% badge style="note" title=" " %}}Change{{% /badge %}} Once again, the theme changed the font. We switched to the excellent [Roboto Flex](https://github.com/googlefonts/roboto-flex) font. + + Care was taken, to configure the font to look similar to the previously used Work Sans. Nevertheless, in direct comparison you will see slight differences in appearance. + + This change was necessary as the previously used font had display issues with [marked text](content/markdown/#marked-text), contrast and some other minor stuff. + + Although the font was created by Google, it is licensed under OFL 1.1 and is delivered from your theme's installation. As always, no third party server calls involved. + + If you have overridden the font to a [variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide#variable_fonts_what_they_are_and_how_they_differ) in your installation (either by hacking the CSS directly or by using any of the mechansims provided by the theme), you may have to adjust your CSS value for `font-variations-settings`. + +- {{% badge style="note" title=" " %}}Change{{% /badge %}} While switching the font, it was discovered that certain CSS variables were falsely named. You don't need to change anything in your custom variant stylesheet as the old names will be used as a fallback. + + `--MAIN-TITLES-TEXT-font` was renamed to `--MAIN-TITLES-font`, `--MAIN-TITLES-H-color` was renamed to `--MAIN-TITLES-H-TEXT-color`. diff --git a/exampleSite/content/more/credits/_index.en.md b/exampleSite/content/more/credits/_index.en.md index 773ca09218..df1e697ee3 100644 --- a/exampleSite/content/more/credits/_index.en.md +++ b/exampleSite/content/more/credits/_index.en.md @@ -30,8 +30,8 @@ Many thanks to [Andy Miller](https://github.com/rhukster) for initially creating - [MathJax](https://mathjax.org/) - Beautiful math and chemical formulae in all browsers - [Mermaid](https://mermaid-js.github.io/mermaid) - Generation of diagram and flowchart from text in a similar manner as markdown - [Perfect Scrollbar](https://perfectscrollbar.com) - A minimalistic but perfect custom scrollbar plugin +- [Roboto Flex](https://github.com/googlefonts/roboto-flex) - Google's most popular font gets customizable - [SwaggerUI](https://github.com/swagger-api/swagger-ui) - Generate beautiful documentation from a Swagger-compliant API -- [WorkSans](https://weiweihuanghuang.github.io/Work-Sans/) - Work Sans is a 9 weight typeface family based loosely on early Grotesques ## Docs Dependencies diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html index ad17ce39e0..a5beda5824 100644 --- a/layouts/partials/logo.html +++ b/layouts/partials/logo.html @@ -10,9 +10,11 @@ a#R-logo { color: #282828; color: var(--MENU-SECTIONS-BG-color); - font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif; font-size: 1.875rem; - font-weight: 300; + font-variation-settings: var(--INTERNAL-MAIN-TITLES-H4-font-variation-settings); + font-weight: var(--INTERNAL-MAIN-TITLES-H4-font-weight); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); + letter-spacing: var(--INTERNAL-MAIN-TITLES-H4-letter-spacing); margin-top: -.8125rem; max-width: 60%; text-transform: uppercase; diff --git a/static/css/fonts.css b/static/css/fonts.css index 46411080fd..66736648ed 100644 --- a/static/css/fonts.css +++ b/static/css/fonts.css @@ -1,39 +1,73 @@ +/* Roboto Flex +/* Variant 1: Every glyph, every axis, one big file */ +/* - Download TTF font from https://github.com/googlefonts/roboto-flex */ +/* - Convert TTF to WOFF2 using any converter tool */ +/* @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 200; - src: url("../fonts/WorkSans-ExtraLight.woff2") format("woff2"), url("../fonts/WorkSans-ExtraLight.woff") format("woff"); - font-display: swap; + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.woff2") format('woff2-variations'); } +*/ + +/* Variant 2: Splitted glyphs, selected axes, multiple moderatly sized files */ +/* - Download CSS with selected axes https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght,GRAD,YTFI@8..144,118,100..1000,-200..150,710&display=swap +/* - Downlaod fonts of src attributes of resulting CSS and edit file names accordingly */ @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 300; - src: url("../fonts/WorkSans-Light.woff2") format("woff2"), url("../fonts/WorkSans-Light.woff") format("woff"); - font-display: swap; + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.cyrillic-ext.woff2") format('woff2-variations'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } - @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 400; - src: url("../fonts/WorkSans-Regular.woff2") format("woff2"), url("../fonts/WorkSans-Regular.woff") format("woff"); - font-display: swap; + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.cyrillic.woff2") format('woff2-variations'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } - @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 500; - src: url("../fonts/WorkSans-Medium.woff2") format("woff2"), url("../fonts/WorkSans-Medium.woff") format("woff"); - font-display: swap; + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.greek.woff2") format('woff2-variations'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } - @font-face { - font-family: 'Work Sans'; - font-style: normal; - font-weight: 600; - src: url("../fonts/WorkSans-Bold.woff2") format("woff2"), url("../fonts/WorkSans-Bold.woff") format("woff"); - font-display: swap; + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.vietnamese.woff2") format('woff2-variations'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +@font-face { + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.latin-ext.woff2") format('woff2-variations'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +@font-face { + font-family: 'Roboto Flex'; + font-style: normal; + font-weight: 100 1000; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/RobotoFlex.latin.woff2") format('woff2-variations'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } diff --git a/static/css/swagger-dark.css b/static/css/swagger-dark.css index fdec952523..5834d7197c 100644 --- a/static/css/swagger-dark.css +++ b/static/css/swagger-dark.css @@ -87,7 +87,7 @@ select:-webkit-autofill { /* Variables Style */ :root { - --darkreader-neutral-background-relearn: var(--INTERNAL-MAIN-font); + --darkreader-neutral-background-relearn: var(--INTERNAL-MAIN-BG-color); --darkreader-neutral-text-relearn: var(--INTERNAL-MAIN-TEXT-color); --darkreader-selection-background: #004daa; --darkreader-selection-text-relearn: var(--INTERNAL-MAIN-TEXT-color); diff --git a/static/fonts/RobotoFlex.cyrillic-ext.woff2 b/static/fonts/RobotoFlex.cyrillic-ext.woff2 new file mode 100644 index 0000000000..e9b1a62088 Binary files /dev/null and b/static/fonts/RobotoFlex.cyrillic-ext.woff2 differ diff --git a/static/fonts/RobotoFlex.cyrillic.woff2 b/static/fonts/RobotoFlex.cyrillic.woff2 new file mode 100644 index 0000000000..a71469176d Binary files /dev/null and b/static/fonts/RobotoFlex.cyrillic.woff2 differ diff --git a/static/fonts/RobotoFlex.greek.woff2 b/static/fonts/RobotoFlex.greek.woff2 new file mode 100644 index 0000000000..d36dec4a18 Binary files /dev/null and b/static/fonts/RobotoFlex.greek.woff2 differ diff --git a/static/fonts/RobotoFlex.latin-ext.woff2 b/static/fonts/RobotoFlex.latin-ext.woff2 new file mode 100644 index 0000000000..b431a8b3ad Binary files /dev/null and b/static/fonts/RobotoFlex.latin-ext.woff2 differ diff --git a/static/fonts/RobotoFlex.latin.woff2 b/static/fonts/RobotoFlex.latin.woff2 new file mode 100644 index 0000000000..06bbdd0c18 Binary files /dev/null and b/static/fonts/RobotoFlex.latin.woff2 differ diff --git a/static/fonts/RobotoFlex.vietnamese.woff2 b/static/fonts/RobotoFlex.vietnamese.woff2 new file mode 100644 index 0000000000..bbfa7a1542 Binary files /dev/null and b/static/fonts/RobotoFlex.vietnamese.woff2 differ diff --git a/static/fonts/RobotoFlex.woff2 b/static/fonts/RobotoFlex.woff2 new file mode 100644 index 0000000000..985f42135d Binary files /dev/null and b/static/fonts/RobotoFlex.woff2 differ diff --git a/static/fonts/WorkSans-Bold.woff b/static/fonts/WorkSans-Bold.woff deleted file mode 100644 index 3f08066987..0000000000 Binary files a/static/fonts/WorkSans-Bold.woff and /dev/null differ diff --git a/static/fonts/WorkSans-Bold.woff2 b/static/fonts/WorkSans-Bold.woff2 deleted file mode 100644 index 492d463d90..0000000000 Binary files a/static/fonts/WorkSans-Bold.woff2 and /dev/null differ diff --git a/static/fonts/WorkSans-ExtraLight.woff b/static/fonts/WorkSans-ExtraLight.woff deleted file mode 100644 index 30108bad4b..0000000000 Binary files a/static/fonts/WorkSans-ExtraLight.woff and /dev/null differ diff --git a/static/fonts/WorkSans-ExtraLight.woff2 b/static/fonts/WorkSans-ExtraLight.woff2 deleted file mode 100644 index bda56c6d25..0000000000 Binary files a/static/fonts/WorkSans-ExtraLight.woff2 and /dev/null differ diff --git a/static/fonts/WorkSans-Light.woff b/static/fonts/WorkSans-Light.woff deleted file mode 100644 index 47f58a23c6..0000000000 Binary files a/static/fonts/WorkSans-Light.woff and /dev/null differ diff --git a/static/fonts/WorkSans-Light.woff2 b/static/fonts/WorkSans-Light.woff2 deleted file mode 100644 index e7537e8045..0000000000 Binary files a/static/fonts/WorkSans-Light.woff2 and /dev/null differ diff --git a/static/fonts/WorkSans-Medium.woff b/static/fonts/WorkSans-Medium.woff deleted file mode 100644 index 79150e373b..0000000000 Binary files a/static/fonts/WorkSans-Medium.woff and /dev/null differ diff --git a/static/fonts/WorkSans-Medium.woff2 b/static/fonts/WorkSans-Medium.woff2 deleted file mode 100644 index 5909c58e32..0000000000 Binary files a/static/fonts/WorkSans-Medium.woff2 and /dev/null differ diff --git a/static/fonts/WorkSans-Regular.woff b/static/fonts/WorkSans-Regular.woff deleted file mode 100644 index e4b8c47180..0000000000 Binary files a/static/fonts/WorkSans-Regular.woff and /dev/null differ diff --git a/static/fonts/WorkSans-Regular.woff2 b/static/fonts/WorkSans-Regular.woff2 deleted file mode 100644 index de39aa8cd7..0000000000 Binary files a/static/fonts/WorkSans-Regular.woff2 and /dev/null differ diff --git a/static/js/theme.js b/static/js/theme.js index b51fc3294b..fe1f906fe7 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -408,9 +408,9 @@ function initOpenapi( update, attrs ){ '' + '' + '' + - '' + '' + '' + + '' + '' + '' + 'Collapse all' + diff --git a/static/js/variant.js b/static/js/variant.js index 56f4bb6c30..1a30535cd6 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -511,18 +511,18 @@ var variants = { { name: 'MAIN-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles', }, { name: 'MAIN-TITLES-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h2-h6 titles and transparent box titles', }, - { name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', }, - { name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', }, - { name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color', tooltip: 'text color of h3-h6 titles', }, - { name: 'MAIN-TITLES-H4-color', group: 'headings', fallback: 'MAIN-TITLES-H3-color', tooltip: 'text color of h4-h6 titles', }, - { name: 'MAIN-TITLES-H5-color', group: 'headings', fallback: 'MAIN-TITLES-H4-color', tooltip: 'text color of h5-h6 titles', }, - { name: 'MAIN-TITLES-H6-color', group: 'headings', fallback: 'MAIN-TITLES-H5-color', tooltip: 'text color of h6 titles', }, + { name: 'MAIN-TITLES-H1-TEXT-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', }, + { name: 'MAIN-TITLES-H2-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-TEXT-color', tooltip: 'text color of h2-h6 titles', }, + { name: 'MAIN-TITLES-H3-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H2-TEXT-color', tooltip: 'text color of h3-h6 titles', }, + { name: 'MAIN-TITLES-H4-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H3-TEXT-color', tooltip: 'text color of h4-h6 titles', }, + { name: 'MAIN-TITLES-H5-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H4-TEXT-color', tooltip: 'text color of h5-h6 titles', }, + { name: 'MAIN-TITLES-H6-TEXT-color', group: 'headings', fallback: 'MAIN-TITLES-H5-TEXT-color', tooltip: 'text color of h6 titles', }, - { name: 'MAIN-font', group: 'content', default: '"Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif', tooltip: 'text font of content and h1 titles', }, + { name: 'MAIN-font', group: 'content', default: '"Roboto Flex", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif', tooltip: 'text font of content and h1 titles', }, - { name: 'MAIN-TITLES-TEXT-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h2-h6 titles and transparent box titles', }, + { name: 'MAIN-TITLES-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h2-h6 titles and transparent box titles', }, { name: 'MAIN-TITLES-H1-font', group: 'headings', fallback: 'MAIN-font', tooltip: 'text font of h1 titles', }, - { name: 'MAIN-TITLES-H2-font', group: 'headings', fallback: 'MAIN-TITLES-TEXT-font', tooltip: 'text font of h2-h6 titles', }, + { name: 'MAIN-TITLES-H2-font', group: 'headings', fallback: 'MAIN-TITLES-font', tooltip: 'text font of h2-h6 titles', }, { name: 'MAIN-TITLES-H3-font', group: 'headings', fallback: 'MAIN-TITLES-H2-font', tooltip: 'text font of h3-h6 titles', }, { name: 'MAIN-TITLES-H4-font', group: 'headings', fallback: 'MAIN-TITLES-H3-font', tooltip: 'text font of h4-h6 titles', }, { name: 'MAIN-TITLES-H5-font', group: 'headings', fallback: 'MAIN-TITLES-H4-font', tooltip: 'text font of h5-h6 titles', },