Make git acknowledge public folder
This commit is contained in:
Heydon Pickering
parent
6805cefbac
commit
8f00cbc490
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on Inclusive Pattern Docs</title>
|
||||
<link>/categories/</link>
|
||||
<description>Recent content in Categories on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50mm" width="50mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 177.16535 177.16535">
|
||||
<g transform="translate(0 -875.2)">
|
||||
<rect style="stroke-width:0;fill:#111" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
|
||||
<rect style="stroke-width:0;fill:#111" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 535 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="22.578mm" width="11.289mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 40.00001 80.000027">
|
||||
<g transform="translate(-200 -563.49)">
|
||||
<path style="fill-rule:evenodd;stroke-width:0;fill:#000000" d="m240 563.49-40 40v40l40-40z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 415 B |
|
|
@ -0,0 +1,179 @@
|
|||
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre.line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre.line-numbers > code {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -0,0 +1,564 @@
|
|||
|
||||
/*
|
||||
|
||||
Colors:
|
||||
Blue color = #38608F
|
||||
Dark blue color = #153B62
|
||||
Gold color = #FCB316
|
||||
Grey color = #707174
|
||||
Red color = #C83737
|
||||
Green color = #217844
|
||||
|
||||
*/
|
||||
|
||||
*, *::before, *::after {
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: calc(1em + 0.33vw);
|
||||
font-family: PT Sans, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
* + * {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
br,
|
||||
dt,
|
||||
dd,
|
||||
th,
|
||||
td,
|
||||
option,
|
||||
[hidden] + *,
|
||||
li + li,
|
||||
body,
|
||||
.main-and-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
:focus:not([tabindex="-1"]),
|
||||
[data-expands]:focus svg,
|
||||
.patterns a:focus span {
|
||||
outline: 3px solid #FCB316;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* fix for IE :( */
|
||||
div:not([tabindex]):focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: Miriam Libre, serif;
|
||||
line-height: 1.125;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.66rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-family: PT Sans, sans-serif;
|
||||
}
|
||||
|
||||
kbd {
|
||||
line-height: 1;
|
||||
font-size: 0.66rem;
|
||||
padding: 0.1rem 0.33rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 2px solid;
|
||||
box-shadow: 0.125rem 0.125rem 0 #111;
|
||||
vertical-align: 0.33em;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
|
||||
main ul {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
main li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
main ul ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
button {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
|
||||
table {
|
||||
text-align: left;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 2px solid;
|
||||
padding: 0.5rem;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 1.125rem;
|
||||
padding-bottom: 0.25rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
th:empty {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Page structure */
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.intro-and-nav {
|
||||
font-size: 0.85rem;
|
||||
width: 15rem;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
|
||||
.intro-and-nav > div {
|
||||
padding: 2.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.library-desc {
|
||||
font-style: italic;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.main-and-footer {
|
||||
margin-left: 15rem;
|
||||
}
|
||||
|
||||
.main-and-footer > div {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding: 2.25rem;
|
||||
}
|
||||
|
||||
/* Patterns navigation */
|
||||
|
||||
.patterns {
|
||||
overflow: auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.patterns * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.patterns h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.patterns li {
|
||||
line-height: 1.125;
|
||||
margin-top: 0.75rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.patterns ul ul {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pattern a {
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: baseline;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pattern a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.pattern a:focus span {
|
||||
outline:
|
||||
}
|
||||
|
||||
.pattern span {
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
|
||||
.pattern [aria-current] span {
|
||||
text-decoration: underline;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
/* Pattern lists */
|
||||
|
||||
.patterns-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.patterns-list h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.patterns-list li + li {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 2px solid;
|
||||
}
|
||||
|
||||
.patterns-list a {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
|
||||
.tags {
|
||||
margin-top: 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tags * {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
height: 1em;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tags strong {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tags li {
|
||||
white-space: nowrap;
|
||||
margin: 0 0.25rem 0 0;
|
||||
}
|
||||
|
||||
/* Notes and warnings */
|
||||
|
||||
.note {
|
||||
border-left: 0.5rem solid;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.note > div {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.note > div > img:first-child {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.note > div > :first-child + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.note.warning {
|
||||
border-left: 0;
|
||||
background-image: url(images/stripe.svg);
|
||||
background-size: 0.5rem auto;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.note.warning > div {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* Tick lists */
|
||||
|
||||
.ticks li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ticks li::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
background-image: url(images/icon-tick.svg);
|
||||
background-size: 100% auto;
|
||||
position: absolute;
|
||||
left: -1.25rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Figures */
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
counter-reset: fig;
|
||||
}
|
||||
|
||||
figcaption::before {
|
||||
counter-increment: fig;
|
||||
content: 'Figure ' counter(fig) ':';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
|
||||
pre[class*=language-] {
|
||||
padding: 0 !important;
|
||||
background: none;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre[class*=language-][data-line] {
|
||||
padding: 1em 0 0 2.25rem;
|
||||
}
|
||||
|
||||
pre[class*=language-] code * {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
[data-codeblock-shortcode] {
|
||||
display: block;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
*:not(pre) > code {
|
||||
background: #f7f7f7;
|
||||
padding: 0.125rem 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #333;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.line-numbers code {
|
||||
padding-left: 1.5rem;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
padding-bottom: 2.25rem !important;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
margin-left: 2.25rem;
|
||||
top: 1.25rem;
|
||||
border-right-style: dashed
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Expandable sections */
|
||||
|
||||
.expandable-section {
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
[id^="expandable-"] {
|
||||
margin: 0;
|
||||
padding: 1.5rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.expandable-section + .expandable-section {
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
[data-expands] {
|
||||
text-align: left;
|
||||
border: 0;
|
||||
background: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-expands] svg {
|
||||
margin-top: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
[data-expands][aria-expanded="true"] svg .up-strut {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-expands]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
p:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* WCAG and principles */
|
||||
|
||||
.wcag ul li {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.principles p {
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.principles.with-desc > li + li,
|
||||
.wcag.with-desc > li + li {
|
||||
border-top: 1px solid;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* Site errors */
|
||||
|
||||
.site-error {
|
||||
padding: 1.5rem;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.site-error strong {
|
||||
color: #C83737;
|
||||
}
|
||||
|
||||
/* SVG icons */
|
||||
|
||||
a svg {
|
||||
height: 0.75em;
|
||||
width: auto;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
|
||||
a .bookmark {
|
||||
width: 0.75em;
|
||||
}
|
||||
|
||||
/* cross references */
|
||||
|
||||
.pattern-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* inline demos */
|
||||
|
||||
[id^="demo-"] {
|
||||
all: initial;
|
||||
}
|
||||
|
||||
[id^="demo-"] * {
|
||||
all: initial;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.667" width="41.667" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 41.667306 41.66729">
|
||||
<g transform="translate(-37.035 -1004.6)">
|
||||
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
|
||||
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
|
||||
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
|
||||
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1002 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50mm" width="50mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 177.16535 177.16535">
|
||||
<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>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 658 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="41.646" width="48.43" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 48.430474 41.646302">
|
||||
<g transform="translate(-1.1273 -1010.2)">
|
||||
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
|
||||
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
|
||||
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 790 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
The Inclusive Pattern Library Builder | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>The Inclusive Pattern Library Builder</h1>
|
||||
<p>Some introductory text.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Inclusive Pattern Docs</title>
|
||||
<link>/</link>
|
||||
<description>Recent content on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Card</title>
|
||||
<link>/patterns/widgets/example1/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/widgets/example1/</guid>
|
||||
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus &ndash; nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim&hellip; tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Fusce ac sodales CSS magna. Maecenas sit amet tellus nec mi gravida posuere non pretium magna.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Collapsible region</title>
|
||||
<link>/patterns/example1/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example1/</guid>
|
||||
<description>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Fusce ac sodales magna. Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris).</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Footer</title>
|
||||
<link>/patterns/landmarks/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/landmarks/example2/</guid>
|
||||
<description>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec a congue leo.
|
||||
See the demo on codePen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Menu button and menu</title>
|
||||
<link>/patterns/widgets/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/widgets/example2/</guid>
|
||||
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna Menu button and menu , id molestie magna risus ut nunc. Fusce ac sodales CSS magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.
|
||||
Press button { background: blue; color: white; border: 0; padding: 0.5rem 1rem; text-transform: uppercase; } [aria-pressed="</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Page region navigation landmark</title>
|
||||
<link>/patterns/landmarks/example-one/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/landmarks/example-one/</guid>
|
||||
<description>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec a congue leo.
|
||||
Add value: Consider the value of features and how they improve the experience for different users. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Tab interface</title>
|
||||
<link>/patterns/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example2/</guid>
|
||||
<description>Vestibulum sit amet ipsum lacus&hellip; Nulla lobortis tempus commodo. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Nulla lobortis tempus commodo. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &mdash; consectetur adipiscing &mdash; elit.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>The Inclusive Pattern Library Builder</title>
|
||||
<link>/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/</guid>
|
||||
<description>Some introductory text.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/* expandable sections */
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
function toggle (button, target) {
|
||||
var expanded = button.getAttribute('aria-expanded') === 'true' || false
|
||||
button.setAttribute('aria-expanded', !expanded)
|
||||
target.hidden = !target.hidden
|
||||
}
|
||||
|
||||
var expanders = document.querySelectorAll('[data-expands]')
|
||||
|
||||
Array.prototype.forEach.call(expanders, function (expander) {
|
||||
console.log(expander)
|
||||
var target = document.getElementById(expander.getAttribute('data-expands'))
|
||||
|
||||
expander.addEventListener('click', function () {
|
||||
toggle(expander, target)
|
||||
})
|
||||
})
|
||||
|
||||
}())
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,68 @@
|
|||
(function(){
|
||||
/*
|
||||
|
||||
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
'use strict';function n(a,b){return{index:a,i:[],m:b}}
|
||||
function aa(a,b,c,d){var e=0,h=0,g=0,f=0,k=Math.min(b-e,d-h);if(0==e&&0==h)a:{for(g=0;g<k;g++)if(a[g]!==c[g])break a;g=k}if(b==a.length&&d==c.length){for(var f=a.length,l=c.length,m=0;m<k-g&&ba(a[--f],c[--l]);)m++;f=m}e+=g;h+=g;b-=f;d-=f;if(!(b-e||d-h))return[];if(e==b){for(b=n(e,0);h<d;)b.i.push(c[h++]);return[b]}if(h==d)return[n(e,b-e)];k=e;g=h;d=d-g+1;f=b-k+1;b=Array(d);for(l=0;l<d;l++)b[l]=Array(f),b[l][0]=l;for(l=0;l<f;l++)b[0][l]=l;for(l=1;l<d;l++)for(m=1;m<f;m++)if(a[k+m-1]===c[g+l-1])b[l][m]=
|
||||
b[l-1][m-1];else{var q=b[l-1][m]+1,y=b[l][m-1]+1;b[l][m]=q<y?q:y}k=b.length-1;g=b[0].length-1;d=b[k][g];for(a=[];0<k||0<g;)k?g?(f=b[k-1][g-1],l=b[k-1][g],m=b[k][g-1],q=l<m?l<f?l:f:m<f?m:f,q==f?(f==d?a.push(0):(a.push(1),d=f),k--,g--):q==l?(a.push(3),k--,d=l):(a.push(2),g--,d=m)):(a.push(3),k--):(a.push(2),g--);a.reverse();b=void 0;k=[];for(g=0;g<a.length;g++)switch(a[g]){case 0:b&&(k.push(b),b=void 0);e++;h++;break;case 1:b||(b=n(e,0));b.m++;e++;b.i.push(c[h]);h++;break;case 2:b||(b=n(e,0));b.m++;
|
||||
e++;break;case 3:b||(b=n(e,0)),b.i.push(c[h]),h++}b&&k.push(b);return k}function ba(a,b){return a===b};var p=window.ShadyDOM||{};p.S=!(!Element.prototype.attachShadow||!Node.prototype.getRootNode);var t=Object.getOwnPropertyDescriptor(Node.prototype,"firstChild");p.g=!!(t&&t.configurable&&t.get);p.J=p.force||!p.S;function u(a){return"ShadyRoot"===a.M}function v(a){a=a.getRootNode();if(u(a))return a}var w=Element.prototype,ca=w.matches||w.matchesSelector||w.mozMatchesSelector||w.msMatchesSelector||w.oMatchesSelector||w.webkitMatchesSelector;
|
||||
function x(a,b){if(a&&b)for(var c=Object.getOwnPropertyNames(b),d=0,e;d<c.length&&(e=c[d]);d++){var h=Object.getOwnPropertyDescriptor(b,e);h&&Object.defineProperty(a,e,h)}}function z(a,b){for(var c=[],d=1;d<arguments.length;++d)c[d-1]=arguments[d];for(d=0;d<c.length;d++)x(a,c[d]);return a}function da(a,b){for(var c in b)a[c]=b[c]}var A=document.createTextNode(""),ea=0,B=[];(new MutationObserver(function(){for(;B.length;)try{B.shift()()}catch(a){throw A.textContent=ea++,a;}})).observe(A,{characterData:!0});
|
||||
function fa(a){B.push(a);A.textContent=ea++};var D=[],E;function ga(a){E||(E=!0,fa(F));D.push(a)}function F(){E=!1;for(var a=!!D.length;D.length;)D.shift()();return a}F.list=D;var ha=/[&\u00A0"]/g,ia=/[&\u00A0<>]/g;function ja(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}}function ka(a){for(var b={},c=0;c<a.length;c++)b[a[c]]=!0;return b}var la=ka("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),ma=ka("style script xmp iframe noembed noframes plaintext noscript".split(" "));
|
||||
function H(a,b){"template"===a.localName&&(a=a.content);for(var c="",d=b?b(a):a.childNodes,e=0,h=d.length,g;e<h&&(g=d[e]);e++){var f;a:{var k;f=g;k=a;var l=b;switch(f.nodeType){case Node.ELEMENT_NODE:for(var m=f.localName,q="<"+m,y=f.attributes,r=0;k=y[r];r++)q+=" "+k.name+'="'+k.value.replace(ha,ja)+'"';q+=">";f=la[m]?q:q+H(f,l)+"</"+m+">";break a;case Node.TEXT_NODE:f=f.data;f=k&&ma[k.localName]?f:f.replace(ia,ja);break a;case Node.COMMENT_NODE:f="\x3c!--"+f.data+"--\x3e";break a;default:throw window.console.error(f),
|
||||
Error("not implemented");}}c+=f}return c};var I={},J=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),K=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function na(a){var b=[];J.currentNode=a;for(a=J.firstChild();a;)b.push(a),a=J.nextSibling();return b}I.parentNode=function(a){J.currentNode=a;return J.parentNode()};I.firstChild=function(a){J.currentNode=a;return J.firstChild()};I.lastChild=function(a){J.currentNode=a;return J.lastChild()};I.previousSibling=function(a){J.currentNode=a;return J.previousSibling()};
|
||||
I.nextSibling=function(a){J.currentNode=a;return J.nextSibling()};I.childNodes=na;I.parentElement=function(a){K.currentNode=a;return K.parentNode()};I.firstElementChild=function(a){K.currentNode=a;return K.firstChild()};I.lastElementChild=function(a){K.currentNode=a;return K.lastChild()};I.previousElementSibling=function(a){K.currentNode=a;return K.previousSibling()};I.nextElementSibling=function(a){K.currentNode=a;return K.nextSibling()};
|
||||
I.children=function(a){var b=[];K.currentNode=a;for(a=K.firstChild();a;)b.push(a),a=K.nextSibling();return b};I.innerHTML=function(a){return H(a,function(a){return na(a)})};I.textContent=function(a){if(a.nodeType!==Node.ELEMENT_NODE)return a.nodeValue;a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b};var M=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML")||Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML"),N=document.implementation.createHTMLDocument("inert").createElement("div"),O=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),oa={parentElement:{get:function(){var a=this.__shady&&this.__shady.parentNode;a&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:I.parentElement(this)},configurable:!0},parentNode:{get:function(){var a=this.__shady&&
|
||||
this.__shady.parentNode;return void 0!==a?a:I.parentNode(this)},configurable:!0},nextSibling:{get:function(){var a=this.__shady&&this.__shady.nextSibling;return void 0!==a?a:I.nextSibling(this)},configurable:!0},previousSibling:{get:function(){var a=this.__shady&&this.__shady.previousSibling;return void 0!==a?a:I.previousSibling(this)},configurable:!0},className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0},nextElementSibling:{get:function(){if(this.__shady&&
|
||||
void 0!==this.__shady.nextSibling){for(var a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return I.nextElementSibling(this)},configurable:!0},previousElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.previousSibling){for(var a=this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return I.previousElementSibling(this)},configurable:!0}},P={childNodes:{get:function(){var a;if(this.__shady&&void 0!==this.__shady.firstChild){if(!this.__shady.childNodes){this.__shady.childNodes=
|
||||
[];for(var b=this.firstChild;b;b=b.nextSibling)this.__shady.childNodes.push(b)}a=this.__shady.childNodes}else a=I.childNodes(this);a.item=function(b){return a[b]};return a},configurable:!0},childElementCount:{get:function(){return this.children.length},configurable:!0},firstChild:{get:function(){var a=this.__shady&&this.__shady.firstChild;return void 0!==a?a:I.firstChild(this)},configurable:!0},lastChild:{get:function(){var a=this.__shady&&this.__shady.lastChild;return void 0!==a?a:I.lastChild(this)},
|
||||
configurable:!0},textContent:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&a.push(d.textContent);return a.join("")}return I.textContent(this)},set:function(a){if(this.nodeType!==Node.ELEMENT_NODE)this.nodeValue=a;else{for(;this.firstChild;)this.removeChild(this.firstChild);this.appendChild(document.createTextNode(a))}},configurable:!0},firstElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=
|
||||
this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return I.firstElementChild(this)},configurable:!0},lastElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.lastChild){for(var a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return I.lastElementChild(this)},configurable:!0},children:{get:function(){var a;this.__shady&&void 0!==this.__shady.firstChild?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType===
|
||||
Node.ELEMENT_NODE}):a=I.children(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){var a="template"===this.localName?this.content:this;return this.__shady&&void 0!==this.__shady.firstChild?H(a):I.innerHTML(a)},set:function(a){for(var b="template"===this.localName?this.content:this;b.firstChild;)b.removeChild(b.firstChild);for(M&&M.set?M.set.call(N,a):N.innerHTML=a;N.firstChild;)b.appendChild(N.firstChild)},configurable:!0}},pa={shadowRoot:{get:function(){return this.__shady&&
|
||||
this.__shady.root||null},set:function(a){this.__shady=this.__shady||{};this.__shady.root=a},configurable:!0}},Q={activeElement:{get:function(){var a;a=O&&O.get?O.get.call(document):p.g?void 0:document.activeElement;if(a&&a.nodeType){var b=!!u(this);if(this===document||b&&this.host!==a&&this.host.contains(a)){for(b=v(a);b&&b!==this;)a=b.host,b=v(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}};
|
||||
function R(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a,d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function S(a){R(a,oa);R(a,P);R(a,Q)}var qa=p.g?function(){}:function(a){a.__shady&&a.__shady.N||(a.__shady=a.__shady||{},a.__shady.N=!0,R(a,oa,!0))},ra=p.g?function(){}:function(a){a.__shady&&a.__shady.L||(a.__shady=a.__shady||{},a.__shady.L=!0,R(a,P,!0),R(a,pa,!0))};function sa(a,b,c){qa(a);c=c||null;a.__shady=a.__shady||{};b.__shady=b.__shady||{};c&&(c.__shady=c.__shady||{});a.__shady.previousSibling=c?c.__shady.previousSibling:b.lastChild;var d=a.__shady.previousSibling;d&&d.__shady&&(d.__shady.nextSibling=a);(d=a.__shady.nextSibling=c)&&d.__shady&&(d.__shady.previousSibling=a);a.__shady.parentNode=b;c?c===b.__shady.firstChild&&(b.__shady.firstChild=a):(b.__shady.lastChild=a,b.__shady.firstChild||(b.__shady.firstChild=a));b.__shady.childNodes=null}
|
||||
function T(a){if(!a.__shady||void 0===a.__shady.firstChild){a.__shady=a.__shady||{};a.__shady.firstChild=I.firstChild(a);a.__shady.lastChild=I.lastChild(a);ra(a);for(var b=a.__shady.childNodes=I.childNodes(a),c=0,d;c<b.length&&(d=b[c]);c++)d.__shady=d.__shady||{},d.__shady.parentNode=a,d.__shady.nextSibling=b[c+1]||null,d.__shady.previousSibling=b[c-1]||null,qa(d)}};var U={},ta=Element.prototype.insertBefore,ua=Element.prototype.removeChild,va=Element.prototype.setAttribute,wa=Element.prototype.removeAttribute,xa=Element.prototype.cloneNode,ya=Document.prototype.importNode,za=Element.prototype.addEventListener,Aa=Element.prototype.removeEventListener,Ba=Window.prototype.addEventListener,Ca=Window.prototype.removeEventListener,Da=Element.prototype.dispatchEvent;U.appendChild=Element.prototype.appendChild;U.insertBefore=ta;U.removeChild=ua;U.setAttribute=va;
|
||||
U.removeAttribute=wa;U.cloneNode=xa;U.importNode=ya;U.addEventListener=za;U.removeEventListener=Aa;U.T=Ba;U.U=Ca;U.dispatchEvent=Da;var Ea="function"===typeof Event?Event:function(a,b){b=b||{};var c=document.createEvent("Event");c.initEvent(a,!!b.bubbles,!!b.cancelable);return c};function V(a){this.root=a;this.s="slot"}
|
||||
V.prototype.D=function(){var a;if(Fa(this.root)){a=[];for(var b=0,c=this.root.host.firstChild;c;c=c.nextSibling)a[b++]=c;for(var b=[],c=Ga(this.root),d=0,e=c.length,h;d<e&&(h=c[d]);d++){var g=void 0,f,k=h,l=a,m=k.__shady.assignedNodes;m&&Ha(k,!0);k.__shady.assignedNodes=[];for(var q=!1,y=!1,r=0,L=l.length;r<L;r++){f=l[r];var C;if(C=f){var G=f;C=(C=k.getAttribute("name"))?C.trim():"";G=(G=G.getAttribute&&G.getAttribute("slot"))?G.trim():"";C=G==C}C&&(f.__shady.C!=k&&(q=!0),y=k,y.__shady.assignedNodes.push(f),
|
||||
f.__shady.assignedSlot=y,l[r]=void 0,y=!0)}if(!y)for(l=k.childNodes,r=0;r<l.length;r++)f=l[r],f.__shady.C!=k&&(q=!0),L=k,L.__shady.assignedNodes.push(f),f.__shady.assignedSlot=L;if(m){for(f=0;f<m.length;f++)m[f].__shady.C=null;k.__shady.assignedNodes.length<m.length&&(q=!0)}m=k.__shady.assignedNodes;k.__shady.f=[];for(f=0;f<m.length&&(g=m[f]);f++)if(g.localName&&"slot"==g.localName){if(l=g.__shady.f)for(r=0;r<l.length;r++)k.__shady.f.push(l[r])}else k.__shady.f.push(m[f]);q&&Ia(this,k);(g=(g=h.parentNode)&&
|
||||
g.__shady&&g.__shady.root)&&Fa(g)&&b.push(g)}for(c=0;c<a.length;c++)if(h=a[c])h.__shady=h.__shady||{},h.__shady.assignedSlot=void 0,(d=I.parentNode(h))&&U.removeChild.call(d,h);a=b}else a=[];return a};function Ha(a,b){var c=a.__shady.assignedNodes;if(c)for(var d=0;d<c.length;d++){var e=c[d];b&&(e.__shady.C=e.__shady.assignedSlot);e.__shady.assignedSlot===a&&(e.__shady.assignedSlot=null)}}
|
||||
function Ia(a,b){U.dispatchEvent.call(b,new Ea("slotchange"));b.__shady.assignedSlot&&Ia(a,b.__shady.assignedSlot)}V.prototype.u=function(a){return!a.__shady.assignedSlot};var Ja={};function W(a,b){if(a!==Ja)throw new TypeError("Illegal constructor");a=document.createDocumentFragment();a.__proto__=W.prototype;a.M="ShadyRoot";T(b);T(a);b.shadowRoot=a;a.host=b;a.c=!1;a.B=!1;a.b=new V(a);a.update();return a}W.prototype=Object.create(DocumentFragment.prototype);W.prototype.update=function(){var a=this;this.c||(this.c=!0,ga(function(){return Ka(a)}))};
|
||||
function Ka(a){if(a.c){for(var b=a;a;){a.c&&(b=a);a:{var c;c=a;a=c.host.getRootNode();if(u(a))for(var d=c.host.childNodes,e=0;e<d.length;e++)if(c=d[e],c.localName&&"slot"==c.localName)break a;a=void 0}}b._render()}}W.prototype._render=function(){this.B=this.c=!1;this.l||La(this);this.l=!1;this.D();Ma(this.host,Na(this,this.host));for(var a=Ga(this),b=0,c=a.length,d,e;b<c&&(d=a[b]);b++)e=d.parentNode,e!==this.host&&e!==this&&Ma(e,Na(this,e))};W.prototype.D=function(){for(var a=this.b.D(),b=0;b<a.length;b++)a[b]._render()};
|
||||
function La(a){var b=a.a;if(b)for(var c=0,d;c<b.length;c++)d=b[c],d.getRootNode()!==a&&Ha(d);b=a.a=a.b.root.querySelectorAll("slot");for(a=0;a<b.length;a++)d=b[a],d.__shady=d.__shady||{},T(d),T(d.parentNode)}function Na(a,b){var c=[];b=(b.__shady&&b.__shady.root||b).childNodes;for(var d=0;d<b.length;d++){var e=b[d];if(e.localName&&"slot"==e.localName)for(var h=e.__shady.f||(e.__shady.f=[]),g=0;g<h.length;g++){var f=h[g];a.u(e,f)&&c.push(f)}else c.push(e)}return c}
|
||||
W.prototype.u=function(a,b){return this.b.u(a,b)};function Ma(a,b){for(var c=I.childNodes(a),d=aa(b,b.length,c,c.length),e=0,h=0,g;e<d.length&&(g=d[e]);e++){for(var f=0,k;f<g.i.length&&(k=g.i[f]);f++)I.parentNode(k)===a&&U.removeChild.call(a,k),c.splice(g.index+h,1);h-=g.m}for(e=0;e<d.length&&(g=d[e]);e++)for(h=c[g.index],f=g.index;f<g.index+g.m;f++)k=b[f],U.insertBefore.call(a,k,h),c.splice(f,0,k)}function Fa(a){return!(!a.a||!a.a.length)}function Ga(a){a.a||La(a);return a.a}
|
||||
W.prototype.addEventListener=function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.A=this;this.host.addEventListener(a,b,c)};W.prototype.removeEventListener=function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.A=this;this.host.removeEventListener(a,b,c)};W.prototype.getElementById=function(a){return this.querySelector("#"+a)};var Oa=W.prototype;R(Oa,P,!0);R(Oa,Q,!0);function Pa(a){var b=a.__shady&&a.__shady.parentNode,c,d=v(a);if(b||d){c=Qa(a);if(b){a.__shady=a.__shady||{};b.__shady=b.__shady||{};a===b.__shady.firstChild&&(b.__shady.firstChild=a.__shady.nextSibling);a===b.__shady.lastChild&&(b.__shady.lastChild=a.__shady.previousSibling);var e=a.__shady.previousSibling,h=a.__shady.nextSibling;e&&(e.__shady=e.__shady||{},e.__shady.nextSibling=h);h&&(h.__shady=h.__shady||{},h.__shady.previousSibling=e);a.__shady.parentNode=a.__shady.previousSibling=a.__shady.nextSibling=
|
||||
void 0;void 0!==b.__shady.childNodes&&(b.__shady.childNodes=null)}if(e=d){for(var g,e=Ga(d),h=0;h<e.length;h++){var f=e[h],k;a:{for(k=f;k;){if(k==a){k=!0;break a}k=k.parentNode}k=void 0}if(k)for(f=f.assignedNodes({flatten:!0}),k=0;k<f.length;k++){g=!0;var l=f[k],m=I.parentNode(l);m&&U.removeChild.call(m,l)}}e=g}b=b&&d&&b.localName===d.b.s;if(e||b)d.l=!1,X(d)}Ra(a);return c}function Sa(a,b,c){if(a=a.__shady&&a.__shady.h)b&&a.addedNodes.push(b),c&&a.removedNodes.push(c),Ta(a)}
|
||||
function Ua(a){if(a&&a.nodeType){a.__shady=a.__shady||{};var b=a.__shady.F;void 0===b&&(u(a)?b=a:b=(b=a.parentNode)?Ua(b):a,document.documentElement.contains(a)&&(a.__shady.F=b));return b}}function Va(a,b,c){var d,e=c.b.s;if(a.nodeType!==Node.DOCUMENT_FRAGMENT_NODE||a.__noInsertionPoint)a.localName===e&&(T(b),T(a),d=!0);else for(var e=a.querySelectorAll(e),h=0,g,f;h<e.length&&(g=e[h]);h++)f=g.parentNode,f===a&&(f=b),f=Va(g,f,c),d=d||f;return d}
|
||||
function Wa(a){return(a=a&&a.__shady&&a.__shady.root)&&Fa(a)}function Ra(a){if(a.__shady&&void 0!==a.__shady.F)for(var b=a.childNodes,c=0,d=b.length,e;c<d&&(e=b[c]);c++)Ra(e);a.__shady=a.__shady||{};a.__shady.F=void 0}function Qa(a){a=a.parentNode;if(Wa(a))return X(a.__shady.root),!0}function X(a){a.B=!0;a.update()}function Xa(a,b){"slot"===b?Qa(a):"slot"===a.localName&&"name"===b&&(a=v(a))&&a.update()}function Ya(a,b,c){var d=[];Za(a.childNodes,b,c,d);return d}
|
||||
function Za(a,b,c,d){for(var e=0,h=a.length,g;e<h&&(g=a[e]);e++){var f;if(f=g.nodeType===Node.ELEMENT_NODE){f=g;var k=b,l=c,m=d,q=k(f);q&&m.push(f);l&&l(q)?f=q:(Za(f.childNodes,k,l,m),f=void 0)}if(f)break}}var Y=null;
|
||||
function $a(a,b,c){if(c){var d=c.__shady&&c.__shady.parentNode;if(void 0!==d&&d!==a||void 0===d&&I.parentNode(c)!==a)throw Error("Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.");}if(c===b)return b;b.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&((d=b.__shady&&b.__shady.parentNode)?(Sa(d,null,b),Pa(b)):(b.parentNode&&U.removeChild.call(b.parentNode,b),Ra(b)));var d=c,e=v(a),h;e&&(b.__noInsertionPoint&&!e.B&&(e.l=!0),h=Va(b,a,
|
||||
e))&&(e.l=!1);if(a.__shady&&void 0!==a.__shady.firstChild)if(ra(a),a.__shady=a.__shady||{},void 0!==a.__shady.firstChild&&(a.__shady.childNodes=null),b.nodeType===Node.DOCUMENT_FRAGMENT_NODE){for(var g=b.childNodes,f=0;f<g.length;f++)sa(g[f],a,d);b.__shady=b.__shady||{};g=void 0!==b.__shady.firstChild?null:void 0;b.__shady.firstChild=b.__shady.lastChild=g;b.__shady.childNodes=g}else sa(b,a,d);var g=h,f=e&&e.b.s||"",k=b.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&!b.__noInsertionPoint&&f&&b.querySelector(f);
|
||||
h=k&&k.parentNode.nodeType!==Node.DOCUMENT_FRAGMENT_NODE;((k=k||b.localName===f)||a.localName===f||g)&&e&&X(e);(e=Wa(a))&&X(a.__shady&&a.__shady.root);if(!(e||k&&!h||a.__shady.root||d&&u(d.parentNode)&&d.parentNode.c)){if(c&&(d=v(c))){var l;if(c.localName===d.b.s)a:{d=c.assignedNodes({flatten:!0});e=Ua(c);h=0;for(g=d.length;h<g&&(l=d[h]);h++)if(e.u(c,l))break a;l=void 0}else l=c;c=l}l=u(a)?a.host:a;c?U.insertBefore.call(l,b,c):U.appendChild.call(l,b)}Sa(a,b);return b}
|
||||
function ab(a,b){if(a.ownerDocument!==document)return U.importNode.call(document,a,b);var c=U.importNode.call(document,a,!1);if(b){a=a.childNodes;b=0;for(var d;b<a.length;b++)d=ab(a[b],!0),c.appendChild(d)}return c};function bb(){this.a=!1;this.addedNodes=[];this.removedNodes=[];this.o=new Set}function Ta(a){a.a||(a.a=!0,fa(function(){cb(a)}))}function cb(a){if(a.a){a.a=!1;var b=a.takeRecords();b.length&&a.o.forEach(function(a){a(b)})}}bb.prototype.takeRecords=function(){if(this.addedNodes.length||this.removedNodes.length){var a=[{addedNodes:this.addedNodes,removedNodes:this.removedNodes}];this.addedNodes=[];this.removedNodes=[];return a}return[]};
|
||||
function db(a,b){a.__shady=a.__shady||{};a.__shady.h||(a.__shady.h=new bb);a.__shady.h.o.add(b);var c=a.__shady.h;return{O:b,R:c,P:a,takeRecords:function(){return c.takeRecords()}}}function eb(a){var b=a&&a.R;b&&(b.o.delete(a.O),b.o.size||(a.P.__shady.h=null))}
|
||||
function fb(a,b){var c=b.getRootNode();return a.map(function(a){var b=c===a.target.getRootNode();if(b&&a.addedNodes){if(b=Array.from(a.addedNodes).filter(function(a){return c===a.getRootNode()}),b.length)return a=Object.create(a),Object.defineProperty(a,"addedNodes",{value:b,configurable:!0}),a}else if(b)return a}).filter(function(a){return a})};var gb={blur:!0,focus:!0,focusin:!0,focusout:!0,click:!0,dblclick:!0,mousedown:!0,mouseenter:!0,mouseleave:!0,mousemove:!0,mouseout:!0,mouseover:!0,mouseup:!0,wheel:!0,beforeinput:!0,input:!0,keydown:!0,keyup:!0,compositionstart:!0,compositionupdate:!0,compositionend:!0,touchstart:!0,touchend:!0,touchmove:!0,touchcancel:!0,pointerover:!0,pointerenter:!0,pointerdown:!0,pointermove:!0,pointerup:!0,pointercancel:!0,pointerout:!0,pointerleave:!0,gotpointercapture:!0,lostpointercapture:!0,dragstart:!0,
|
||||
drag:!0,dragenter:!0,dragleave:!0,dragover:!0,drop:!0,dragend:!0,DOMActivate:!0,DOMFocusIn:!0,DOMFocusOut:!0,keypress:!0};function hb(a,b){var c=[],d=a;for(a=a===window?window:a.getRootNode();d;)c.push(d),d=d.assignedSlot?d.assignedSlot:d.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&d.host&&(b||d!==a)?d.host:d.parentNode;c[c.length-1]===document&&c.push(window);return c}
|
||||
function ib(a,b){if(!u)return a;a=hb(a,!0);for(var c=0,d,e,h,g;c<b.length;c++)if(d=b[c],h=d===window?window:d.getRootNode(),h!==e&&(g=a.indexOf(h),e=h),!u(h)||-1<g)return d}
|
||||
var jb={get composed(){!1!==this.isTrusted&&void 0===this.v&&(this.v=gb[this.type]);return this.v||!1},composedPath:function(){this.G||(this.G=hb(this.__target,this.composed));return this.G},get target(){return ib(this.currentTarget,this.composedPath())},get relatedTarget(){if(!this.H)return null;this.I||(this.I=hb(this.H,!0));return ib(this.currentTarget,this.I)},stopPropagation:function(){Event.prototype.stopPropagation.call(this);this.w=!0},stopImmediatePropagation:function(){Event.prototype.stopImmediatePropagation.call(this);
|
||||
this.w=this.K=!0}};function kb(a){function b(b,d){b=new a(b,d);b.v=d&&!!d.composed;return b}da(b,a);b.prototype=a.prototype;return b}var lb={focus:!0,blur:!0};function mb(a,b,c){if(c=b.__handlers&&b.__handlers[a.type]&&b.__handlers[a.type][c])for(var d=0,e;(e=c[d])&&a.target!==a.relatedTarget&&(e.call(b,a),!a.K);d++);}
|
||||
function nb(a){var b=a.composedPath(),c;Object.defineProperty(a,"currentTarget",{get:function(){return c},configurable:!0});for(var d=b.length-1;0<=d;d--)if(c=b[d],mb(a,c,"capture"),a.w)return;Object.defineProperty(a,"eventPhase",{get:function(){return Event.AT_TARGET}});for(var e,d=0;d<b.length;d++)if(c=b[d],!d||c.shadowRoot&&c.shadowRoot===e)if(mb(a,c,"bubble"),c!==window&&(e=c.getRootNode()),a.w)break}
|
||||
function ob(a,b,c,d,e,h){for(var g=0;g<a.length;g++){var f=a[g],k=f.type,l=f.capture,m=f.once,q=f.passive;if(b===f.node&&c===k&&d===l&&e===m&&h===q)return g}return-1}
|
||||
function pb(a,b,c){if(b){var d,e,h;"object"===typeof c?(d=!!c.capture,e=!!c.once,h=!!c.passive):(d=!!c,h=e=!1);var g=c&&c.A||this,f=b.j;if(f){if(-1<ob(f,g,a,d,e,h))return}else b.j=[];f=function(d){e&&this.removeEventListener(a,b,c);d.__target||qb(d);var f;g!==this&&(f=Object.getOwnPropertyDescriptor(d,"currentTarget"),Object.defineProperty(d,"currentTarget",{get:function(){return g},configurable:!0}));if(d.composed||-1<d.composedPath().indexOf(g))if(d.target===d.relatedTarget)d.eventPhase===Event.BUBBLING_PHASE&&
|
||||
d.stopImmediatePropagation();else if(d.eventPhase===Event.CAPTURING_PHASE||d.bubbles||d.target===g){var h="object"===typeof b&&b.handleEvent?b.handleEvent(d):b.call(g,d);g!==this&&(f?(Object.defineProperty(d,"currentTarget",f),f=null):delete d.currentTarget);return h}};b.j.push({node:this,type:a,capture:d,once:e,passive:h,V:f});lb[a]?(this.__handlers=this.__handlers||{},this.__handlers[a]=this.__handlers[a]||{capture:[],bubble:[]},this.__handlers[a][d?"capture":"bubble"].push(f)):(this instanceof
|
||||
Window?U.T:U.addEventListener).call(this,a,f,c)}}function rb(a,b,c){if(b){var d,e,h;"object"===typeof c?(d=!!c.capture,e=!!c.once,h=!!c.passive):(d=!!c,h=e=!1);var g=c&&c.A||this,f=void 0,k;k=null;try{k=b.j}catch(l){}k&&(e=ob(k,g,a,d,e,h),-1<e&&(f=k.splice(e,1)[0].V,k.length||(b.j=void 0)));(this instanceof Window?U.U:U.removeEventListener).call(this,a,f||b,c);f&&lb[a]&&this.__handlers&&this.__handlers[a]&&(a=this.__handlers[a][d?"capture":"bubble"],f=a.indexOf(f),-1<f&&a.splice(f,1))}}
|
||||
function sb(){for(var a in lb)window.addEventListener(a,function(a){a.__target||(qb(a),nb(a))},!0)}function qb(a){a.__target=a.target;a.H=a.relatedTarget;if(p.g){var b=Object.getPrototypeOf(a);if(!b.hasOwnProperty("__patchProto")){var c=Object.create(b);c.W=b;x(c,jb);b.__patchProto=c}a.__proto__=b.__patchProto}else x(a,jb)}var tb=kb(window.Event),ub=kb(window.CustomEvent),vb=kb(window.MouseEvent);function wb(a){var b=a.getRootNode();u(b)&&Ka(b);return a.__shady&&a.__shady.assignedSlot||null}
|
||||
var xb={addEventListener:pb.bind(window),removeEventListener:rb.bind(window)},yb={addEventListener:pb,removeEventListener:rb,appendChild:function(a){return $a(this,a)},insertBefore:function(a,b){return $a(this,a,b)},removeChild:function(a){if(a.parentNode!==this)throw Error("The node to be removed is not a child of this node: "+a);if(!Pa(a)){var b=u(this)?this.host:this,c=I.parentNode(a);b===c&&U.removeChild.call(b,a)}Sa(this,null,a);return a},replaceChild:function(a,b){this.insertBefore(a,b);this.removeChild(b);
|
||||
return a},cloneNode:function(a){var b;if("template"==this.localName)b=U.cloneNode.call(this,a);else if(b=U.cloneNode.call(this,!1),a){a=this.childNodes;for(var c=0,d;c<a.length;c++)d=a[c].cloneNode(!0),b.appendChild(d)}return b},getRootNode:function(){return Ua(this)},get isConnected(){var a=this.ownerDocument;if(a&&a.contains&&a.contains(this)||(a=a.documentElement)&&a.contains&&a.contains(this))return!0;for(a=this;a&&!(a instanceof Document);)a=a.parentNode||(a instanceof W?a.host:void 0);return!!(a&&
|
||||
a instanceof Document)},dispatchEvent:function(a){F();return U.dispatchEvent.call(this,a)}},zb={get assignedSlot(){return wb(this)}},Ab={querySelector:function(a){return Ya(this,function(b){return ca.call(b,a)},function(a){return!!a})[0]||null},querySelectorAll:function(a){return Ya(this,function(b){return ca.call(b,a)})}},Bb={assignedNodes:function(a){if("slot"===this.localName){var b=this.getRootNode();u(b)&&Ka(b);return this.__shady?(a&&a.flatten?this.__shady.f:this.__shady.assignedNodes)||[]:
|
||||
[]}}},Cb=z({setAttribute:function(a,b){Y||(Y=window.ShadyCSS&&window.ShadyCSS.ScopingShim);Y&&"class"===a?Y.setElementClass(this,b):(U.setAttribute.call(this,a,b),Xa(this,a))},removeAttribute:function(a){U.removeAttribute.call(this,a);Xa(this,a)},attachShadow:function(a){if(!this)throw"Must provide a host.";if(!a)throw"Not enough arguments.";return new W(Ja,this)},get slot(){return this.getAttribute("slot")},set slot(a){this.setAttribute("slot",a)},get assignedSlot(){return wb(this)}},Ab,Bb);
|
||||
Object.defineProperties(Cb,pa);var Db=z({importNode:function(a,b){return ab(a,b)},getElementById:function(a){return this.querySelector("#"+a)}},Ab);Object.defineProperties(Db,{_activeElement:Q.activeElement});var Eb=HTMLElement.prototype.blur,Fb=z({blur:function(){var a=this.shadowRoot;(a=a&&a.activeElement)?a.blur():Eb.call(this)}});
|
||||
function Z(a,b){for(var c=Object.getOwnPropertyNames(b),d=0;d<c.length;d++){var e=c[d],h=Object.getOwnPropertyDescriptor(b,e);h.value?a[e]=h.value:Object.defineProperty(a,e,h)}};if(p.J){window.ShadyDOM={inUse:p.J,patch:function(a){return a},isShadyRoot:u,enqueue:ga,flush:F,settings:p,filterMutations:fb,observeChildren:db,unobserveChildren:eb,nativeMethods:U,nativeTree:I};window.Event=tb;window.CustomEvent=ub;window.MouseEvent=vb;sb();var Gb=window.customElements&&window.customElements.nativeHTMLElement||HTMLElement;Z(window.Node.prototype,yb);Z(window.Window.prototype,xb);Z(window.Text.prototype,zb);Z(window.DocumentFragment.prototype,Ab);Z(window.Element.prototype,Cb);Z(window.Document.prototype,
|
||||
Db);window.HTMLSlotElement&&Z(window.HTMLSlotElement.prototype,Bb);Z(Gb.prototype,Fb);p.g&&(S(window.Node.prototype),S(window.Text.prototype),S(window.DocumentFragment.prototype),S(window.Element.prototype),S(Gb.prototype),S(window.Document.prototype),window.HTMLSlotElement&&S(window.HTMLSlotElement.prototype));window.ShadowRoot=W};
|
||||
}).call(self);
|
||||
|
||||
//# sourceMappingURL=shadydom.min.js.map
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/example1/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Collapsible region | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Collapsible region</h1>
|
||||
|
||||
<div class="tags">
|
||||
<strong aria-hidden="true">Tags: </strong>
|
||||
<ul aria-label="tags">
|
||||
|
||||
<li>
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
<a href="/tags/animated">animated</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
<a href="/tags/forms">forms</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Fusce ac sodales magna. </p>
|
||||
|
||||
<p>Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Vestibulum <code>text-align : justify</code> lacus. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/example2/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Tab interface | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Tab interface</h1>
|
||||
|
||||
<div class="tags">
|
||||
<strong aria-hidden="true">Tags: </strong>
|
||||
<ul aria-label="tags">
|
||||
|
||||
<li>
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
<a href="/tags/animated">animated</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
<a href="/tags/typography">typography</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Vestibulum sit amet ipsum lacus… Nulla lobortis tempus commodo. Maecenas sit <q cite='http://www.heydonworks.com'>amet tellus nec mi gravida posuere</q> non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. </p>
|
||||
|
||||
<p>Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Nulla lobortis tempus commodo. Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. Lorem ipsum dolor sit amet, — consectetur adipiscing — elit. Nulla lobortis tempus <strong>commodo</strong>. </p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Patterns | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
Patterns
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/example1/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Collapsible region
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Tab interface
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Patterns on Inclusive Pattern Docs</title>
|
||||
<link>/patterns/</link>
|
||||
<description>Recent content in Patterns on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/patterns/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Collapsible region</title>
|
||||
<link>/patterns/example1/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example1/</guid>
|
||||
<description>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Fusce ac sodales magna. Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris).</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Tab interface</title>
|
||||
<link>/patterns/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example2/</guid>
|
||||
<description>Vestibulum sit amet ipsum lacus&hellip; Nulla lobortis tempus commodo. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Nulla lobortis tempus commodo. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &mdash; consectetur adipiscing &mdash; elit.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,310 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/landmarks/example-one/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Page region navigation landmark | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Page region navigation landmark</h1>
|
||||
|
||||
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="principles ">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://inclusivedesignprinciples.org#add-value">Add value</a>:</strong> <em>Consider the value of features and how they improve the experience for different users.</em>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||||
|
||||
<p>
|
||||
|
||||
|
||||
<ul class="wcag ">
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://www.w3.org/TR/WCAG20/#text-equiv-all">
|
||||
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||||
1.1.1 Non-text Content</a> (level A)
|
||||
|
||||
</strong>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/landmarks/example2/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Footer | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Footer</h1>
|
||||
|
||||
|
||||
|
||||
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
|
||||
|
||||
|
||||
<iframe height='300' scrolling='no' title="code demonstration with codePen" src='//codepen.io/heydon/embed/VpVNKW/?height=265&theme-id=dark&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
|
||||
<div>
|
||||
<a href="//codepen.io/heydon/pen/VpVNKW">See the demo on codePen</a>
|
||||
</div>
|
||||
</iframe>
|
||||
|
||||
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||||
|
||||
<p><a href="/patterns/widgets/example1/">Link to widgets example 1</a></p>
|
||||
|
||||
<h2 id="figure-example">Figure example</h2>
|
||||
|
||||
|
||||
<figure role="group" aria-describedby="WW91IGFyZSA8ZW0+d3Jv">
|
||||
<p>I LOVE FASCISM!?</p>
|
||||
|
||||
<figcaption id="WW91IGFyZSA8ZW0+d3Jv">
|
||||
You are <em>wrong</em>.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||||
|
||||
|
||||
<figure role="group" aria-describedby="VGhpcyBpcyBnb29kIG5l">
|
||||
<p>I HATE FASCISM!?</p>
|
||||
|
||||
<figcaption id="VGhpcyBpcyBnb29kIG5l">
|
||||
This is good news.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="code-block-example">Code block example</h2>
|
||||
|
||||
<pre class="language-css line-numbers"><code class="language-css" data-codeblock-shortcode>
|
||||
.expandable + .expandable {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 2px solid;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||||
|
||||
<h2 id="external-refs-examples">External refs examples</h2>
|
||||
|
||||
<h3 id="wcag">WCAG</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="wcag with-desc">
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://www.w3.org/TR/WCAG20/#text-equiv-all">
|
||||
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||||
1.1.1 Non-text Content</a> (level A)
|
||||
:
|
||||
</strong>
|
||||
|
||||
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (
|
||||
|
||||
<ul>
|
||||
|
||||
<li><strong>Controls, Input:</strong>
|
||||
If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
|
||||
</li>
|
||||
|
||||
<li><strong>Time-Based Media:</strong>
|
||||
If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
|
||||
</li>
|
||||
|
||||
<li><strong>Test:</strong>
|
||||
If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
|
||||
</li>
|
||||
|
||||
<li><strong>Sensory:</strong>
|
||||
If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
|
||||
</li>
|
||||
|
||||
<li><strong>CAPTCHA:</strong>
|
||||
If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
|
||||
</li>
|
||||
|
||||
<li><strong>Decoration, Formatting, Invisible:</strong>
|
||||
If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic">
|
||||
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||||
1.3.1 Info and Relationships</a> (level A)
|
||||
:
|
||||
</strong>
|
||||
|
||||
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
|
||||
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||||
4.1.2 Name, Role, Value</a> (level A)
|
||||
:
|
||||
</strong>
|
||||
|
||||
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="inclusive-design-principles">Inclusive Design Principles</h3>
|
||||
|
||||
<p>
|
||||
|
||||
|
||||
|
||||
<ul class="principles with-desc">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://inclusivedesignprinciples.org#be-consistent">Be consistent</a>:</strong> <em>Use familiar conventions and apply them consistently.</em>
|
||||
|
||||
<p>Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.</p>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<strong><a href="https://inclusivedesignprinciples.org#add-value">Add value</a>:</strong> <em>Consider the value of features and how they improve the experience for different users.</em>
|
||||
|
||||
<p>Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API's, and how integration with connected devices or a second screen could provide choice.</p>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<div class="expandable-section">
|
||||
|
||||
<h2>
|
||||
|
||||
<button aria-expanded="false" data-expands="expandable-PHA+PHA+TG9yZW0gaXBz">
|
||||
<span class="expandable-label">Another expandable</span>
|
||||
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
||||
<g transform="translate(0 -981.5)">
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
||||
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</h2>
|
||||
|
||||
<div id="expandable-PHA+PHA+TG9yZW0gaXBz" hidden>
|
||||
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla.</p></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/landmarks/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Landmarks | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
Landmarks
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/landmarks/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Footer
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/landmarks/example-one/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Page region navigation landmark
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Landmarks on Inclusive Pattern Docs</title>
|
||||
<link>/patterns/landmarks/</link>
|
||||
<description>Recent content in Landmarks on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/patterns/landmarks/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Footer</title>
|
||||
<link>/patterns/landmarks/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/landmarks/example2/</guid>
|
||||
<description>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec a congue leo.
|
||||
See the demo on codePen Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Page region navigation landmark</title>
|
||||
<link>/patterns/landmarks/example-one/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/landmarks/example-one/</guid>
|
||||
<description>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec a congue leo.
|
||||
Add value: Consider the value of features and how they improve the experience for different users. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/widgets/example1/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Card | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Card</h1>
|
||||
|
||||
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus – nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>
|
||||
|
||||
<p>Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Donec et nisi dictum felis sollicitudin congue. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. </p>
|
||||
|
||||
<p>Aliquam tincidunt velit sit (amet ante hendrerit tempus). Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. Curabitur consectetur faucibus nisl ac varius. Donec et nisi dictum felis, sollicitudin, congue Heydon™. Nulla auctor eleifend turpis consequat pharetra. Donec et nisi dictum <a href='#'>felis sollicitudin</a> congue. </p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,403 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/widgets/example2/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Menu button and menu | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" aria-current="page">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>Menu button and menu</h1>
|
||||
|
||||
<div class="tags">
|
||||
<strong aria-hidden="true">Tags: </strong>
|
||||
<ul aria-label="tags">
|
||||
|
||||
<li>
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
<a href="/tags/animated">animated</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
<a href="/tags/interactive">interactive</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<a class="pattern-link" href="/patterns/widgets/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
|
||||
<use xlink:href="#bookmark"></use>
|
||||
</svg>
|
||||
Menu button and menu
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
, id molestie magna risus ut nunc. Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.</p>
|
||||
|
||||
|
||||
<div class="demo-container">
|
||||
|
||||
<div class="demo" id="demo-CiZsdDtidXR0b24"></div>
|
||||
|
||||
|
||||
<template id="template-CiZsdDtidXR0b24">
|
||||
|
||||
<button aria-pressed="false">Press</button>
|
||||
<style>
|
||||
button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[aria-pressed="true"] {
|
||||
box-shadow: inset 0 0 0.5rem #000;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var toggle = demo.querySelector('[aria-pressed]');
|
||||
console.log(toggle);
|
||||
|
||||
toggle.addEventListener('click', (e) => {
|
||||
let pressed = e.target.getAttribute('aria-pressed') === 'true';
|
||||
e.target.setAttribute('aria-pressed', !pressed);
|
||||
});
|
||||
</script>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
(function() {
|
||||
var root = document.getElementById('demo-CiZsdDtidXR0b24');
|
||||
if (document.head.attachShadow) {
|
||||
root.attachShadow({mode: 'open'});
|
||||
var template = document.getElementById('template-CiZsdDtidXR0b24');
|
||||
var script = template.content.querySelector('script');
|
||||
if (script) {
|
||||
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24\').shadowRoot; ${script.textContent} })()`
|
||||
}
|
||||
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||||
} else {
|
||||
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<pre class="language-css line-numbers"><code class="language-css" data-codeblock-shortcode>
|
||||
.expandable + .expandable {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 2px solid;
|
||||
}
|
||||
|
||||
.expandable + .expandable {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 2px solid;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
|
||||
<pre><code class="language-html">{{ .Inner }}
|
||||
</code></pre>
|
||||
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
|
||||
|
||||
|
||||
<div class="demo-container">
|
||||
|
||||
<figure role="group" aria-labelledby="caption-CiZsdDtwJmd0O1l">
|
||||
|
||||
<div class="demo" id="demo-CiZsdDtwJmd0O1l"></div>
|
||||
|
||||
<figcaption id="caption-CiZsdDtwJmd0O1l">Example caption</figcaption>
|
||||
|
||||
|
||||
</figure>
|
||||
|
||||
<template id="template-CiZsdDtwJmd0O1l">
|
||||
|
||||
<p>You must be having a laugh.</p>
|
||||
<style>
|
||||
p {
|
||||
color: red !important;
|
||||
font-family: cursive;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
demo.querySelector('p').addEventListener('click', function() {
|
||||
alert('hello');
|
||||
})
|
||||
</script>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
(function() {
|
||||
var root = document.getElementById('demo-CiZsdDtwJmd0O1l');
|
||||
if (document.head.attachShadow) {
|
||||
root.attachShadow({mode: 'open'});
|
||||
var template = document.getElementById('template-CiZsdDtwJmd0O1l');
|
||||
var script = template.content.querySelector('script');
|
||||
if (script) {
|
||||
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtwJmd0O1l\').shadowRoot; ${script.textContent} })()`
|
||||
}
|
||||
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||||
} else {
|
||||
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. Nulla lobortis tempus commodo. </p>
|
||||
|
||||
|
||||
<div class="demo-container">
|
||||
|
||||
<div class="demo" id="demo-CiZsdDtwJmd0O0V"></div>
|
||||
|
||||
|
||||
<template id="template-CiZsdDtwJmd0O0V">
|
||||
|
||||
<p>Everyone must not be having a laugh.</p>
|
||||
<style>
|
||||
p {
|
||||
color: blue !important;
|
||||
font-family: cursive;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
demo.querySelector('p').addEventListener('click', function() {
|
||||
alert('fuck');
|
||||
})
|
||||
</script>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
(function() {
|
||||
var root = document.getElementById('demo-CiZsdDtwJmd0O0V');
|
||||
if (document.head.attachShadow) {
|
||||
root.attachShadow({mode: 'open'});
|
||||
var template = document.getElementById('template-CiZsdDtwJmd0O0V');
|
||||
var script = template.content.querySelector('script');
|
||||
if (script) {
|
||||
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtwJmd0O0V\').shadowRoot; ${script.textContent} })()`
|
||||
}
|
||||
root.shadowRoot.appendChild(document.importNode(template.content, true));
|
||||
} else {
|
||||
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ticks">
|
||||
<ul>
|
||||
<li>Something good</li>
|
||||
<li>Something else good</li>
|
||||
<li>Another great thing</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna … </p>
|
||||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
<img src="/images/icon-info.svg" alt="">
|
||||
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique.</p>
|
||||
|
||||
<p>Purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna …</p>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna … </p>
|
||||
|
||||
<aside aria-label="warning" class="note warning">
|
||||
<div>
|
||||
<img src="/images/icon-warning.svg" alt="">
|
||||
<p>Donec et nisi dictum felis sollicitudin congue. Potenti et eros sed justo commodo bibendum non at nunc. Nulla lobortis tempus commodo. Duis sagittis, est sit amet gravida tristique.</p>
|
||||
|
||||
<p>Purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac! Fusce ac sodales magna …</p>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/patterns/widgets/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Widgets | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
Widgets
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/widgets/example1/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Card
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/widgets/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Menu button and menu
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/prism.js"></script>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Widgets on Inclusive Pattern Docs</title>
|
||||
<link>/patterns/widgets/</link>
|
||||
<description>Recent content in Widgets on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/patterns/widgets/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Card</title>
|
||||
<link>/patterns/widgets/example1/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/widgets/example1/</guid>
|
||||
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus &ndash; nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim&hellip; tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Fusce ac sodales CSS magna. Maecenas sit amet tellus nec mi gravida posuere non pretium magna.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Menu button and menu</title>
|
||||
<link>/patterns/widgets/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/widgets/example2/</guid>
|
||||
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna Menu button and menu , id molestie magna risus ut nunc. Fusce ac sodales CSS magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.
|
||||
Press button { background: blue; color: white; border: 0; padding: 0.5rem 1rem; text-transform: uppercase; } [aria-pressed="</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<url>
|
||||
<loc>/tags/animated/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/widgets/example1/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/categories/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/example1/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/landmarks/example2/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/tags/forms/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/tags/interactive/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/landmarks/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/widgets/example2/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/landmarks/example-one/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/example2/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/tags/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/</loc>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/tags/typography/</loc>
|
||||
<priority>0</priority>
|
||||
</url>
|
||||
|
||||
<url>
|
||||
<loc>/patterns/widgets/</loc>
|
||||
</url>
|
||||
|
||||
</urlset>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/tags/animated/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Animated | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
|
||||
Animated
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/example1/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Collapsible region
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/widgets/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Menu button and menu
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Tab interface
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Animated on Inclusive Pattern Docs</title>
|
||||
<link>/tags/animated/</link>
|
||||
<description>Recent content in Animated on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/tags/animated/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Collapsible region</title>
|
||||
<link>/patterns/example1/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example1/</guid>
|
||||
<description>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Fusce ac sodales magna. Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris).</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Menu button and menu</title>
|
||||
<link>/patterns/widgets/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/widgets/example2/</guid>
|
||||
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna Menu button and menu , id molestie magna risus ut nunc. Fusce ac sodales CSS magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.
|
||||
Press button { background: blue; color: white; border: 0; padding: 0.5rem 1rem; text-transform: uppercase; } [aria-pressed="</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Tab interface</title>
|
||||
<link>/patterns/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example2/</guid>
|
||||
<description>Vestibulum sit amet ipsum lacus&hellip; Nulla lobortis tempus commodo. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Nulla lobortis tempus commodo. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &mdash; consectetur adipiscing &mdash; elit.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/tags/forms/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Forms | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
|
||||
Forms
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/example1/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Collapsible region
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Forms on Inclusive Pattern Docs</title>
|
||||
<link>/tags/forms/</link>
|
||||
<description>Recent content in Forms on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/tags/forms/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Collapsible region</title>
|
||||
<link>/patterns/example1/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example1/</guid>
|
||||
<description>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Fusce ac sodales magna. Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris).</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Tags on Inclusive Pattern Docs</title>
|
||||
<link>/tags/</link>
|
||||
<description>Recent content in Tags on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/tags/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Animated</title>
|
||||
<link>/tags/animated/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/tags/animated/</guid>
|
||||
<description></description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Forms</title>
|
||||
<link>/tags/forms/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/tags/forms/</guid>
|
||||
<description></description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Interactive</title>
|
||||
<link>/tags/interactive/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/tags/interactive/</guid>
|
||||
<description></description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Typography</title>
|
||||
<link>/tags/typography/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/tags/typography/</guid>
|
||||
<description></description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/tags/interactive/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Interactive | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
|
||||
Interactive
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/widgets/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Menu button and menu
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Interactive on Inclusive Pattern Docs</title>
|
||||
<link>/tags/interactive/</link>
|
||||
<description>Recent content in Interactive on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/tags/interactive/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Menu button and menu</title>
|
||||
<link>/patterns/widgets/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/widgets/example2/</guid>
|
||||
<description>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna Menu button and menu , id molestie magna risus ut nunc. Fusce ac sodales CSS magna. Nulla auctor eleifend turpis consequat pharetra. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris.
|
||||
Press button { background: blue; color: white; border: 0; padding: 0.5rem 1rem; text-transform: uppercase; } [aria-pressed="</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="/tags/typography/">
|
||||
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/css/prism.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||||
<title>
|
||||
|
||||
Typography | Inclusive Pattern Docs
|
||||
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="intro-and-nav" role="banner">
|
||||
<div>
|
||||
<div class="intro">
|
||||
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||||
<img src="/images/logo.png" alt="">
|
||||
</a>
|
||||
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||
</div>
|
||||
<nav class="patterns" role="navigation">
|
||||
|
||||
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Collapsible region</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Tab interface</span>
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<h3>Landmarks</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Footer</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/landmarks/example-one/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Page region navigation landmark</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<h3>Widgets</h3>
|
||||
<ul>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example1/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Card</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="pattern">
|
||||
<a href="/patterns/widgets/example2/" >
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
<span>Menu button and menu</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-and-footer">
|
||||
<div>
|
||||
|
||||
<main id="main">
|
||||
<h1>
|
||||
|
||||
|
||||
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||||
<use xlink:href="#tag"></use>
|
||||
</svg>
|
||||
|
||||
Typography
|
||||
</h1>
|
||||
<ul class="patterns-list">
|
||||
|
||||
<li>
|
||||
<h2>
|
||||
<a href="/patterns/example2/">
|
||||
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||||
Tab interface
|
||||
</a>
|
||||
</h2>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer role="contentinfo">
|
||||
By Heydon Pickering
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/dom-scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Typography on Inclusive Pattern Docs</title>
|
||||
<link>/tags/typography/</link>
|
||||
<description>Recent content in Typography on Inclusive Pattern Docs</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en-us</language>
|
||||
|
||||
<atom:link href="/tags/typography/index.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
|
||||
<item>
|
||||
<title>Tab interface</title>
|
||||
<link>/patterns/example2/</link>
|
||||
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>/patterns/example2/</guid>
|
||||
<description>Vestibulum sit amet ipsum lacus&hellip; Nulla lobortis tempus commodo. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id CTRL + V massa. Nulla lobortis tempus commodo. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Lorem ipsum dolor sit amet, &mdash; consectetur adipiscing &mdash; elit.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
Loading…
Reference in New Issue