theme: make HTML5 compliant #329

This commit is contained in:
Sören Weber 2022-10-03 00:24:37 +02:00
parent 583dd0c97a
commit 5e1f07c03c
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
9 changed files with 18 additions and 18 deletions

View file

@ -46,7 +46,7 @@ If no favicon file is found, the theme will lookup the alternative filename `log
If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this: If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this:
```html ```html
<link rel="icon" href="/images/favicon.bmp" type="image/bmp" /> <link rel="icon" href="/images/favicon.bmp" type="image/bmp">
``` ```
## Change the colors {#theme-variant} ## Change the colors {#theme-variant}

View file

@ -59,11 +59,11 @@ Be aware that if you use a multilingual website, you will need to have as many f
| Name | Default | Notes | | Name | Default | Notes |
|:------------|:--------------|:------------| |:------------|:--------------|:------------|
| **style** | `transparent` | The color scheme used to highlight the box content.<br/><br/>- by severity: `info`, `note`, `tip`, `warning`<nd color: `primary`, `secondary`<br/>- by color: `blue`, `green`, `grey`, `orange`, `red`<br/>- by special color: `default`,t` | | **style** | `transparent` | The color scheme used to highlight the box content.<br><br>- by severity: `info`, `note`, `tip`, `warning`<nd color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`,t` |
| **title** | see notes | Arbitray text for the box title. Depending on the **style** there may be a default title. Any given value will overwault.<br/><br/>- for severity styles: the matching title for the severity<br/>- for all other colors: `Attachments`<br/><br/>If you wa you have to set this parameter to `" "` (a non empty string filled with spaces) | | **title** | see notes | Arbitray text for the box title. Depending on the **style** there may be a default title. Any given value will overwault.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: `Attachments`<br><br>If you wa you have to set this parameter to `" "` (a non empty string filled with spaces) |
| **icon** | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending le** there may be a default icon. Any given value will overwrite the default.<br/><br/>- for severity styles: a nice matching iseverity<br/>- for all other colors: `paperclip`<br/><br/>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) | | **icon** | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending le** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching iseverity<br>- for all other colors: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |
| **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. | | **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. |
| **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the attachments by file name. For example:<br/><br/>- to match a file suffix of 'jpg', use `.*jpg` (not `*.jpg`)<br/>- to match file names ending in `jpg` or `png`, use `.*(jpg\|png)` | | **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the attachments by file name. For example:<br><br>- to match a file suffix of 'jpg', use `.*jpg` (not `*.jpg`)<br>- to match file names ending in `jpg` or `png`, use `.*(jpg\|png)` |
## Examples ## Examples

View file

@ -48,10 +48,10 @@ Once the button is clicked, it opens another browser tab for the given URL.
| Name | Default | Notes | | Name | Default | Notes |
|:----------------------|:----------------|:------------| |:----------------------|:----------------|:------------|
| **href** | _&lt;empty&gt;_ | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. | | **href** | _&lt;empty&gt;_ | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. |
| **style** | `transparent` | The color scheme used to paint the button.<br/><br/>- by severity: `info`, `note`, `tip`, `warning`<br/>- by brand color: `primary`, `secondary`<br/>- by color: `blue`, `green`, `grey`, `orange`, `red`<br/>- by special color: `default`, `transparent` | | **style** | `transparent` | The color scheme used to paint the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **icon** | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br/><br/>- for severity styles: a nice matching icon for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| **iconposition** | `left` | Places the icon to the `left` or `right` of the title. | | **iconposition** | `left` | Places the icon to the `left` or `right` of the title. |
| _**&lt;content&gt;**_ | see notes | Arbitray text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br/><br/>- for severity styles: the matching title for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | _**&lt;content&gt;**_ | see notes | Arbitray text for the button title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
## Examples ## Examples

View file

@ -41,7 +41,7 @@ While the examples are using shortcodes with named parameter you are free to als
| **showhidden** | `false` | When `true`, child pages hidden from the menu will be displayed aswell. | | **showhidden** | `false` | When `true`, child pages hidden from the menu will be displayed aswell. |
| **description** | `false` | When `true` shows a short text under each page in the list. When no description or summary exists for the page, the first 70 words of the content is taken - [read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/). | | **description** | `false` | When `true` shows a short text under each page in the list. When no description or summary exists for the page, the first 70 words of the content is taken - [read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/). |
| **depth** | `1` | The depth of descendants to display. For example, if the value is `2`, the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. `999`. | | **depth** | `1` | The depth of descendants to display. For example, if the value is `2`, the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. `999`. |
| **sort** | see notes | The sort order of the displayed list.<br/><br/>If not set it is sorted by the [`ordersectionsby`]({{% relref "basics/configuration#global-site-parameters" %}}) setting of the site and the pages frontmatter<br/><br/>- `weight`: to sort on menu order<br/>- `title`: to sort alphabetically on menu label. | | **sort** | see notes | The sort order of the displayed list.<br><br>If not set it is sorted by the [`ordersectionsby`]({{% relref "basics/configuration#global-site-parameters" %}}) setting of the site and the pages frontmatter<br><br>- `weight`: to sort on menu order<br>- `title`: to sort alphabetically on menu label. |
## Examples ## Examples

View file

@ -147,7 +147,7 @@ sequenceDiagram
loop Healthcheck loop Healthcheck
John->John: Fight against hypochondria John->John: Fight against hypochondria
end end
Note right of John: Rational thoughts <br/>prevail... Note right of John: Rational thoughts <br>prevail...
John-->Alice: Great! John-->Alice: Great!
John->Bob: How about you? John->Bob: How about you?
Bob-->John: Jolly good! Bob-->John: Jolly good!
@ -162,7 +162,7 @@ sequenceDiagram
loop Healthcheck loop Healthcheck
John->John: Fight against hypochondria John->John: Fight against hypochondria
end end
Note right of John: Rational thoughts <br/>prevail... Note right of John: Rational thoughts <br>prevail...
John-->Alice: Great! John-->Alice: Great!
John->Bob: How about you? John->Bob: How about you?
Bob-->John: Jolly good! Bob-->John: Jolly good!

View file

@ -51,9 +51,9 @@ It is all about the boxes.
| Name | Position | Default | Notes | | Name | Position | Default | Notes |
|:----------|:---------|:----------|:------------| |:----------|:---------|:----------|:------------|
| **style** | 1 | `default` | The color scheme used to highlight the box content.<br/><br/>- by severity: `info`, `note`, `tip`, `warning`<br/>- by brand color: `primary`, `secondary`<br/>- by color: `blue`, `green`, `grey`, `orange`, `red`<br/>- by special color: `default`, `transparent` | | **style** | 1 | `default` | The color scheme used to highlight the box content.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **title** | 2 | see notes | Arbitray text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br/><br/>- for severity styles: the matching title for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **title** | 2 | see notes | Arbitray text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| **icon** | 3 | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br/><br/>- for severity styles: a nice matching icon for the severity<br/>- for all other colors: _&lt;empty&gt;_<br/><br/>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | 3 | see notes | [Font Awesome icon name]({{%relref "cont/icons#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other colors: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| _**&lt;content&gt;**_ | | _&lt;empty&gt;_ | Arbitray text to be displayed in box. | | _**&lt;content&gt;**_ | | _&lt;empty&gt;_ | Arbitray text to be displayed in box. |
## Examples ## Examples

View file

@ -70,7 +70,7 @@ echo "Hello World!"
| Name | Default | Notes | | Name | Default | Notes |
|:----------------------|:-----------------|:------------| |:----------------------|:-----------------|:------------|
| **groupid** | `default` | Arbitrary name of the group the tab view belongs to.<br/><br/>Tab views with the same **groupid** sychronize their selected tab. This sychronization applies to the whole site! | | **groupid** | `default` | Arbitrary name of the group the tab view belongs to.<br><br>Tab views with the same **groupid** sychronize their selected tab. This sychronization applies to the whole site! |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. | | _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
{{% notice note %}} {{% notice note %}}

View file

@ -134,7 +134,7 @@
{{- $remaining = sub $remaining 1 }} {{- $remaining = sub $remaining 1 }}
{{- if $ispublished }} {{- if $ispublished }}
{{- $depth = add $depth 1 }} {{- $depth = add $depth 1 }}
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">{{ if $remaining }}<a itemprop="item" href="{{ $page.RelPermalink }}">{{end}}<span itemprop="name">{{ if $page.Title }}{{ $page.Title }}{{ else }}{{ $page.Site.Title }}{{ end }}</span>{{ if $remaining }}</a>{{ end }}<meta itemprop="position" content="{{ $depth }}"></li>{{ if $remaining }} > {{ end }} <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">{{ if $remaining }}<a itemprop="item" href="{{ $page.RelPermalink }}">{{end}}<span itemprop="name">{{ if $page.Title }}{{ $page.Title }}{{ else }}{{ $page.Site.Title }}{{ end }}</span>{{ if $remaining }}</a>{{ end }}<meta itemprop="position" content="{{ $depth }}">{{ if $remaining }} > {{ end }}</li>
{{- end }} {{- end }}
{{- end }} {{- end }}
{{- end }} {{- end }}

View file

@ -52,7 +52,7 @@
{{- $footer := partial "menu-footer.html" . }} {{- $footer := partial "menu-footer.html" . }}
{{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }} {{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
<div class="footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div> <div class="footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
<hr class="default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"/> <hr class="default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
<div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}"> <div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
<ul> <ul>
<li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}"> <li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
@ -144,7 +144,7 @@
{{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }} {{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
{{- $pageHash := md5 .Page }} {{- $pageHash := md5 .Page }}
{{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }} {{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
<li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item{{if $isActive }} active{{end}}{{if (or $isSelf $isAncestor) }} parent{{end}}{{if $currentAlwaysopen}} alwaysopen{{end}}"><input type="checkbox" id="section-{{ $pageHash }}" class="toggle"{{ if $isOpen }} checked{{ end }}/><label for="section-{{ $pageHash }}" ></label><a href="{{.RelPermalink}}"> <li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item{{if $isActive }} active{{end}}{{if (or $isSelf $isAncestor) }} parent{{end}}{{if $currentAlwaysopen}} alwaysopen{{end}}"><input type="checkbox" id="section-{{ $pageHash }}" class="toggle"{{ if $isOpen }} checked{{ end }}><label for="section-{{ $pageHash }}" ></label><a href="{{.RelPermalink}}">
{{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }} {{- partial "menu-pre.html" . }}{{ or .Params.menuTitle .LinkTitle .Title }}{{ partial "menu-post.html" . }}
{{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul> {{- if $showvisitedlinks }}<i class="fas fa-check read-icon"></i>{{ end }}</a><ul>
{{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }} {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default true }}