hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed white space pattern issue

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-05 10:30:01 +01:00
parent 8fa2de2e06
commit 771b72fec7
33 changed files with 402 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/patterns/serving.md
View File

@ -21,7 +21,7 @@ Then, whenever you push to master, you will also be updating the site found at y
This URL will be in the following format: This URL will be in the following format:
``` ```
[your user name].github.io/[your library repo name]` [your user name].github.io/[your library repo name]
``` ```
You'll also need to add it to your `config.toml` file. See {{% pattern "Library setup" %}} for more information. You'll also need to add it to your `config.toml` file. See {{% pattern "Library setup" %}} for more information.

6
content/patterns/writing/expandable-sections.md
View File

@ -8,8 +8,8 @@ In some cases, where there is a lot of content, it's helpful to collapse certain
The `expandable` shortcode takes three parameters: The `expandable` shortcode takes three parameters:
* **label** — This is the label for the the section heading. * **label** — This is the label for the the section heading.
* **level** — This is the heading level (e.g. `2` or `<h2>`) that will contain the label. If you omit a level parameter, no heading is used; it's just a button * **level** — This is the heading level (e.g. `level="2"` for a `<h2>`) that will contain the label. If you omit a level parameter, no heading is used; it's just a button.
* **open** — Include this and give it a value of "true" or "yes" to make the section expanded on page load * **open** — Include this and give it a value of "true" or "yes" to make the section expanded on page load.
Here's what the code might look like for a simple expandable section containing markdown: Here's what the code might look like for a simple expandable section containing markdown:
@ -19,7 +19,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
&#x7b;{% /expandable %}} &#x7b;{% /expandable %}}
{{</codeBlock>}} {{</codeBlock>}}
Let's look at what that outputs as: Let's look at what that outputs:
{{% expandable label="A section of dummy text" level="2" %}} {{% expandable label="A section of dummy text" level="2" %}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula. Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.

2
docs/images/icon-info.svg
View File

@ -1,4 +1,4 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.667" width="41.667" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 41.667306 41.66729"> <svg height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<g transform="translate(-37.035 -1004.6)"> <g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/> <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)"> <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1002 B

After

Width:  |  Height:  |  Size: 811 B

2
docs/images/icon-warning.svg
View File

@ -1,4 +1,4 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.646" width="48.43" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 48.430474 41.646302"> <svg height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<g transform="translate(-1.1273 -1010.2)"> <g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/> <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/> <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 790 B

After

Width:  |  Height:  |  Size: 599 B

65
docs/index.html
View File

@ -69,6 +69,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -217,51 +235,10 @@
</div> </div>
<p>To get started, take a look at <p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>
.</p>
git&#43;https://github.com/Heydon/infusion.git
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">

4
docs/index.xml
View File

@ -60,7 +60,7 @@ If you&amp;rsquo;re not familiar with writing markdown, there are a number of tu
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate. <description>There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description> Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item> </item>
@ -92,7 +92,7 @@ The expandable shortcode takes three parameters:
<guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
<description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description> ├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>

18
docs/patterns/coding/code-blocks/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">

67
docs/patterns/coding/codepen-embedding/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -224,57 +242,16 @@
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt=""> <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<use xlink:href="#warning"></use>
</svg>
<p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p> <p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
</div> </div>
</aside> </aside>
<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>
.</p>
</main> </main>

22
docs/patterns/coding/color-palettes/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -234,7 +252,9 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p> <p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p>
</div> </div>

18
docs/patterns/coding/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">

2
docs/patterns/coding/index.xml
View File

@ -39,7 +39,7 @@ Infusion offers a couple of ways to do this. The first is by embedding CodePen d
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate> <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/</guid>
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate. <description>There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&amp;rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description> Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&amp;rsquo;t have to worry about broken styles and global JS.</description>
</item> </item>

67
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -202,50 +220,7 @@
<main id="main"> <main id="main">
<h1>Writing inline demos</h1> <h1>Writing inline demos</h1>
<p>There are some issues with <p>There are some issues with <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/codepen-embedding/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>CodePen embedding</a>
, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.</p>
<p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p> <p><strong>Infusion</strong> offers another option: a special <code>demo</code> shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</p>
@ -344,7 +319,9 @@ toggle.addEventListener('click', (e) => {
<p><aside aria-label="note" class="note"> <p><aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p> <p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p>
</div> </div>

18
docs/patterns/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">

67
docs/patterns/installation/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -251,7 +269,9 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p> <p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
</div> </div>
@ -263,50 +283,7 @@
<pre class="cmd"><code>npm install</code></pre> <pre class="cmd"><code>npm install</code></pre>
<p>Now it&rsquo;s time to consult the <p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> pattern.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a>
pattern.</p>
</main> </main>

200
docs/patterns/library-setup/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -204,50 +222,7 @@
<p>By now, you should have followed the <p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>
instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
<h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2> <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
@ -255,7 +230,9 @@
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt=""> <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<use xlink:href="#warning"></use>
</svg>
<p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p> <p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
</div> </div>
@ -265,50 +242,7 @@
<pre class="cmd"><code>npm run clean</code></pre> <pre class="cmd"><code>npm run clean</code></pre>
<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
.</p>
<h2 id="the-setup-command">The <code>setup</code> command</h2> <h2 id="the-setup-command">The <code>setup</code> command</h2>
@ -345,93 +279,7 @@ theme = "infusion"
<p>In the <code>static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p> <p>In the <code>static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>
to help you get writing, or find out how to serve the library locally and on Github Pages in
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>
.</p>
</main> </main>

65
docs/patterns/serving/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -223,53 +241,10 @@
<p>This URL will be in the following format:</p> <p>This URL will be in the following format:</p>
<pre><code>[your user name].github.io/[your library repo name]` <pre><code>[your user name].github.io/[your library repo name]
</code></pre> </code></pre>
<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file. See <p>You&rsquo;ll also need to add it to your <code>config.toml</code> file. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> for more information.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a>
for more information.</p>
</main> </main>

24
docs/patterns/writing/expandable-sections/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -208,8 +226,8 @@
<ul> <ul>
<li><strong>label</strong> — This is the label for the the section heading.</li> <li><strong>label</strong> — This is the label for the the section heading.</li>
<li><strong>level</strong> — This is the heading level (e.g. <code>2</code> or <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button</li> <li><strong>level</strong> — This is the heading level (e.g. <code>level=&quot;2&quot;</code> for a <code>&lt;h2&gt;</code>) that will contain the label. If you omit a level parameter, no heading is used; it&rsquo;s just a button.</li>
<li><strong>open</strong> — Include this and give it a value of &ldquo;true&rdquo; or &ldquo;yes&rdquo; to make the section expanded on page load</li> <li><strong>open</strong> — Include this and give it a value of &ldquo;true&rdquo; or &ldquo;yes&rdquo; to make the section expanded on page load.</li>
</ul> </ul>
<p>Here&rsquo;s what the code might look like for a simple expandable section containing markdown:</p> <p>Here&rsquo;s what the code might look like for a simple expandable section containing markdown:</p>
@ -221,7 +239,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</code></pre> </code></pre>
<p>Let&rsquo;s look at what that outputs as:</p> <p>Let&rsquo;s look at what that outputs:</p>
<div class="expandable-section"> <div class="expandable-section">

22
docs/patterns/writing/including-images/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -215,7 +233,9 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p> <p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
</div> </div>

18
docs/patterns/writing/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">

2
docs/patterns/writing/index.xml
View File

@ -48,7 +48,7 @@ The expandable shortcode takes three parameters:
<guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid> <guid>https://heydon.github.io/infusion/patterns/writing/including-images/</guid>
<description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description> ├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>

67
docs/patterns/writing/library-structure/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -236,7 +254,9 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p> <p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
<pre><code>+++ <pre><code>+++
@ -252,50 +272,7 @@ title = &quot;Popups&quot;
</aside> </aside>
<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>
.</p>
</main> </main>

22
docs/patterns/writing/markdown-and-metadata/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -242,7 +260,9 @@ weight = 1
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt=""> <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<use xlink:href="#warning"></use>
</svg>
<p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p> <p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>
</div> </div>

26
docs/patterns/writing/notes-and-warnings/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -221,7 +239,9 @@ This is a note! It's something the reader may like to know about but is suppleme
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p> <p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
</div> </div>
@ -243,7 +263,9 @@ This is a warning! It's about something the reader should be careful to do or to
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-warning.svg" alt=""> <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<use xlink:href="#warning"></use>
</svg>
<p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p> <p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
</div> </div>

67
docs/patterns/writing/references/index.html
View File

@ -68,6 +68,24 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>
<div class="wrapper"> <div class="wrapper">
@ -206,50 +224,7 @@
<h2 id="cross-references">Cross-references</h2> <h2 id="cross-references">Cross-references</h2>
<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a>
pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
<pre class=" "><code data-codeblock-shortcode> <pre class=" "><code data-codeblock-shortcode>
I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here. I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@ -260,7 +235,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="https://heydon.github.io/infusion/images/icon-info.svg" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p> <p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
</div> </div>

8
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "infusion", "name": "infusion",
"version": "0.0.1", "version": "0.0.1",
"description": "An inclusive pattern library builder for documenting inclusive interface design", "description": "A pattern library builder for inclusive designers",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
@ -14,14 +14,14 @@
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/Heydon/inclusive-pattern-library.git" "url": "git+https://github.com/Heydon/infusion.git"
}, },
"author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)", "author": "Heydon Pickering <heydon@heydonworks.com> (http://www.heydonworks.com)",
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/Heydon/inclusive-pattern-library/issues" "url": "https://github.com/Heydon/infusion/issues"
}, },
"homepage": "https://github.com/Heydon/inclusive-pattern-library#readme", "homepage": "https://github.com/Heydon/infusion#readme",
"devDependencies": { "devDependencies": {
"pre-commit": "^1.2.2" "pre-commit": "^1.2.2"
} }

8
themes/infusion/layouts/_default/baseof.html
View File

@ -24,8 +24,8 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="{{ .Site.BaseURL }}css/prism.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/styles.css">
<title> <title>
{{ block "title" . }} {{ block "title" . }}
{{ .Title }} | {{ .Site.Title }} {{ .Title }} | {{ .Site.Title }}
@ -89,8 +89,8 @@
</div> </div>
</div> </div>
{{ if eq .Type "patterns" }} {{ if eq .Type "patterns" }}
<script src="/js/prism.js"></script> <script src="{{ .Site.BaseURL }}js/prism.js"></script>
{{ end }} {{ end }}
<script src="/js/dom-scripts.js"></script> <script src="{{ .Site.BaseURL }}js/dom-scripts.js"></script>
</body> </body>
</html> </html>

2
themes/infusion/layouts/index.html
View File

@ -6,5 +6,7 @@
<main id="main"> <main id="main">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ .Content }} {{ .Content }}
{{ $packageInfo := getJSON "./package.json" }}
{{ print $packageInfo.repository.url }}
</main> </main>
{{ end }} {{ end }}

18
themes/infusion/layouts/partials/svg.html
View File

@ -32,4 +32,22 @@
</g> </g>
</g> </g>
</symbol> </symbol>
<symbol id="info">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

4
themes/infusion/layouts/shortcodes/note.html
View File

@ -1,6 +1,8 @@
<aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<img src="{{ "images/icon-info.svg" | relURL }}" alt=""> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
{{ .Inner }} {{ .Inner }}
</div> </div>
</aside> </aside>

9
themes/infusion/layouts/shortcodes/pattern.html
View File

@ -1,8 +1 @@
{{ $title := .Get 0 }} {{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>{{ .Title }}</a>{{ end }}{{ end -}}
{{ range .Site.Pages }}
{{ if eq .Title $title }}
<a class="pattern-link" href="{{ .Permalink }}">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>{{- .Title -}}
</a>
{{ end }}
{{ end }}

4
themes/infusion/layouts/shortcodes/warning.html
View File

@ -1,6 +1,8 @@
<aside aria-label="warning" class="note warning"> <aside aria-label="warning" class="note warning">
<div> <div>
<img src="{{ "images/icon-warning.svg" | relURL }}" alt=""> <svg aria-hidden="true" height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<use xlink:href="#warning"></use>
</svg>
{{ .Inner }} {{ .Inner }}
</div> </div>
</aside> </aside>

2
themes/infusion/static/images/icon-info.svg
View File

@ -1,4 +1,4 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.667" width="41.667" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 41.667306 41.66729"> <svg height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<g transform="translate(-37.035 -1004.6)"> <g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/> <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)"> <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1002 B

After

Width:  |  Height:  |  Size: 811 B

2
themes/infusion/static/images/icon-warning.svg
View File

@ -1,4 +1,4 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.646" width="48.43" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 48.430474 41.646302"> <svg height="41.646" width="48.43" viewBox="0 0 48.430474 41.646302">
<g transform="translate(-1.1273 -1010.2)"> <g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/> <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/> <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 790 B

After

Width:  |  Height:  |  Size: 599 B