better setup docs

README.md

@@ -1,11 +1,5 @@
-# Inclusive Pattern Library
+# Infusion
 
-## TODO
+**Infusion** is a pattern library builder for inclusive designers.
 
-* Basic layout, with scrollable left column and sticky "back to top" in main content central-column
+[Documentation →](https://heydon.github.io/infusion)
-* Syntax highlighting for code (prism-based, probably)
-* Support for areas to showcase working demos _without_ codePen or similar (recommended for just HTML+CSS, probably)
-* Support for reporting user-tester notes / quotes?
-* TOML: Support for expanded WCAG references
-* TOML: Support for cross-referencing patterns
-* TOML: Support for color combination illustrations?

content/patterns/code/color-palettes.md

@@ -0,0 +1,17 @@
++++
+title = "Color palettes"
++++
+
+There's no reason why your **Infusion**-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The `colors` shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
+
+{{<codeBlock>}}
+&#x7b;{% colors "#111111, #cccccc, #ffffff" %}}
+{{</codeBlock>}}
+
+The result is a one row strip showing each color supplied in order. The colors for **Infusion** are greyscale:
+
+{{% colors "#111111, #cccccc, #ffffff" %}}
+
+{{% note %}}
+If you're wondering whether you need to put a space after the commas in the shortcode, don't worry: `"#254f7b, #579a6d, #666666"` and `"#254f7b,#579a6d,#666666"` are both accepted. Any CSS color value is acceptable, not just hex colors.
+{{% /note %}}

content/patterns/library-setup.md

@@ -28,8 +28,8 @@ You'll also want to name your library and configure one or two other things in t
 
 {{<codeBlock lang="html" numbered="true">}}
 languageCode = "en-us"
-title = "Inclusive Pattern Docs"
+title = "Infusion"
-baseURL = "/"
+baseURL = "https://heydon.github.io/infusion/"
 theme = "infusion"
 
 [params]
@@ -37,9 +37,10 @@ theme = "infusion"
   codePenUser = "Heydon"
 {{</codeBlock>}}
 
-* **title** — This is the library's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "pattern library" if you don't want to.
+* **title** — This is the library's name, like "Megacorp 5000 Pattern Library". You don't have to include the term "pattern library" if you don't want to. For **Infusion's** version of **Infusion**, the `title` is, naturally, _Infusion_ :-)
+* **baseURL** — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site. More information is available in {{% pattern "Serving" %}}.
 * **theme** — This is the theme the library is using. Don't change this from "infusion".
-* **description** — This is a short description of the library and comes under the logo.
+* **description** — This is a short description of the library and comes under the logo. You can include HTML like `<em>` and `<strong>`.
 * **codePenUser** — If you want to embed codePens in your pattern files, you need to supply a codePen username here.
 
 ## Including a logo

themes/infusion/layouts/shortcodes/colors.html

@@ -0,0 +1,11 @@
+{{ $colorString := replace (.Get 0) " " "" | upper }}
+{{ $colors := split $colorString "," }}
+<div class="colors-container">
+  <ul class="colors">
+    {{ range $colors }}
+      <li style="background-color: {{ . }};{{ if or (eq . "#FFFFFF") (eq . "#FFF")}} border: 1px solid #111{{ end }}">
+        <span>{{ . }}</span>
+      </li>
+    {{ end }}
+  </ul>
+</div>