1  ---
 2  layout: default
 3  title: Blinka
 4  permalink: /blinka
 5  ---
 6  
 7  <div id="downloads-page">
 8    <h1>Blinka</h1>
 9    <div class="downloads-inputs">
10      <div class="downloads-search">
11        <label class="search-wrapper">
12          <input aria-label="Search for Blinka boards" type="text" id="search" placeholder="Search for Blinka boards" />
13        </label>
14      </div>
15      <div class="downloads-filter">
16        <button class="filter" title="Filter Boards"><i class="fas fa-sliders-h" aria-hidden="true"></i></button>
17      </div>
18      <div class="downloads-filter-tags">
19      </div>
20    </div>
21    <div class="downloads-filter-content">
22      <div class="filter-buttons">
23        <button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
24      </div>
25      <div>
26        <div class="manufacturers">
27          <fieldset>
28            <legend>Manufacturers</legend>
29            <ul class="content"></ul>
30          </fieldset>
31        </div>
32        <div class="features">
33          <fieldset>
34            <legend>Features</legend>
35            <ul class="content"></ul>
36          </fieldset>
37        </div>
38        <div class="sort-by">
39          <fieldset>
40            <legend>Sort By</legend>
41            <ul class="content">
42              <li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
43              <li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
44              <li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
45            </ul>
46          </fieldset>
47        </div>
48      </div>
49    </div>
50    <div class="downloads-section">
51      {% for board in site.blinka %}
52          <div class="download" data-id="{{ board.board_id }}"
53                                data-name="{{ board.name }}"
54                                data-downloads="0"
55                                data-manufacturer="{{ board.manufacturer }}"
56                                data-features="{{ board.features | join: ','}}">
57            <a href="{{ board.url | relative_url }}">
58              <div>
59                <div class="img-responsive-4by3">
60                  {% include downloads/board_image.html board_image=board.board_image %}
61                </div>
62                <div class="details">
63                  <h3>{{ board.name }}</h3>
64                  By {{ board.manufacturer }}
65                </div>
66              </div>
67            </a>
68          </div>
69      {% endfor %}
70    </div>
71  </div>
72  
73  <script src="/assets/javascript/downloads.js"></script>