You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
4.2 KiB
HTML
73 lines
4.2 KiB
HTML
<nav class="site-nav">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm site-nav__content">
|
|
<a class="site-nav__logo" href="{{ site.baseurl }}/">
|
|
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
|
|
<title>Shuffle.js logo</title>
|
|
<rect x="2" y="2" width="8" height="18" fill="#2dcb71"/>
|
|
<rect x="12" y="2" width="8" height="8" fill="#9b59b5"/>
|
|
<rect x="22" y="2" width="8" height="12" fill="#f39b11"/>
|
|
<rect x="2" y="22" width="8" height="8" fill="#e74b3b"/>
|
|
<rect x="12" y="12" width="8" height="8" fill="#3397db"/>
|
|
<rect x="22" y="16" width="8" height="4" fill="#1abb9b"/>
|
|
<rect x="12" y="22" width="18" height="8" fill="#33495d"/>
|
|
</svg>
|
|
<span class="site-nav__name">Shuffle.js</span>
|
|
</a>
|
|
<div class="site-nav__links">
|
|
<div class="site-nav__link site-nav__link--dropdown">
|
|
<button class="site-nav__link-toggle btn" id="docs-dropdown-btn" aria-label="Click to reveal list of Shuffle demos" aria-haspopup="true" aria-controls="docs-dropdown" aria-expanded="false">Docs</button>
|
|
<div class="site-nav__dropdown site-nav__dropdown--simple-links" id="docs-dropdown" aria-labelledby="docs-dropdown-btn">
|
|
<ol class="unstyled">
|
|
<li><a href="{{ site.baseurl }}/#install">Install</a></li>
|
|
<li><a href="{{ site.baseurl }}/#features">Features</a></li>
|
|
<li><a href="{{ site.baseurl }}/#options">Options</a></li>
|
|
<li><a href="{{ site.baseurl }}/#usage">Usage</a></li>
|
|
<li><a href="{{ site.baseurl }}/#filters">Filters</a></li>
|
|
<li><a href="{{ site.baseurl }}/#advanced-filters">Advanced Filters</a></li>
|
|
<li><a href="{{ site.baseurl }}/#sorting">Sorting</a></li>
|
|
<li><a href="{{ site.baseurl }}/#events">Events</a></li>
|
|
<li><a href="{{ site.baseurl }}/#adding-removing">Adding and Removing Items</a></li>
|
|
<li><a href="{{ site.baseurl }}/#public-methods">Public Methods</a></li>
|
|
<li><a href="{{ site.baseurl }}/#custom-styles">Custom Styles</a></li>
|
|
<li><a href="{{ site.baseurl }}/#dependencies">Dependencies</a></li>
|
|
<li><a href="{{ site.baseurl }}/#supported-browsers">Supported Browsers</a></li>
|
|
<li><a href="{{ site.baseurl }}/#changelog">Changelog</a></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="site-nav__link site-nav__link--dropdown">
|
|
<button class="site-nav__link-toggle btn" id="demos-dropdown-btn" aria-label="Click to reveal list of Shuffle demos" aria-haspopup="true" aria-controls="demos-dropdown" aria-expanded="false">Demos</button>
|
|
<div class="site-nav__dropdown" id="demos-dropdown" aria-labelledby="demos-dropdown-btn">
|
|
<ul class="unstyled">
|
|
{% for post in site.data.demos %}
|
|
<li class="">
|
|
{% if post.external %}
|
|
<a href="{{ post.url }}" target="_blank" rel="noopener">
|
|
{% else %}
|
|
<a href="{{ site.baseurl }}/{{ post.slug }}">
|
|
{% endif %}
|
|
<figure>
|
|
<picture>
|
|
<source srcset="{{ site.baseurl }}/img/demos/{{ post.slug }}.webp" type="image/webp">
|
|
<img src="{{ site.baseurl }}/img/demos/{{ post.slug }}.jpg" alt="{{ post.label }}">
|
|
</picture>
|
|
<figcaption>{{ post.label }}</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a class="site-nav__link hidden@xs" href="{{ site.baseurl }}/faq">FAQ</a>
|
|
<a class="site-nav__link hidden@xs" href="https://github.com/Vestride/Shuffle">
|
|
<img class="site-nav__link-img" src="{{ site.baseurl }}/img/github.svg" alt="View Shuffle on GitHub" title="" width="16" height="16">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|