Add missing styles and images

SUSE · Sep 9, 2014 · 74bbe0a · 74bbe0a
1 parent 35aaa2d
commit 74bbe0a
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 29 deletions.
diff --git a/app/assets/images/menu-bar-days-to-launch.png b/app/assets/images/menu-bar-days-to-launch.png
diff --git a/app/assets/images/menu-bar-login-outer.png b/app/assets/images/menu-bar-login-outer.png
diff --git a/app/assets/images/menu-bar-login.png b/app/assets/images/menu-bar-login.png
diff --git a/app/assets/images/menu-bar-twitter.png b/app/assets/images/menu-bar-twitter.png
diff --git a/app/assets/images/menu-side-bg.png b/app/assets/images/menu-side-bg.png
diff --git a/app/assets/javascripts/shakeIt.js b/app/assets/javascripts/shakeIt.js
@@ -105,7 +105,7 @@ function screenShaker() {
 	setTimeout(function() {
 		$.each(rotationObj, function(index, val) {
 			 setTimeout(function() {
-			 	$(".container").css({
+			 	$(".wrap").css({
 			 		"transform": "rotate("+val[0]+"deg)",
 		      "-ms-transform": "rotate("+val[0]+"deg)",
 		      "-webkit-transform": "rotate("+val[0]+"deg)",

diff --git a/app/assets/stylesheets/layout.css.scss b/app/assets/stylesheets/layout.css.scss
@@ -19,7 +19,7 @@ h1, h2, h3, h4, h5, h6 {
   margin: 0
 }
 
-.container {
+.wrap {
   width: 100%;
   height: 100%;
   z-index: 6000;

diff --git a/app/assets/stylesheets/menues.css.scss b/app/assets/stylesheets/menues.css.scss
@@ -1,37 +1,115 @@
 // style for menues
 @import 'variables';
-
 $distance-menu: 12px;
 
+@mixin orange-gradient {
+    background: #ffae1b; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ffae1b 0%, #ffdb8f 99%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffae1b), color-stop(99%,#ffdb8f)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ffae1b 0%,#ffdb8f 99%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ffae1b 0%,#ffdb8f 99%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ffae1b 0%,#ffdb8f 99%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ffae1b 0%,#ffdb8f 99%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffae1b', endColorstr='#ffdb8f',GradientType=0 ); /* IE6-9 */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+    //glow effect
+    text-shadow: 0px 0px 5px #cf3f00;
+    font-weight: 400
+}
+
+.menu {
+    background: image-url("menu-side-bg.png") no-repeat;
+    height: 314px;
+    width: 218px;
+    padding: 15px;
+    box-sizing: border-box;
+    ul li a {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+    .menu-btn-login {
+        background: image-url("menu-bar-login.png") no-repeat;
+        height: 90px;
+        width: 189px;
+        margin-top: 7px;
+        position: relative;
+        .outerCircle {
+      background: image-url("menu-bar-login-outer.png") no-repeat;
+        }
+        .innerCircle {
+      // background: image-url("menu-bar-login-inner.png") no-repeat;
+        }
+        .outerCircle, .innerCircle {
+      position: absolute;
+      width: 102px;
+      height: 98px;
+      top: 0;
+      right: 0;
+        }
+    }
+    .menu-btn-twitter {
+        height: 96px;
+        width: 100%;
+        padding-top: 10px;
+        overflow: hidden;
+        &.row {
+            margin: 0;
+            div[class*="col-xs"] {
+        padding: 0;
+            }
+        }
+        p {
+            font-size: 10px;
+            color: $light-blue;
+            font-weight: normal;
+        }
+    }
+    .menu-btn-countdown {
+        background: image-url("menu-bar-days-to-launch.png") no-repeat;
+        height: 96px;
+        width: 189px;
+        position: relative;
+        .counter {
+            position: absolute;
+            top: 29px;
+            right: 35px;
+          @include orange-gradient;
+          font-size: 25px
+        }
+    }
+}
+
 #left-menu {
-  left: $distance-menu;
+    left: $distance-menu;
 }
 #right-menu {
-  right: $distance-menu;
+    right: $distance-menu;
 }
 #home-menu-contact {
-  color: $light-blue;
-  text-align: center;
-  position: absolute;
-  font-size: 11px;
-  font-family: 'Raleway', sans-serif;
-  font-weight: 200;
-  width: 100%;
-  bottom: -450px;
-  a {
     color: $light-blue;
-  }
-  .info-footer, .home-console {
-    display: inline-block;
-  }
-  .home-console {
-    background: image-url("console-off.png");
-    width: 409px;
-    height: 78px
-  }
+    text-align: center;
+    position: absolute;
+    font-size: 11px;
+    font-family: 'Raleway', sans-serif;
+    font-weight: 200;
+    width: 100%;
+    bottom: -450px;
+    a {
+        color: $light-blue;
+    }
+    .info-footer, .home-console {
+        display: inline-block;
+    }
+    .home-console {
+        background: image-url("console-off.png");
+        width: 409px;
+        height: 78px
+    }
 } 
 #left-menu, #right-menu {
   position: absolute;
-  bottom: $distance-menu;
-  display: none;
+    bottom: $distance-menu;
+    display: none;
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -34,10 +34,10 @@
       <div class="upper-gate">
       </div>
     </div>
-    <div class="container">
+    <div class="wrap">
       <!-- contains the information of each page -->
-      <div class="mainScreen">
-        <div class="col-md-6 col-md-offset-3">
+      <div class="container">
+        <div class="mainScreen">
           <%= yield %>
         </div>
         <!--
@@ -51,7 +51,7 @@
       </div>
       <!-- Left Menu - information -->
       <div id="left-menu" class="menu">
-        <ul>
+        <ul class="list-unstyled">
           <li class="menu-btn-login">
             <div class="outerCircle"></div>
             <div class="innerCircle"></div>