Skip to content

Commit cf4140f

Browse files
jgthmsjgthms
committed
Fix jgthms#3 
1 parent fce2e0f commit cf4140f

29 files changed

Lines changed: 299 additions & 11 deletions

File tree

‎_includes/collections/semantic-list.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<li class="menu-item" data-element-name="article"><a class="menu-link" href="{{site.url}}/element/article" data-element-name="article"><span class="item-name">article</span></a></li><li class="menu-item" data-element-name="aside"><a class="menu-link" href="{{site.url}}/element/aside" data-element-name="aside"><span class="item-name">aside</span></a></li><li class="menu-item" data-element-name="figcaption"><a class="menu-link" href="{{site.url}}/element/figcaption" data-element-name="figcaption"><span class="item-name">figcaption</span></a></li><li class="menu-item" data-element-name="figure"><a class="menu-link" href="{{site.url}}/element/figure" data-element-name="figure"><span class="item-name">figure</span></a></li><li class="menu-item" data-element-name="footer"><a class="menu-link" href="{{site.url}}/element/footer" data-element-name="footer"><span class="item-name">footer</span></a></li><li class="menu-item" data-element-name="header"><a class="menu-link" href="{{site.url}}/element/header" data-element-name="header"><span class="item-name">header</span></a></li><li class="menu-item" data-element-name="main"><a class="menu-link" href="{{site.url}}/element/main" data-element-name="main"><span class="item-name">main</span></a></li><li class="menu-item" data-element-name="mark"><a class="menu-link" href="{{site.url}}/element/mark" data-element-name="mark"><span class="item-name">mark</span></a></li><li class="menu-item" data-element-name="nav"><a class="menu-link" href="{{site.url}}/element/nav" data-element-name="nav"><span class="item-name">nav</span></a></li><li class="menu-item" data-element-name="section"><a class="menu-link" href="{{site.url}}/element/section" data-element-name="section"><span class="item-name">section</span></a></li><li class="menu-item" data-element-name="time"><a class="menu-link" href="{{site.url}}/element/time" data-element-name="time"><span class="item-name">time</span></a></li>

_includes/collections/structure.html renamed to _includes/collections/semantic.html

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
</span>
1313
<a class="element-links-direct" href="{{site.url}}/element/article/" data-element-name="article" data-tooltip="Single page for this element">Permalink</a>
1414
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="article">Share</a>
15+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
1516
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/article" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
1617
</nav>
1718
<h2 class="element-name">
@@ -81,6 +82,7 @@ <h3>
8182
</span>
8283
<a class="element-links-direct" href="{{site.url}}/element/aside/" data-element-name="aside" data-tooltip="Single page for this element">Permalink</a>
8384
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="aside">Share</a>
85+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
8486
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/aside" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
8587
</nav>
8688
<h2 class="element-name">
@@ -126,6 +128,100 @@ <h3>About the author</h3>
126128

127129
</section>
128130

131+
<section id="figcaption" class="element">
132+
<header class="element-header">
133+
<nav class="element-links">
134+
<span>
135+
Type: <strong>block</strong>
136+
</span>
137+
<span>
138+
Self-closing:
139+
<strong>
140+
No
141+
</strong>
142+
</span>
143+
<a class="element-links-direct" href="{{site.url}}/element/figcaption/" data-element-name="figcaption" data-tooltip="Single page for this element">Permalink</a>
144+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="figcaption">Share</a>
145+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
146+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/figcaption" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
147+
</nav>
148+
<h2 class="element-name">
149+
<a href="#figcaption">
150+
<span>#</span>
151+
figcaption
152+
</a>
153+
</h2>
154+
<div class="element-description">
155+
<p>Defines the <strong>caption</strong> of a <code>&lt;figure&gt;</code>.</p>
156+
157+
</div>
158+
</header>
159+
160+
<div id="figcaption-example-0" class="example">
161+
<p class="example-label">
162+
<strong>Example:</strong>
163+
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#figcaption-example-0-code">Copy</a>
164+
</p>
165+
<article class="example-preview">
166+
<div class="example-output"><figure>
167+
<img src="/images/html-reference-logo.png" alt="HTML Reference logo">
168+
<figcaption>The HTML Reference logo</figcaption>
169+
</figure></div>
170+
<div id="figcaption-example-0-code" class="example-code">{% highlight html %}<figure>
171+
<img src="/images/html-reference-logo.png" alt="HTML Reference logo">
172+
<figcaption>The HTML Reference logo</figcaption>
173+
</figure>{% endhighlight %}</div>
174+
</article>
175+
</div>
176+
177+
</section>
178+
179+
<section id="figure" class="element">
180+
<header class="element-header">
181+
<nav class="element-links">
182+
<span>
183+
Type: <strong>block</strong>
184+
</span>
185+
<span>
186+
Self-closing:
187+
<strong>
188+
No
189+
</strong>
190+
</span>
191+
<a class="element-links-direct" href="{{site.url}}/element/figure/" data-element-name="figure" data-tooltip="Single page for this element">Permalink</a>
192+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="figure">Share</a>
193+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
194+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/figure" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
195+
</nav>
196+
<h2 class="element-name">
197+
<a href="#figure">
198+
<span>#</span>
199+
figure
200+
</a>
201+
</h2>
202+
<div class="element-description">
203+
<p>Defines a single self-contained element, usually an image.</p>
204+
205+
</div>
206+
</header>
207+
208+
<div id="figure-example-0" class="example">
209+
<p class="example-label">
210+
<strong>Example:</strong>
211+
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#figure-example-0-code">Copy</a>
212+
</p>
213+
<article class="example-preview">
214+
<div class="example-output"><figure>
215+
<img src="/images/html-reference-logo.png" alt="HTML Reference logo">
216+
</figure></div>
217+
<div id="figure-example-0-code" class="example-code">{% highlight html %}<figure>
218+
<img src="/images/html-reference-logo.png" alt="HTML Reference logo">
219+
</figure>{% endhighlight %}</div>
220+
</article>
221+
</div>
222+
223+
</section>
224+
129225
<section id="footer" class="element">
130226
<header class="element-header">
131227
<nav class="element-links">
@@ -140,6 +236,7 @@ <h3>About the author</h3>
140236
</span>
141237
<a class="element-links-direct" href="{{site.url}}/element/footer/" data-element-name="footer" data-tooltip="Single page for this element">Permalink</a>
142238
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="footer">Share</a>
239+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
143240
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/footer" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
144241
</nav>
145242
<h2 class="element-name">
@@ -185,6 +282,7 @@ <h2 class="element-name">
185282
</span>
186283
<a class="element-links-direct" href="{{site.url}}/element/header/" data-element-name="header" data-tooltip="Single page for this element">Permalink</a>
187284
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="header">Share</a>
285+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
188286
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/header" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
189287
</nav>
190288
<h2 class="element-name">
@@ -240,6 +338,7 @@ <h1>HTML Reference</h1>
240338
</span>
241339
<a class="element-links-direct" href="{{site.url}}/element/main/" data-element-name="main" data-tooltip="Single page for this element">Permalink</a>
242340
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="main">Share</a>
341+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
243342
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/main" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
244343
</nav>
245344
<h2 class="element-name">
@@ -285,6 +384,98 @@ <h3>About the author</h3>
285384

286385
</section>
287386

387+
<section id="mark" class="element">
388+
<header class="element-header">
389+
<nav class="element-links">
390+
<span>
391+
Type: <strong>inline</strong>
392+
</span>
393+
<span>
394+
Self-closing:
395+
<strong>
396+
No
397+
</strong>
398+
</span>
399+
<a class="element-links-direct" href="{{site.url}}/element/mark/" data-element-name="mark" data-tooltip="Single page for this element">Permalink</a>
400+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="mark">Share</a>
401+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
402+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/mark" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
403+
</nav>
404+
<h2 class="element-name">
405+
<a href="#mark">
406+
<span>#</span>
407+
mark
408+
</a>
409+
</h2>
410+
<div class="element-description">
411+
<p>Defines <strong>highlighted text</strong>.</p>
412+
413+
</div>
414+
</header>
415+
416+
<div id="mark-example-0" class="example">
417+
<p class="example-label">
418+
<strong>Example:</strong>
419+
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#mark-example-0-code">Copy</a>
420+
</p>
421+
<article class="example-preview">
422+
<div class="example-output">We use HTML5 to write <mark>content</mark> on the Web.</div>
423+
<div id="mark-example-0-code" class="example-code">{% highlight html %}We use HTML5 to write <mark>content</mark> on the Web.{% endhighlight %}</div>
424+
</article>
425+
</div>
426+
427+
</section>
428+
429+
<section id="nav" class="element">
430+
<header class="element-header">
431+
<nav class="element-links">
432+
<span>
433+
Type: <strong>block</strong>
434+
</span>
435+
<span>
436+
Self-closing:
437+
<strong>
438+
No
439+
</strong>
440+
</span>
441+
<a class="element-links-direct" href="{{site.url}}/element/nav/" data-element-name="nav" data-tooltip="Single page for this element">Permalink</a>
442+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="nav">Share</a>
443+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
444+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/nav" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
445+
</nav>
446+
<h2 class="element-name">
447+
<a href="#nav">
448+
<span>#</span>
449+
nav
450+
</a>
451+
</h2>
452+
<div class="element-description">
453+
<p>Defines a section with <strong>navigation links</strong>.</p>
454+
455+
</div>
456+
</header>
457+
458+
<div id="nav-example-0" class="example">
459+
<p class="example-label">
460+
<strong>Example:</strong>
461+
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#nav-example-0-code">Copy</a>
462+
</p>
463+
<article class="example-preview">
464+
<div class="example-output"><nav>
465+
<a href="/">Home</a>
466+
<a href="/about">About</a>
467+
<a href="/contact">Contact</a>
468+
</nav></div>
469+
<div id="nav-example-0-code" class="example-code">{% highlight html %}<nav>
470+
<a href="/">Home</a>
471+
<a href="/about">About</a>
472+
<a href="/contact">Contact</a>
473+
</nav>{% endhighlight %}</div>
474+
</article>
475+
</div>
476+
477+
</section>
478+
288479
<section id="section" class="element">
289480
<header class="element-header">
290481
<nav class="element-links">
@@ -299,6 +490,7 @@ <h3>About the author</h3>
299490
</span>
300491
<a class="element-links-direct" href="{{site.url}}/element/section/" data-element-name="section" data-tooltip="Single page for this element">Permalink</a>
301492
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="section">Share</a>
493+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
302494
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/section" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
303495
</nav>
304496
<h2 class="element-name">
@@ -332,3 +524,77 @@ <h2>Section title</h2>
332524

333525
</section>
334526

527+
<section id="time" class="element">
528+
<header class="element-header">
529+
<nav class="element-links">
530+
<span>
531+
Type: <strong>inline</strong>
532+
</span>
533+
<span>
534+
Self-closing:
535+
<strong>
536+
No
537+
</strong>
538+
</span>
539+
<a class="element-links-direct" href="{{site.url}}/element/time/" data-element-name="time" data-tooltip="Single page for this element">Permalink</a>
540+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="time">Share</a>
541+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
542+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/time" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
543+
</nav>
544+
<h2 class="element-name">
545+
<a href="#time">
546+
<span>#</span>
547+
time
548+
</a>
549+
</h2>
550+
<div class="element-description">
551+
<p>Defines a <strong>time</strong> on a 24h clock.</p>
552+
553+
</div>
554+
</header>
555+
556+
<div id="time-example-0" class="example">
557+
<p class="example-label">
558+
<strong>Example:</strong>
559+
<a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#time-example-0-code">Copy</a>
560+
</p>
561+
<article class="example-preview">
562+
<div class="example-output">The game starts at <time datetime="2017-04-29T19:00">19:00</time>.</div>
563+
<div id="time-example-0-code" class="example-code">{% highlight html %}The game starts at <time datetime="2017-04-29T19:00">19:00</time>.{% endhighlight %}</div>
564+
</article>
565+
</div>
566+
567+
<article id="time-datetime" class="attribute">
568+
<header class="attribute-header">
569+
<h3 class="attribute-name">
570+
<code class="tag" data-tooltip="Click to copy" data-clipboard-text="datetime">
571+
datetime
572+
</code>
573+
</h3>
574+
<div class="attribute-description">
575+
<p>Defines the time and date.</p>
576+
577+
</div>
578+
</header>
579+
580+
<div class="attribute-values">
581+
<article id="time-datetime-2017-04-29t1900" class="value">
582+
<header class="value-header">
583+
<h4 class="value-name">
584+
<code class="tag" data-tooltip="Click to copy datetime=&quot;2017-04-29T19:00&quot;" data-clipboard-text="datetime=&quot;2017-04-29T19:00&quot;">
585+
"2017-04-29T19:00"
586+
</code>
587+
</h4>
588+
<div class="value-description">
589+
<p>The value needs to be a valid <a href="https://www.w3.org/TR/html51/infrastructure.html#dates-and-times">time string</a>.</p>
590+
591+
</div>
592+
</header>
593+
<aside class="value-preview">
594+
<div class="value-output"><time datetime="2017-04-29T19:00"></time></div>
595+
</aside>
596+
</article>
597+
</div>
598+
</article>
599+
</section>
600+

‎_includes/collections/structure-list.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_includes/menu.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<li><a class="menu-collection-link{% if page.collection_name == 'Base elements' %} menu-collection-link--active{% endif %}" href="{{site.url}}/base/">Base</a></li>
1010
<li><a class="menu-collection-link{% if page.collection_name == 'Forms' %} menu-collection-link--active{% endif %}" href="{{site.url}}/forms/">Forms</a></li>
1111
<li><a class="menu-collection-link{% if page.collection_name == 'Lists' %} menu-collection-link--active{% endif %}" href="{{site.url}}/lists/">Lists</a></li>
12-
<li><a class="menu-collection-link{% if page.collection_name == 'Structure' %} menu-collection-link--active{% endif %}" href="{{site.url}}/structure/">Structure</a></li>
12+
<li><a class="menu-collection-link{% if page.collection_name == 'Semantic' %} menu-collection-link--active{% endif %}" href="{{site.url}}/semantic/">Semantic</a></li>
1313
<li><a class="menu-collection-link{% if page.collection_name == 'Tables' %} menu-collection-link--active{% endif %}" href="{{site.url}}/tables/">Tables</a></li>
1414
</ul>
1515
<!-- <p><strong>HTML Templates</strong></p>

‎element/article/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
</span>
1818
<a class="element-links-direct" href="{{site.url}}/element/article/" data-element-name="article" data-tooltip="Single page for this element">Permalink</a>
1919
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="article">Share</a>
20+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
2021
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/article" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
2122
</nav>
2223
<h2 class="element-name">

‎element/aside/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
</span>
1818
<a class="element-links-direct" href="{{site.url}}/element/aside/" data-element-name="aside" data-tooltip="Single page for this element">Permalink</a>
1919
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="aside">Share</a>
20+
<a target="_blank" href="http://caniuse.com/#feat=html5semantic" data-tooltip="See on Can I use…" rel="external">Can I use</a>
2021
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/aside" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
2122
</nav>
2223
<h2 class="element-name">

0 commit comments

Comments
 (0)