Skip to content

Commit

Permalink
docs: variant migration #831
Browse files Browse the repository at this point in the history
  • Loading branch information
McShelby committed Apr 18, 2024
1 parent 26724fb commit 2ab97e9
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 11 deletions.
18 changes: 9 additions & 9 deletions exampleSite/content/basics/branding/_index.en.md
Expand Up @@ -24,9 +24,9 @@ Set the `themeVariant` value to the name of your theme file. That's it! Your sit
{{< /multiconfig >}}

{{% notice note %}}
Your theme variant file must reside in your site's `static/css` directory or in the theme's `static/css` directory and the file name must start with `theme-` and end wit `.css`. In the above example, the path of your theme file must be `static/css/theme-relearn-light.css`.
Your theme variant file must reside in your site's `assets/css` directory and the file name must start with `theme-` and end in `.css`. In the above example, the path of your theme file must be `assets/css/theme-relearn-light.css`.

If you want to make changes to a shipped color variant, create a copy in your site's `static/css` directory. Don't edit the file in the theme's directory!
If you want to make changes to a shipped color variant, create a copy in your site's `assets/css` directory. Don't edit the file in the theme's directory!
{{% /notice %}}

### Multiple Variants
Expand Down Expand Up @@ -92,9 +92,9 @@ The size of the logo will adapt automatically.

If you want to switch the syntax highlighting theme together with your color variant, you need to configure your installation [according to Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/) and provide a syntax highlighting stylesheet file.

You can use a one of the shipped stylesheet files or use Hugo to generate a file for you. The file must be written to `static/css/chroma-<NAME>.css`. To use it with your color variant you have to define `--CODE-theme: <NAME>` in the color variant stylesheet file.
You can use a one of the shipped stylesheet files or use Hugo to generate a file for you. The file must be written to `assets/css/chroma-<NAME>.css`. To use it with your color variant you have to define `--CODE-theme: <NAME>` in the color variant stylesheet file.

For an example, take a look into [`theme-relearn-light.css`](https://github.com/McShelby/hugo-theme-relearn/blob/main/static/css/theme-relearn-light.css) and [`hugo.toml`](https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/hugo.toml) of the exampleSite.
For an example, take a look into [`theme-relearn-light.css`](https://github.com/McShelby/hugo-theme-relearn/blob/main/assets/css/theme-relearn-light.css) and [`hugo.toml`](https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/hugo.toml) of the exampleSite.

## Change the Variant (Advanced) {#theme-variant-advanced}

Expand Down Expand Up @@ -125,7 +125,7 @@ The `identifier` option is mandatory and equivalent to the string in the first e

| Name | Default | Notes |
|-----------------------|-----------------|-------------|
| identifier | _&lt;empty&gt;_ | Must correspond to the name of a color variant either in your site's or the theme's directory in the form `static/css/theme-<IDENTIFIER>.css`. |
| identifier | _&lt;empty&gt;_ | Must correspond to the name of a color variant either in your site's or the theme's directory in the form `assets/css/theme-<IDENTIFIER>.css`. |
| name | see notes | The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form. |
| auto | _&lt;empty&gt;_ | If set, the variant is treated as an [auto mode variant](#adjust-to-os-settings). It has the same behavior as the `themeVariantAuto` option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options. |

Expand Down Expand Up @@ -159,15 +159,15 @@ In case you like a shipped variant but only want to tweak some aspects, you have

1. Copy and change

You can copy the shipped variant file from the theme's `static/css` directory to the site's `static/css` directory and either store it with the same name or give it a new name. Edit the settings and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.
You can copy the shipped variant file from the theme's `assets/css` directory to the site's `assets/css` directory and either store it with the same name or give it a new name. Edit the settings and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.

2. Create and import

You can create a new variant file in the site's `static/css` directory and give it a new name. Import the shipped variant, add the settings you want to change and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.
You can create a new variant file in the site's `assets/css` directory and give it a new name. Import the shipped variant, add the settings you want to change and save the new file. Afterwards you can use it in your `hugo.toml` by the chosen name.

For example, you want to use the `relearn-light` variant but want to change the syntax highlighting schema to the one used in the `neon` variant. For that, create a new `static/css/theme-my-branding.css` in your site's directory and add the following lines:
For example, you want to use the `relearn-light` variant but want to change the syntax highlighting schema to the one used in the `neon` variant. For that, create a new `assets/css/theme-my-branding.css` in your site's directory and add the following lines:

````css {title="static/css/theme-my-branding.css"}
````css {title="assets/css/theme-my-branding.css"}
@import "theme-relearn-light.css";

:root {
Expand Down
4 changes: 3 additions & 1 deletion exampleSite/content/basics/generator/_index.en.md
Expand Up @@ -18,9 +18,11 @@ To better understand this select the `neon` variant and modify the different hea

Once you've changed a color, the variant selector will show a "My custom variant" entry and your changes are stored in the browser. You can **browse to other pages** and even close the browser **without losing your changes**.

Once you are satisfied, you can download the new variants file and copy it into your site's `static/css` directory. Afterwards you have to adjust the `themeVariant` parameter in your `hugo.toml` to your chosen file name.
Once you are satisfied, you can download the new variants file and copy it into your site's `assets/css` directory. Afterwards you have to adjust the `themeVariant` parameter in your `hugo.toml` to your chosen file name.

Eg. if your new variants file is named `theme-my-custom-variant.css`, you have to set `themeVariant='my-custom-variant'` to use it.

See the docs for [further configuration options](basics/branding)
{{% /expand %}}

{{% button style="secondary" icon="download" href="javascript:window.variants&&variants.getStylesheet();this.blur();" %}}Download variant{{% /button %}}
Expand Down
16 changes: 15 additions & 1 deletion exampleSite/content/basics/migration/_index.en.md
Expand Up @@ -18,7 +18,21 @@ This document shows you what's new in the latest release and flags it with one o

---

## 5.28.0.beta (XXXX-XX-XX) {#5280}
## 6.0.0.beta (XXXX-XX-XX) {#600}

- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} This release requires you to move your self-defined variant (`theme-*.css`) and chroma stylesheets (`chroma-*.css`) from `static/css` to `assets/css`.

This was necessary to avoid permission errors on build if running in certain Unix configurations.

In addition it is not allowed anymore to `@import` your chroma stylesheet from inside of your variant stylesheet.

Say, your chroma stylesheet is named `chroma-monokai.css`, you have to add the following inside your variant stylesheet:

````css
--CODE-theme: monokai;
````

- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} Support for Internet Explorer 11 was finally dropped.

- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Translation into Romanian.

Expand Down

0 comments on commit 2ab97e9

Please sign in to comment.