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

changes tested examples

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-17 16:46:15 +01:00
parent 3f29f4bba1
commit 667a4d4f03
7 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
content/patterns/coding/tested.md
View File

@ -7,12 +7,12 @@ When you're an inclusive designer, it's pertinent to do some testing. Following
**Infusion** provided a `tested` shortcode that let's you show which browsers and assistive technologies you've tried your design out in. Here's an example. Note the commas and "+" signs. **Infusion** provided a `tested` shortcode that let's you show which browsers and assistive technologies you've tried your design out in. Here's an example. Note the commas and "+" signs.
{{<codeBlock>}} {{<codeBlock>}}
&#x7b;{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} &#x7b;{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
{{</codeBlock>}} {{</codeBlock>}}
This outputs: This outputs:
{{% tested using="Firefox Android + Talkback, Chrome, Safari iOS + Voiceover, Edge" %}} {{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
The value for the `using` attribute follows a specific format: each testing setup is separated by a comma (with a space if you like, but it's not mandatory). If you want to add an assistive technology (or any other "add on") this needs to follow a "+". This additional part can be anything, like "A VR headset I borrowed", but there are only a few browser terms available. These are case sensitive, so you need to write them as below: The value for the `using` attribute follows a specific format: each testing setup is separated by a comma (with a space if you like, but it's not mandatory). If you want to add an assistive technology (or any other "add on") this needs to follow a "+". This additional part can be anything, like "A VR headset I borrowed", but there are only a few browser terms available. These are case sensitive, so you need to write them as below:

20
docs/css/styles.css
View File

@ -304,7 +304,7 @@ caption {
.library-desc { .library-desc {
font-style: italic; font-style: italic;
margin-top: 0.25rem; margin-top: 0.5rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 30rem; max-width: 30rem;
@ -330,7 +330,7 @@ caption {
.patterns { .patterns {
overflow: auto; overflow: auto;
margin-top: 1rem; margin-top: 1.5rem;
} }
.patterns * { .patterns * {
@ -341,12 +341,19 @@ caption {
font-size: 1rem; font-size: 1rem;
} }
.patterns h3 + ul {
margin-top: 0.75rem;
}
.patterns li { .patterns li {
line-height: 1.125; line-height: 1.125;
margin-top: 0.75rem;
list-style: none; list-style: none;
} }
.patterns li + li {
margin-top: 0.75rem;
}
.patterns ul ul { .patterns ul ul {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@ -747,7 +754,7 @@ p:empty {
a svg, button svg { a svg, button svg {
height: 0.75em; height: 0.75em;
width: auto; width: auto;
margin-right: 0.125rem; margin-right: 0.25em;
} }
h1 svg { h1 svg {
@ -825,6 +832,10 @@ h1 svg {
padding: 0.75rem 0; padding: 0.75rem 0;
} }
.patterns li:not(.pattern) {
margin-top: 0;
}
.patterns ul ul { .patterns ul ul {
margin: 0; margin: 0;
} }
@ -843,6 +854,7 @@ h1 svg {
.pattern + .pattern { .pattern + .pattern {
border-top: 1px solid; border-top: 1px solid;
margin-top: 0;
} }
#menu-button { #menu-button {

2
docs/index.xml
View File

@ -199,7 +199,7 @@ npm run serve This will serve your working library from localhost:1313 (the exac
<guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid>
<description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs. Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
&amp;#x7b;{% tested using=&#34;Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description> &amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description>
</item> </item>
</channel> </channel>

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

@ -85,7 +85,7 @@ The file tree is described using a markdown nested list structure:
<guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid> <guid>https://heydon.github.io/infusion/patterns/coding/tested/</guid>
<description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. <description>When you&amp;rsquo;re an inclusive designer, it&amp;rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs. Infusion provided a tested shortcode that let&amp;rsquo;s you show which browsers and assistive technologies you&amp;rsquo;ve tried your design out in. Here&amp;rsquo;s an example. Note the commas and &amp;ldquo;+&amp;rdquo; signs.
&amp;#x7b;{% tested using=&#34;Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description> &amp;#x7b;{% tested using=&#34;Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge&#34; %}} This outputs:</description>
</item> </item>
</channel> </channel>

8
docs/patterns/coding/tested/index.html
View File

@ -284,7 +284,7 @@
<p><strong>Infusion</strong> provided a <code>tested</code> shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs.</p> <p><strong>Infusion</strong> provided a <code>tested</code> shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs.</p>
<pre class=" "><code data-codeblock-shortcode> <pre class=" "><code data-codeblock-shortcode>
&#x7b;{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} &#x7b;{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
</code></pre> </code></pre>
@ -303,9 +303,9 @@
<img src="https://heydon.github.io/infusion/images/browser-Firefox-Android.svg" alt=""> <img src="https://heydon.github.io/infusion/images/browser-Firefox.svg" alt="">
<span><strong>Firefox Android</strong></span> <span><strong>Firefox</strong></span>
<span class="additional">with <strong>Talkback</strong></span> <span class="additional">with <strong>JAWS</strong></span>
</td> </td>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

20
themes/infusion/static/css/styles.css
View File

@ -304,7 +304,7 @@ caption {
.library-desc { .library-desc {
font-style: italic; font-style: italic;
margin-top: 0.25rem; margin-top: 0.5rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 30rem; max-width: 30rem;
@ -330,7 +330,7 @@ caption {
.patterns { .patterns {
overflow: auto; overflow: auto;
margin-top: 1rem; margin-top: 1.5rem;
} }
.patterns * { .patterns * {
@ -341,12 +341,19 @@ caption {
font-size: 1rem; font-size: 1rem;
} }
.patterns h3 + ul {
margin-top: 0.75rem;
}
.patterns li { .patterns li {
line-height: 1.125; line-height: 1.125;
margin-top: 0.75rem;
list-style: none; list-style: none;
} }
.patterns li + li {
margin-top: 0.75rem;
}
.patterns ul ul { .patterns ul ul {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
@ -747,7 +754,7 @@ p:empty {
a svg, button svg { a svg, button svg {
height: 0.75em; height: 0.75em;
width: auto; width: auto;
margin-right: 0.125rem; margin-right: 0.25em;
} }
h1 svg { h1 svg {
@ -825,6 +832,10 @@ h1 svg {
padding: 0.75rem 0; padding: 0.75rem 0;
} }
.patterns li:not(.pattern) {
margin-top: 0;
}
.patterns ul ul { .patterns ul ul {
margin: 0; margin: 0;
} }
@ -843,6 +854,7 @@ h1 svg {
.pattern + .pattern { .pattern + .pattern {
border-top: 1px solid; border-top: 1px solid;
margin-top: 0;
} }
#menu-button { #menu-button {