CopyleftConf/copyleftconf-website Changeset - d1fe144a2688

Changeset - d1fe144a2688

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Christopher Neugebauer - 5 years ago 2019-06-15 21:33:16
_@chrisjrn.com

Add newsletter signup

2 files changed with 38 insertions and 8 deletions:

pinaxcon/templates/static_pages/homepage.html

static/scss/custom.scss

0 comments (0 inline, 0 general)

pinaxcon/templates/static_pages/homepage.html

➞

Show inline comments

 {% extends "site_base_home.html" %}
 {% load i18n %}
 {% load staticfiles %}
 {% load thumbnail %}
 {% load sponsorship_tags %}
 {% load schedule_tags %}
 {% block head_title %}November 3 and 4, 2018{% endblock %}
 {% block body_class %}home{% endblock %}
 {% block body %}
   <div class="homepage-block-bg website-background"></div>
   <div class="jumbotron homepage-block dark smaller">
     <div class="homepage-block-bg hphbg"></div>
     <div class="container homepage-block-content-cloudsep">
           <div class="logo large left" style="margin: 20px;">
             <div class="circle">
               <div class="fill" style="background-image: url('{% static "images/logo.svg" %}');"></div>
             </div>
           </div>
           <h1 class="homepage-title">North Bay<br/>
             Python
           </h1>
       <h2 class="homepage-subtitle">
         <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>
       </h2>
     </div>
     <div class="homepage-block-bloop">
       <div class="grey-gradient main"></div>
       <div class="clouds main"></div>
     </div>
   </div>
   <div class="jumbotron homepage-block dark shallow">
     <div class="container homepage-block-footer">
       <p class="">
         {% comment %}
         <span class="wrap-break">Talk proposal submissions are now open, until August 8th.</span>
         <span class="wrap-break">Submit your proposal now!</span>
         {% endcomment %}
         <span class="wrap-break">Talk proposal submissions open soon!</span>
       </p>
       <div class="row">
         <div class="col-md-8">
           <p class="">
             {% comment %}
             <span class="wrap-break">Talk proposal submissions are now open, until August 9th.</span>
             <span class="wrap-break">Submit your proposal now!</span>
             {% endcomment %}
             <span class="wrap-break">Talk proposal submissions open soon!</span>
           </p>
         </div>
         <div class="col-md-4  email-signup-panel">
           <div class="panel panel-default">
             <div class="panel-heading">
               <h2 class="panel-title homepage-title">Sign up for our 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>
   <!-- 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"><a href="/go/fly">Fly</a></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"><a href="/go/stay">Stay</a></h3>
           <div class="filter"></div>
           <div class="bg" style="background-image: url('{% static "images/homepage/golden-gate.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"><a href="/go/day-trip">Day Trip</a></h3>
           <div class="filter"></div>
           <div class="bg" style="background-image: url('{% static "images/homepage/mystic-marquee-2017.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. Every aspect of our planning
           focuses on improving access, diversity, and inclusion within our Python community.</p>
       </div>
     </div>
     <div class="row">
       <div class="homepage-callout">
         <div class="callout-image">
           <h3 class="txt"><a href="/code-of-conduct">Attendee Safety</a></h3>
           <div class="filter"></div>
           <div class="bg" style="background-image: url('{% static "images/homepage/4th-street-parade.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"><a href="/opportunity-grant">Opportunity Grants</a></h3>
           <div class="filter"></div>
           <div class="bg" style="background-image: url('{% static "images/homepage/django-girls-2014.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"><a href="/program/selection-process">Diversity Targets</a></h3>
           <div class="filter"></div>
           <div class="bg" style="background-image: url('{% static "images/homepage/old-bank.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

➞

Show inline comments

@@ ... / @@ -167,257 +167,257 @@ $homepage-block-smaller-min-height: 360px; @@
         max-height: 100%;
         width: auto;
         height: auto;
+      }
+    }
+  }
   .speaker {
     @include make-xs-column(6);
     @include make-sm-column(4);
     @include make-md-column(3);
     max-width: 600px;
     min-height: 22em;
     margin-bottom: 2em;
     text-align: center;
     vertical-align: middle;
     .image-alignment {
       width: 80%;
       height: 80%;
       margin: auto auto;
       // Center the icon horizontally and vertically
+    }
+  }
   .speaker-list {
     margin-top: 2em;
+  }
+}
 .homepage-block-content {
   min-height: ($homepage-block-min-height - 80px);
+}
 .homepage-block-content-cloudsep {
   min-height: ($homepage-block-smaller-min-height - 40px);
+}
 .homepage-block-bloop {
   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;
+    }
+  }
   a {
     color: $logo-sky-blue;
+  }
+}
 /* ??? */
 .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-background-opacity {
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0.7;
   z-index: -9999;
   background-blend-mode: multiply;
+}
 .homepage-block.dark {
   background: $gray-base;
   color: white;
   text-shadow: 1px 1px $gray-dark;
+  //text-shadow: 1px 1px $gray-dark;
   a:not(.btn) {
     color: lighten($brand-primary, 20%);
     &:hover,
     &:focus,
     &:active {
       color: lighten($brand-primary, 15%);
+    }
+  }
+}
 .navbar {
   box-shadow: $box-shadow;
+}
 .navbar ul.navbar-nav > li > a,
 .navbar-header a.navbar-brand {
   &:active,
   &:focus,
   &:hover {
     background-color: #004303;
+  }
+}
 .tight-headings {
   h1, h2, h3, h4, h5, h6 {
     margin: 0.05em;
+  }
+}
 .btn-shadow {
   box-shadow: 1px 1px 5px $gray-dark;
+}
 .hills {
   background-size: 100%;
   background-position: bottom;
   background-repeat: no-repeat;
   width: 50%;
   height: 100%;
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: -7999;
   &.main {
     background-image: url("../images/hills.svg");
+  }
   &.footer {
     background-image: url("../images/hills-footer.svg");
+  }
+}
 .hphbg {
   background-color: $logo-sky-blue;
   opacity: 1;
   /* will be "on top", if browser supports it */
   background-size: 100%;
   background-position: bottom;
   top: 0;
   bottom: 0;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;
+}
 .grey-gradient {
   background-size: 100%;
   background-position: bottom;
   background-repeat: no-repeat;
   width: 100%;
   height: 50%;
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: -9999;
   //background-color: $logo-sky-blue;
   background-image: linear-gradient(transparent, black);
   &.homepage-footer {
     height: 10%;
+  }
   &.main {
     height: 80%;
+  }
+}
 .clouds {
   background-position: bottom;
   background-repeat: repeat-x;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   //right: 0;
   z-index: -9000;
   &.main {
     background-image: url("../images/homepage-clouds-bottom.svg");
+  }
   &.ftr {
     background-image: url("../images/homepage-clouds-bottom.svg");
     opacity: 0.1;
+  }
   &.hdr {
     background-image: url("../images/homepage-clouds-bottom.svg");
     background-position: top;
     opacity: 0.6;
+  }
+}
 .circle {
   position: relative;
   border-radius: 100%;
   overflow: hidden;
   width: 100%;

0 comments (0 inline, 0 general)