From d237bf419f34baee8b40429845184da311b7cdf6 Mon Sep 17 00:00:00 2001 From: Bartek Szopka <83575+bartaz@users.noreply.github.com> Date: Fri, 5 Jan 2024 12:13:46 +0000 Subject: [PATCH 1/2] Add new Ubuntu variable font to custom CSS --- .sphinx/_static/custom.css | 82 +++++++++++++++++++++++++++++++++ .sphinx/_static/furo_colors.css | 4 +- 2 files changed, 84 insertions(+), 2 deletions(-) diff --git a/.sphinx/_static/custom.css b/.sphinx/_static/custom.css index 4ef05c0a..b29e2c0b 100644 --- a/.sphinx/_static/custom.css +++ b/.sphinx/_static/custom.css @@ -1,3 +1,85 @@ +/** + Ubuntu variable font definitions. + Based on https://github.com/canonical/vanilla-framework/blob/main/scss/_base_fontfaces.scss + + When font files are updated in Vanilla, the links to font files will need to be updated here as well. +*/ + +/* default font set */ +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations'); +} + +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: italic; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/90b59210-Ubuntu-Italic%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations'); +} + +@font-face { + font-family: 'Ubuntu Mono variable'; + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/d5fc1819-UbuntuMono%5Bwght%5D-latin-v0.869.woff2') format('woff2-variations'); +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/77cd6650-Ubuntu%5Bwdth,wght%5D-cyrillic-extended-v0.896a.woff2') format('woff2-variations'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} + +/* cyrillic */ +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/2702fce5-Ubuntu%5Bwdth,wght%5D-cyrillic-v0.896a.woff2') format('woff2-variations'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* greek-ext */ +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/5c108b7d-Ubuntu%5Bwdth,wght%5D-greek-extended-v0.896a.woff2') format('woff2-variations'); + unicode-range: U+1F00-1FFF; +} + +/* greek */ +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/0a14c405-Ubuntu%5Bwdth,wght%5D-greek-v0.896a.woff2') format('woff2-variations'); + unicode-range: U+0370-03FF; +} + +/* latin-ext */ +@font-face { + font-family: 'Ubuntu variable'; + font-stretch: 100%; /* min and max value for the width axis, expressed as percentage */ + font-style: normal; + font-weight: 100 800; /* min and max value for the weight axis */ + src: url('https://assets.ubuntu.com/v1/19f68eeb-Ubuntu%5Bwdth,wght%5D-latin-extended-v0.896a.woff2') format('woff2-variations'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} + + /** Fix the font weight (300 for normal, 400 for slightly bold) **/ div.page, h1, h2, h3, h4, h5, h6, .sidebar-tree .current-page>.reference, button, input, optgroup, select, textarea, th.head { diff --git a/.sphinx/_static/furo_colors.css b/.sphinx/_static/furo_colors.css index ffc36cbc..45512fca 100644 --- a/.sphinx/_static/furo_colors.css +++ b/.sphinx/_static/furo_colors.css @@ -1,8 +1,8 @@ body { --color-code-background: #f8f8f8; --color-code-foreground: black; - --font-stack: Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - --font-stack--monospace: Ubuntu Mono, Consolas, Monaco, Courier, monospace; + --font-stack: Ubuntu variable, Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + --font-stack--monospace: Ubuntu Mono variable, Ubuntu Mono, Consolas, Monaco, Courier, monospace; --color-foreground-primary: #111; --color-foreground-secondary: var(--color-foreground-primary); --color-foreground-muted: #333; From 78b53c5c5bdd57a57eb6eeb92a40bf7ed16e2c1b Mon Sep 17 00:00:00 2001 From: Bartek Szopka <83575+bartaz@users.noreply.github.com> Date: Fri, 5 Jan 2024 13:47:22 +0000 Subject: [PATCH 2/2] Adjust font weights and code block font size --- .sphinx/_static/custom.css | 34 ++++++++++++++++++++++++++++----- .sphinx/_static/furo_colors.css | 1 + 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/.sphinx/_static/custom.css b/.sphinx/_static/custom.css index b29e2c0b..6f908c6e 100644 --- a/.sphinx/_static/custom.css +++ b/.sphinx/_static/custom.css @@ -80,16 +80,40 @@ } -/** Fix the font weight (300 for normal, 400 for slightly bold) **/ +/** Define font-weights as per Vanilla + Based on: https://github.com/canonical/vanilla-framework/blob/main/scss/_base_typography-definitions.scss + + regular text: 400, + bold: 550, + thin: 300, + + h1: bold, + h2: 180; + h3: bold, + h4: 275, + h5: bold, + h6: regular +*/ -div.page, h1, h2, h3, h4, h5, h6, .sidebar-tree .current-page>.reference, button, input, optgroup, select, textarea, th.head { - font-weight: 300 +/* default regular text */ +html { + font-weight: 400; } -.toc-tree li.scroll-current>.reference, dl.glossary dt, dl.simple dt, dl:not([class]) dt { - font-weight: 400; +/* heading specific definitions */ +h1, h3, h5 { font-weight: 550; } +h2 { font-weight: 180; } +h4 { font-weight: 275; } + +/* bold */ +.toc-tree li.scroll-current>.reference, +dl.glossary dt, +dl.simple dt, +dl:not([class]) dt { + font-weight: 550; } + /** Table styling **/ th.head { diff --git a/.sphinx/_static/furo_colors.css b/.sphinx/_static/furo_colors.css index 45512fca..422c777d 100644 --- a/.sphinx/_static/furo_colors.css +++ b/.sphinx/_static/furo_colors.css @@ -1,6 +1,7 @@ body { --color-code-background: #f8f8f8; --color-code-foreground: black; + --code-font-size: 1rem; --font-stack: Ubuntu variable, Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; --font-stack--monospace: Ubuntu Mono variable, Ubuntu Mono, Consolas, Monaco, Courier, monospace; --color-foreground-primary: #111;