illinois-cs241.github.io/past_projects.html at master · arshk123/illinois-cs241.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
---
---
<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
      {% include header.html %}
      <main class="mdl-layout__content">
        <div class="page-content">
          <!-- Your content goes here -->
          <div class="row">
            <div class="small-12 medium-12 large-8 large-centered columns">
              <h1>Past Projects</h1>

              {% for term in site.data.honors_projects %}
                <h2>{{term.term}}</h2>

                <!-- Desktop Table -->
                <div class="show-for-large-up">
                  <table width = "100%" class="mdl-data-table mdl-js-data-table">
                    <thead>
                      <tr>
                        <th class="mdl-data-table__cell--non-numeric">Name</th>
                        <th class="mdl-data-table__cell--non-numeric">Description</th>
                        <th class="mdl-data-table__cell--non-numeric">Link</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for project in term.projects %}
                        <tr>
                          <td class="mdl-data-table__cell--non-numeric">{{project.name}}</td>
                          <td class="mdl-data-table__cell--non-numeric">{{project.description}}</td>
                          <td class="mdl-data-table__cell--non-numeric">
                            {% if project.link_url and project.link_title %}
                              <a href="{{project.link_url}}">{{project.link_title}}</a>
                            {% endif %}
                          </td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>

                <!-- Mobile Table -->
                <div class="hide-for-large-up">
                  {% for project in term.projects %}
                    <table width = "100%" class="mdl-data-table mdl-js-data-table" style = "margin-bottom: 5%">
                      <tr>
                        <td class="mdl-data-table__cell--non-numeric">Name</td>
                        <td>{{project.name}}</td>
                      </tr>
                      <tr>
                        <td class="mdl-data-table__cell--non-numeric">Description</td>
                        <td>{{project.description}}</td>
                      </tr>
                      <tr>
                        <td class="mdl-data-table__cell--non-numeric">Link</td>
                        <td>
                          {% if project.link_url and project.link_title %}
                            <a href="{{project.link_url}}">{{project.link_title}}</a>
                          {% endif %}
                        </td>
                      </tr>
                    </table>
                  {% endfor %}
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </main>
    </div>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>