diff --git a/config.toml b/config.toml index d23f059..5b22cb9 100644 --- a/config.toml +++ b/config.toml @@ -4,5 +4,5 @@ baseURL = "/" theme = "inclusive-pattern-docs" [params] - description = "The pattern library for The Demo Project" + description = "Documentation for the Inclusive Pattern Docs pattern library builder. This documentation is constructed using the builder itself." codePenUser = "Heydon" diff --git a/content/patterns/example1.md b/content/patterns/example1.md index 0dd49ac..79be818 100644 --- a/content/patterns/example1.md +++ b/content/patterns/example1.md @@ -1,6 +1,6 @@ +++ -title = "Example Pattern 1" -wcag = ["1-1-1"] +title = "Collapsible region" +tags = ["animated", "forms"] +++

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.

diff --git a/content/patterns/example2.md b/content/patterns/example2.md index 9d12018..b75d02f 100644 --- a/content/patterns/example2.md +++ b/content/patterns/example2.md @@ -1,6 +1,6 @@ +++ -title = "Example Pattern 2" -wcag = ["1-1-1"] +title = "Tab interface" +tags = ["animated", "typography"] +++

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.

diff --git a/content/patterns/landmarks/example1.md b/content/patterns/landmarks/example1.md deleted file mode 100644 index 9401523..0000000 --- a/content/patterns/landmarks/example1.md +++ /dev/null @@ -1,12 +0,0 @@ -+++ -title = "Landmark Example 1" -wcag = ["1-1-1"] -+++ - -

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.

- -{{% principles include="add value" %}} - -

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.

- -{{% wcag include="1.1.1" %}} diff --git a/content/patterns/landmarks/example2.md b/content/patterns/landmarks/example2.md index 5400030..07c1d66 100644 --- a/content/patterns/landmarks/example2.md +++ b/content/patterns/landmarks/example2.md @@ -1,6 +1,5 @@ +++ -title = "Landmark Example 2" -wcag = ["1-1-1"] +title = "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.

diff --git a/content/patterns/widgets/example1.md b/content/patterns/widgets/example1.md index ab2c7fb..f5d065a 100644 --- a/content/patterns/widgets/example1.md +++ b/content/patterns/widgets/example1.md @@ -1,6 +1,5 @@ +++ -title = "Widget 1" -wcag = ["1-1-1"] +title = "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.

diff --git a/content/patterns/widgets/example2.md b/content/patterns/widgets/example2.md index ae1f551..d6c585b 100644 --- a/content/patterns/widgets/example2.md +++ b/content/patterns/widgets/example2.md @@ -1,8 +1,44 @@ +++ -title = "Widget 2" -wcag = ["1-1-1"] +title = "Menu button and menu" +tags = ["animated", "interactive"] +++ -

Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, 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. 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. Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. Nulla lobortis tempus commodo.

+

Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna {{% patternLink "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; + } +{{}} + +

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. Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla. Nulla lobortis tempus commodo.

+ +{{% ticks %}} + * Something good + * Something else good + * Another great thing +{{% /ticks %}}

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 …

+ +{{% note %}} +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 … +{{% /note %}} + +

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 …

+ +{{% warning %}} +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 … +{{% /warning %}} diff --git a/themes/inclusive-pattern-docs/layouts/_default/baseof.html b/themes/inclusive-pattern-docs/layouts/_default/baseof.html index 2c635f1..25e77c1 100644 --- a/themes/inclusive-pattern-docs/layouts/_default/baseof.html +++ b/themes/inclusive-pattern-docs/layouts/_default/baseof.html @@ -5,9 +5,6 @@ - {{ if .RSSLink }} - - {{ end }} @@ -19,6 +16,7 @@ + {{ partial "svg.html" . }}
- + {{ if eq .Type "patterns" }} + + + {{ end }} diff --git a/themes/inclusive-pattern-docs/layouts/_default/list.html b/themes/inclusive-pattern-docs/layouts/_default/list.html index e69de29..a436364 100644 --- a/themes/inclusive-pattern-docs/layouts/_default/list.html +++ b/themes/inclusive-pattern-docs/layouts/_default/list.html @@ -0,0 +1,18 @@ +{{ define "main" }} +
+

+ {{ $URLparts := split .URL "/" }} + {{ if in $URLparts "tags" }} + + {{ end }} + {{ .Title }} +

+ +
+{{ end }} diff --git a/themes/inclusive-pattern-docs/layouts/_default/single.html b/themes/inclusive-pattern-docs/layouts/_default/single.html index 8fc243c..ecd5d7d 100644 --- a/themes/inclusive-pattern-docs/layouts/_default/single.html +++ b/themes/inclusive-pattern-docs/layouts/_default/single.html @@ -1,7 +1,3 @@ -{{ define "title" }} - {{ .Title }} | {{ .Site.Title }} -{{ end }} - {{ define "main" }}

{{ .Title }}

diff --git a/themes/inclusive-pattern-docs/layouts/shortcodes/wcag.html b/themes/inclusive-pattern-docs/layouts/shortcodes/wcag.html index aabaccd..53935bf 100644 --- a/themes/inclusive-pattern-docs/layouts/shortcodes/wcag.html +++ b/themes/inclusive-pattern-docs/layouts/shortcodes/wcag.html @@ -5,7 +5,9 @@ {{ range $JSON }} {{ if in $included .ref_id }}
  • - {{ .ref_id }} {{ .title }} (level {{ .level }}) + + + {{ .ref_id }} {{ .title }} (level {{ .level }}) {{ if $descriptions }}:{{ end }} {{ if $descriptions }} diff --git a/themes/inclusive-pattern-docs/static/css/styles.css b/themes/inclusive-pattern-docs/static/css/styles.css index 6cd9c6a..a96166d 100644 --- a/themes/inclusive-pattern-docs/static/css/styles.css +++ b/themes/inclusive-pattern-docs/static/css/styles.css @@ -7,6 +7,7 @@ Dark blue color = #153B62 Gold color = #FCB316 Grey color = #707174 Red color = #C83737 +Green color = #217844 */ @@ -55,7 +56,9 @@ img { max-width: 100%; } -:focus:not([tabindex="-1"]), [data-expands]:focus svg { +:focus:not([tabindex="-1"]), +[data-expands]:focus svg, +.patterns a:focus span { outline: 3px solid #FCB316; outline-offset: 2px; } @@ -90,10 +93,11 @@ h4 { kbd { line-height: 1; font-size: 0.66rem; - padding: 0.1rem 0.25rem; + 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 { @@ -107,6 +111,10 @@ main ul { margin-left: 2.25rem; } +main li + li { + margin-top: 0.5rem; +} + main ul ul { margin-top: 0; } @@ -169,20 +177,13 @@ th:empty { height: 100%; } -.intro-and-nav > div * + *:not(li) { - margin-top: 0.75rem; -} - .logo { border: 0; } .library-desc { font-style: italic; -} - -.patterns { - overflow: auto; + margin-top: 0.25rem; } .main-and-footer { @@ -195,10 +196,109 @@ th:empty { 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 #FCB316; + border-left: 0.5rem solid; font-size: 0.85rem; } @@ -210,14 +310,30 @@ th:empty { height: 1.5rem; } -.note.warning { - border-color: #C83737; -} - .note > div > :first-child + * { margin-top: 0; } +/* 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 { @@ -231,6 +347,7 @@ figcaption { } main { + display: block; counter-reset: fig; } @@ -243,13 +360,16 @@ figcaption::before { /* Code blocks */ pre[class*=language-] { - padding: 1rem; - background: #f9f9f9; + 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 1em 2.25rem; + padding: 1em 0 0 2.25rem; } pre[class*=language-] code * { @@ -261,6 +381,12 @@ pre[class*=language-] code * { margin-top: -1rem; } +*:not(pre) > code { + background: #f7f7f7; + padding: 0.125rem 0.25rem; + white-space: nowrap; +} + .token.property, .token.tag, .token.boolean, @@ -268,7 +394,7 @@ pre[class*=language-] code * { .token.constant, .token.symbol, .token.deleted { - color: #38608F; + color: #888; } .token.selector, @@ -277,7 +403,7 @@ pre[class*=language-] code * { .token.char, .token.builtin, .token.inserted { - color: #EBA205; + color: #111; } .token.operator, @@ -285,22 +411,23 @@ pre[class*=language-] code * { .token.url, .language-css .token.string, .style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); + color: #333; + background: none; } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: #666; + font-weight: bold; } .token.function { - color: #375D84; + color: #ccc; } .line-numbers code { - padding-left: 2.25rem; + padding-left: 1.5rem; margin-top: -1rem; } @@ -396,3 +523,21 @@ p:empty { .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; +} diff --git a/themes/inclusive-pattern-docs/theme.toml b/themes/inclusive-pattern-docs/theme.toml index 9e22583..443adc7 100644 --- a/themes/inclusive-pattern-docs/theme.toml +++ b/themes/inclusive-pattern-docs/theme.toml @@ -1,7 +1,5 @@ name = "Inclusive Docs" -license = "MIT" -# licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE.md" description = "" homepage = "https://www.paciellogroup.com/" tags = ["inclusive design", "accessibility"]