Homepage done-ish

pinaxcon/templates/_footer.html

@@ -1,7 +1,10 @@
 {% load staticfiles %}
 {% load sponsorship_tags %}
+<div class="homepage-vertical-space"></div>
+
 <div class="row">
 
+
   <div class="logo small right">
     <div class="circle">
       <div class="fill" style="background-image: url('{% static "images/logo.svg" %}');"></div>

pinaxcon/templates/static_pages/homepage.html

@@ -18,8 +18,6 @@
 
     <div class="homepage-block-bg hphbg"></div>
     <div class="container homepage-block-content-cloudsep">
-      <div class="row">
-        <div class="col-sm-8 col-sm-offset-2">
           <div class="logo large left" style="margin: 20px;">
             <div class="circle">
               <div class="fill" style="background-image: url('{% static "images/logo.svg" %}');"></div>
@@ -28,9 +26,7 @@
           <h1 class="homepage-title">North Bay<br/>
             Python
           </h1>
-        </div>
+      <h2 class="homepage-subtitle">
-      </div>
-      <h2 class="homepage-subtitle text-center">
         <span class="wrap-break">A one-track Python conference,</span> <span class="wrap-break">north of the Golden Gate.</span><br/>
         <span class="wrap-break">November 2 &amp; 3, 2019.</span>
         <span class="wrap-break">Mystic Theatre, Petaluma, California.</span>
@@ -41,15 +37,116 @@
       <div class="clouds main"></div>
     </div>
   </div>
+
   <div class="jumbotron homepage-block dark shallow">
-
-
     <div class="container homepage-block-footer">
-    <p class="text-center">Talk proposal submissions now open until August 8th.<br />
+      <p class="">
-      Submit your proposal now!</p>
+        <span class="wrap-break">Talk proposal submissions are now open, until August 8th.</span>
+        <span class="wrap-break">Submit your proposal now!</span>
+      </p>
     </div>
   </div>
 
-  <div class="jumbotron homepage-block white">
+  <!-- Homepage content begins here -->
+  <div class="homepage-vertical-space"></div>
+  <div class="homepage-vertical-space"></div>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-12">
+        <h1>One Hour from San Francisco</h1>
+        <p class="lead">
+          <span class="wrap-break">Whether you're from Sonoma County,</span>
+          <span class="wrap-break">from the Bay Area, </span>
+          <span class="wrap-break">or flying here for the first time,</span>
+          <span class="wrap-break">North Bay Python in Petaluma is easy to get to.</span>
+        </p>
       </div>
+    </div>
+
+    <div class="row">
+
+      <div class="homepage-callout">
+        <div class="callout-image">
+          <h3 class="txt">Fly</h3>
+          <div class="filter"></div>
+          <div class="bg" style="background-image: url('{% static "images/homepage/snoopy.jpg" %}');"></div>
+          <p>
+            Fly into Sonoma County Airport at Santa Rosa, 30 minutes away.
+            Or, we're an express bus ride away from San Francisco and Oakland
+            international airports.
+          </p>
+        </div>
+      </div>
+
+      <div class="homepage-callout">
+        <div class="callout-image">
+          <h3 class="txt">Stay</h3>
+          <div class="filter"></div>
+          <div class="bg" style="background-image: url('{% static "images/homepage/snoopy.jpg" %}');"></div>
+          <p>
+            Drive 35 miles North of the Golden Gate Bridge, or take transit from
+            downtown San Francisco, and spend the night.
+          </p>
+        </div>
+
+      </div>
+
+      <div class="homepage-callout">
+        <div class="callout-image">
+          <h3 class="txt">Day Trip</h3>
+          <div class="filter"></div>
+          <div class="bg" style="background-image: url('{% static "images/homepage/snoopy.jpg" %}');"></div>
+          <p>Enjoy free all-day parking close to the venue, or take regular buses from San Francisco, Marin County, and Sonoma County</p>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="homepage-vertical-space"></div>
+
+    <div class="row">
+      <div class="col-xs-12">
+        <h1>Inclusion and Diversity</h1>
+        <p class="lead">We're a conference for everyone in Northern California, etc
+          etc etc words words words words words.</p>
+      </div>
+    </div>
+
+    <div class="row">
+
+      <div class="homepage-callout">
+        <div class="callout-image">
+          <h3 class="txt">Attendee Safety</h3>
+          <div class="filter"></div>
+          <div class="bg" style="background-image: url('{% static "images/homepage/snoopy.jpg" %}');"></div>
+          <p>We take our code of conduct serioiusly: our staff have taken enforcement training.</p>
+        </div>
+      </div>
+
+      <div class="homepage-callout">
+        <div class="callout-image">
+          <h3 class="txt">Opportunity Grants</h3>
+          <div class="filter"></div>
+          <div class="bg" style="background-image: url('{% static "images/homepage/snoopy.jpg" %}');"></div>
+          <p>If you live out of town, we want to make sure you can attend.</p>
+        </div>
+      </div>
+
+      <div class="homepage-callout">
+        <div class="callout-image">
+          <h3 class="txt">Diversity Targets</h3>
+          <div class="filter"></div>
+          <div class="bg" style="background-image: url('{% static "images/homepage/snoopy.jpg" %}');"></div>
+          <p>We want to look like the  Bay Area. We have diversity targets for our speakers and audience.</p>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="homepage-vertical-space"></div>
+
+  </div>
+
+
 {% endblock %}

static/scss/custom.scss

@@ -210,6 +210,38 @@ $homepage-block-smaller-min-height: 360px;
   min-height: 40px;
 }
 
+.homepage-callout {
+  @extend .col-xs-12;
+  @extend .col-sm-6;
+  @extend .col-md-4;
+
+  .callout-image {
+    position: relative;
+    width: 95%;
+    min-height: 240px;
+    margin: 2%;
+    padding: 5%;
+    color: white;
+
+    .txt {
+      z-index: 2;
+      position: relative;
+    }
+
+    .filter {
+      @extend .fill;
+      z-index: -1;
+      background-color: rgba(0,0,0,0.7);
+    }
+
+    .bg {
+      @extend .fill;
+      z-index: -2;
+
+    }
+  }
+}
+
 
 
 /* ??? */
@@ -574,18 +606,13 @@ footer .footer-copy {
 }
 
 .homepage-title {
-  font-size: $font-size-h1;
   font-weight: 600;
 }
 
 .homepage-subtitle {
-  font-size: $font-size-h3;
   line-height: 1.25;
   font-weight: 300;
 
-  .wrap-break {
-    display: inline-block;
-  }
 }
 
 .navbar-toggle {
@@ -596,3 +623,12 @@ footer .footer-copy {
 body.login #content_body .row > div.col-md-9 > p + div.container {
   padding-left: 0px;
 }
+
+.homepage-vertical-space {
+  height: 20px;
+}
+
+
+.wrap-break {
+  display: inline-block;
+}