index.html

---
layout: default
title: Home
notitle: true

# groups of columns of {roles: list, width: num, image: bool}
role-tables:
- - roles: [faculty]
    width: 4
    image: true
  - roles: [student]
    width: 8
    image: true
- - roles: [collab]
    width: 5
    image: false
  - roles: [alum]
    width: 7
    image: false
---

<div class="jumbotron">
    <p> {{ site.description }} </p>
</div>

<section>
    <table style="border-collapse: collapse;">
        <tr>
            <td style="border: none; vertical-align: top;">
                    <h2>Research</h2>
                    <ul>
                    {% for r in site.research %}
                        <li> {{ r }} </li>
                    {% endfor %}
                    </ul>
            </td>         
            <td style="border: none; vertical-align: top;">
                    <h2>Courses</h2>
                    <ul>
                    {% for c in site.courses %}
                        <li> {{ c.number }}: <a href={{ c.url }}>{{ c.name }}</a> </li>
                    {% endfor %}
                   </ul>
            </td>
        </tr>
    </table>
</section>

<div id="people">
    <h2>People</h2>
    {% for role-table in page.role-tables %}
        <section class="people row justify-content-between">
            {% for role-column in role-table %}
                <div class="col-md-{{ role-column.width }}">
                    {% for role in role-column.roles %}
                        {% include role-people.html role=role %}
                    {% endfor %}
                </div>
            {% endfor %}
        </section>
    {% endfor %}
</div>