list pages and black and white theme

This commit is contained in:
Heydon Pickering 2017-06-19 17:40:21 +08:00
parent b84cdeb2f2
commit 46fe8d2a3a
13 changed files with 264 additions and 68 deletions

View File

@ -4,5 +4,5 @@ baseURL = "/"
theme = "inclusive-pattern-docs" theme = "inclusive-pattern-docs"
[params] [params]
description = "The pattern library for <strong>The Demo Project</strong>" description = "Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself."
codePenUser = "Heydon" codePenUser = "Heydon"

View File

@ -1,6 +1,6 @@
+++ +++
title = "Example Pattern 1" title = "Collapsible region"
wcag = ["1-1-1"] tags = ["animated", "forms"]
+++ +++
<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: 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>

View File

@ -1,6 +1,6 @@
+++ +++
title = "Example Pattern 2" title = "Tab interface"
wcag = ["1-1-1"] tags = ["animated", "typography"]
+++ +++
<p>Vestibulum sit amet ipsum lacus&hellip; 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>Vestibulum sit amet ipsum lacus&hellip; 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>

View File

@ -1,12 +0,0 @@
+++
title = "Landmark Example 1"
wcag = ["1-1-1"]
+++
<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>
{{% principles include="add value" %}}
<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>
{{% wcag include="1.1.1" %}}

View File

@ -1,6 +1,5 @@
+++ +++
title = "Landmark Example 2" title = "Footer"
wcag = ["1-1-1"]
+++ +++
<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> <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>

View File

@ -1,6 +1,5 @@
+++ +++
title = "Widget 1" title = "Card"
wcag = ["1-1-1"]
+++ +++
<p>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. </p> <p>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. </p>

View File

@ -1,8 +1,44 @@
+++ +++
title = "Widget 2" title = "Menu button and menu"
wcag = ["1-1-1"] tags = ["animated", "interactive"]
+++ +++
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, 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. 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. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p> <p>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 <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>
{{<codeBlock lang="css" numbered="true">}}
.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;
}
{{</codeBlock>}}
<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. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
{{% ticks %}}
* Something good
* Something else good
* Another great thing
{{% /ticks %}}
<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 &hellip; </p> <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 &hellip; </p>
{{% 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 &hellip;
{{% /note %}}
<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 &hellip; </p>
{{% 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 &hellip;
{{% /warning %}}

View File

@ -5,9 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="canonical" href="{{ .Permalink }}"> <link rel="canonical" href="{{ .Permalink }}">
{{ if .RSSLink }}
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />
{{ end }}
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet"> <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 href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/css/prism.css" /> <link rel="stylesheet" href="/css/prism.css" />
@ -19,6 +16,7 @@
</title> </title>
</head> </head>
<body> <body>
{{ partial "svg.html" . }}
<div class="wrapper"> <div class="wrapper">
<header class="intro-and-nav" role="banner"> <header class="intro-and-nav" role="banner">
<div> <div>
@ -31,16 +29,30 @@
<nav class="patterns" role="navigation"> <nav class="patterns" role="navigation">
{{ $current := . }} {{ $current := . }}
{{ range $.Site.Home.Sections }} {{ range $.Site.Home.Sections }}
<h2>Section: {{ .Title }}</h2>
<ul> <ul>
{{ range .Pages }}
<li class="pattern">
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>{{ .Title }}</span>
</a>
</li>
</li>
{{ end }}
{{ range .Sections }} {{ range .Sections }}
<li>
<h3>{{ .Title }}</h3> <h3>{{ .Title }}</h3>
<ul> <ul>
{{ range .Pages }} {{ range .Pages }}
<li> <li class="pattern">
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}class="active"{{ end }}>{{ .Title }}</a></li> <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
<span>{{ .Title }}</span>
</a>
</li>
{{ end }} {{ end }}
</ul> </ul>
</li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}
@ -57,7 +69,10 @@
</div> </div>
</div> </div>
</div> </div>
{{ if eq .Type "patterns" }}
<script src="/js/prism.js"></script> <script src="/js/prism.js"></script>
<script src="/js/shadyDOM.min.js"></script>
{{ end }}
<script src="/js/dom-scripts.js"></script> <script src="/js/dom-scripts.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,18 @@
{{ define "main" }}
<main id="main">
<h1>
{{ $URLparts := split .URL "/" }}
{{ if in $URLparts "tags" }}
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
<use xlink:href="#tag"></use>
</svg>
{{ end }}
{{ .Title }}
</h1>
<ul class="patterns-list">
{{ range .Data.Pages }}
{{ .Render "li"}}
{{ end }}
</ul>
</main>
{{ end }}

View File

@ -1,7 +1,3 @@
{{ define "title" }}
{{ .Title }} | {{ .Site.Title }}
{{ end }}
{{ define "main" }} {{ define "main" }}
<main id="main"> <main id="main">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>

View File

@ -5,7 +5,9 @@
{{ range $JSON }} {{ range $JSON }}
{{ if in $included .ref_id }} {{ if in $included .ref_id }}
<li> <li>
<strong><a href="{{ .url }}">{{ .ref_id }} {{ .title }}</a> (level {{ .level }}) <strong><a href="{{ .url }}">
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
{{ .ref_id }} {{ .title }}</a> (level {{ .level }})
{{ if $descriptions }}:{{ end }} {{ if $descriptions }}:{{ end }}
</strong> </strong>
{{ if $descriptions }} {{ if $descriptions }}

View File

@ -7,6 +7,7 @@ Dark blue color = #153B62
Gold color = #FCB316 Gold color = #FCB316
Grey color = #707174 Grey color = #707174
Red color = #C83737 Red color = #C83737
Green color = #217844
*/ */
@ -55,7 +56,9 @@ img {
max-width: 100%; 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: 3px solid #FCB316;
outline-offset: 2px; outline-offset: 2px;
} }
@ -90,10 +93,11 @@ h4 {
kbd { kbd {
line-height: 1; line-height: 1;
font-size: 0.66rem; font-size: 0.66rem;
padding: 0.1rem 0.25rem; padding: 0.1rem 0.33rem;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 2px solid; border: 2px solid;
box-shadow: 0.125rem 0.125rem 0 #111; box-shadow: 0.125rem 0.125rem 0 #111;
vertical-align: 0.33em;
} }
code { code {
@ -107,6 +111,10 @@ main ul {
margin-left: 2.25rem; margin-left: 2.25rem;
} }
main li + li {
margin-top: 0.5rem;
}
main ul ul { main ul ul {
margin-top: 0; margin-top: 0;
} }
@ -169,20 +177,13 @@ th:empty {
height: 100%; height: 100%;
} }
.intro-and-nav > div * + *:not(li) {
margin-top: 0.75rem;
}
.logo { .logo {
border: 0; border: 0;
} }
.library-desc { .library-desc {
font-style: italic; font-style: italic;
} margin-top: 0.25rem;
.patterns {
overflow: auto;
} }
.main-and-footer { .main-and-footer {
@ -195,10 +196,109 @@ th:empty {
padding: 2.25rem; 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 */ /* Notes and warnings */
.note { .note {
border-left: 0.5rem solid #FCB316; border-left: 0.5rem solid;
font-size: 0.85rem; font-size: 0.85rem;
} }
@ -210,14 +310,30 @@ th:empty {
height: 1.5rem; height: 1.5rem;
} }
.note.warning {
border-color: #C83737;
}
.note > div > :first-child + * { .note > div > :first-child + * {
margin-top: 0; 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 */ /* Figures */
figure { figure {
@ -231,6 +347,7 @@ figcaption {
} }
main { main {
display: block;
counter-reset: fig; counter-reset: fig;
} }
@ -243,13 +360,16 @@ figcaption::before {
/* Code blocks */ /* Code blocks */
pre[class*=language-] { pre[class*=language-] {
padding: 1rem; padding: 0 !important;
background: #f9f9f9; background: none;
margin-top: 2.25rem; margin-top: 2.25rem;
margin-bottom: 0;
overflow-y: hidden;
overflow-x: auto;
} }
pre[class*=language-][data-line] { pre[class*=language-][data-line] {
padding: 1em 0 1em 2.25rem; padding: 1em 0 0 2.25rem;
} }
pre[class*=language-] code * { pre[class*=language-] code * {
@ -261,6 +381,12 @@ pre[class*=language-] code * {
margin-top: -1rem; margin-top: -1rem;
} }
*:not(pre) > code {
background: #f7f7f7;
padding: 0.125rem 0.25rem;
white-space: nowrap;
}
.token.property, .token.property,
.token.tag, .token.tag,
.token.boolean, .token.boolean,
@ -268,7 +394,7 @@ pre[class*=language-] code * {
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: #38608F; color: #888;
} }
.token.selector, .token.selector,
@ -277,7 +403,7 @@ pre[class*=language-] code * {
.token.char, .token.char,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: #EBA205; color: #111;
} }
.token.operator, .token.operator,
@ -285,22 +411,23 @@ pre[class*=language-] code * {
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #a67f59; color: #333;
background: hsla(0, 0%, 100%, .5); background: none;
} }
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.keyword { .token.keyword {
color: #07a; color: #666;
font-weight: bold;
} }
.token.function { .token.function {
color: #375D84; color: #ccc;
} }
.line-numbers code { .line-numbers code {
padding-left: 2.25rem; padding-left: 1.5rem;
margin-top: -1rem; margin-top: -1rem;
} }
@ -396,3 +523,21 @@ p:empty {
.site-error strong { .site-error strong {
color: #C83737; 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;
}

View File

@ -1,7 +1,5 @@
name = "Inclusive Docs" name = "Inclusive Docs"
license = "MIT"
# licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE.md"
description = "" description = ""
homepage = "https://www.paciellogroup.com/" homepage = "https://www.paciellogroup.com/"
tags = ["inclusive design", "accessibility"] tags = ["inclusive design", "accessibility"]