77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
---
|
|
layout: default
|
|
title: Blinka
|
|
permalink: /blinka
|
|
---
|
|
|
|
<div id="downloads-page">
|
|
<h1>Blinka</h1>
|
|
<div class="downloads-inputs">
|
|
<div class="downloads-search">
|
|
<label class="search-wrapper">
|
|
<input aria-label="Search for Blinka boards" type="text" id="search" placeholder="Search for Blinka boards" />
|
|
</label>
|
|
</div>
|
|
<div class="downloads-filter">
|
|
<button class="filter" title="Filter Boards"><i class="fas fa-sliders-h" aria-hidden="true"></i></button>
|
|
</div>
|
|
<div class="downloads-filter-tags">
|
|
</div>
|
|
</div>
|
|
<div class="downloads-filter-content">
|
|
<div class="filter-buttons">
|
|
<button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
|
|
</div>
|
|
<div>
|
|
<div class="manufacturers">
|
|
<fieldset>
|
|
<legend>Manufacturers</legend>
|
|
<ul class="content"></ul>
|
|
</fieldset>
|
|
</div>
|
|
<div class="features">
|
|
<fieldset>
|
|
<legend>Features</legend>
|
|
<ul class="content"></ul>
|
|
</fieldset>
|
|
</div>
|
|
<div class="sort-by">
|
|
<fieldset>
|
|
<legend>Sort By</legend>
|
|
<ul class="content">
|
|
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
|
|
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
|
|
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
|
|
</ul>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="downloads-section">
|
|
{% for board in site.blinka %}
|
|
<div class="download" data-id="{{ board.board_id }}"
|
|
data-name="{{ board.name }}"
|
|
data-downloads="0"
|
|
data-manufacturer="{{ board.manufacturer }}"
|
|
data-features="{{ board.features | join: ','}}">
|
|
<a href="{{ board.url | relative_url }}">
|
|
<div>
|
|
<div class="img-responsive-4by3">
|
|
<img srcset="{{ "/assets/images/boards/small/" | append: board.board_image | relative_url }} 300w,
|
|
{{ "/assets/images/boards/large/" | append: board.board_image | relative_url }} 700w"
|
|
sizes="(max-width: 1024px) 700px,
|
|
300px"
|
|
src="{{ "/assets/images/boards/original" | append: info.board_image | relative_url }}" alt="Image of Board">
|
|
</div>
|
|
<div class="details">
|
|
<h3>{{ board.name }}</h3>
|
|
By {{ board.manufacturer }}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/javascript/downloads.js"></script>
|