---
layout: default
permalink:
---

<div id="homepage">
  <div class="hidden-sm-down">
    {% include vertical-nav.html %}
  </div>

  <header>
    <div class="hero-image">
      <h1>sfu<b>concert orchestra</b></h1>
    </div>
  </header>

  {% assign sections = site.sections | where: "onHomePage", "true" %}
  {% assign sorted = sections | sort: 'order' %}
  {% for section in sorted %}
    <!-- Full screen layout has different section padding than mobile -->
    <section id="{{section.name}}" class="hidden-sm-down full-padding">
      {{section.content}}
    </section>

    <section id="{{section.name}}" class="hidden-md-up mobile-padding">
      {{section.content}}
    </section>
  {% endfor %}
</div>

---
layout: default
permalink:
---

<div id="homepage">
  <div class="hidden-sm-down">
    {% include vertical-nav.html %}
  </div>

  <header>
    <div class="hero-image">
      <h1>sfu<b>concert orchestra</b></h1>
    </div>
  </header>

  {% assign sections = site.sections | where: "onHomePage", "true" %}
  {% assign sorted = sections | sort: 'order' %}
  {% for section in sorted %}
    <!-- Full screen layout has different section padding than mobile -->
    <section id="{{section.name}}" class="">
      {{section.content}}
    </section>
  {% endfor %}
</div>

Move section margin styles to local section stylings
Move section margin styles to local section stylings

Instead of having the margin-bottom rule global for all sections,
make it a utility class and add it to each appropriate section
individually.

This is because having the former necesseciates the duplication of
<section>s in the loop, each having a different style based on
mobile or full screen. But this messes up the vertical nav
since now there's two copies of each in the DOM.
