From 8f00cbc49018c2759dcadfa9c965f5f9d549b37a Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Mon, 26 Jun 2017 16:21:58 +0100 Subject: [PATCH] Make git acknowledge public folder --- public/categories/index.xml | 14 + public/css/images/icon-tick.svg | 6 + public/css/images/stripe.svg | 5 + public/css/prism.css | 179 ++++++ public/css/styles.css | 564 ++++++++++++++++++ public/images/icon-info.svg | 9 + public/images/icon-tag.svg | 5 + public/images/icon-warning.svg | 7 + public/images/logo.png | Bin 0 -> 11614 bytes public/index.html | 138 +++++ public/index.xml | 80 +++ public/js/dom-scripts.js | 22 + public/js/prism.js | 7 + public/js/shadyDOM.min.js | 68 +++ public/patterns/example1/index.html | 164 +++++ public/patterns/example2/index.html | 164 +++++ public/patterns/index.html | 165 +++++ public/patterns/index.xml | 32 + .../patterns/landmarks/example-one/index.html | 310 ++++++++++ public/patterns/landmarks/example2/index.html | 453 ++++++++++++++ public/patterns/landmarks/index.html | 165 +++++ public/patterns/landmarks/index.xml | 34 ++ public/patterns/widgets/example1/index.html | 145 +++++ public/patterns/widgets/example2/index.html | 403 +++++++++++++ public/patterns/widgets/index.html | 165 +++++ public/patterns/widgets/index.xml | 33 + public/sitemap.xml | 81 +++ public/tags/animated/index.html | 177 ++++++ public/tags/animated/index.xml | 42 ++ public/tags/forms/index.html | 157 +++++ public/tags/forms/index.xml | 23 + public/tags/index.xml | 50 ++ public/tags/interactive/index.html | 157 +++++ public/tags/interactive/index.xml | 24 + public/tags/typography/index.html | 157 +++++ public/tags/typography/index.xml | 23 + 36 files changed, 4228 insertions(+) create mode 100644 public/categories/index.xml create mode 100644 public/css/images/icon-tick.svg create mode 100644 public/css/images/stripe.svg create mode 100644 public/css/prism.css create mode 100644 public/css/styles.css create mode 100644 public/images/icon-info.svg create mode 100644 public/images/icon-tag.svg create mode 100644 public/images/icon-warning.svg create mode 100644 public/images/logo.png create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/js/dom-scripts.js create mode 100644 public/js/prism.js create mode 100644 public/js/shadyDOM.min.js create mode 100644 public/patterns/example1/index.html create mode 100644 public/patterns/example2/index.html create mode 100644 public/patterns/index.html create mode 100644 public/patterns/index.xml create mode 100644 public/patterns/landmarks/example-one/index.html create mode 100644 public/patterns/landmarks/example2/index.html create mode 100644 public/patterns/landmarks/index.html create mode 100644 public/patterns/landmarks/index.xml create mode 100644 public/patterns/widgets/example1/index.html create mode 100644 public/patterns/widgets/example2/index.html create mode 100644 public/patterns/widgets/index.html create mode 100644 public/patterns/widgets/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/animated/index.html create mode 100644 public/tags/animated/index.xml create mode 100644 public/tags/forms/index.html create mode 100644 public/tags/forms/index.xml create mode 100644 public/tags/index.xml create mode 100644 public/tags/interactive/index.html create mode 100644 public/tags/interactive/index.xml create mode 100644 public/tags/typography/index.html create mode 100644 public/tags/typography/index.xml diff --git a/public/categories/index.xml b/public/categories/index.xml new file mode 100644 index 0000000..a05405a --- /dev/null +++ b/public/categories/index.xml @@ -0,0 +1,14 @@ + + + + Categories on Inclusive Pattern Docs + /categories/ + Recent content in Categories on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + \ No newline at end of file diff --git a/public/css/images/icon-tick.svg b/public/css/images/icon-tick.svg new file mode 100644 index 0000000..20f9650 --- /dev/null +++ b/public/css/images/icon-tick.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/css/images/stripe.svg b/public/css/images/stripe.svg new file mode 100644 index 0000000..48bf5f9 --- /dev/null +++ b/public/css/images/stripe.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/css/prism.css b/public/css/prism.css new file mode 100644 index 0000000..7dc9a0a --- /dev/null +++ b/public/css/prism.css @@ -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; + } diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 0000000..9d940e9 --- /dev/null +++ b/public/css/styles.css @@ -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; +} diff --git a/public/images/icon-info.svg b/public/images/icon-info.svg new file mode 100644 index 0000000..a6b1a0f --- /dev/null +++ b/public/images/icon-info.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/icon-tag.svg b/public/images/icon-tag.svg new file mode 100644 index 0000000..0d8d3af --- /dev/null +++ b/public/images/icon-tag.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/icon-warning.svg b/public/images/icon-warning.svg new file mode 100644 index 0000000..d0895b4 --- /dev/null +++ b/public/images/icon-warning.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..23cb79bfc04918ab4d3ab11bd2a27d566d9f2210 GIT binary patch literal 11614 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 + + + + + + + + + + + + + The Inclusive Pattern Library Builder | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

The Inclusive Pattern Library Builder

+

Some introductory text.

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + diff --git a/public/index.xml b/public/index.xml new file mode 100644 index 0000000..b4f4bc6 --- /dev/null +++ b/public/index.xml @@ -0,0 +1,80 @@ + + + + Inclusive Pattern Docs + / + Recent content on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Card + /patterns/widgets/example1/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/widgets/example1/ + 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. + + + + Collapsible region + /patterns/example1/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example1/ + 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). + + + + Footer + /patterns/landmarks/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/landmarks/example2/ + 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. + + + + Menu button and menu + /patterns/widgets/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/widgets/example2/ + 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=" + + + + Page region navigation landmark + /patterns/landmarks/example-one/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/landmarks/example-one/ + 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. + + + + Tab interface + /patterns/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example2/ + 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. + + + + The Inclusive Pattern Library Builder + / + Mon, 01 Jan 0001 00:00:00 +0000 + + / + Some introductory text. + + + + \ No newline at end of file diff --git a/public/js/dom-scripts.js b/public/js/dom-scripts.js new file mode 100644 index 0000000..0f666a6 --- /dev/null +++ b/public/js/dom-scripts.js @@ -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) + }) + }) + +}()) diff --git a/public/js/prism.js b/public/js/prism.js new file mode 100644 index 0000000..8e2ab17 --- /dev/null +++ b/public/js/prism.js @@ -0,0 +1,7 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,S=t.length;S>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,N=w.slice(0,A),C=w.slice(j),E=[b,P];N&&(++b,k+=N.length,E.push(N));var L=new s(u,f?n.tokenize(_,f):_,y,_,m);if(E.push(L),C&&E.push(C),Array.prototype.splice.apply(t,E),1!=P&&n.matchGrammar(e,t,a,b,k,!0,u),l)break}else if(l)break}}}}},tokenize:function(e,t){var a=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return n.matchGrammar(e,a,t,0,0,!1),a},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,!document.addEventListener||n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; +Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; +!function(){"undefined"!=typeof self&&self.Prism&&self.document&&Prism.hooks.add("complete",function(e){if(e.code){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var n,a=e.code.match(/\n(?!$)/g),l=a?a.length+1:1,r=new Array(l+1);r=r.join(""),n=document.createElement("span"),n.setAttribute("aria-hidden","true"),n.className="line-numbers-rows",n.innerHTML=r,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(n)}}})}(); diff --git a/public/js/shadyDOM.min.js b/public/js/shadyDOM.min.js new file mode 100644 index 0000000..6a6e9ea --- /dev/null +++ b/public/js/shadyDOM.min.js @@ -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]/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";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 + + + + + + + + + + + + + Collapsible region | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

Collapsible region

+ +
+ + +
+ +

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). 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 ante hendrerit tempus. Vestibulum text-align : justify lacus. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus.

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/example2/index.html b/public/patterns/example2/index.html new file mode 100644 index 0000000..556eb43 --- /dev/null +++ b/public/patterns/example2/index.html @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + Tab interface | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

Tab interface

+ +
+ + +
+ +

Vestibulum sit amet ipsum lacus… 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 — amet dui lobortis commodo — vitae vel nulla. Lorem ipsum dolor sit amet, — consectetur adipiscing — elit. Nulla lobortis tempus commodo.

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/index.html b/public/patterns/index.html new file mode 100644 index 0000000..ed1ac1d --- /dev/null +++ b/public/patterns/index.html @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + Patterns | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + Patterns +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/index.xml b/public/patterns/index.xml new file mode 100644 index 0000000..c8297ca --- /dev/null +++ b/public/patterns/index.xml @@ -0,0 +1,32 @@ + + + + Patterns on Inclusive Pattern Docs + /patterns/ + Recent content in Patterns on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Collapsible region + /patterns/example1/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example1/ + 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). + + + + Tab interface + /patterns/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example2/ + 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. + + + + \ No newline at end of file diff --git a/public/patterns/landmarks/example-one/index.html b/public/patterns/landmarks/example-one/index.html new file mode 100644 index 0000000..fb31845 --- /dev/null +++ b/public/patterns/landmarks/example-one/index.html @@ -0,0 +1,310 @@ + + + + + + + + + + + + + + Page region navigation landmark | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

Page region navigation landmark

+ +

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. Donec tempus tempus tellus, ac HTML lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales CSS magna.

+ +

+ + +

    + + +
  • + + + 1.1.1 Non-text Content (level A) + + + +
    • + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/landmarks/example2/index.html b/public/patterns/landmarks/example2/index.html new file mode 100644 index 0000000..4edafe9 --- /dev/null +++ b/public/patterns/landmarks/example2/index.html @@ -0,0 +1,453 @@ + + + + + + + + + + + + + + Footer | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

Footer

+ + + +

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.

+ + + + + + +

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. Donec tempus tempus tellus, ac HTML lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales CSS magna.

+ +

Link to widgets example 1

+ +

Figure example

+ + +
+

I LOVE FASCISM!?

+ +
+ You are wrong. +
+
+ + +

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. Donec tempus tempus tellus, ac HTML lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales CSS magna.

+ + +
+

I HATE FASCISM!?

+ +
+ This is good news. +
+
+ + +

Code block example

+ +

+  .expandable + .expandable {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 2px solid;
+  }
+
+ + +

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. Donec tempus tempus tellus, ac HTML lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales CSS magna.

+ +

External refs examples

+ +

WCAG

+ + + + +
    + + +
  • + + + 1.1.1 Non-text Content (level A) + : + + + 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. ( + +
      + +
    • Controls, Input: + 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.) +
      • + +
    • Time-Based Media: + 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.) +
      • + +
    • Test: + 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. +
      • + +
    • Sensory: + 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. +
      • + +
    • CAPTCHA: + 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. +
      • + +
    • Decoration, Formatting, Invisible: + 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. +
      • + +
    + + +
    • + + + + + + + + + + + + + + + + + + + + + +
  • + + + 1.3.1 Info and Relationships (level A) + : + + + Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. + + +
    • + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  • + + + 4.1.2 Name, Role, Value (level A) + : + + + 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. + + +
    • + + +
+ + +

Inclusive Design Principles

+ +

+ + + +

    + + + + + + +
  • + Be consistent: Use familiar conventions and apply them consistently. + +

    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.

    + +
    • + + + + + + + + + +
  • + Add value: Consider the value of features and how they improve the experience for different users. + +

    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.

    + +
    • + + +
+

+ +
+ +

+ + + +

+ + +
+ + +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/landmarks/index.html b/public/patterns/landmarks/index.html new file mode 100644 index 0000000..29e74b2 --- /dev/null +++ b/public/patterns/landmarks/index.html @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + Landmarks | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + Landmarks +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/landmarks/index.xml b/public/patterns/landmarks/index.xml new file mode 100644 index 0000000..495fa8e --- /dev/null +++ b/public/patterns/landmarks/index.xml @@ -0,0 +1,34 @@ + + + + Landmarks on Inclusive Pattern Docs + /patterns/landmarks/ + Recent content in Landmarks on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Footer + /patterns/landmarks/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/landmarks/example2/ + 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. + + + + Page region navigation landmark + /patterns/landmarks/example-one/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/landmarks/example-one/ + 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. + + + + \ No newline at end of file diff --git a/public/patterns/widgets/example1/index.html b/public/patterns/widgets/example1/index.html new file mode 100644 index 0000000..1f15841 --- /dev/null +++ b/public/patterns/widgets/example1/index.html @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + Card | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

Card

+ +

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.

+ +

Fusce ac sodales CSS magna. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Donec et nisi dictum felis sollicitudin congue. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus.

+ +

Aliquam tincidunt velit sit (amet ante hendrerit tempus). Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Donec tempus tempus tellus, ac HTML 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 felis sollicitudin congue.

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/widgets/example2/index.html b/public/patterns/widgets/example2/index.html new file mode 100644 index 0000000..2818491 --- /dev/null +++ b/public/patterns/widgets/example2/index.html @@ -0,0 +1,403 @@ + + + + + + + + + + + + + + Menu button and menu | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

Menu button and menu

+ +
+ + +
+ +

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.

+ + +
+ +
+ + + + +
+ + +

+  .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;
+  }
+
+ + +
{{ .Inner }}
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales .generate() magna. Aliquam tincidunt velit sit amet ante hendrerit tempus. Donec et nisi dictum felis sollicitudin congue.

+ + +
+ +
+ +
+ +
Example caption
+ + +
+ + + +
+ + +

Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. Nulla lobortis tempus commodo.

+ + +
+ +
+ + + + +
+ + +
+
    +
  • Something good
    • +
  • Something else good
    • +
  • Another great thing
    • +
+ +
+ + +

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 …

+ + + + +

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 …

+ + + + +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/widgets/index.html b/public/patterns/widgets/index.html new file mode 100644 index 0000000..bf9afd4 --- /dev/null +++ b/public/patterns/widgets/index.html @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + Widgets | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + Widgets +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + + + diff --git a/public/patterns/widgets/index.xml b/public/patterns/widgets/index.xml new file mode 100644 index 0000000..0e0bbcd --- /dev/null +++ b/public/patterns/widgets/index.xml @@ -0,0 +1,33 @@ + + + + Widgets on Inclusive Pattern Docs + /patterns/widgets/ + Recent content in Widgets on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Card + /patterns/widgets/example1/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/widgets/example1/ + 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. + + + + Menu button and menu + /patterns/widgets/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/widgets/example2/ + 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=" + + + + \ No newline at end of file diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..689f9eb --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,81 @@ + + + + + /tags/animated/ + 0 + + + + /patterns/widgets/example1/ + + + + /categories/ + 0 + + + + /patterns/example1/ + + + + /patterns/landmarks/example2/ + + + + /tags/forms/ + 0 + + + + / + 0 + + + + /tags/interactive/ + 0 + + + + /patterns/landmarks/ + + + + /patterns/widgets/example2/ + + + + /patterns/landmarks/example-one/ + + + + /patterns/ + 0 + + + + /patterns/example2/ + + + + /tags/ + 0 + + + + / + + + + /tags/typography/ + 0 + + + + /patterns/widgets/ + + + \ No newline at end of file diff --git a/public/tags/animated/index.html b/public/tags/animated/index.html new file mode 100644 index 0000000..7c7a3ca --- /dev/null +++ b/public/tags/animated/index.html @@ -0,0 +1,177 @@ + + + + + + + + + + + + + + Animated | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + + + Animated +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + diff --git a/public/tags/animated/index.xml b/public/tags/animated/index.xml new file mode 100644 index 0000000..40eee3a --- /dev/null +++ b/public/tags/animated/index.xml @@ -0,0 +1,42 @@ + + + + Animated on Inclusive Pattern Docs + /tags/animated/ + Recent content in Animated on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Collapsible region + /patterns/example1/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example1/ + 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). + + + + Menu button and menu + /patterns/widgets/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/widgets/example2/ + 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=" + + + + Tab interface + /patterns/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example2/ + 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. + + + + \ No newline at end of file diff --git a/public/tags/forms/index.html b/public/tags/forms/index.html new file mode 100644 index 0000000..cf48b9c --- /dev/null +++ b/public/tags/forms/index.html @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + Forms | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + + + Forms +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + diff --git a/public/tags/forms/index.xml b/public/tags/forms/index.xml new file mode 100644 index 0000000..bd5003a --- /dev/null +++ b/public/tags/forms/index.xml @@ -0,0 +1,23 @@ + + + + Forms on Inclusive Pattern Docs + /tags/forms/ + Recent content in Forms on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Collapsible region + /patterns/example1/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example1/ + 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). + + + + \ No newline at end of file diff --git a/public/tags/index.xml b/public/tags/index.xml new file mode 100644 index 0000000..0b47d80 --- /dev/null +++ b/public/tags/index.xml @@ -0,0 +1,50 @@ + + + + Tags on Inclusive Pattern Docs + /tags/ + Recent content in Tags on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Animated + /tags/animated/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /tags/animated/ + + + + + Forms + /tags/forms/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /tags/forms/ + + + + + Interactive + /tags/interactive/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /tags/interactive/ + + + + + Typography + /tags/typography/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /tags/typography/ + + + + + \ No newline at end of file diff --git a/public/tags/interactive/index.html b/public/tags/interactive/index.html new file mode 100644 index 0000000..78835aa --- /dev/null +++ b/public/tags/interactive/index.html @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + Interactive | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + + + Interactive +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + diff --git a/public/tags/interactive/index.xml b/public/tags/interactive/index.xml new file mode 100644 index 0000000..a6a73b1 --- /dev/null +++ b/public/tags/interactive/index.xml @@ -0,0 +1,24 @@ + + + + Interactive on Inclusive Pattern Docs + /tags/interactive/ + Recent content in Interactive on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Menu button and menu + /patterns/widgets/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/widgets/example2/ + 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=" + + + + \ No newline at end of file diff --git a/public/tags/typography/index.html b/public/tags/typography/index.html new file mode 100644 index 0000000..2d1d662 --- /dev/null +++ b/public/tags/typography/index.html @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + Typography | Inclusive Pattern Docs + + + + + + + + + + + + + W3C + SVG + + + + + + + + + + + + + +
+ +
+
+ +
+

+ + + + + Typography +

+ +
+ +
+ By Heydon Pickering +
+
+
+
+ + + + diff --git a/public/tags/typography/index.xml b/public/tags/typography/index.xml new file mode 100644 index 0000000..b27e235 --- /dev/null +++ b/public/tags/typography/index.xml @@ -0,0 +1,23 @@ + + + + Typography on Inclusive Pattern Docs + /tags/typography/ + Recent content in Typography on Inclusive Pattern Docs + Hugo -- gohugo.io + en-us + + + + + + Tab interface + /patterns/example2/ + Mon, 01 Jan 0001 00:00:00 +0000 + + /patterns/example2/ + 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. + + + + \ No newline at end of file