Another round of splash design

* Add map to splash
* Reverse venue<->conference relation
* Split venue address into fields
* Don't go through venue for lodgings anymore

app/assets/stylesheets/application.css

@@ -12,4 +12,5 @@
  *= require font-awesome
  *= require bootstrap-markdown.min
  *= require bootstrap-datetimepicker
+ *= require leaflet
 */

app/assets/stylesheets/osem-splash.css.scss

@@ -1,4 +1,6 @@
 #splash {
+  // Counter the general padding for #content
+  margin-bottom: -60px;
   section {
     padding-top: 60px;
     padding-bottom: 60px;
@@ -11,100 +13,129 @@
   section:nth-child(odd) {
     background: none repeat scroll 0 0 #ffffff;
     color: #7b7b7b;
-  }
-}
-
-#splash-banner{
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  margin-top: -10px;
-  padding-top: 100px;
-  padding-bottom: 100px;
-  .container {
-    #splash-header  {
-      background-color: rgba(224, 224, 224,.80);
-      padding-top: 20px;
-      padding-bottom: 20px;
+    .thumbnail {
+      background: none repeat scroll 0 0 #e0e0e0;
     }
   }
-}
 
-#program {
-  .tracks:hover{
-    background-color: white;
+  .cta-button {
+    padding-top: 30px;
   }
-}
 
-#callforpapers {
-  .timer-box{
-    width: 130px;
-    margin: 35px 24px 20px 0;
-    border-radius: 50%;
-    border:4px solid #989797;
+  #banner{
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    margin-top: -10px;
+    padding-top: 100px;
+    padding-bottom: 100px;
+    .container {
+      #header  {
+        background-color: rgba(224, 224, 224,.80);
+        padding-top: 20px;
+        padding-bottom: 20px;
+      }
+    }
   }
-  #cfp-date{
-    font-size: 40px;
-    color: #ff6633;
+  
+  #program {
+    h3 {
+      padding-left: 5px;
+    }
+    .track {
+      padding: 20px;
+    }
+    .track:hover{
+      background-color: #F0FFFF;
+    }
+  }
+  
+  #callforpapers {
+    .timer-box{
+      width: 130px;
+      margin: 35px 24px 20px 0;
+      border-radius: 50%;
+      border:4px solid #989797;
+    }
+  }
+  
+  #venue {
+    padding-top: 0px;
+    padding-bottom: 0px;
   }
-}
 
-#location {
-  background-repeat: no-repeat;
-  background-position: center center;
-  width: 100%;
-  background-size: cover;
-  min-height: 500px;
-  h1,h2,p{
-    color: #fff;
+  #lodging {
+    .img-lodging {
+      max-height: 200px;
+    }
   }
-  h1,h2,li,p{
-    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
-    font-weight: 400;
+  
+  #sponsors {
+    .img-sponsor {
+      max-height: 100px;
+    }
+    .img-sponsor-1 {
+      max-height: 200px;
+    }
+    .img-sponsor-2 {
+      max-height: 150px;
+    }
+    .img-sponsor-3 {
+      max-height: 120px;
+    }
   }
-}
 
-#social-media{
-  i{
-    color: #4a4a4a;
+  #social-media{
+    background: none repeat scroll 0 0 #2f2f2f;
+    padding-top: 60px;
+    padding-bottom: 60px;
+    i{
+      color: #4a4a4a;
+    }
+    i:hover{
+      color: #16a085;
+    }
+    a{
+      padding-left: 100px;
+    }
+    a:nth-child(-n+1) {
+      padding-left: 0px;
+    }
   }
-  i:hover{
-    color: #16a085;
-  }
-}
-
-.scroll-top-wrapper {
-  position: fixed;
-  opacity: 0;
-  visibility: hidden;
-  overflow: hidden;
-  text-align: center;
-  z-index: 99999999;
-  background-color: #424242;
-  width: 50px;
-  height: 48px;
-  line-height: 48px;
-  right: 30px;
-  bottom: 30px;
-  padding-top: 2px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
-  border-bottom-left-radius: 10px;
-  -webkit-transition: all 0.5s ease-in-out;
-  -moz-transition: all 0.5s ease-in-out;
-  -ms-transition: all 0.5s ease-in-out;
-  -o-transition: all 0.5s ease-in-out;
-  transition: all 0.5s ease-in-out;
-  i.fa {
-    line-height: inherit;
-  }
-  &.show {
-    visibility:visible;
-    cursor:pointer;
-    opacity: 1.0;
-  }
-  a {
-    color: white;
+  
+  .scroll-top-wrapper {
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    overflow: hidden;
+    text-align: center;
+    z-index: 99999999;
+    background-color: #424242;
+    width: 50px;
+    height: 48px;
+    line-height: 48px;
+    right: 30px;
+    bottom: 30px;
+    padding-top: 2px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    -webkit-transition: all 0.5s ease-in-out;
+    -moz-transition: all 0.5s ease-in-out;
+    -ms-transition: all 0.5s ease-in-out;
+    -o-transition: all 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    i.fa {
+      line-height: inherit;
+    }
+    &.show {
+      visibility:visible;
+      cursor:pointer;
+      opacity: 1.0;
+    }
+    a {
+      color: white;
+    }
   }
 }

app/assets/stylesheets/osem.css.scss

@@ -5,11 +5,15 @@ html {
 
 body {
     /* Margin bottom by 2 times the footer height */
-    margin-bottom: 120px;
+    margin-bottom: 60px;
     /* Margin bottom by navbar height */
     padding-top: 60px;
 }
 
+#content {
+  padding-bottom: 60px;
+}
+
 #footer {
     position: absolute;
     bottom: 0;
@@ -28,4 +32,21 @@ body {
 
 .img-center {
     margin: 0 auto;
+}
+
+/* centered columns styles */
+.row-centered {
+  text-align:center;
+}
+.col-centered {
+  display:inline-block;
+  float:none;
+  /* reset the text-align */
+  text-align:left;
+  /* inline-block space fix */
+  margin-right:-4px;
+}
+
+.col-top {
+  vertical-align:top;
 }