wai-website-theme 0.1.0

data/_data/techniques.yml

@@ -0,0 +1,180 @@
+- key: "ARIA5"
+  desc: Using WAI-ARIA state and property attributes to expose the state of a user interface component
+- key: "ARIA6"
+  desc: Using aria-label to provide labels for objects
+- key: "ARIA11"
+  desc: Using ARIA landmarks to identify regions of a page
+- key: "ARIA12"
+  desc: Using role=heading to identify headings
+- key: "ARIA13"
+  desc: Using aria-labelledby to name regions and landmarks
+- key: "ARIA17"
+  desc: Using grouping roles to identify related form controls
+- key: "ARIA18"
+  desc: Using aria-alertdialog to Identify Errors
+- key: "ARIA19"
+  desc: Using ARIA role=alert or Live Regions to Identify Errors
+- key: "ARIA21"
+  desc: Using Aria-Invalid to Indicate An Error Field
+- key: "C7"
+  desc: Using CSS to hide a portion of the link text
+- key: "C12"
+  desc: Using percent for font sizes
+- key: "C13"
+  desc: Using named font sizes
+- key: "C14"
+  desc: Using em units for font sizes
+- key: "C20"
+  desc: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
+- key: "C22"
+  desc: Using CSS to control visual presentation of text
+- key: "C28"
+  desc: Specifying the size of text containers using em units
+- key: "FLASH17"
+  desc: Providing keyboard access to a Flash object and avoiding a keyboard trap
+- key: "G1"
+  desc: Adding a link at the top of each page that goes directly to the main content area
+- key: "G14"
+  desc: Ensuring that information conveyed by color differences is also available in text
+- key: "G17"
+  desc: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
+- key: "G18"
+  desc: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
+- key: "G21"
+  desc: Ensuring that users are not trapped in content
+- key: "G59"
+  desc: Placing the interactive elements in an order that follows sequences and relationships within the content
+- key: "G62"
+  desc: Providing a glossary
+- key: "G63"
+  desc: Providing a site map
+- key: "G64"
+  desc: Providing a Table of Contents
+- key: "G65"
+  desc: Providing a breadcrumb trail
+- key: "G73"
+  desc: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
+- key: "G74"
+  desc: "Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description"
+- key: "G83"
+  desc: Providing text descriptions to identify required fields that were not completed
+- key: "G85"
+  desc: Providing a text description when user input falls outside the required format or values
+- key: "G90"
+  desc: Providing keyboard-triggered event handlers
+- key: "G92"
+  desc: Providing long description for non-text content that serves the same purpose and presents the same information
+- key: "G94"
+  desc: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
+- key: "G95"
+  desc: Providing short text alternatives that provide a brief description of the non-text content
+- key: "G98"
+  desc: Providing the ability for the user to review and correct answers before submitting
+- key: "G124"
+  desc: Adding links at the top of the page to each area of the content
+- key: "G127"
+  desc: "Identifying a Web page’s relationship to a larger collection of Web pages"
+- key: "G128"
+  desc: Indicating current location within navigation bars
+- key: "G130"
+  desc: Providing descriptive headings
+- key: "G131"
+  desc: Providing descriptive labels
+- key: "G133"
+  desc: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit
+- key: "G138"
+  desc: Using semantic markup whenever color cues are used
+- key: "G141"
+  desc: Organizing a page using headings
+- key: "G155"
+  desc: Providing a checkbox in addition to a submit button
+- key: "G161"
+  desc: Providing a search function to help users find content
+- key: "G162"
+  desc: Positioning labels to maximize predictability of relationships
+- key: "G164"
+  desc: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request
+- key: "G167"
+  desc: Using an adjacent button to label the purpose of a field
+- key: "G168"
+  desc: Requesting confirmation to continue with selected action
+- key: "G179"
+  desc: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
+- key: "G180"
+  desc: Providing the user with a means to set the time limit to 10 times the default time limit
+- key: "G182"
+  desc: Ensuring that additional visual cues are available when text color differences are used to convey information
+- key: "G183"
+  desc: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
+- key: "G196"
+  desc: Using a text alternative on one item within a group of images that describes all items in the group
+- key: "G198"
+  desc: Providing a way for the user to turn the time limit off
+- key: "G202"
+  desc: Ensuring keyboard control for all functionality
+- key: "H2"
+  desc: Combining adjacent image and text links for the same resource
+- key: "H4"
+  desc: "Creating a logical tab order through links, form controls, and objects"
+- key: "H24"
+  desc: Providing text alternatives for the area elements of image maps
+- key: "H36"
+  desc: Using alt attributes on images used as submit buttons
+- key: "H37"
+  desc: Using alt attributes on img elements
+- key: "H39"
+  desc: Using caption elements to associate data table captions with data tables
+- key: "H40"
+  desc: Using definition lists
+- key: "H42"
+  desc: Using h1-h6 to identify headings
+- key: "H43"
+  desc: Using id and headers attributes to associate data cells with header cells in data tables
+- key: "H44"
+  desc: Using label elements to associate text labels with form controls
+- key: "H45"
+  desc: Using longdesc
+- key: "H48"
+  desc: 'Using ol, ul and dl for lists or groups of links'
+- key: "H49"
+  desc: Using semantic markup to mark emphasized or special text
+- key: "H51"
+  desc: Using table markup to present tabular data
+- key: "H59"
+  desc: Using the link element and navigation tools
+- key: "H63"
+  desc: Using the scope attribute to associate header cells and data cells in data tables
+- key: "H65"
+  desc: Using the title attribute to identify form controls when the label element cannot be used
+- key: "H67"
+  desc: Using null alt text and no title attribute on img elements for images that AT should ignore
+- key: "H69"
+  desc: Providing heading elements at the beginning of each section of content
+- key: "H71"
+  desc: Providing a description for groups of form controls using fieldset and legend elements
+- key: "H73"
+  desc: Using the summary attribute of the table element
+- key: "H80"
+  desc: Identifying the purpose of a link using link text combined with the preceding heading element
+- key: "H85"
+  desc: Using OPTGROUP to group OPTION elements inside a SELECT
+- key: "H91"
+  desc: Using HTML form controls and links
+- key: "H93"
+  desc: Ensuring that id attributes are unique on a Web page
+- key: "PDF9"
+  desc: Providing headings by marking content with heading tags in PDF documents
+- key: "SCR1"
+  desc: Allowing the user to extend the default time limit
+- key: "SCR2"
+  desc: Using redundant keyboard and mouse event handlers
+- key: "SCR16"
+  desc: Providing a script that warns the user a time limit is about to expire
+- key: "SCR20"
+  desc: Using both keyboard and other device-specific functions
+- key: "SCR26"
+  desc: Inserting dynamic content into the Document Object Model immediately following its trigger element
+- key: "SCR29"
+  desc: Adding keyboard-accessible actions to static HTML elements
+- key: "SCR35"
+  desc: Making actions keyboard accessible by using the onclick event of anchors and buttons

data/_data/wcag.yml

@@ -0,0 +1,125 @@
+- key: "1.1.1"
+  title: Non-text Content
+  desc: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed[…]."
+  level: A
+  slug: text-equiv-all
+- key: "1.3.1"
+  desc: "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text."
+  level: A
+  title: Info and Relationships
+  slug: content-structure-separation-programmatic
+- key: "1.4.1"
+  desc: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."
+  level: A
+  title: Use of Color
+  slug: visual-audio-contrast-without-color
+- key: "1.4.3"
+  title: Contrast (Minimum)
+  desc: 'The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:<ul><li><strong>Large Text: </strong> Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;</li><li><strong>Incidental: </strong> Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.</li><li><strong>Logotypes: </strong> Text that is part of a logo or brand name has no minimum contrast requirement.</li></ul>'
+  level: AA
+  slug: visual-audio-contrast-contrast
+- key: "1.4.4"
+  title: Resize text
+  desc: 'Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.'
+  level: AA
+  slug: visual-audio-contrast-scale
+- key: "1.4.5"
+  title: Images of Text
+  desc: "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except [for customizable and essential images]"
+  level: AA
+  slug: visual-audio-contrast-text-presentation
+- key: "1.4.6"
+  title: Contrast (Enhanced)
+  desc: 'The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:<ul><li><strong>Large Text: </strong> Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;</li><li><strong>Incidental: </strong> Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.</li><li><strong>Logotypes: </strong> Text that is part of a logo or brand name has no minimum contrast requirement.</li></ul>'
+  level: AAA
+  slug: visual-audio-contrast7
+- key: "1.4.9"
+  title: Images of Text (No Exception)
+  desc: "Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed"
+  level: AAA
+  slug: visual-audio-contrast-text-images
+- key: "2.1.1"
+  title: Keyboard
+  desc: 'All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.'
+  level: A
+  slug: keyboard-operation-keyboard-operable
+- key: "2.1.2"
+  title: No Keyboard Trap
+  desc: 'If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.'
+  level: A
+  slug: keyboard-operation-trapping
+- key: "2.1.3"
+  title: Keyboard (No Exception)
+  desc: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
+  level: AAA
+  slug: keyboard-operation-all-funcs
+- key: "2.2.1"
+  title: Timing Adjustable
+  desc: 'For each time limit that is set by the content, at least one of the following is true:<ul><li>Turn off: The user is allowed to turn off the time limit before encountering it; or</li>Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or</li><li>Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or</li><li>Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or</li><li>Essential Exception: The time limit is essential and extending it would invalidate the activity; or</li><li>20 Hour Exception: The time limit is longer than 20 hours. </li></ul>'
+  level: A
+  slug: time-limits-required-behaviors
+- key: "2.2.2"
+  title: "Pause, Stop, Hide"
+  desc: 'For moving, blinking, scrolling, or auto-updating information, all of the following are true:<ul><li><p><strong>Moving, blinking, scrolling: </strong>For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and</p></li><li><p><strong>Auto-updating: </strong>For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.</p></li></ul>'
+  level: A
+  slug: time-limits-pause
+- key: "2.4.1"
+  title: "Bypass Blocks"
+  desc: 'A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.'
+  level: A
+  slug: navigation-mechanisms-skip
+- key: "2.4.3"
+  title: "Focus Order"
+  desc: 'If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.'
+  level: A
+  slug: navigation-mechanisms-focus-order
+- key: "2.4.5"
+  title: "Multiple Ways"
+  desc: "2.4.5 More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process."
+  level: AA
+  slug: navigation-mechanisms-mult-loc
+- key: "2.4.6"
+  title: "Headings and Labels"
+  desc: "Headings and labels describe topic or purpose."
+  level: AA
+  slug: navigation-mechanisms-descriptive
+- key: "2.4.7"
+  title: "Focus Visible"
+  desc: "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."
+  level: AA
+  slug: navigation-mechanisms-focus-visible
+- key: "2.4.8"
+  title: "Location"
+  desc: "Information about the user's location within a set of Web pages is available."
+  level: AAA
+  slug: navigation-mechanisms-location
+- key: "2.4.10"
+  title: "Section Headings"
+  desc: 'Section headings are used to organize the content.'
+  level: AAA
+  slug: navigation-mechanisms-headings
+- key: "3.3.1"
+  title: "Error Identifications"
+  desc: "If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text."
+  level: A
+  slug: minimize-error-identified
+- key: "3.3.2"
+  title: "Labels or Instructions"
+  desc: "Labels or instructions are provided when content requires user input."
+  level: A
+  slug: minimize-error-cues
+- key: "3.3.3"
+  title: "Error Suggestion"
+  desc: "If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content."
+  level: AA
+  slug: minimize-error-suggestions
+- key: "3.3.4"
+  title: Error Prevention (Legal, Financial, Data)
+  desc: "For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: Reversible, Checked, Confirmed"
+  level: AA
+  slug: minimize-error-reversible
+- key: "4.1.2"
+  title: "Name, Role, Value"
+  desc: "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."
+  level: A
+  slug: ensure-compat-rsv

data/_includes/body-class.html

@@ -0,0 +1 @@
+{% if page.collection %}resource-{{page.collection | slugify}}{% endif %} page-{{page.title | slugify}}

data/_includes/box.html

@@ -0,0 +1,10 @@
+{% if include.type == 'start' %}
+{% assign classes = include.class | split: " " %}
+<aside class="box{% for class in classes %} box-{{ class }}{% endfor %}"{% if include.id %} id="{{include.id}}"{% endif %}>
+  <header class="box-h {% for class in classes %} box-h-{{ class }}{% endfor %}{% if include.icon %} box-h-icon{% endif %}">{% if include.icon %} {% include_cached icon.html name=include.icon %}{% endif %}{% if include.h %} <h{{include.h}}>{% endif %} {{ include.title}}{% if include.h %} </h{{include.h}}>{% endif %}</header>
+  <div class="box-i">
+{% endif %}
+{% if  include.type == 'end' %}
+  </div>
+</aside>
+{% endif %}

data/_includes/excol.html

@@ -0,0 +1,13 @@
+{% if include.type == 'start' %}
+<details{%if include.id%} id="{{include.id}}"{% endif %} {%if include.open%}open{% endif %}><summary markdown="block">
+{% else %}
+{% if include.type == 'middle' %}
+</summary>
+<div markdown="block">
+{% else %}
+{% if  include.type == 'end' %}
+</div>
+</details>
+{% endif %}
+{% endif %}
+{% endif %}

data/_includes/footer.html

@@ -0,0 +1,40 @@
+{% assign col = site.collections | where: "label", page.collection | first %}
+{% unless page.nopagefooter %}
+<footer class="page-footer default-grid">
+  <div class="inner">
+    <p>
+      <strong>Updated:</strong> {{page.date | date: "%-d %B %Y"}}<br>
+      <strong>{{page.people.editorslabel}}:</strong> {% for p in page.people.editors%}<a href="{{p.url}}">{{p.name}}</a>{% if forloop.last %}.{% else %}, {% endif %}{% endfor %} <strong>Developed by the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a></strong>{% if page.support %} with support from {% for s in page.support%}{% unless forloop.first %}{% if forloop.last %}and {% endif %}{% endunless %}the <a href="{{s.url}}">{{s.name}}</a>{% if forloop.last %}.{% else %}, {% endif %}{% endfor %}{% endif %} {% if col.acknowledgements %}{% assign ackurl = page.collection | append: "/acknowledgements/" | prepend: site.github.url %}<a href="/{{ackurl}}">Acknowledgements</a>.{% endif %}
+    </p>
+  </div>
+</footer>
+{% endunless %}
+
+<footer class="site-footer grid-4q">
+  <div class="q1-start q2-end">
+    <p><a class="largelink" href="https://w3.org/WAI/">Web Accessibility Initiative</a></p>
+    <p>Strategies, guidelines, resources to make the web accessible to people with disabilities</p>
+    <p>Copyright © 2017 W3C® (MIT, ERCIM, Keio, Beihang). Usage policies apply.</p>
+  </div>
+  <div class="q3-start q3-end">
+    <div class="footer-list-header">
+      Give Us Feedback
+    </div>
+    <ul>
+      <li><a href="#">Publicly Archived List</a></li>
+      <li><a href="#">WAI Staff-only List</a></li>
+    </ul>
+  </div>
+  <div class="q4-start q4-end">
+    <ul>
+      <li><a href="{{ site.github.url }}/wai/contact/">Contact WAI</a></li>
+      <li><a href="{{ site.github.url }}/sitemap/">Site Index</a></li>
+      <li><a href="{{ site.github.url }}/wai/get-involved/">Help with the WAI Website</a></li>
+      <li><a href="{{ site.github.url }}/privacy/">Privacy Statements</a></li>
+    </ul>
+  </div>
+</footer>
+<section class="default-grid info" tabindex="0">
+  <p class="inner">{% include_cached icon.html name="info" %} This is an unpublished draft preview. Please refer to our published website at <a href="https://www.w3.org/WAI/">w3.org/WAI/</a>.
+  </p>
+</section>

data/_includes/head.html

@@ -0,0 +1,23 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <script>
+    document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js');
+
+    function downloadJSAtOnload() {
+      var element = document.createElement("script");
+      element.src = "{{ "/assets/scripts/main.js" | prepend: site.github.url }}";
+      document.body.appendChild(element);
+      document.body.dataset.menuExpanded = 'false';
+    }
+
+    window.addEventListener("load", downloadJSAtOnload, false);
+  </script>
+
+  <link rel="stylesheet" href="{{ "/assets/css/style.css" | prepend: site.github.url }}">
+  {% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | prepend: site.github.url }}">{% endif %}
+
+  <title>{{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
+  {% seo title=false %}
+</head>

data/_includes/header.html

@@ -0,0 +1,59 @@
+<nav aria-label="Skip Link and Accessibility Options" id="controls" class="default-grid">
+  <ul>
+    <li><a href="#main">{% include_cached icon.html name="chevron-down" %} Skip to Content</a></li>
+    <li><a href="#">Change Text Size or Colors</a></li>
+  </ul>
+</nav>
+<header id="site-header" class="default-grid with-gap">
+  <a class="logos" href="{{ site.github.url }}/">
+    <img src="{{ "/assets/images/w3c.svg" | prepend: site.github.url }}" alt="W3C">
+    <span class="wai"><span class="wa">Web Accessibility</span> <span class="i">Initiative</span></span>
+  </a>
+
+  <div class="navigations">
+  <nav class="metanav" aria-label="Meta &amp; Search">
+    <ul>
+      <li><a href="{{ site.github.url }}/news/">News</a></li>
+      <li><a href="{{ site.github.url }}/wai/get-involved/">Get Involved</a></li>
+      <li><a href="{{ site.github.url }}/wai/about/">About W3C WAI</a></li>
+      <li>
+        <form action="https://duckduckgo.com/" role="search" onsubmit="document.querySelector('#header-search').value = document.querySelector('#header-search').value + ' site:w3c.github.io/wai-website/'">
+          <div>
+            <label for="header-search">
+              <span class="l">Search:</span>
+              <input id="header-search" type="search" name="q" placeholder="e.g. Tutorials">
+            </label>
+            <button class="button button-icon button-nobg button-noborder"><span>{% include_cached icon.html name="search" %}</span></button>
+          </div>
+        </form>
+      </li>
+    </ul>
+  </nav>
+</div>
+</header>
+<nav class="mainnav" aria-label="Main">
+  {% include navlist.html data=site.data.navigation depth=1 %}
+</nav>
+
+{% unless page.url == "/" %}
+<nav class="breadcrumb default-grid" aria-label="Breadcrumb">
+  <ul class="default-container">
+    <li><a href="{{ site.github.url }}/">Home</a></li>
+    {% capture page_url_without_index_html %}{{ page.url | remove: "/index.html" }}{% endcapture %}
+    {% assign splitted_url_parts = page_url_without_index_html | split: '/' %}
+    {% capture forLoopMaxInt %}{{ splitted_url_parts.size | minus:1 }}{% endcapture %}
+    {% for i in (1..forLoopMaxInt) %}
+        {% capture current_breadcrumb_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %}
+        {% capture current_breadcrumb_md_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %}
+        {% capture next_prepender %}{{next_prepender}}/{{ splitted_url_parts[i] }}{% endcapture %}
+        {% for breadcrumb_page in site.documents %}
+            {% if current_breadcrumb_url == breadcrumb_page.url %}
+                <li>
+                    <a{% if current_breadcrumb_url == page.url%} aria-current="page"{%endif%} href="{{ site.github.url }}{{current_breadcrumb_url}}">{% if breadcrumb_page.breadcrumb_title%}{{breadcrumb_page.breadcrumb_title}}{% else %}{{breadcrumb_page.title}}{% endif %}</a>
+                </li>
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+  </ul>
+</nav>
+{% endunless %}

data/_includes/icon.html

@@ -0,0 +1,6 @@
+{% if include.name %}{%assign name = include.name%}{% else %}{% assign name="default" %}{% endif %}
+{% if include.label %}
+<svg aria-label="{{ include.label }}" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" | prepend: site.github.url }}#icon-{{ name }}"></use></svg>
+{% else %}
+<svg aria-hidden="true" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" |  | prepend: site.github.url }}#icon-{{ name }}"></use></svg>
+{% endif %}

data/_includes/img.html

@@ -0,0 +1,17 @@
+{% assign url = "/img/" %}
+{% if page.collection %}{% assign url = url | prepend: page.collection | prepend: '/' %}{% endif %}
+{% assign url = url | prepend: site.github.url %}
+{% if include.srcset %}
+  {% assign srcseturl = "/img/" %}
+  {% if page.collection %}{% assign srcseturl = srcseturl | prepend: page.collection | prepend: '/' %}{% endif %}
+  {% assign out = "" %}
+  {% assign srcsetsrces = include.srcset | split: ", " %}
+  {% for src in srcsetsrces %}
+    {% unless forloop.last %}
+      {% assign out = out | append: srcseturl | append: src | append: ", " %}
+    {% else %}
+      {% assign out = out | append: srcseturl | append: src %}
+    {% endunless%}
+  {% endfor %}
+{% endif %}
+<img src="{{url}}{{include.src}}"{% if include.srcset %} srcset="{{out}}"{% endif %} alt="{{include.alt}}"{% if include.class %} class="{% assign classes = include.class | split: " " %}{% for class in classes %} {{ class }}{% endfor %}"{% endif %}{% if include.float %} style="float: {{include.float}};"{% endif %}>

data/_includes/multilang-list-policy-links.html

@@ -0,0 +1,29 @@
+{% assign tsize = include.title | size %}
+{% for t in include.title %}
+  {% if forloop.index == 1 %}
+    <ul class="sublang {% if include.class %} {{include.class}}{% endif %}">
+  {% endif %}
+  {% assign thislangurl = false %}
+  {% for u in include.url %}
+    {% if u[0] == t[0] %}
+      {% assign thislangurl = u[1] %}
+    {% endif %}
+  {% endfor %}
+
+  {% if thislangurl %}
+
+  {% assign lng = t[0]%}
+  <li lang="{{lng}}">
+    <span>{{site.data.lang[lng].name}}: </span>
+    <a href="{{thislangurl}}" hreflang="{{lng}}">
+      {{t[1]}}
+      {% unless lng == "en" %}
+        (<span lang="{{lng}}">{{site.data.lang[lng].nativeName}}</span>)
+      {% endunless %}
+      {% if include.external %}{% include_cached icon.html name="external-link" label="External Site" %}{% endif %} </a>
+  </li>
+
+{% endif %}
+
+  {% if forloop.last %}</ul>{% endif %}
+{% endfor %}

data/_includes/multilang-list.html

@@ -0,0 +1,35 @@
+{%assign tsize = include.title | size%}
+{% for t in include.title %}
+  {% if forloop.index == 2 %}
+    <ul class="sublang {% if include.class %} {{include.class}}{% endif %}">
+  {% endif %}
+  {% assign thislangurl = false %}
+  {% for u in include.url %}
+    {% if u[0] == t[0] %}
+      {% assign thislangurl = u[1] %}
+    {% endif %}
+  {% endfor %}
+
+  {% assign lng = t[0]%}
+  {% unless forloop.first %}<li lang="{{lng}}">{% endunless %}
+  {% if forloop.first %}{% if include.wrap %}<{{include.wrap}}{% if include.id %} id="{{include.id}}"{% endif %}{% if include.class %} class="{{include.class}}"{% endif %}>{% endif %}{% endif %}
+  {% unless lng == "en" %}
+    <span lang="en">{{site.data.lang[lng].name}}: </span>
+  {% endunless %}
+  {% if thislangurl %}
+    <a href="{{thislangurl}}" hreflang="{{lng}}">
+  {% endif %}
+  {{t[1]}}
+  {% unless lng == "en" %}
+    (<span lang="{{lng}}">{{site.data.lang[lng].nativeName}}</span>)
+  {% endunless %}
+  {% if thislangurl %}
+    {% if include.external %}{% include_cached icon.html name="external-link" label="External Site" %}{% endif %}</a>
+  {% endif %}
+  {% unless forloop.first %}</li>{% endunless %}
+  {% if forloop.first %}{% if include.wrap %}</{{include.wrap}}>{% endif %}{% endif %}
+
+  {% unless forloop.first %}
+    {% if forloop.last %}</ul>{% endif %}
+  {% endunless %}
+{% endfor %}

data/_includes/multilang-policy-title.html

@@ -0,0 +1,5 @@
+{% for t in include.title %}
+{% if t[0] == "en" %}
+{{t[1]}}
+{% endif %}
+{% endfor %}

data/_includes/multilang-title-full.html

@@ -0,0 +1 @@
+{%assign tsize = include.title | size%}{% if include.url %}<a href='{{include.url}}'>{% endif %}{% for t in include.title %}{% if t[0] == 'en' %}{{t[1]}}{% endif %}{% endfor %}{%if tsize > 1%}{% for t in include.title %}{% if forloop.first %} <span class='mlang'>({% endif %}{% unless t[0] == 'en' %}<span lang='{{t[0]}}'>{{t[1]}}</span>{% unless forloop.last %}, {% endunless %}{% endunless %}{% if forloop.last %})</span>{% endif %}{% endfor %}{% endif %}{% if include.url %}{% if include.external %}{% include_cached icon.html name="external-link" label="External Site" %}{% endif %}</a>{% endif %}

data/_includes/multilang-title.html

@@ -0,0 +1 @@
+{%assign tsize = include.title | size%}{% for t in include.title %} {% if forloop.index == 2 %}<span class="subtitle">({% endif %}{% assign thislangurl = false %}{% for u in include.url %}{% if u[0] == t[0] %}{% assign thislangurl = u[1] %}{% endif %}{% endfor %}{% if thislangurl %}<a href="{{thislangurl}}" hreflang="{{t[0]}}">{% assign lng = t[0]%}{% unless lng == "en" %}[{{site.data.lang[lng].name}}/<span lang="{{lng}}">{{site.data.lang[lng].nativeName}}</span>] {% endunless %}<span lang="{{lng}}">{% else %}<span lang="{{t[0]}}">{% endif %}{{t[1]}}</span>{% if thislangurl %}{% if include.external %}{% include_cached icon.html name="external-link" label="External Site" %}{% endif %}</a>{% endif %}{% unless forloop.first %}{% unless forloop.last %}, {% endunless %}{% if forloop.last %})</span>{% endif %}{% endunless %}{% endfor %}

data/_includes/navlist.html

@@ -0,0 +1,22 @@
+<ul{% if include.depth==2 %} class="subnavcontent"{% endif %}{% if include.depth==3 %} class="subsubnav"{% endif %}>
+{% if include.depth==1 %}<li role="presentation"></li>{% endif %}
+{% for item in include.data %}
+  {% if include.depth == 1 %}
+    {% assign the_url = item.name | slugify | prepend: "/sitemap/#" %}
+  {% else %}
+    {% assign the_url = item.url %}
+  {% endif %}
+  <li{% if item.pages %} class="has-submenu"{% endif %}>
+    <a{% if include.id %} id="{{item.name | slugify}}"{% endif %} href="{{ site.github.url }}{{the_url}}"><span>{{item.name}}{% comment %}{% if item.pages and include.depth > 1 %} {% include_cached icon.html name="chevron-right" %}{% endif %}{% endcomment %}</span></a>
+    {% if include.depth>1 %}
+      {% if item.pages %}{% assign newdepth = include.depth | plus: "1"%}{% include navlist.html data=item.pages depth=newdepth %}{% endif %}
+    {% endif %}
+  </li>
+  {% if include.depth==1 %}
+    <li role="presentation" class="subnav">
+      {% if item.pages %}{% assign newdepth = include.depth | plus: "1"%}{% include navlist.html data=item.pages depth=newdepth %}{% endif %}
+    </li>
+  {% endif %}
+{% endfor %}
+{% if include.depth==1 %}<li role="presentation"></li>{% endif %}
+</ul>

data/_includes/notes.html

@@ -0,0 +1,2 @@
+{% if include.type == 'start' %}<aside class="notes">{% endif %}
+{% if  include.type == 'end' %}</aside>{% endif %}

data/_includes/prevnext.html

@@ -0,0 +1,34 @@
+{% if page.order %}
+{% assign col = site.collections | where: "label", page.collection | first %}
+{% if page.group %}
+  {% assign docs = col.docs | where: "group", page.group %}
+{% else %}
+  {% assign docs = col.docs %}
+{% endif %}
+<nav class="pager" aria-label="Previous/Next Page">
+  <ul>
+    {% for p in docs %}{% assign tminus = page.order | minus: 1 %}{% if p.order == tminus %}
+    <li class="pager--item previous">
+      <a href="{{p.url | prepend: site.github.url }}">
+        {% include_cached icon.html name="arrow-left" class="pager--item-icon" %}
+        <span class="pager--item-text">
+          <span class="pager--item-text-direction">Previous:</span>
+          <span class="pager--item-text-target">{{p.title}}</span>
+        </span>
+      </a>
+    </li>
+    {% endif %}{% endfor %}
+    {% for p in docs %}{% assign tplus = page.order | plus: 1 %}{% if p.order == tplus %}
+    <li class="pager--item next">
+      <a href="{{p.url | prepend: site.github.url }}">
+        {% include_cached icon.html name="arrow-right" class="pager--item-icon" %}
+        <span class="pager--item-text">
+          <span class="pager--item-text-direction">Next:</span>
+          <span class="pager--item-text-target">{{p.title}}</span>
+        </span>
+      </a>
+    </li>
+  </ul>
+  {% endif %}{% endfor %}
+</nav>
+{% endif %}