Add shortcode prefix to shortcode classes

master
Will Faught 5 months ago
parent 0a70fd4eb4
commit 171b1dcf5d

@ -1187,23 +1187,23 @@ Page status classes:
Shortcode classes: Shortcode classes:
<dl> <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> <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> <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> <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> <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> <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> <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> <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> <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> <dd>The container element of <code>paige/youtube</code> shortcodes.</dd>
</dl> </dl>
@ -1262,9 +1262,9 @@ try the following in `yoursite/hugo.toml`:
style = """ style = """
#paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; } #paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
#paige-page-content > img, #paige-page-content > img,
#paige-page-content > .paige-image, #paige-page-content > .paige-shortcode-image,
#paige-page-content > .paige-vimeo, #paige-page-content > .paige-shortcode-vimeo,
#paige-page-content > .paige-youtube { max-width: 100%; } #paige-page-content > .paige-shortcode-youtube { max-width: 100%; }
""" """
``` ```

@ -3,16 +3,16 @@
<style> <style>
{{ partial "paige/func-include.html" (dict "name" "style-first%s.html" "page" $page) }} {{ partial "paige/func-include.html" (dict "name" "style-first%s.html" "page" $page) }}
.paige-figure-numbered { .paige-shortcode-figure-numbered {
counter-increment: paige-figure-numbered; counter-increment: paige-shortcode-figure-numbered;
} }
.paige-figure-numbered > div > figure > figcaption::before { .paige-shortcode-figure-numbered > div > figure > figcaption::before {
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered) ": "; content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered) ": ";
} }
.paige-figure-numbered > div > figure > figcaption:empty::before { .paige-shortcode-figure-numbered > div > figure > figcaption:empty::before {
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered); content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered);
} }
.paige-header-link { .paige-header-link {
@ -26,11 +26,11 @@
content: "#"; content: "#";
} }
.paige-quote .blockquote-footer { .paige-shortcode-quote .blockquote-footer {
margin-top: 0; margin-top: 0;
} }
.paige-quote blockquote { .paige-shortcode-quote blockquote {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
margin-bottom: 0; margin-bottom: 0;
@ -54,22 +54,22 @@ th {
} }
.paige-row-short:not(:last-child), .paige-row-short:not(:last-child),
.paige-figure .paige-quote, .paige-shortcode-figure .paige-shortcode-quote,
.paige-figure .paige-video, .paige-shortcode-figure .paige-video,
.paige-figure .highlight pre.chroma, .paige-shortcode-figure .highlight pre.chroma,
.paige-figure .highlight .chroma pre, .paige-shortcode-figure .highlight .chroma pre,
.paige-figure .paige-quote blockquote, .paige-shortcode-figure .paige-shortcode-quote blockquote,
.paige-figure figure > div > :last-child, .paige-shortcode-figure figure > div > :last-child,
.paige-gallery .paige-figure, .paige-shortcode-gallery .paige-shortcode-figure,
.paige-gallery .paige-image, .paige-shortcode-gallery .paige-shortcode-image,
blockquote > p:last-of-type { blockquote > p:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.paige-figure, .paige-shortcode-figure,
.paige-gallery, .paige-shortcode-gallery,
.paige-image, .paige-shortcode-image,
.paige-quote, .paige-shortcode-quote,
.paige-row-short:last-child, .paige-row-short:last-child,
.paige-row-tall, .paige-row-tall,
.paige-video, .paige-video,

@ -11,4 +11,4 @@
{{ $content = htmlUnescape $content }} {{ $content = htmlUnescape $content }}
{{ end }} {{ 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" }} {{ errorf "layouts/shortcodes/paige/email.html: no content" }}
{{ end }} {{ 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. */}} {{/* 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 }}"> <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 }}> <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> <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. */}} {{/* 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" }} {{ if eq $type "grid" }}
<div class="container-fluid overflow-hidden px-0"> <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"> <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. */}} {{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
<span class="paige-icon"> <span class="paige-shortcode-icon">
{{- with $url -}} {{- with $url -}}
<a href="{{ . }}" {{ with $target }} target="{{ . }}" {{ end }}> <a href="{{ . }}" {{ with $target }} target="{{ . }}" {{ end }}>
{{- end -}} {{- end -}}

@ -17,7 +17,7 @@
{{ $title := .Get "title" }} {{ $title := .Get "title" }}
{{ $width := .Get "width" }} {{ $width := .Get "width" }}
<div class="paige-image"> <div class="paige-shortcode-image">
{{ partial "paige/image.html" (dict {{ partial "paige/image.html" (dict
"alt" $alt "alt" $alt
"breakpoints" $breakpoints "breakpoints" $breakpoints

@ -7,7 +7,7 @@
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}} {{/* 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> <blockquote class="blockquote">{{ $content }}</blockquote>
{{ with $cite }} {{ with $cite }}

@ -116,7 +116,7 @@
{{ $src = print $src "?" . }} {{ $src = print $src "?" . }}
{{ end }} {{ end }}
<div class="paige-vimeo"> <div class="paige-shortcode-vimeo">
{{ partial "paige/video.html" (dict {{ partial "paige/video.html" (dict
"fullscreen" $fullscreen "fullscreen" $fullscreen
"height" $height "height" $height

@ -70,7 +70,7 @@
{{ $src = print $src "?" . }} {{ $src = print $src "?" . }}
{{ end }} {{ end }}
<div class="paige-youtube"> <div class="paige-shortcode-youtube">
{{ partial "paige/video.html" (dict {{ partial "paige/video.html" (dict
"fullscreen" $fullscreen "fullscreen" $fullscreen
"height" $height "height" $height

Loading…
Cancel
Save