use white logo instead of ugly box, use fallback image, keep option for video-blur-image

1 files changed, 20 insertions, 7 deletions

diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss
index 2f56ca9..627b230 100644
--- a/assets/css/src/lustige-styles.scss
+++ b/assets/css/src/lustige-styles.scss
@@ -3,6 +3,14 @@
 @import "variables";
 @import "../lib/bootstrap";
 
+// primary plan: video
+//$bg: '../img/video-blur.jpg';
+//$bgscale: true;
+
+// fallback-plan: 31C3 artwork based background
+$bg: '../img/bg.png';
+$bgscale: false;
+
 $max-width: $container-lg;
 
 /* main layout */
@@ -77,7 +85,7 @@ p {
 .navbar {
   border: none;
 
-  background-image: url('../img/video-blur.jpg');
+  background-image: url($bg);
   background-position: 50% 75;
 
   body.rooms & {
@@ -264,24 +272,29 @@ a.inverted {
 }
 
 /* banner area */
+@if $bgscale {
+  @media all and (min-width: 1920px) {
+    .banner {
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+    }
+  }
+}
 .banner {
   width: 100%;
   height: 280px;
   overflow: hidden;
   text-align: center;
-  background-image: url('../img/video-blur.jpg');
+  background-image: url($bg);
   background-position: 50% 50%;
+  background-repeat: repeat-x;
   position: relative;
 
   .logo {
     position: relative;
     z-index: 1;
     display: inline-block;
-    margin-top: 12px;
-
-    padding: 25px;
-    border: 1px solid $transparent-white;
-    background-color: $transparent-white;
+    margin-top: 37px;
   }
 }