diff --git a/content/patterns/writing/expandable-sections.md b/content/patterns/writing/expandable-sections.md
index a826d7f..7c19a4e 100644
--- a/content/patterns/writing/expandable-sections.md
+++ b/content/patterns/writing/expandable-sections.md
@@ -35,10 +35,4 @@ Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus
Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat volutpat. Aliquam luctus orci vel consectetur dignissim. Nullam et efficitur lorem, et ornare est. Sed tristique porttitor justo, quis malesuada velit. Nullam et elit finibus, sollicitudin velit placerat, ultricies dui.
{{% /expandable %}}
-Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the `{{% %}}` notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
-
-{{}}
-{{<expandable label="Another dummy section" level="2">}}
-<p>Here is a nested pattern reference shortcode: {{% pattern "Writing inline demos" %}}.</p>
-{{</expandable>}}
-{{}}
+Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the "`%`" notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
diff --git a/public/css/styles.css b/public/css/styles.css
index ba5b8fe..0d93ccb 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -310,7 +310,7 @@ th:empty {
margin: 0;
}
-.tag {
+.tag-icon {
height: 1em;
width: auto;
vertical-align: middle;
@@ -423,7 +423,6 @@ pre[class*=language-] code * {
}
*:not(pre) > code {
- padding: 0.125rem 0.25rem;
white-space: nowrap;
}
@@ -462,11 +461,11 @@ pre[class*=language-] code * {
}
.token.function {
- color: #ccc;
+ color: #888;
}
.line-numbers code {
- padding-left: 2.25rem;
+ padding-left: 3rem;
margin-top: -1rem;
overflow-x: auto;
overflow-y: hidden;
@@ -478,8 +477,10 @@ pre[class*=language-] code * {
.line-numbers .line-numbers-rows {
margin-left: 2.25rem;
+ left: -3.5em;
top: 1.25rem;
color: #111;
+ border-color: #111;
}
.line-numbers-rows > span:before {
@@ -614,7 +615,6 @@ a .balloon {
.intro-and-nav > div {
padding: 1.5rem;
- padding-bottom: 0;
}
.logo img {
@@ -626,29 +626,11 @@ a .balloon {
}
.patterns h3 {
- margin-top: 0.75rem;
+ font-size: 1.125rem;
}
- .patterns li {
- margin: 0;
- }
-
- .patterns a {
- padding: 0.75rem 0;
+ .pattern {
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;
- }
}
diff --git a/public/index.html b/public/index.html
index b19302e..dbb2905 100644
--- a/public/index.html
+++ b/public/index.html
@@ -76,7 +76,7 @@
-
+
Library setup
diff --git a/public/patterns/index.xml b/public/patterns/index.xml
index 867643c..ab5e652 100644
--- a/public/patterns/index.xml
+++ b/public/patterns/index.xml
@@ -24,10 +24,10 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
Library setup
- /patterns/project-setup/
+ /patterns/library-setup/
Mon, 01 Jan 0001 00:00:00 +0000
- /patterns/project-setup/
+ /patterns/library-setup/By now, you should have followed the 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 Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.
diff --git a/public/patterns/installation/index.html b/public/patterns/installation/index.html
index 9e27d93..d16364c 100644
--- a/public/patterns/installation/index.html
+++ b/public/patterns/installation/index.html
@@ -75,7 +75,7 @@
Infusion provides an easy mechanism to cross-reference patterns, by name, using the pattern shortcode. For example, I can reference the
+
Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the
@@ -174,17 +209,43 @@
+
+
+
+ Notes & warnings
+
- pattern here. Here’s what the markdown looks like, including the shortcode:
+
+
+
+
+
+
+
+
+
+
+ pattern. Here’s what the markdown looks like, including the shortcode:
-I can reference the {{% pattern "Notes and warnings" %}} pattern here.
+I can reference the {{% pattern "Notes & warnings" %}} pattern here.
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 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.