renamed theme and further content work

config.toml

@@ -1,7 +1,7 @@
 languageCode = "en-us"
-title = "Inclusive Pattern Docs"
+title = "Infusion"
 baseURL = "/"
-theme = "inclusive-pattern-docs"
+theme = "infusion"
 
 [params]
   description = "Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself."

content/_index.md

@@ -3,6 +3,15 @@ date = "2017-06-26T18:27:58+01:00"
 title = "The Infusion Pattern Library Builder"
 +++
 
-Welcome to **Infusion**: a pattern library builder with a focus on inclusive interface design. These are **Infusion's** docs, but they are also an example of a pattern library built with **Infusion**.
+Welcome to **Infusion**: a pattern library builder with a focus on inclusive interface design. These are **Infusion's** docs, but they are also an example of a pattern library built with **Infusion**. Here's are some of the features:
 
-To get started using **Infusion**, you'll first need to look at the {{% patternLink "Installation" %}} pattern.
+{{% ticks %}}
+* Built with Hugo, so easy to structure content and fast to compile it
+* Include live code demos easily, using either CodePen embeds or via inline demo shortcodes (that use Shadow DOM)
+* Quickly include WCAG and Inclusive Design Principles references by key
+* Easily make sections collapsible without writing HTML
+* Choose between plain or line-numbered code blocks
+* A responsive, screen reader and keyboard accessible output site
+{{% /ticks %}}
+
+To get started using **Infusion**, you'll first need to look at the {{% pattern "Installation" %}} pattern.

content/patterns/installation.md

@@ -32,7 +32,7 @@ It is entirely likely you already have Node and NPM installed on your system. If
 
 {{<cmd>}}git clone https://github.com/[your username]/infusion-builder.git{{</cmd>}}
 
-If the command line is not your thing, fork  [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) in the browser and choose **Open in Desktop** from **Clone or download** (see figure 1, below).
+If the command line is not your thing, fork  [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) and choose **Open in Desktop** from **Clone or download** (see figure 1, below).
 
 {{% figure caption="The Github web interface" %}}
 ![The open in desktop option, revealed when clicking clone or download](/images/open_in_desktop.png)
@@ -46,4 +46,4 @@ Once you have your local copy of the files, move to the root of that folder and
 
 {{<cmd>}}npm install{{</cmd>}}
 
-Now it's time to consult the {{% patternLink "Library setup" %}} pattern.
+Now it's time to consult the {{% pattern "Library setup" %}} pattern.

content/patterns/project-setup.md

@@ -2,7 +2,7 @@
 title = "Library setup"
 +++
 
-By now, you should have followed the {{% patternLink "Installation" %}} instructions. You should have Hugo and Node installed, and a local copy of a forked version of **Infusion**. You should also have run `npm install` in the root of that codebase.
+By now, you should have followed the {{% pattern "Installation" %}} instructions. You should have Hugo and Node installed, and a local copy of a forked version of **Infusion**. You should also have run `npm install` in the root of that codebase.
 
 ## "Cleaning" the content folder
 
@@ -14,7 +14,7 @@ If you are contributing to an existing **Infusion** library, do not run the foll
 
 {{<cmd>}}npm run clean{{</cmd>}}
 
-This will leave your `content` folder with just an `_index.md` file and a `patterns` folder containing a single demonstration pattern file. Find out more about these in {{% patternLink "Library structure" %}}.
+This will leave your `content` folder with just an `_index.md` file and a `patterns` folder containing a single demonstration pattern file. Find out more about these in {{% pattern "Library structure" %}}.
 
 ## The `setup` command
 
@@ -46,4 +46,4 @@ theme = "infusion"
 
 In the `static` folder, you'll find a `logo.png` file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.
 
-Now that your logo's in place, everything should be ready. Where next? You can learn about {{% patternLink "Library structure" %}} to help you get writing, or find out how to serve the library locally and on Github Pages in {{% patternLink "Serving" %}}.
+Now that your logo's in place, everything should be ready. Where next? You can learn about {{% pattern "Library structure" %}} to help you get writing, or find out how to serve the library locally and on Github Pages in {{% pattern "Serving" %}}.

content/patterns/writing/including-images.md

@@ -0,0 +1,52 @@
++++
+title = "Including images"
++++
+
+From time to time, you'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'll be mostly working in.
+
+```
+├── content
+└── static
+    └── images
+        ├── logo.png
+        └── menu-button.gif
+```
+
+{{% note %}}
+When you first make a copy of **Infusion**, **Infusion's** own logo will be included. You should replace this with your own company or project logo.
+{{% /note %}}
+
+The path to the `/images` folder should begin with a forward slash, so include that when referencing images in your markdown.
+
+```
+![Global Megacorp Ltd](/images/logo.png)
+```
+
+## Figures
+
+Sometimes you will want to include a caption with your illustration. This is what the `<figure>` and `<figcaption>` elements are for. However, **Infusion** doesn't ask you to code all that manually. A special shortcode is provided, which takes a `caption` parameter. Note that the image markdown is provided between the opening and closing shortcode tags:
+
+{{<codeBlock>}}
+&#x7b;{% figure caption="Steve Faulkner works for The Paciello Group" %}}
+![Steve Faulkner's face](/images/steve_faulkner.jpg)
+&#x7b;{% /figure %}}
+{{</codeBlock>}}
+
+This will output the following. Note the automatically incremented **Figure** number.
+
+{{% figure caption="Steve Faulkner works for The Paciello Group" %}}
+![Steve Faulkner's face](/images/steve_faulkner.jpg)
+{{% /figure %}}
+
+The generated markup includes special provisions for assistive technology support:
+
+```html
+<figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
+  <p>
+    <img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face">
+  </p>
+  <figcaption id="U3RldmUgRmF1bGtuZXIg">
+    Steve Faulkner works for The Paciello Group
+  </figcaption>
+</figure>
+```

content/patterns/writing/library-structure.md

@@ -1,5 +1,6 @@
 +++
 title = "Library structure"
+weight = 1
 +++
 
 Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:
@@ -12,8 +13,9 @@ Before you can set about documenting patterns, you need to know where everything
         └── name-of-my-other-pattern.md
 ```
 
-* **_index.md** — This is the content for your home page
-* **/patterns** — This is the folder where individual pattern files are kept
+* **/content** - This is where all of your content lives. You won't need to visit any other folders very frequently.
+* **_index.md** — This is the content for your home page.
+* **/patterns** — This is the folder where individual pattern files are kept.
 
 ## Subsections
 
@@ -45,4 +47,4 @@ The `/patterns` folder itself does not need indexing explicitly in this way.
 **Infusion** does not currently support _sub_-subsections.
 {{% /note %}}
 
-Now that you know where to put everything, it's time to talk about how to actually write individual patterns. Don't worry, it's pretty straightforward. Turn to {{% patternLink "Markdown & metadata" %}}.
+Now that you know where to put everything, it's time to talk about how to actually write individual patterns. Don't worry, it's pretty straightforward. Turn to {{% pattern "Markdown & metadata" %}}.

content/patterns/writing/markdown-and-metadata.md

@@ -28,4 +28,20 @@ tags = ["interactive", "popup", "javascript"]
 +++
 ```
 
-This will create links to tag pages listing content tagged with the same terms.
+This will create links to pages listing content tagged with the same terms using the URL schema `/tag/[tag name]`.
+
+### Weight
+
+By default, patterns are listed in alphabetical order. However, sometimes you might like to change the order around. This is possible by adding a `weight` parameter. To make my menu button pattern appear at the top of its subsection, I would give it a `weight` of `1`:
+
+```
++++
+title = "Menu button"
+tags = ["interactive", "popup", "javascript"]
+weight = 1
++++
+```
+
+{{% warning %}}
+The `weight` parameter should be an integer, not a string, so don't use scare quotes around the value!
+{{% /warning %}}

content/patterns/writing/references.md

@@ -0,0 +1,51 @@
++++
+title = "References"
++++
+
+## Cross-references
+
+**Infusion** provides an easy mechanism to cross-reference patterns, by name, using the `pattern` shortcode. For example, I can reference the {{% pattern "Notes and warnings" %}} pattern here. Here's what the markdown looks like, including the shortcode:
+
+{{<codeBlock>}}
+I can reference the &#x7b;{% pattern "Notes and warnings" %}} pattern here.
+{{</codeBlock>}}
+
+This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.
+
+## WCAG References
+
+[WCAG 2.0](https://www.w3.org/TR/WCAG/) is the _de facto_ standard for accessible interfaces. When writing about inclusive design patterns, sometimes you'll want to refer to WCAG to highlight which success criteria the pattern meets.
+
+Instead of having to copy and paste content and links to WCAG, **Infusion** provides a shortcode mechanism that lets you simply list the success criteria by number:
+
+{{<codeBlock>}}
+&#x7b;{% wcag include="1.2.1, 1.3.1, 4.1.2" %}}
+{{</codeBlock>}}
+
+This generates a list of references that includes the names of each criterion and links to them directly. Like this:
+
+{{% wcag include="2.1.1, 4.1.2" %}}
+
+### Full descriptions
+
+Sometimes, you'll want to include the full descriptions of the success criteria inline. This is possible by setting `descriptions` to `true`:
+
+{{<codeBlock>}}
+&#x7b;{% wcag include="1.3.1, 4.1.2" descriptions="true" %}}
+{{</codeBlock>}}
+
+Here's the more verbose output:
+
+{{% wcag include="2.1.1, 4.1.2" descriptions="true" %}}
+
+## Inclusive Design Principle references
+
+Some inclusive design concepts are not reducible to success or fail criteria. This is why The Paciello Group wrote the [Inclusive Design Principles](http://inclusivedesignprinciples.org/). These can be listed by name.
+
+{{<codeBlock>}}
+&#x7b;{% principles include="Add value, Be consistent" descriptions="true" %}}
+{{</codeBlock>}}
+
+Here's the output with `descriptions="true"`:
+
+{{% principles include="Add value, Be consistent" descriptions="true" %}}

themes/inclusive-pattern-docs/layouts/partials/svg.html

@@ -1,22 +0,0 @@
-<svg style="display: none">
-  <symbol id="bookmark">
-   <g transform="translate(2266 3206.2)">
-    <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
-   </g>
-  </symbol>
-
-  <symbol id="w3c">
-   <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
-   <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
-   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
-   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
-   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
-   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
- </symbol>
-
- <symbol id="tag">
-  <g transform="translate(0 -875.2)">
-   <path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
-  </g>
-</symbol>
-</svg>

themes/infusion/layouts/_default/baseof.html

@@ -30,7 +30,7 @@
             {{ $current := . }}
             {{ range $.Site.Home.Sections }}
               <ul>
-                {{ range .Pages }}
+                {{ range .Pages.ByWeight }}
                   <li class="pattern">
                     <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
@@ -43,7 +43,7 @@
                   <li>
                     <h3>{{ .Title }}</h3>
                     <ul>
-                      {{ range .Pages }}
+                      {{ range .Pages.ByWeight }}
                         <li class="pattern">
                           <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>

themes/infusion/layouts/partials/svg.html

@@ -0,0 +1,35 @@
+<svg style="display: none">
+  <symbol id="bookmark">
+   <g transform="translate(2266 3206.2)">
+    <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
+   </g>
+  </symbol>
+
+  <symbol id="w3c">
+   <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
+   <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
+   <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
+ </symbol>
+
+  <symbol id="tag">
+    <g transform="translate(0 -875.2)">
+     <path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
+    </g>
+  </symbol>
+
+  <symbol id="balloon">
+   <g transform="translate(0 -875.2)">
+    <g>
+     <path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
+     <path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
+     <path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
+     <path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
+     <path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
+     <rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
+    </g>
+   </g>
+  </symbol>
+</svg>

themes/infusion/layouts/shortcodes/principles.html

@@ -6,7 +6,13 @@
   {{ range $JSON.principles }}
     {{ if in $included (lower .title) }}
       <li>
-        <strong><a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">{{ .title }}</a>:</strong> <em>{{ .strapline }}</em>
+        <strong>
+          <a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
+            <svg class="balloon" height="177.17" width="141.73" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            {{ .title }}
+          </a>:
+        </strong>
+        <em>{{ .strapline }}</em>
         {{ if $descriptions }}
           <p>{{ .description }}</p>
         {{ end }}

themes/infusion/layouts/shortcodes/wcag.html

@@ -7,8 +7,7 @@
       <li>
         <strong><a href="{{ .url }}">
           <svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
-          {{ .ref_id }} {{ .title }}</a> (level {{ .level }})
-          {{ if $descriptions }}:{{ end }}
+          {{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
         </strong>
         {{ if $descriptions }}
           {{ .description }}

themes/infusion/static/css/styles.css

@@ -43,10 +43,18 @@ img {
   max-width: 100%;
 }
 
+p img {
+  margin-top: 0.75rem;
+}
+
+figure p img {
+  margin-top: 0;
+}
+
 :focus:not([tabindex="-1"]),
 [data-expands]:focus svg,
 .patterns a:focus span {
-  outline: 3px solid #999;
+  outline: 3px solid #ccc;
   outline-offset: 2px;
 }
 
@@ -415,7 +423,6 @@ pre[class*=language-] code * {
 }
 
 *:not(pre) > code {
-  background: #f7f7f7;
   padding: 0.125rem 0.25rem;
   white-space: nowrap;
 }
@@ -452,7 +459,6 @@ pre[class*=language-] code * {
 .token.attr-value,
 .token.keyword {
 	color: #666;
-  font-weight: bold;
 }
 
 .token.function {
@@ -529,6 +535,10 @@ p:empty {
   display: none;
 }
 
+*:not(p) + p:empty + p {
+  margin-top: 2.25rem;
+}
+
 /* WCAG and principles */
 
 .wcag ul li {
@@ -570,6 +580,10 @@ a .bookmark {
   width: 0.75em;
 }
 
+a .balloon {
+  height: 1.125em;
+}
+
 /* cross references */
 
 .pattern-link {
@@ -600,6 +614,7 @@ a .bookmark {
 
   .intro-and-nav > div {
     padding: 1.5rem;
+    padding-bottom: 0;
   }
 
   .logo img {
@@ -610,12 +625,29 @@ a .bookmark {
     margin: 0;
   }
 
+  .patterns h3 {
+    margin-top: 0.75rem;
+  }
+
   .patterns li {
     margin: 0;
+  }
+
+  .patterns a {
     padding: 0.75rem 0;
     font-size: 1rem;
   }
 
+  .patterns a[aria-current] {
+    background: #111;
+    color: #fff;
+    padding: 0.75rem;
+  }
+
+  .patterns a[aria-current] span {
+    text-decoration: none;
+  }
+
   .patterns li + li {
     border-top: 1px solid;
   }

themes/infusion/theme.toml

@@ -1,5 +1,5 @@
 
-name = "Inclusive Docs"
+name = "Infusion"
 description = ""
 homepage = "https://www.paciellogroup.com/"
 tags = ["inclusive design", "accessibility"]