wai-website-theme 0.1.6 → 1.2

data/_includes/icon.html

@@ -1,6 +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 %}
+{%- 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" | relative_url }}#icon-{{ name }}"></use></svg>
+{%- else -%}
+<svg aria-hidden="true" class="icon-{{ name }} {{include.class}}"><use xlink:href="{{ "/assets/images/icons.svg" | relative_url }}#icon-{{ name }}"></use></svg>
+{%- endif -%}

data/_includes/img.html

@@ -1,6 +1,6 @@
 {% assign url = "/img/" %}
 {% if page.collection %}{% assign url = url | prepend: page.collection | prepend: '/' %}{% endif %}
-{% assign url = url | prepend: site.github.url %}
+{% assign url = url | relative_url %}
 {% if include.srcset %}
   {% assign srcseturl = "/img/" %}
   {% if page.collection %}{% assign srcseturl = srcseturl | prepend: page.collection | prepend: '/' %}{% endif %}

data/_includes/menuitem.html

@@ -0,0 +1,13 @@
+{%- unless include.hide -%}
+<li>
+  <a class="page-link" {% if include.current %} aria-current="page" {% else %}{% if include.insub%} aria-current="location" {% endif %}{% endif %} href="{{ include.url | relative_url }}"><span>{% comment %}{% if include.url == searchurl %}{% include_cached icon.html name="chevron-right" %} {% endif %}{% endcomment %}{{include.name}}{% if include.different == true %} {% include_cached icon.html name="different-view" label="Different Layout" %}{% endif %}</span></a>
+  {{include.submenu}}
+</li>
+{%- else -%}
+  {%- if include.current == true -%}
+  <li>
+    <a class="page-link" {% if include.current %} aria-current="page" {% else %}{% if include.insub%} aria-current="location" {% endif %}{% endif %} href="{{ include.url | relative_url }}"><span>{% comment %}{% if include.url == searchurl %}{% include_cached icon.html name="chevron-right" %} {% endif %}{% endcomment %}{{include.name}}{% if include.different == true %} {% include_cached icon.html name="different-view" label="Different Layout" %}{% endif %}</span></a>
+    {{include.submenu}}
+  </li>
+  {%- endif -%}
+{%- endunless -%}

data/_includes/navlist.html

@@ -1,22 +1,10 @@
-<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 %}
+{%- for item in include.data -%}
+  {%- if forloop.first %}<ul>{% endif -%}
+  {%- assign the_url = item.pages.first.url -%}
+  {%- unless item.mainnav == false -%}
+  <li>
+    <a href="{{ the_url | relative_url }}"{% if include.current == the_url %} aria-current="location"{% endif %}><span>{{item.name}}</span></a>
   </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>
+  {%- endunless -%}
+  {%- if forloop.last %}</ul>{% endif -%}
+{%- endfor -%}

data/_includes/path.html

@@ -0,0 +1,6 @@
+{%- assign protocol = include.path | slice: 0, 4 -%}
+{%- if protocol == "http" -%}
+{{ include.path }}
+{%- else -%}
+{{ include.path | relative_url }}
+{%- endif -%}

data/_includes/prevnext.html

@@ -1,34 +1,36 @@
-{% 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 %}
+{%- if page.order -%}
+{%- assign col = site.collections | where: "label", page.collection | first -%}
+{%- unless col.prevnext == false -%}
+{%- 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 %}
+    {%- 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 }}">
+      <a href="{{p.url | relative_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 class="pager--item-text-target">{% if p.nav_title %}{{p.nav_title}}{% else %}{{p.title}}{% endif %}</span>
         </span>
       </a>
     </li>
-    {% endif %}{% endfor %}
-    {% for p in docs %}{% assign tplus = page.order | plus: 1 %}{% if p.order == tplus %}
+    {%- 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 }}">
+      <a href="{{p.url | relative_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 class="pager--item-text-target">{% if p.nav_title %}{{p.nav_title}}{% else %}{{p.title}}{% endif %}</span>
         </span>
       </a>
     </li>
   </ul>
-  {% endif %}{% endfor %}
+  {%- endif -%}{%- endfor -%}
 </nav>
-{% endif %}
+{%- endunless -%}
+{%- endif -%}

data/_includes/resources.html

@@ -1,10 +1,10 @@
-{% include box.html type="start" title="Related WCAG 2.0 resources" id="related" class="large icon" icon="default" %}
-<p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG 2.0 success criteria and techniques from different conformance levels:</p>
+{% include box.html type="start" title="Related WCAG resources" id="related" class="large icon" icon="default" %}
+<p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p>
 {% if page.wcag_success_criteria %}
   <p><strong>Success Criteria:</strong></p>
   <ul>
     {%- for sc in site.data.wcag -%}
-    {%- if page.wcag_success_criteria contains sc.key -%}<li><a href="https://www.w3.org/WAI/WCAG20/quickref/#qr-{{sc.slug}}"><strong>{{sc.key}}</strong> {{sc.title}}:</a> {{sc.desc}} (Level&nbsp;{{sc.level}})</li>{%- endif -%}
+    {%- if page.wcag_success_criteria contains sc.key -%}<li><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-{{sc.slug}}"><strong>{{sc.key}}</strong> {{sc.title}}:</a> {{sc.desc}} (Level&nbsp;{{sc.level}})</li>{%- endif -%}
     {%- endfor -%}
   </ul>
 {% endif %}

data/_includes/secondarynav.html

@@ -0,0 +1,70 @@
+{%- if page.parent == "/" -%}
+  {%- assign searchurl = page.parent -%}
+{%- else -%}
+  {%- assign searchurl = page.url -%}
+{%- endif -%}
+{%- assign col = site.collections | where: "label", page.collection | first -%}
+{%- if col.navigation -%}
+  {%- assign currentsubnav = col.navigation -%}
+{%- else -%}
+{%- for item in site.data.navigation -%}
+  {%- for i in item.pages -%}
+    {%- if i.url == searchurl -%}
+      {%- assign currentsubnav = item -%}
+    {%- else -%}
+      {%- for j in i.pages -%}
+        {%- if j.url == searchurl -%}
+          {%- assign currentsubnav = item -%}
+        {%- else -%}
+          {%- for k in j.pages -%}
+            {%- if k.url == searchurl -%}
+              {%- assign currentsubnav = item -%}
+            {%- endif -%}
+          {%- endfor -%}
+        {%- endif -%}
+      {%- endfor -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+{%- endif -%}
+
+{%- for i in currentsubnav.pages -%}
+  {%- if forloop.first -%}
+    <nav class="sidenav sn-contents" aria-label="Secondary">
+      <div class="sidenav--head"><div class="sidenav--head-title"><div class="sidenav--head-subsection">{{ currentsubnav.name }}</div></div></div>
+      <ul class="sidenav--list">
+  {% endif %}
+  {%- assign insub = false -%}
+  {%- assign insubsub = false -%}
+  {%- capture submenu -%}
+    {%- for j in i.pages -%}
+      {%- capture subsubmenu -%}
+        {%- for k in j.pages -%}
+          {%- if forloop.first %}<ul>{% endif -%}
+            {%- if k.url == searchurl -%}
+              {% assign insub = true %}
+              {% assign insubsub = true %}
+              {% include menuitem.html name=k.name url=k.url different=k.different hide=k.hide insub=false current=true %}
+            {%- else -%}
+              {% include menuitem.html name=k.name url=k.url different=k.different hide=k.hide insub=false current=false %}
+            {%- endif -%}
+          {%- if forloop.last %}</ul>{% endif -%}
+        {%- endfor -%}
+      {%- endcapture -%}
+      {%- if forloop.first %}<ul>{% endif -%}
+        {%- if j.url == searchurl -%}
+          {% assign insub = true %}
+          {% include menuitem.html name=j.name url=j.url different=j.different hide=j.hide insub=insubsub current=true submenu=subsubmenu %}
+        {%- else -%}
+          {% include menuitem.html name=j.name url=j.url different=j.different hide=j.hide insub=insubsub current=false submenu=subsubmenu %}
+        {%- endif -%}
+      {%- if forloop.last %}</ul>{% endif -%}
+    {%- endfor -%}
+  {%- endcapture -%}
+  {%- if i.url == searchurl -%}
+    {% include menuitem.html name=i.name url=i.url different=i.different hide=i.hide insub=insub current=true submenu=submenu %}
+  {%- else -%}
+    {% include menuitem.html name=i.name url=i.url different=i.different hide=i.hide insub=insub current=false submenu=submenu %}
+  {%- endif -%}
+  {%- if forloop.last %}</ul></nav>{% endif -%}
+{%- endfor -%}

data/_includes/sidenav.html

@@ -1,65 +1,59 @@
 {% comment %}
 The first section creates an array of page urls that are page urls of this collection. They then are compared to all page urls in the list below. Use group in the frontmatter to group pages.
 {% endcomment %}
-{% assign col = site.collections | where: "label", page.collection | first %}
+{%- assign col = site.collections | where: "label", page.collection | first -%}
 <nav class="sidenav sn-contents" aria-label="Other Pages in this Resource">
-  <div class="sidenav--head"><div class="sidenav--head-icon">{% if col.icon %}{% include_cached icon.html name=col.icon class="sidenav--head-icon--inner" %}{% endif %}</div><div class="sidenav--head-title"><div class="sidenav--head-subsection">{% if col.shortname %}{{ col.shortname }}{% else %}{{ col.name }}{% endif %}</div>
+  <div class="sidenav--head">{% if col.icon %}<div class="sidenav--head-icon">{% include_cached icon.html name=col.icon class="sidenav--head-icon--inner" %}</div>{%- endif -%}<div class="sidenav--head-title"><div class="sidenav--head-subsection">{% if col.shortname %}{{ col.shortname }}{%- else -%}{{ col.name }}{%- endif -%}</div>
     </div>
   </div>
   <ul class="sidenav--list">
 
-{% unless col.groups %}
-  {% assign documents = col.docs %}
+{%- unless col.groups -%}
+  {%- assign documents = col.docs -%}
 
-  {% for p in documents %}
+  {%- for p in documents -%}
     {% if forloop.first %}
-      {% assign pgs = p.url %}
-    {% else %}
-      {% assign pgs = pgs | append: "," | append: p.url %}
-    {% endif %}
-  {% endfor %}
-  {% assign pgs = pgs | split: "," %}
-  {% assign my_pages = site.documents | sort: "order" %}
-  {% for my_page in my_pages %}
-    {% unless my_page.nosidenav %}{% if pgs contains my_page.url %}
-    <li><a class="page-link" {% if my_page.url == page.url %} aria-current="page" {% endif %} href="{{ my_page.url | prepend: site.github.url }}">{% if my_page.url == page.url %}{% include_cached icon.html name="chevron-right" %} {% endif %}{% if my_page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{site.github.url}}{{my_page.title_icon}}"></use></svg> {% endif %}{% if my_page.nav_title %}{{ my_page.nav_title }}{% else %}{{ my_page.title }}{% endif %}</a></li>
-    {% endif %}{% endunless %}
-  {% endfor %}
-{% else %}
-  {% for group in col.groups %}
-
-    {% assign documents = col.docs | where: "group", page.group %}
-
-    {% unless my_page.nosidenav %}
-    <li><a class="page-link" {% if group.name == page.group %} aria-current="location" {% endif %} href="{{ site.github.url }}/{{page.collection}}/{% unless group.name == "index" %}{{ group.name}}/{% endunless%}">{{group.title}}</a>
-    {% if group.name == page.group %}
+      {%- assign pgs = p.url -%}
+    {%- else -%}
+      {%- assign pgs = pgs | append: "," | append: p.url -%}
+    {%- endif -%}
+  {%- endfor -%}
+  {%- assign pgs = pgs | split: "," -%}
+  {%- assign my_pages = site.documents | sort: "order" -%}
+  {%- for my_page in my_pages -%}
+    {%- unless my_page.nosidenav -%}{%- if pgs contains my_page.url -%}
+    <li><a class="page-link" {% if my_page.url == page.url %} aria-current="page" {%- endif -%} href="{{ my_page.url | relative_url }}">{% comment %}{% if my_page.url == page.url %}{% include_cached icon.html name="chevron-right" %} {%- endif -%}{% endcomment%}{% comment %}{% if my_page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{my_page.title_icon | relative_url}}"></use></svg> {% endif %}{% endcomment %}{% if my_page.nav_title %}{{ my_page.nav_title }}{%- else -%}{{ my_page.title }}{%- endif -%}</a></li>
+    {%- endif -%}{%- endunless -%}
+  {%- endfor -%}
+{%- else -%}
+  {%- for group in col.groups -%}
+
+    {%- assign documents = col.docs | where: "group", page.group -%}
+
+    {%- unless my_page.nosidenav -%}
+    {%- capture elurl %}/{{page.collection}}/{% unless group.name == "index" %}{{ group.name}}/{% endunless%}{% endcapture -%}
+    <li><a class="page-link" {% if elurl == page.url %} aria-current="page" {% else %}{% if group.name == page.group %} aria-current="location" {% endif %}{%- endif %} href="{{ elurl | relative_url }}">{{group.title}}</a>
+    {%- if group.name == page.group -%}
     <ul>
-      {% for p in documents %}
+      {%- for p in documents -%}
         {% if forloop.first %}
-          {% assign pgs = p.url %}
-        {% else %}
-          {% assign pgs = pgs | append: "," | append: p.url %}
-        {% endif %}
-      {% endfor %}
-      {% assign pgs = pgs | split: "," %}
-      {% assign my_pages = site.documents | sort: "order" %}
-      {% for my_page in my_pages %}
+          {%- assign pgs = p.url -%}
+        {%- else -%}
+          {%- assign pgs = pgs | append: "," | append: p.url -%}
+        {%- endif -%}
+      {%- endfor -%}
+      {%- assign pgs = pgs | split: "," -%}
+      {%- assign my_pages = site.documents | sort: "order" -%}
+      {%- for my_page in my_pages -%}
         {% unless my_page.nosidenav %}{% if pgs contains my_page.url %}
-        <li><a class="page-link" {% if my_page.url == page.url %} aria-current="page" {% endif %} href="{{ my_page.url | prepend: site.github.url }}">{% if my_page.url == page.url %}{% include_cached icon.html name="chevron-right" %} {% endif %}{% if my_page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{site.github.url}}{{my_page.title_icon}}"></use></svg> {% endif %}{% if my_page.nav_title %}{{ my_page.nav_title }}{% else %}{{ my_page.title }}{% endif %}</a></li>
-        {% endif %}{% endunless %}
-      {% endfor %}
-
+        <li><a class="page-link" {% if my_page.url == page.url %} aria-current="page" {% endif %} href="{{ my_page.url | relative_url }}">{% comment %}{% if my_page.url == page.url %}{% include_cached icon.html name="chevron-right" %} {%- endif -%}{% endcomment %}{% comment %}{% if my_page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{my_page.title_icon | relative_url}}"></use></svg> {% endif %}{% endcomment %}{% if my_page.nav_title %}{{ my_page.nav_title }}{%- else -%}{{ my_page.title }}{%- endif -%}</a></li>
+        {%- endif -%}{%- endunless -%}
+      {%- endfor -%}
     </ul>
-    {% endif %}
+    {%- endif -%}
     </li>
-    {% endunless %}
-
-{% endfor%}
-{% endunless %}
-
-
-
-
-
+    {%- endunless -%}
+{%- endfor -%}
+{%- endunless -%}
   </ul>
 </nav>

data/_includes/sitemap.html

@@ -0,0 +1,29 @@
+<ul{% if include.depth == 2 %} class="subnavcontent"{% endif %}{% if include.depth == 3 %} class="subsubnav"{% 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.cols %} class="has-submenu"{% endif %}>
+    <a{% if include.id %} id="{{item.name | slugify}}"{% endif %} href="{{ 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.cols -%}
+        <div class="col1">
+          {%- assign navdata = item.cols[0].pages -%}
+          {%- include navlist.html data=navdata depth=2 -%}
+          {%- assign navdata = item.cols[1].pages -%}
+          {%- include navlist.html data=navdata depth=2 -%}
+          {%- assign navdata = item.cols[2].pages -%}
+          {%- include navlist.html data=navdata depth=2 -%}
+        </div>
+      {%- endif -%}
+    </li>
+  {%- endif -%}
+{%- endfor -%}
+</ul>

data/_includes/video-link.html

@@ -0,0 +1,5 @@
+{%- assign classes = include.class | split: " " -%}
+<a href="{{ include.href | relative_url }}" class="video-link{% for class in classes %} video-link-{{ class }}{% endfor %}{% if include.ratio == "4:3" %} ratio-43{%- endif -%}">
+  <img src="{{ include.src | relative_url }}" alt="">
+  <span>{{ include.title }}</span>
+</a>

data/_includes/video-player.html

@@ -1,25 +1,27 @@
 <div class="video-container" data-video-type="">
   <video preload="metadata" data-youtube-id="{{include.yt-id}}" width="450">
-    {% assign captions = include.captions | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="../cc/{{c[0]}}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" default="" />{% endfor %}
-    {% assign descriptions = include.descriptions | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="../cc/{{d[0]}}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" default="" />{% endfor %}
+    {%- assign captions = include.captions | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="{{c[0] | relative_url }}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" {% if forloop.first %}default{% endif %} />{% endfor -%}
+    {%- assign subtitles = include.subtitles | split: ',' %}{% for subtitle in subtitles %}{% assign s = subtitle | split: '|' %}<track src="{{s[0] | relative_url }}" label="{{s[2]}}" kind="subtitles" srclang="{{s[1]}}" />{% endfor -%}
+    {%- assign descriptions = include.descriptions | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="{{ d[0] | relative_url }}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" />{% endfor -%}
   </video>
 </div>
 {% if include.yt-id-ad %}
 <div class="video-container" data-video-type="audio-described">
   <video preload="metadata" data-youtube-id="{{include.yt-id-ad}}" width="450">
-    {% assign captions = include.captions-ad | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="../cc/{{c[0]}}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" default="" />{% endfor %}
-    {% assign descriptions = include.descriptions-ad | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="../cc/{{d[0]}}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" default="" />{% endfor %}
+    {%- assign captions = include.captions-ad | split: ',' %}{% for caption in captions %}{% assign c = caption | split: '|' %}<track src="{{c[0] | relative_url }}" label="{{c[2]}}" kind="captions" srclang="{{c[1]}}" {% if forloop.first %}default{% endif %} />{% endfor -%}
+    {%- assign subtitles = include.subtitles-ad | split: ',' %}{% for subtitle in subtitles %}{% assign s = subtitle | split: '|' %}<track src="{{s[0] | relative_url }}" label="{{s[2]}}" kind="subtitles" srclang="{{s[1]}}" />{% endfor -%}
+    {%- assign descriptions = include.descriptions-ad | split: ',' %}{% for desc in descriptions %}{% assign d = desc | split: '|' %}<track src="{{ d[0] | relative_url }}" label="{{d[2]}}" kind="descriptions" srclang="{{d[1]}}" />{% endfor -%}
   </video>
 </div>
-<p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="{{ "/assets/images/icons.svg#icon-audio-description" | prepend: site.github.url }}"></use></svg> <span>Enable Audio Description</span></button></p>
+<p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="{{ "/assets/images/icons.svg#icon-audio-description" | relative_url }}"></use></svg> <span>Enable Audio Description</span></button></p>
 {% endif %}
 
-<script src="{{ site.github.url }}/assets/ableplayer/thirdparty/modernizr.custom.js"></script>
-<script src="{{ site.github.url }}/assets/scripts/jquery.min.js"></script>
-<script src="{{ site.github.url }}/assets/ableplayer/thirdparty/js.cookie.js"></script>
-<script src="{{ site.github.url }}/assets/ableplayer/build/ableplayer.min.js"></script>
+<script src="{{ "/assets/ableplayer/thirdparty/modernizr.custom.js" | relative_url }}"></script>
+<script src="{{ "/assets/scripts/jquery.min.js" | relative_url }}"></script>
+<script src="{{ "/assets/ableplayer/thirdparty/js.cookie.js" | relative_url }}"></script>
+<script src="{{ "/assets/ableplayer/build/ableplayer.min.js" | relative_url }}"></script>
 <script>
-  var youTubeDataAPIKey = "{{site.ytapi}}";
+  var youTubeDataAPIKey = "{{site.ytkey}}";
   var googleApiReady = false;
   function initGoogleClientApi() {
     googleApiReady = true;

data/_layouts/default.html

@@ -1,24 +1,44 @@
 <!DOCTYPE html>
-<html lang="en" prefix="og: http://ogp.me/ns#">
-  {% include head.html %}
-  <body id="top" class="{% include body-class.html %}">
+<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
+  {%- assign timestamp = site.time | date: '%s%N' -%}
+  {%- assign timestamp = '?' | append: timestamp -%}
+  {% include_cached head.html type="start" timestamp=timestamp %}
+  <title>{%if page.doc-note-type == "archived" %}[Archived]{% endif%}{%if page.doc-note-type == "draft" %}[Draft]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
+  {%- if page.external_css %}<link rel="stylesheet" href="{{ page.external_css | relative_url | append: include.timestamp }}">{% endif -%}
+  {%- if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: include.timestamp }}">{% endif -%}
+  {%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
+  {%- capture seo -%}
+    {%- seo title=false -%}
+  {%- endcapture -%}
+  {{- seo | replace: '<meta name="twitter:card" content="summary" />', '<meta name="twitter:card" content="summary_large_image" />' -}}
+  {%- unless page.image -%}{%- if site.twitter.image -%}{% assign twimage = site.twitter.image -%}{%- else -%}{% assign twimage = '/assets/images/social-sharing-default.jpg' -%}{%- endif -%}
+  <meta name="twitter:image" property="og:image" content="{{ twimage | relative_url | prepend: site.url }}">
+  {%- endunless -%}
+  {% include_cached head.html type="end" %}
+  <body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
     {% include header.html %}
+    <div class="default-grid with-gap{% unless page.noleftcol %} leftcol{% endunless %}">
 
-<main id="main" class="default-grid with-gap{% unless page.noleftcol %} leftcol{% endunless %}" tabindex="-1">
+  {% include secondarynav.html %}
+
+  <main id="main"{% if page.lang %} lang="{{page.lang}}"{% endif %}>
+    <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{page.title_icon | relative_url}}"></use></svg> {% endif %}{% if page.title_html %}{{ page.title_html }}{% else %}{{ page.title }}{% endif %}</h1>
+
+    {%- include doc-note-msg.html -%}
 
-  <article>
-    <h1>{% if page.title_icon %}<svg class="icon-in-title" aria-hidden="true"><use xlink:href="{{site.github.url}}{{page.title_icon}}"></use></svg> {% endif %}{{ page.title }}</h1>
     {{ content }}
 
-    {{page.wcag_success_criteria}}{{page.wcag_techniques}}
     {% if page.wcag_success_criteria or page.wcag_techniques %}
       {% include resources.html %}
     {% endif %}
 
+    {% include feedback-box.html %}
+
     {% include prevnext.html %}
-  </article>
-  <a class="button button-backtotop" href="#top"><span>{% include_cached icon.html name="arrow-up" %} Back to Top</span></a>
-</main>
+
+    {% include_cached backtotop.html %}
+  </main>
+</div>
 
 {% include footer.html %}