backgrounds.html

---
title: Backgrounds
layout: default
---
<main role="main">
  <!--- Main -->
  <section class="jumbotron text-center">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="/">Home</a>
              </li>
          </ul></div>
        </div>
      </nav>
    </div>
  </section>
  <section class="jumbotron text-center">
    <div class="container">
      <h1 class="jumbotron-heading">Backgrounds</h1>
      <p class="lead text-muted">A gallery of Fortune Street backgrounds.</p>
    </div>
  </section>
  <!--- Maps -->
  <div class="album">
    <div class="container">
      <div class="row">
        {%- for backgroundEntry in site.data.backgrounds -%}
        <div class="col-md-4 mb-5">
          <div class="card h-100">
            <img class="card-img-top" src="{%- include renderBackground.liquid backgroundEntry=backgroundEntry -%}" style="object-fit: fill;"></a>
            <div class="card-body">
              <h4 class="card-title">{{ backgroundEntry.background }}</h4>
              <p class="card-text">{{ backgroundEntry.name }}</p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">{{ backgroundEntry.bgm }}</li>
              {%- if backgroundEntry.mapIcon -%}
              <li class="list-group-item">{{ backgroundEntry.mapIcon }}</li>
              {%- endif -%}
            </ul>
            {%- if backgroundEntry.download -%}
            <div class="card-footer">
              {% if backgroundEntry.download.first -%}
                {% for download in backgroundEntry.download -%}
                  <a href="{{ download }}" class="btn btn-primary">{{ download | remove:'https://' | remove:'http://' | split:'/' | first }}</a>
                {% endfor -%}
              {% else -%}
                <a href="{{ backgroundEntry.download }}" class="btn btn-primary">Download</a>
              {% endif -%}
            </div>
            {%- endif -%}
          </div>
        </div>
        {%- endfor -%}
      </div>
    </div>
  </div>
</main>