docs: utilize global image effects configuration #623

This commit is contained in:
Sören Weber 2023-08-25 19:24:57 +02:00
parent 151c31e142
commit 85d71e997a
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
12 changed files with 27 additions and 24 deletions

View file

@ -233,3 +233,6 @@ title = "Hugo Relearn Documentation"
mermaidZoom = true
[params.siteparam.test]
text = "A **nested** parameter <b>with</b> formatting"
[params.imageEffects]
bg-white = true # extension, not supported by the theme
border = true

View file

@ -7,7 +7,7 @@ A theme for [Hugo](https://gohugo.io/) designed for documentation.
[★ What's new in the latest release ★]({{% relref "basics/migration" %}})
![Image of the Relearn theme in light and dark mode on phone, tablet and desktop](images/hero.png?classes=shadow&width=100%&height=100%)
![Image of the Relearn theme in light and dark mode on phone, tablet and desktop](images/hero.png?width=100%&height=100%)
## Motivation

View file

@ -225,4 +225,4 @@ landingPageName = "<i class='fas fa-home'></i> Home"
The home button is going to look like this:
![Default Home Button](home_button_defaults.png?classes=shadow&width=18.75rem)
![Default Home Button](home_button_defaults.png?width=18.75rem)

View file

@ -59,7 +59,7 @@ Discover what this Hugo theme is all about and the core concepts behind it.
renders as
![A Chapter](chapter.png?classes=shadow&width=60pc)
![A Chapter](chapter.png?width=60pc)
The Relearn theme provides archetypes to create skeletons for your website. Begin by creating your first chapter page with the following command

View file

@ -9,4 +9,4 @@ Thanks to the simplicity of Hugo, this page is as empty as this theme needs requ
Just download at least version {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.95.0{{% /badge %}} of the [Hugo binary](https://gohugo.io/getting-started/installing/) for your OS (Windows, Linux, Mac).
![Magic](magic.gif?classes=shadow)
![Magic](magic.gif)

View file

@ -13,7 +13,7 @@ The Relearn theme defines some few archetypes of pages but you are free to defin
A **Home** page is the starting page of your project. It's best to have only one page of this kind in your project.
![Home page](pages-home.png?classes=shadow&width=60pc)
![Home page](pages-home.png?width=60pc)
To create a home page, run the following command
@ -36,7 +36,7 @@ Lorem Ipsum.
A **Chapter** displays a page meant to be used as introduction for a set of child pages. Commonly, it contains a simple title and a catch line to define content that can be found below it.
![Chapter page](pages-chapter.png?classes=shadow&width=60pc)
![Chapter page](pages-chapter.png?width=60pc)
To create a chapter page, run the following command
@ -62,7 +62,7 @@ Replace the `X` with a number. Because this number will be used to generate the
A **Default** page is any other content page. If you set an unknown archetype in your frontmatter, this archetype will be used to generate the page.
![Default page](pages-default.png?classes=shadow&width=60pc)
![Default page](pages-default.png?width=60pc)
To create a default page, run either one of the following commands

View file

@ -10,7 +10,7 @@ The Relearn theme is fully compatible with Hugo multilingual mode.
- Automatic menu generation from multilingual content
- In-browser language switching
![I18n menu](i18n-menu.gif?classes=shadow&width=18.75rem)
![I18n menu](i18n-menu.gif?width=18.75rem)
## Basic configuration

View file

@ -57,5 +57,5 @@ This ends up in the following HTML where the parameter are converted to CSS clas
As you can see in the above example, the `bg-white` parameter is not initially supported in the themes default settings. Nevertheless you are free to define arbitrary parameter by just adding them to the URL query parameter or set them in your `config.toml` or pages frontmatter.
{{% notice note %}}
If no extended parameter like `bg-white` in the example is set on the URL, a `classes="nobg-white"` in the HTML will only be generated if a default value was set in the `config.toml` or pages frontmatter.
If no extended parameter like `bg-white` in the example is set on the URL, a `class="nobg-white"` in the HTML will only be generated if a default value was set in the `config.toml` or pages frontmatter.
{{% /notice %}}

View file

@ -533,7 +533,7 @@ Images have a similar syntax to links but include a preceding exclamation mark.
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Spock](https://octodex.github.com/images/spocktocat.png?width=20vw&classes=bg-white)
![Spock](https://octodex.github.com/images/spocktocat.png?width=20vw)
{{% /notice %}}
### Image with Tooltip
@ -577,7 +577,7 @@ Add query parameter `width` and/or `height` to the link image to resize the imag
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Minion](https://octodex.github.com/images/minion.png?width=20vw&classes=bg-white)
![Minion](https://octodex.github.com/images/minion.png?width=20vw)
{{% /notice %}}
````markdown
@ -585,7 +585,7 @@ Add query parameter `width` and/or `height` to the link image to resize the imag
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Minion](https://octodex.github.com/images/minion.png?height=50px&classes=bg-white)
![Minion](https://octodex.github.com/images/minion.png?height=50px)
{{% /notice %}}
````markdown
@ -593,7 +593,7 @@ Add query parameter `width` and/or `height` to the link image to resize the imag
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw&classes=bg-white)
![Minion](https://octodex.github.com/images/minion.png?height=50px&width=40vw)
{{% /notice %}}
#### CSS Classes
@ -607,7 +607,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Spidertocat](https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,bg-white)
![Spidertocat](https://octodex.github.com/images/spidertocat.png?width=20vw&classes=shadow,noborder)
{{% /notice %}}
##### Border
@ -617,7 +617,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![DrOctocat](https://octodex.github.com/images/droctocat.png?width=20vw&classes=border)
![DrOctocat](https://octodex.github.com/images/droctocat.png?width=20vw&classes=border,noshadow)
{{% /notice %}}
##### Left
@ -650,7 +650,7 @@ Add a query parameter `classes` to the link image to add CSS classes. Add some o
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Spidertocat](https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline,bg-white)
![Spidertocat](https://octodex.github.com/images/spidertocat.png?width=10vw&classes=inline)
![DrOctocat](https://octodex.github.com/images/droctocat.png?width=10vw&classes=inline)
![Supertocat](https://octodex.github.com/images/okal-eltocat.jpg?width=10vw&classes=inline)
![Riddlocat](https://octodex.github.com/images/riddlocat.jpg?width=10vw&classes=inline)
@ -675,5 +675,5 @@ Add the query parameter `lightbox=false` to the image link to disable the lightb
````
{{% notice style="secondary" icon="eye" title="Result" %}}
![Homercat](https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false&classes=bg-white)
![Homercat](https://octodex.github.com/images/homercat.png?width=20vw&lightbox=false)
{{% /notice %}}

View file

@ -101,7 +101,7 @@ menuPre = "<i class='fab fa-github'></i> "
+++
```
![Title with icon](frontmatter-icon.png?classes=shadow&width=18.75rem)
![Title with icon](frontmatter-icon.png?width=18.75rem)
### Ordering sibling menu/page entries

View file

@ -43,7 +43,7 @@ The location is mandatory due to Hugo's theme site builder.
### Preview `images/screenshot.png`
![Screenshot](/images/screenshot.png?classes=shadow&width=100%25&height=100%25)
![Screenshot](/images/screenshot.png?width=100%25&height=100%25)
## Hero Image
@ -80,8 +80,8 @@ The location of `images/tn.png` is mandatory due to Hugo's theme site builder.
### Preview `images/hero.png`
![Hero](/images/hero.png?classes=shadow&width=100%25&height=100%25)
![Hero](/images/hero.png?width=100%25&height=100%25)
### Preview `images/tn.png`
![tn](/images/tn.png?classes=shadow&width=100%25&height=100%25)
![tn](/images/tn.png?width=100%25&height=100%25)

View file

@ -8,12 +8,12 @@ title = "Showcase"
## [GoboLinux Wiki](https://wiki.gobolinux.org/) by NEONsys.org
![GoboLinux image](gobolinux.png?width=60pc&classes=shadow)
![GoboLinux image](gobolinux.png?width=60pc)
## [BITS](https://bits-training.de/training/) by Dr. Lutz Gollan
![BITS image](bits-train.png?width=60pc&classes=shadow)
![BITS image](bits-train.png?width=60pc)
## [Pamasol Electrics](https://pamasol.github.io/de/) by Pamasol
![Pamasol Electrics](pamasol-electrics-portal.png?width=60pc&classes=shadow)
![Pamasol Electrics](pamasol-electrics-portal.png?width=60pc)