nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 15:57:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: add CSS font variables #227

Browse source
This commit is contained in:
Sören Weber 2022-03-27 22:20:30 +02:00
parent f910477160
commit 1823823321
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
4 changed files with 49 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -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.
---

10
static/css/theme.css
View file

@ -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;
}

30
static/css/variant.css
View file

@ -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);
}

12
static/js/variant.js
View file

@ -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', },