Add shortcode prefix to shortcode classes
This commit is contained in:
24
README.md
24
README.md
@@ -1187,23 +1187,23 @@ Page status classes:
|
||||
Shortcode classes:
|
||||
|
||||
<dl>
|
||||
<dt><code>.paige-code</code></dt>
|
||||
<dt><code>.paige-shortcode-code</code></dt>
|
||||
<dd>The container element of <code>paige/code</code> shortcodes.</dd>
|
||||
<dt><code>.paige-email</code></dt>
|
||||
<dt><code>.paige-shortcode-email</code></dt>
|
||||
<dd>The container element of <code>paige/email</code> shortcodes.</dd>
|
||||
<dt><code>.paige-figure</code></dt>
|
||||
<dt><code>.paige-shortcode-figure</code></dt>
|
||||
<dd>The container element of <code>paige/figure</code> shortcodes.</dd>
|
||||
<dt><code>.paige-gallery</code></dt>
|
||||
<dt><code>.paige-shortcode-gallery</code></dt>
|
||||
<dd>The container element of <code>paige/gallery</code> shortcodes.</dd>
|
||||
<dt><code>.paige-icon</code></dt>
|
||||
<dt><code>.paige-shortcode-icon</code></dt>
|
||||
<dd>The container element of <code>paige/icon</code> shortcodes.</dd>
|
||||
<dt><code>.paige-image</code></dt>
|
||||
<dt><code>.paige-shortcode-image</code></dt>
|
||||
<dd>The container element of <code>paige/image</code> shortcodes.</dd>
|
||||
<dt><code>.paige-quote</code></dt>
|
||||
<dt><code>.paige-shortcode-quote</code></dt>
|
||||
<dd>The container element of <code>paige/quote</code> shortcodes.</dd>
|
||||
<dt><code>.paige-vimeo</code></dt>
|
||||
<dt><code>.paige-shortcode-vimeo</code></dt>
|
||||
<dd>The container element of <code>paige/vimeo</code> shortcodes.</dd>
|
||||
<dt><code>.paige-youtube</code></dt>
|
||||
<dt><code>.paige-shortcode-youtube</code></dt>
|
||||
<dd>The container element of <code>paige/youtube</code> shortcodes.</dd>
|
||||
</dl>
|
||||
|
||||
@@ -1262,9 +1262,9 @@ try the following in `yoursite/hugo.toml`:
|
||||
style = """
|
||||
#paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
|
||||
#paige-page-content > img,
|
||||
#paige-page-content > .paige-image,
|
||||
#paige-page-content > .paige-vimeo,
|
||||
#paige-page-content > .paige-youtube { max-width: 100%; }
|
||||
#paige-page-content > .paige-shortcode-image,
|
||||
#paige-page-content > .paige-shortcode-vimeo,
|
||||
#paige-page-content > .paige-shortcode-youtube { max-width: 100%; }
|
||||
"""
|
||||
```
|
||||
|
||||
|
@@ -3,16 +3,16 @@
|
||||
<style>
|
||||
{{ partial "paige/func-include.html" (dict "name" "style-first%s.html" "page" $page) }}
|
||||
|
||||
.paige-figure-numbered {
|
||||
counter-increment: paige-figure-numbered;
|
||||
.paige-shortcode-figure-numbered {
|
||||
counter-increment: paige-shortcode-figure-numbered;
|
||||
}
|
||||
|
||||
.paige-figure-numbered > div > figure > figcaption::before {
|
||||
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered) ": ";
|
||||
.paige-shortcode-figure-numbered > div > figure > figcaption::before {
|
||||
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered) ": ";
|
||||
}
|
||||
|
||||
.paige-figure-numbered > div > figure > figcaption:empty::before {
|
||||
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered);
|
||||
.paige-shortcode-figure-numbered > div > figure > figcaption:empty::before {
|
||||
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered);
|
||||
}
|
||||
|
||||
.paige-header-link {
|
||||
@@ -26,11 +26,11 @@
|
||||
content: "#";
|
||||
}
|
||||
|
||||
.paige-quote .blockquote-footer {
|
||||
.paige-shortcode-quote .blockquote-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.paige-quote blockquote {
|
||||
.paige-shortcode-quote blockquote {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
margin-bottom: 0;
|
||||
@@ -54,22 +54,22 @@ th {
|
||||
}
|
||||
|
||||
.paige-row-short:not(:last-child),
|
||||
.paige-figure .paige-quote,
|
||||
.paige-figure .paige-video,
|
||||
.paige-figure .highlight pre.chroma,
|
||||
.paige-figure .highlight .chroma pre,
|
||||
.paige-figure .paige-quote blockquote,
|
||||
.paige-figure figure > div > :last-child,
|
||||
.paige-gallery .paige-figure,
|
||||
.paige-gallery .paige-image,
|
||||
.paige-shortcode-figure .paige-shortcode-quote,
|
||||
.paige-shortcode-figure .paige-video,
|
||||
.paige-shortcode-figure .highlight pre.chroma,
|
||||
.paige-shortcode-figure .highlight .chroma pre,
|
||||
.paige-shortcode-figure .paige-shortcode-quote blockquote,
|
||||
.paige-shortcode-figure figure > div > :last-child,
|
||||
.paige-shortcode-gallery .paige-shortcode-figure,
|
||||
.paige-shortcode-gallery .paige-shortcode-image,
|
||||
blockquote > p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.paige-figure,
|
||||
.paige-gallery,
|
||||
.paige-image,
|
||||
.paige-quote,
|
||||
.paige-shortcode-figure,
|
||||
.paige-shortcode-gallery,
|
||||
.paige-shortcode-image,
|
||||
.paige-shortcode-quote,
|
||||
.paige-row-short:last-child,
|
||||
.paige-row-tall,
|
||||
.paige-video,
|
||||
|
@@ -11,4 +11,4 @@
|
||||
{{ $content = htmlUnescape $content }}
|
||||
{{ end }}
|
||||
|
||||
<div class="paige-code">{{ highlight $content $lang $options }}</div>
|
||||
<div class="paige-shortcode-code">{{ highlight $content $lang $options }}</div>
|
||||
|
@@ -9,4 +9,4 @@
|
||||
{{ errorf "layouts/shortcodes/paige/email.html: no content" }}
|
||||
{{ end }}
|
||||
|
||||
<span class="paige-email"><a href="" data-a="{{ base64Encode (index (split $address `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split $address `@`) 1) }}" onclick="this.href = 'mailto:' + atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">{{ $content }}</a></span>
|
||||
<span class="paige-shortcode-email"><a href="" data-a="{{ base64Encode (index (split $address `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split $address `@`) 1) }}" onclick="this.href = 'mailto:' + atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">{{ $content }}</a></span>
|
||||
|
@@ -56,7 +56,7 @@
|
||||
|
||||
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
|
||||
|
||||
<div class="paige-figure {{ if $numbered }} paige-figure-numbered {{ end }}">
|
||||
<div class="paige-shortcode-figure {{ if $numbered }} paige-shortcode-figure-numbered {{ end }}">
|
||||
<div class="align-items-{{ $vertical }} d-flex {{ with $float }} float-{{ . }} {{ end }} h-100 justify-content-{{ $horizontal }} {{ with $sideMargin }} {{ . }} {{ end }}">
|
||||
<figure class="{{ if $table }} d-table {{ end }} mb-0" {{ with $widths }} style="{{ . | safeCSS }}" {{ end }}>
|
||||
<div class="d-flex justify-content-{{ $horizontal }} text-{{ $horizontal }}">{{ $content }}</div>
|
||||
|
@@ -41,7 +41,7 @@
|
||||
|
||||
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
|
||||
|
||||
<div class="paige-gallery">
|
||||
<div class="paige-shortcode-gallery">
|
||||
{{ if eq $type "grid" }}
|
||||
<div class="container-fluid overflow-hidden px-0">
|
||||
<div class="align-items-{{ $align }} gx-3 gy-3 justify-content-{{ $justify }} row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6">
|
||||
|
@@ -10,7 +10,7 @@
|
||||
|
||||
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
|
||||
|
||||
<span class="paige-icon">
|
||||
<span class="paige-shortcode-icon">
|
||||
{{- with $url -}}
|
||||
<a href="{{ . }}" {{ with $target }} target="{{ . }}" {{ end }}>
|
||||
{{- end -}}
|
||||
|
@@ -17,7 +17,7 @@
|
||||
{{ $title := .Get "title" }}
|
||||
{{ $width := .Get "width" }}
|
||||
|
||||
<div class="paige-image">
|
||||
<div class="paige-shortcode-image">
|
||||
{{ partial "paige/image.html" (dict
|
||||
"alt" $alt
|
||||
"breakpoints" $breakpoints
|
||||
|
@@ -7,7 +7,7 @@
|
||||
|
||||
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
|
||||
|
||||
<div class="paige-quote">
|
||||
<div class="paige-shortcode-quote">
|
||||
<blockquote class="blockquote">{{ $content }}</blockquote>
|
||||
|
||||
{{ with $cite }}
|
||||
|
@@ -116,7 +116,7 @@
|
||||
{{ $src = print $src "?" . }}
|
||||
{{ end }}
|
||||
|
||||
<div class="paige-vimeo">
|
||||
<div class="paige-shortcode-vimeo">
|
||||
{{ partial "paige/video.html" (dict
|
||||
"fullscreen" $fullscreen
|
||||
"height" $height
|
||||
|
@@ -70,7 +70,7 @@
|
||||
{{ $src = print $src "?" . }}
|
||||
{{ end }}
|
||||
|
||||
<div class="paige-youtube">
|
||||
<div class="paige-shortcode-youtube">
|
||||
{{ partial "paige/video.html" (dict
|
||||
"fullscreen" $fullscreen
|
||||
"height" $height
|
||||
|
Reference in New Issue
Block a user