diff --git a/docs/_includes/import-stylesheet-code.md.njk b/docs/_includes/import-stylesheet-code.md.njk new file mode 100644 index 000000000..c70314b46 --- /dev/null +++ b/docs/_includes/import-stylesheet-code.md.njk @@ -0,0 +1,18 @@ + +In HTML +In CSS + + +Simply add the following code to the `` of your page: +```html + +``` + + + +Simply add the following code at the top of your CSS file: +```css +@import url('{% cdnUrl stylesheet %}'); +``` + + diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk index a0e19a13b..6903717e4 100644 --- a/docs/_layouts/palette.njk +++ b/docs/_layouts/palette.njk @@ -112,24 +112,8 @@ This also goes for a difference of `65`: If you are using a Web Awesome theme that uses this palette, it will already be included. To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN. - -In HTML -In CSS - - -Simply add the following code to the `` of your page: -```html - -``` - - - -Simply add the following code at the top of your CSS file: -```css -@import url('{% cdnUrl 'styles/color/' + page.fileSlug + '.css' %}'); -``` - - +{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %} +{% include 'import-stylesheet-code.md.njk' %} {% endmarkdown %} {% endblock %} diff --git a/docs/_layouts/theme.njk b/docs/_layouts/theme.njk index 3f6157ae6..35fdaa125 100644 --- a/docs/_layouts/theme.njk +++ b/docs/_layouts/theme.njk @@ -24,24 +24,25 @@ You can import this theme from the Web Awesome CDN. - -In HTML -In CSS - +{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %} +{% include 'import-stylesheet-code.md.njk' %} -Simply add the following code to the `` of your page: -```html - -``` - - +### Mixing & Matching -Simply add the following code at the top of your CSS file: -```css -@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}'); -``` - - +If you want to combine the colors from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file: + +{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %} +{% include 'import-stylesheet-code.md.njk' %} + +To use the typography from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file: + +{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %} +{% include 'import-stylesheet-code.md.njk' %} + + + + Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own! + ## Dark mode