From 76547ae01c91d6b1d4ffbbc8c76326458b07af86 Mon Sep 17 00:00:00 2001 From: Kevin White Date: Fri, 22 Nov 2024 16:45:56 +0000 Subject: [PATCH] Add links to how-tos --- guidelines/guidelines.css | 62 +++++++++++++++++++++++++++++++---- guidelines/img/icons.svg | 69 +++++++++++++++++++++++++++++++++++++++ guidelines/index.html | 64 +++++++++++++++++++++++++++++++----- 3 files changed, 181 insertions(+), 14 deletions(-) create mode 100644 guidelines/img/icons.svg diff --git a/guidelines/guidelines.css b/guidelines/guidelines.css index 7d93423..f10ef95 100644 --- a/guidelines/guidelines.css +++ b/guidelines/guidelines.css @@ -61,11 +61,13 @@ a.internalDFN[title]:hover, .internalDFN[title]:active, a.internalDFN[title]:foc } .guideline { - margin-left: 4rem; + margin-left: 4em; + position: relative; } .guideline .provision { - margin-left: 4rem; + margin-left: 4em; + position: relative; } .guideline-text, provision-text { @@ -97,7 +99,7 @@ h4 {font-size: 110%} h5, h6 { width: 100%; font-style: normal !important; - margin-top: 1rem; + margin-top: 1em; margin-bottom: 0; } @@ -194,12 +196,60 @@ a[href].status-link { } section { - margin-bottom: 2rem; + margin-bottom: 2em; } #guidelines > section { - margin-bottom: 4rem; + margin-bottom: 4em; } #guidelines :is(h2, h3, h4, h5, h6) { - margin-top: 1rem; + margin-top: 1em; +} + + +@media (min-width: 768px) { + .guideline .body-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + } +} + +.doclinks { + margin-left: 0.2em; +} + +.doclinks a { + display: inline-block; + outline: 0; + padding: 5px 10px; + font-size: 90%; + line-height: 1.5; + border-radius: 2px; + border: 1px solid #ccc; + text-decoration: none; + color: #333 !important; +} + +.doclinks a:focus, .doclinks a:hover { + color: #141414; + background-color: #f2f2f2; + border-color: #adadad; +} + +.doclinks a:active { + outline: 0; + background-image: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} + +svg:not(:root) { + overflow: hidden; +} + +[class^="i-"] { + width: 1em; + height: 1em; + fill: currentColor; + vertical-align: middle; + margin-top: -.25em; } \ No newline at end of file diff --git a/guidelines/img/icons.svg b/guidelines/img/icons.svg new file mode 100644 index 0000000..ee54cfd --- /dev/null +++ b/guidelines/img/icons.svg @@ -0,0 +1,69 @@ + + + + check + + + + close + + + + settings + + + + menu + + + + chevron-left + + + + chevron-right + + + + question + + + + info + + + + chevron-down + + + + share + + + + arrow-up + + + + refresh + + + + list + + + + list-open + + + + + plus + + + + minus + + + + diff --git a/guidelines/index.html b/guidelines/index.html index f8560b6..986d7cd 100644 --- a/guidelines/index.html +++ b/guidelines/index.html @@ -135,7 +135,13 @@

Guidelines

Image and media alternatives

Image alternatives

-

Users have equivalent alternatives for images.

+
+

Users have equivalent alternatives for images.

+ +
Which provision applies? @@ -162,15 +168,33 @@

Image alternatives

Decorative image
-

Decorative image is programmatically hidden.

+
+

Decorative image is programmatically hidden.

+ +
Content image
-

Equivalent text alternative is available for image that conveys content.

+
+

Equivalent text alternative is available for image that conveys content.

+ +
Detectable image
-

Image is programmatically determinable.

+
+

Image is programmatically determinable.

+ +
@@ -379,7 +403,13 @@
Verb tense

Interactive components

Keyboard Focus Appearance

-

Users can see which element has keyboard focus.

+
+

Users can see which element has keyboard focus.

+ +
Which provision applies? @@ -411,15 +441,33 @@

Keyboard Focus Appearance

Custom indicator
-

A custom focus indicator is used with sufficient size, change of contrast, adjacent contrast, distinct style and adjacency.

+
+

A custom focus indicator is used with sufficient size, change of contrast, adjacent contrast, distinct style and adjacency.

+ +
Default indicator
-

The platform’s default indicator is used, and where the backgrounds are changed, the indicator contrast is checked.

+
+

The platform’s default indicator is used, and where the backgrounds are changed, the indicator contrast is checked.

+ +
User agent default indicator
-

Focusable item uses the user agent default indicator.

+
+

Focusable item uses the user agent default indicator.

+ +