diff --git a/pinaxcon/templates/static_pages/homepage.html b/pinaxcon/templates/static_pages/homepage.html
index c27a13c..a6c000f 100644
--- a/pinaxcon/templates/static_pages/homepage.html
+++ b/pinaxcon/templates/static_pages/homepage.html
@@ -13,14 +13,14 @@
<div class="homepage-block-bg" style="background-image: url('{% static "images/website-background.svg" %}');"></div>
- <div class="container has-bottom-aligned-div">
+ <div class="container homepage-block-content">
<h1>North Bay Python</h1>
<h2>A Python conference north of the Golden Gate</h2>
- <div class="bottom-align col-md-6 col-md-offset-3 text-center">
+ <div class="bottom-align">
<h3>Petaluma, California</h3>
- <h4><strong>2017 Conference:</strong> 2 & 3 December</h4>
+ <h4><strong>2017 conference:</strong> 2 & 3 December</h4>
<h4>Talk submissions close 29 September</h4>
<div class="btn-group">
@@ -32,21 +32,65 @@
</div>
<div class="jumbotron homepage-block dark">
- <div class="container">
+
+ <div class="homepage-block-bg" style="background-image: url('{% static "images/mystic.jpg" %}');"></div>
+
+ <div class="container homepage-block-content">
<h1>Downtown Petaluma</h1>
- <h2>Blah Blah Test</h2>
- </div>
+
+ <p>Here is some text about Petaluma and the Mystic Theatre. It's pretty great. The mystic is close to restaurants and hotels. Petaluma is only an hour out of San Francisco. Blah.</p>
+
+ <div class="bottom-align" style="width: 100%">
+ <div class="btn-group col-md-6">
+ <a class="btn btn-lg btn-primary" href="/about/north-bay-python">Find out more</a>
+ </div>
+
+ <div class="col-md-6 text-right">
+ Image credit: <a href="https://www.instagram.com/p/BU-G5dGAkHt">Mystic Theatre</a>, © 2017 Christopher Neugebauer (CC-BY-SA)</div>
+ </div>
</div>
- <div class="jumbotron homepage-block light">
+ </div>
- <div class="homepage-block-bg" style="background-image: url('{% static "images/website-background.svg" %}');"></div>
-
- <div class="container">
+ <div class="jumbotron homepage-block white">
+
+ <div class="container homepage-block-content">
<h1>Sponsors</h1>
</div>
</div>
+ <div class="jumbotron homepage-block dark">
+ <div class="homepage-block-bg" style="background-image: url('{% static "images/django-girls-2014.jpg" %}');"></div>
+
+ <div class="container homepage-block-content">
+ <h1>Inclusion and Diversity</h1>
+
+ <p>Statement about commitment to inclusion and diversity. Strong code of conduct. Short and long term diversity targets in our call for proposals. Cheap tickets, with an entry fee that we will waive on request. Financial assistance for those who need it.</p>
+
+
+ <div class="bottom-align" style="width: 100%">
+ <div class="btn-group col-md-6">
+ <a class="btn btn-lg btn-primary" href="/code-of-conduct">View our code of conduct</a>
+ </div>
+
+ <div class="col-md-6 text-right">
+ Image credit: <a href="https://www.flickr.com/photos/richard_jones/14638274749">DjangoGirls Brisbane 2014</a>, © 2014 Richard Jones (CC-BY)</div>
+ </div>
+ </div>
+ </div>
{% endblock %}
+
+{% block footer_base %}
+ <div class="jumbotron homepage-block light" style="height:100px;">
+
+ <div class="homepage-block-bg" style="background-image: url('{% static "images/website-background.svg" %}');"></div>
+
+ <div class="container homepage-block-content">
+ {% block footer %}
+ {% include "_footer.html" %}
+ {% endblock %}
+ </div>
+ </div>
+{% endblock %}
diff --git a/static/images/django-girls-2014.jpg b/static/images/django-girls-2014.jpg
new file mode 100644
index 0000000..ac8a38b
Binary files /dev/null and b/static/images/django-girls-2014.jpg differ
diff --git a/static/images/mystic.jpg b/static/images/mystic.jpg
new file mode 100644
index 0000000..d002da9
Binary files /dev/null and b/static/images/mystic.jpg differ
diff --git a/static/scss/custom.scss b/static/scss/custom.scss
index 5f00dc3..e44c6dc 100644
--- a/static/scss/custom.scss
+++ b/static/scss/custom.scss
@@ -87,7 +87,7 @@ body.reviews.voting-status {
padding: 0;
}
-.has-bottom-aligned-div {
+.homepage-block-content {
position: relative;
height: 100%;
}
@@ -103,24 +103,38 @@ body.reviews.voting-status {
min-height: 480px; // TODO: change
height: 480px;
position: relative;
+ box-shadow: $box-shadow;
+ z-index: 3;
}
.homepage-block.light {
- background-color: hsla(207, 60%, 85%, 1.0);
+ 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;
}
.homepage-block.dark {
- background: #333;
+ background: $gray-base;
color: white;
}
+
+.navbar {
+ box-shadow: $box-shadow;
+}
diff --git a/static/scss/variables.scss b/static/scss/variables.scss
index b9bf052..33a4d18 100644
--- a/static/scss/variables.scss
+++ b/static/scss/variables.scss
@@ -1,9 +1,13 @@
+/* COLORS */
// Used by links, buttons, and other background bits.
$brand-primary: #1f6400;
+$background-filter: hsla(207, 60%, 85%, 1.0);
+/* TEXT */
$font-family-sans-serif: 'Montserrat', Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+$headings-line-height: 1.0;
// Navbar
@@ -13,3 +17,5 @@ $navbar-default-link-color: darken($navbar-default-color, 6.5%);
$navbar-default-link-hover-color: darken($navbar-default-link-color, 6.5%);
$navbar-default-link-active-color: $navbar-default-link-hover-color;
$navbar-default-link-disabled-color: lighten($navbar-default-bg, 6.5%);
+
+$box-shadow: 0px 1px 1em rgba(0, 1, 1, 1); //, inset 0px -5px 1em rgba(0, 0, 0, 0.8);