From 18238233210d4b9fddb8adc469e6dcbf63dfdb67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sun, 27 Mar 2022 22:20:30 +0200 Subject: [PATCH] theme: add CSS font variables #227 --- .../content/basics/migration/_index.en.md | 2 ++ static/css/theme.css | 10 +++---- static/css/variant.css | 30 +++++++++++++++++++ static/js/variant.js | 12 ++++++++ 4 files changed, 49 insertions(+), 5 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index d0e2bf532b..604f29a143 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -16,6 +16,8 @@ This document shows you what's new in the latest release. For a detailed list of ## 3.3.0 +- **New**: Introduction of new CSS variables to set the font. The theme distinguishs between `--MAIN-font` for all content text and `--CODE-font` for inline or block code. There are additional overrides for all headings. See the [theme variant generator]({{%relref "basics/generator" %}}) of the exampleSite for all available variables. + - **New**: The new shortcode `swagger` is available to include a UI for REST OpenAPI Specifications. See the [`documentation`]({{% relref "shortcodes/swagger" %}}) for available features. --- diff --git a/static/css/theme.css b/static/css/theme.css index 2bd3abac20..07d4b2ff40 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -53,7 +53,7 @@ body { color: #101010; /* var(--MAIN-TEXT-color) */ display: flex; flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS */ - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */ font-size: 16.25px; font-weight: 300; height: 100%; @@ -455,7 +455,7 @@ th { h1 { color: #101010; /* var(--MAIN-TEXT-color) */ - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */ font-weight: 200; text-align: center; text-transform: uppercase; @@ -463,7 +463,7 @@ h1 { h2, h3, h4, h5, h6 { color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */ - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */ letter-spacing: -1px; text-rendering: optimizeLegibility; } @@ -683,7 +683,7 @@ code, kbd, pre, samp { - font-family: "Consolas", menlo, monospace; + font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */ font-size: 92%; vertical-align: baseline; } @@ -1094,7 +1094,7 @@ span.nav i{ border-radius: 0 2px 2px 0; color: #5e5e5e; /* var(--CODE-INLINE-color) */ cursor: pointer; - font-family: "Consolas", menlo, monospace; + font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */ font-size: 92%; padding-left: 22px; } diff --git a/static/css/variant.css b/static/css/variant.css index 0b7ccd630c..9caae3aed7 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -13,6 +13,16 @@ --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-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-H3-font: var(--MAIN-TITLES-H3-font, var(--INTERNAL-MAIN-TITLES-H2-font)); + --INTERNAL-MAIN-TITLES-H4-font: var(--MAIN-TITLES-H4-font, var(--INTERNAL-MAIN-TITLES-H3-font)); + --INTERNAL-MAIN-TITLES-H5-font: var(--MAIN-TITLES-H5-font, var(--INTERNAL-MAIN-TITLES-H4-font)); + --INTERNAL-MAIN-TITLES-H6-font: var(--MAIN-TITLES-H6-font, var(--INTERNAL-MAIN-TITLES-H5-font)); + --INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000)); --INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8)); --INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color))); @@ -21,6 +31,8 @@ --INTERNAL-CODE-INLINE-BG-color: var(--CODE-INLINE-BG-color, #fffae9); --INTERNAL-CODE-INLINE-BORDER-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); + --INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace); + --INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default)); --INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light)); @@ -80,6 +92,7 @@ body { background-color: var(--INTERNAL-MAIN-BG-color); color: var(--INTERNAL-MAIN-TEXT-color); + font-family: var(--INTERNAL-MAIN-font); } a, @@ -145,26 +158,32 @@ a:hover, h1 { color: var(--INTERNAL-MAIN-TITLES-H1-color); + font-family: var(--INTERNAL-MAIN-TITLES-H1-font); } h2 { color: var(--INTERNAL-MAIN-TITLES-H2-color); + font-family: var(--INTERNAL-MAIN-TITLES-H2-font); } h3 { color: var(--INTERNAL-MAIN-TITLES-H3-color); + font-family: var(--INTERNAL-MAIN-TITLES-H3-font); } h4 { color: var(--INTERNAL-MAIN-TITLES-H4-color); + font-family: var(--INTERNAL-MAIN-TITLES-H4-font); } h5 { color: var(--INTERNAL-MAIN-TITLES-H5-color); + font-family: var(--INTERNAL-MAIN-TITLES-H5-font); } h6 { color: var(--INTERNAL-MAIN-TITLES-H6-color); + font-family: var(--INTERNAL-MAIN-TITLES-H6-font); } code { @@ -358,3 +377,14 @@ div.box.transparent > .box-label { div.box.transparent > .box-content { color: var(--INTERNAL-MAIN-TEXT-color); } + +code, +kbd, +pre, +samp { + font-family: var(--INTERNAL-CODE-font); +} + +.copy-to-clipboard-button { + font-family: var(--INTERNAL-CODE-font); +} diff --git a/static/js/variant.js b/static/js/variant.js index 8ad036efdd..4225a9d5d3 100644 --- a/static/js/variant.js +++ b/static/js/variant.js @@ -472,6 +472,16 @@ var variants = { { 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-font', group: 'content', default: '"Work Sans", "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-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-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', }, + { name: 'MAIN-TITLES-H6-font', group: 'headings', fallback: 'MAIN-TITLES-H5-font', tooltip: 'text font of h6 titles', }, + { name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000', tooltip: 'fallback text color of block code; should be adjusted to your selected chroma style', }, { name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8', tooltip: 'fallback background color of block code; should be adjusted to your selected chroma style', }, { name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color', tooltip: 'border color of block code', }, @@ -480,6 +490,8 @@ var variants = { { name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9', tooltip: 'background color of inline code', }, { name: 'CODE-INLINE-BORDER-color', group: 'inline code', default: '#fbf0cb', tooltip: 'border color of inline code', }, + { name: 'CODE-font', group: 'content', default: '"Consolas", menlo, monospace', tooltip: 'text font of code', }, + { name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in config.toml', }, { name: 'SWAGGER-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Swagger theme for this variant, can be overridden in config.toml', },