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

snippet example inline

Browse Source
This commit is contained in:
Heydon Pickering 2017-09-13 10:39:46 +01:00
parent a6cb999be7
commit edc277c8ac
4 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
content/patterns/writing/snippets.md
View File

@ -13,3 +13,7 @@ The example `visually-hidden.md` snippet describes the CSS needed to create cont
{{% note %}}
To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does.
{{% /note %}}
## Visually hidden snippet
{{% snippet file="visually-hidden.md" %}}

27
docs/patterns/writing/snippets/index.html
View File

@ -403,7 +403,9 @@
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>The example <code>visually-hidden.md</code> snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&rsquo;s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
@ -423,6 +425,29 @@
</aside>
<h2 id="visually-hidden-snippet">Visually hidden snippet</h2>
<!-- snippet -->
<p>The <code>visually-hidden</code> utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:</p>
<pre><code class="language-CSS">.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
}
</code></pre>
<p>Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users.
</main>
<footer role="contentinfo">

27
docs/print-version/index.html
View File

@ -1505,7 +1505,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</svg>
Snippets
</h1>
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>The example <code>visually-hidden.md</code> snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it&rsquo;s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
@ -1525,6 +1527,29 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</aside>
<h2 id="visually-hidden-snippet">Visually hidden snippet</h2>
<!-- snippet -->
<p>The <code>visually-hidden</code> utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:</p>
<pre><code class="language-CSS">.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
}
</code></pre>
<p>Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users.
</div>
<div class="pattern-section">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long