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

shortcodes: add style option to mimic code box color scheme #551

Browse source
This commit is contained in:
Sören Weber 2023-06-06 17:44:06 +02:00
parent d39c0fb402
commit 67fe76a99c
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
10 changed files with 41 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,9 +20,11 @@ This document shows you what's new in the latest release. For a detailed list of
## 5.16.0 (2023-06-05)
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received style, color and icon parameter similar to other shortcodes.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received some love and style, color and icon parameter similar to other shortcodes.
Additionally the `name` parameter was renamed to `title`. You don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
If you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.
Additionally the `name` parameter was renamed to `title` but you don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now supports [separate favicons]({{%relref "basics/customization/#change-the-favicon" %}}) for light & dark mode optionally.

2
exampleSite/content/shortcodes/attachments/index.en.md
View file

@ -39,7 +39,7 @@ While the examples are using shortcodes with named parameter you are free to als
| Name | Default | Notes |
|:------------|:----------------|:------------|
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **title** | see notes | Arbitrary 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 styles: `Attachments`<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** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#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 styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |

2
exampleSite/content/shortcodes/badge.en.md
View file

@ -66,7 +66,7 @@ While the examples are using shortcodes with named parameter you are free to als
| Name | Default | Notes |
|:----------------------|:----------------|:------------|
| **style** | `default` | The style scheme used for the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **style** | `default` | The style scheme used for the badge.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **title** | see notes | Arbitrary text for the badge 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 styles: _&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** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#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 styles: _&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) |

2
exampleSite/content/shortcodes/button.en.md
View file

@ -48,7 +48,7 @@ Once the button is clicked, it opens another browser tab for the given URL.
| Name | Default | Notes |
|:----------------------|:----------------|:------------|
| **href** | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL|
| **style** | `transparent` | The style scheme used for the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **style** | `transparent` | The style scheme used for the button.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#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 styles: _&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. |

2
exampleSite/content/shortcodes/notice.en.md
View file

@ -51,7 +51,7 @@ It is all about the boxes.
| Name | Position | Default | Notes |
|:----------|:---------|:----------|:------------|
| **style** | 1 | `default` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **style** | 1 | `default` | The style scheme used for the box.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
| **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **title** | 2 | see notes | Arbitrary 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 styles: _&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 "shortcodes/icon#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 styles: _&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) |

2
exampleSite/content/shortcodes/tab.en.md
View file

@ -50,7 +50,7 @@ printf("Hello World!");
| Name | Default | Notes |
|:----------------------|:----------------|:------------|
| **style** | `default` | The style scheme used for the tab.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent` |
| **style** | see notes | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.<br><br>- by severity: `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `green`, `grey`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **title** | see notes | Arbitrary title for the tab. 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 styles: _&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** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#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 styles: _&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) |

4
layouts/partials/shortcodes/tabs.html
View file

@ -12,7 +12,7 @@
{{- end }}
{{- with $tab }}
{{- $color := .color | default $color }}
{{- $style := .style | default $style | default (cond (ne .color "") "filled" "default") }}
{{- $style := .style | default $style | default (cond (ne .color "") "filled" "initial") }}
{{- $title := .title | default ($style | T) }}
{{- $title = trim $title " " }}
{{- $icon := .icon | default "" }}
@ -37,7 +37,7 @@
{{- end }}
{{- end }}
{{- $color = .color | default "" }}
{{- $style = .style | default (cond (ne .color "") "filled" "default") }}
{{- $style = .style | default (cond (ne .color "") "filled" "initial") }}
{{- $title = .title | default ($style | T) }}
{{- $title = trim $title " " }}
{{- $icon = .icon | default "" }}

3
static/css/theme.css
View file

@ -1897,7 +1897,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
padding: 1rem;
}
/* remove margin if only a single code block is contained in the tab */
#body .tab-content-text:has(> div.highlight:only-child){
#body .tab-content-text:has(> div.highlight:only-child),
#body .tab-content.tab-panel-style.code > .tab-content-text{
padding: 0;
}
/* remove border from a code block if single */

10
static/css/variant.css
View file

@ -205,6 +205,13 @@ div.box > .box-content {
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
}
.cstyle.code {
--VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
--VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
}
.cstyle.transparent {
--VARIABLE-BOX-color: transparent;
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
@ -398,6 +405,7 @@ article ul > li > input[type="checkbox"] {
color: var(--VARIABLE-BOX-TEXT-color);
}
.tab-panel-style.cstyle.initial,
.tab-panel-style.cstyle.default {
--VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
--VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
@ -408,6 +416,7 @@ article ul > li > input[type="checkbox"] {
--VARIABLE-BOX-BG-color: transparent;
}
#body .tab-panel-style.cstyle.initial.tab-nav-button.active,
#body .tab-panel-style.cstyle.default.tab-nav-button.active,
#body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
background-color: var(--VARIABLE-BOX-BG-color);
@ -416,6 +425,7 @@ article ul > li > input[type="checkbox"] {
border-top-color: var(--VARIABLE-BOX-color);
}
#body .tab-panel-style.cstyle.initial.tab-content,
#body .tab-panel-style.cstyle.default.tab-content,
#body .tab-panel-style.cstyle.transparent.tab-content{
background-color: var(--VARIABLE-BOX-BG-color);

18
static/js/theme.js
View file

@ -65,6 +65,23 @@ function adjustContentWidth(){
elc.style[ dir_padding_end ] = '' + end + 'px';
}
function fixCodeTabs(){
/* if only a single code block is contained in the tab and no style was selected, treat it like style=code */
var codeTabPanels = Array.from( document.querySelectorAll( '.tab-content.tab-panel-style.initial' ) ).filter( function( tabPanel ){
return tabPanel.querySelector( '.tab-content-text > div.highlight:only-child');
});
codeTabPanels.forEach( function( tabPanel ){
tabPanel.classList.remove( 'initial' );
tabPanel.classList.add( 'code' );
tabId = tabPanel.dataset.tabItem;
var p = tabPanel.parentNode.parentNode;
var tabButton = p.querySelector( '.tab-nav-button.tab-panel-style[data-tab-item="'+tabId+'"]' );
tabButton.classList.remove( 'initial' );
tabButton.classList.add( 'code' );
});
}
function switchTab(tabGroup, tabId) {
var tabs = Array.from( document.querySelectorAll( '.tab-panel[data-tab-group="'+tabGroup+'"]' ) ).filter( function( e ){
return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
@ -1251,6 +1268,7 @@ ready( function(){
initToc();
initAnchorClipboard();
initCodeClipboard();
fixCodeTabs();
restoreTabSelections();
initSwipeHandler();
initHistory();