{% extends "site_base_home.html" %}

{% load i18n %}

{% load staticfiles %}

{% block head_title %}Welcome{% endblock %}

{% block body_class %}home{% endblock %}

{% block body %}

  <div class="homepage-block-bg website-background"></div>

  <div class="jumbotron homepage-block light">

    <div class="homepage-block-bg website-background"></div>

    <div class="hills main"></div>

    <div class="container homepage-block-content">

      <div class="tight-headings">

        <h1>North Bay Python</h1>

        <h2 class="homepage-subtitle">A Python conference north of the Golden Gate</h2>

      </div>

      <div class="row">

        <div class="col-md-6">

          <h3>

            The Mystic Theatre</br>

            Petaluma, California

          </h3>

          <h4>

            December 2 &amp; 3, 2017<br/>

            Tickets on sale from $25

          </h4>

        </div>

        <div class="col-md-4 col-md-offset-2 email-signup-panel">

          <div class="panel panel-default">

            <div class="panel-heading">

              <h2 class="panel-title">Sign up for our low-volume announcements newsletter!</h4>

            </div>

            <div class="panel-body">

              <form

                class="form-inline"

                action="https://tinyletter.com/northbaypython" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/northbaypython', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">

                <div class="form-group">

                  <span>

                    <label class="hidden-accessible" for="tlemail">Email address:</label>

                  </span>

                  <span>

                    <input class="form-control" type="email" name="email" id="tlemail" placeholder="E-mail address"/>

                  </span>

                </div>

                <span>

                  <input class="btn btn-primary" type="submit" value="Subscribe" />

                </span>

                <input type="hidden" value="1" name="embed"/>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="container homepage-block-footer">

      <div>

        <a class="btn btn-primary btn-lg" href="/attend">Buy a ticket!</a>

        <a class="btn btn-default btn-lg " href="https://twitter.com/northbaypython">Twitter</a>

        <a class="btn btn-default btn-lg" href="https://facebook.com/northbaypython">Facebook</a>

      </div>

    </div>

  </div>

  <div class="jumbotron homepage-block dark">

    <div class="homepage-block-bg mystic-background"></div>

    <div class="container homepage-block-content">

      <h1>Downtown Petaluma</h1>

      <p>North Bay Python's home is Petaluma, a delightfully quaint dairy town, nestled on a river at the edge of California's Wine Country. Here's what you can look forward to:</p>

      <ul>

        <li>An historic venue with countless restaurants and coffee shops in walking distance</li>

        <li>World-famous craft food and drink producers on your doorstep</li>

        <li>Charming <a href="/attend/hotels">small-town hotels</a>, as close as one block away</li>

      </ul>

      <p>&hellip; and it's <a href="/attend/travel">only an hour away from San Francisco</a> (on a good day).</p>

    </div>

    <div class="homepage-block-footer full-width">

      <div class="container">

        <div class="row">

          <div class="col-md-4">

            <a class="btn btn-lg btn-primary btn-shadow" href="/about/petaluma">Learn More</a>

            <a class="btn btn-lg btn-info" href="/attend/hotels">Hotels</a>

            <a class="btn btn-lg btn-info" href="/attend/travel">Travel</a>

          </div>

          <div class="col-md-8 text-right photo-attribution">

            Image credit: <a href="https://www.instagram.com/p/BU-G5dGAkHt">Mystic Theatre</a>, &copy; 2017 Christopher Neugebauer (<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>)

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="jumbotron homepage-block white">

    <div class="container homepage-block-content">

      <h1>Sponsors</h1>

      {% sponsor_levels as levels %}

      <div class="row sponsor-list">

      {% for level in levels %}

          {% if level.sponsors %}

              {% for sponsor in level.sponsors %}

                  <div class="sponsor">

                    <div class="logo-alignment">

                      {% if sponsor.website_logo %}

                          <a href="{{ sponsor.external_url }}">

                              <img src="{% thumbnail sponsor.website_logo '600x360' %}" alt="{{ sponsor.name }}">

                          </a>

                      {% else %}

                          <a href="{{ sponsor.external_url }}">{{ sponsor.name }}</a>

                      {% endif %}

                    </div>

                  </div>

              {% endfor %}

          {% endif %}

      {% endfor %}

      </div>

    </div>

    <div class="container homepage-block-footer">

      <div class="btn-group">

        <a class="btn btn-lg btn-primary btn-shadow" href="/sponsors/become-a-sponsor">Become a Sponsor</a>

      </div>

    </div>

  </div>

  <div class="jumbotron homepage-block dark">

    <div class="homepage-block-bg djangogirls-background"></div>

    <div class="container homepage-block-content">

      <h1>Inclusion and Diversity</h1>

      <p>North Bay Python is proud to be founded on a commitment to inclusion and diversity. Here's what we commit to:</p>

      <ul>

        <li>A strong Code of Conduct and enforcement policy built on the Python Software Foundation's PyCon US policy.</li>

        <li>Diversity targets for speakers and attendees.</li>

        <li>Financial assistance for speakers who need it.</li>

        <li>Low-cost tickets, with fees enthusiastically waived on request.</li>

      </ul>

    </div>

    <div class="homepage-block-footer full-width">

      <div class="container">

        <div class="row">

  clip:rect(0px,0px,0px,0px);

  height:1px;

  margin:-1px;

  overflow:hidden;

  padding:0;

  position:absolute;

  width:1px

}

$homepage-block-min-height: 480px;

.homepage-block {

  margin-top: 0;

  margin-bottom: 0;

  min-height: $homepage-block-min-height;

  position: relative;

  box-shadow: $box-shadow;

  z-index: 3;

  .sponsor {

    $sponsor-height: 150px;

    @include make-xs-column(6);

    @include make-sm-column(4);

    @include make-md-column(3);

    max-width: 600px;

    height: $sponsor-height;

    .logo-alignment {

      max-width: 300px;

      width: 100%;

      height: 100%;

      // Center the icon horizontally and vertically

      text-align: center;

      line-height: ($sponsor-height - 5px);

      vertical-align: middle;

      a img {

        max-width: 100%;

        max-height: 100%;

        width: auto;

        height: auto;

      }

    }

  }

}

.homepage-block-content {

  min-height: ($homepage-block-min-height - 80px);

}

/* ??? */

.homepage-block-footer {

}

.homepage-block.light {

  background-color: $background-filter;

  z-index: 2;

}

.homepage-block.white {

  background-color: white;

  z-index: 1;

}

.homepage-block-bg {

  top: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  position: absolute;

  background-size: cover;

  background-position: center;

  opacity: 0.3;

  background-blend-mode: multiply;

  z-index: -9999;

  box-shadow: $box-shadow;

}

.homepage-block.dark {

  background: $gray-base;

  color: white;

  text-shadow: 1px 1px $gray-dark;

  a:not(.btn) {

    color: lighten($brand-primary, 20%);

    &:hover,

    &:focus,

    &:active {

      color: lighten($brand-primary, 15%);