mirror of
https://github.com/picocss/pico.git
synced 2025-07-02 19:02:36 -04:00
refactor: lint
This commit is contained in:
Lucas Larroche
parent
672b67896c
commit
7487498805
53 changed files with 1789 additions and 1078 deletions
|
|
@ -1,19 +1,16 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title=`Navs`
|
||||
description=`The essential navbar component in pure semantic HTML.`
|
||||
canonical=`navs.html`
|
||||
}
|
||||
${require('./_head.html') title=`Navs` description=`The essential navbar
|
||||
component in pure semantic HTML.` canonical=`navs.html` }
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active=`navs-link`}
|
||||
|
||||
|
||||
<div role="document">
|
||||
<section id="navs">
|
||||
<hgroup>
|
||||
|
|
@ -28,12 +25,15 @@
|
|||
<ul>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()" role="button"
|
||||
>Button</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
|
|
@ -43,21 +43,39 @@
|
|||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Button</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
||||
<p>
|
||||
<code><<b>ul</b>></code> are automatically distributed
|
||||
horizontally.
|
||||
</p>
|
||||
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
||||
<article aria-label="Nav example">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="12" x2="21" y2="12">
|
||||
</line><line x1="3" y1="6" x2="21" y2="6">
|
||||
</line><line x1="3" y1="18" x2="21" y2="18">
|
||||
</line>
|
||||
<a
|
||||
href="#"
|
||||
onclick="event.preventDefault()"
|
||||
class="secondary"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
height="16px"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -67,17 +85,35 @@
|
|||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
|
||||
<a
|
||||
href="#"
|
||||
onclick="event.preventDefault()"
|
||||
class="secondary"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
height="16px"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
|
|
@ -88,10 +124,12 @@
|
|||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
||||
<p>
|
||||
Inside <code><<b>aside</b>></code>, navs are stacked
|
||||
vertically.
|
||||
</p>
|
||||
<article aria-label="Vertical nav example">
|
||||
<aside>
|
||||
<nav>
|
||||
|
|
@ -103,8 +141,7 @@
|
|||
</nav>
|
||||
</aside>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>aside</b>>
|
||||
<pre><code><<b>aside</b>>
|
||||
<<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
|
|
@ -113,45 +150,42 @@
|
|||
</<b>ul</b>>
|
||||
</<b>nav</b>>
|
||||
</<b>aside</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>
|
||||
With <code><i>aria-label</i>=<u>"breadcrumb"</u></code
|
||||
>, you can turn a nav into a breadcrumb.
|
||||
</p>
|
||||
|
||||
<p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb.</p>
|
||||
<article aria-label="Breadcrumb example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Category</a>
|
||||
</li>
|
||||
<li>Page</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<article aria-label="Breadcrumb example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Category</a>
|
||||
</li>
|
||||
<li>Page</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>>
|
||||
<footer class="code">
|
||||
<pre><code><<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Home<<b>/a</b>><<b>/li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Category<<b>/a</b>><<b>/li</b>>
|
||||
<<b>li</b>>Page<<b>/li</b>>
|
||||
<<b>/ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
${require('./_footer.html')}
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue