All fixed now, even looks decent on mobile widths

rsearls · Jun 5, 2013 · 04914ff · 04914ff
1 parent a9d16f6
commit 04914ff
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 58 deletions.
diff --git a/images/bottom_arrow.png b/images/bottom_arrow.png
diff --git a/index.html.haml b/index.html.haml
@@ -8,69 +8,72 @@ layout: base
 .row
   .home.span9
     .preparation
-      -# ############## Background ############# 
-      .arrow-wallpaper
       -# ########## header of diagram ########## 
-      .diagram-header.hidden-phone
-        .span3.offset2
+      .diagram-header.row.hidden-phone
+        .span3.offset3
           %h4 Application Preparation 
         .span3
           %h4 Server Preparation 
       -# ########## middle buttons ########## 
-      .learn-btn
-        %a.btn(href="learn")
-          .span2
-            :markdown
-              Learn
-              -----
-          .span3.hidden-phone
-            :markdown
-              Learn about how applications are built using JBoss EAP. 
-          .span3.hidden-phone
-            :markdown
-              Learn about what server capabilities are provided in EAP 
-      .discover-btn
-        %a.btn(href="discover")
-          .span2
-            :markdown
-              Discover
-              --------
-          .span3.hidden-phone
-            :markdown
-              Run one of our tools to help you identify changes you need to make to your application.  
-          .span3.hidden-phone
-            :markdown
-              Identify the JBoss EAP equivalent capabilities to support your application.
-      .implement-btn
-        %a.btn(href="implement")
-          .span2
-            :markdown
-              Implement
-              ---------
-          .span3.hidden-phone
-            :markdown
-              Implement the changes to your application
-          .span3.hidden-phone
-            :markdown
-              Set up JBoss EAP with the capabilities needed for your application.   
+      .learn-btn.row
+        %a.btn.span9(href="learn")
+          .row
+            .span3
+              :markdown
+                Learn
+                -----
+            .span3.hidden-phone
+              :markdown
+                Learn about how applications are built using JBoss EAP. 
+            .span3.hidden-phone
+              :markdown
+                Learn about what server capabilities are provided in EAP 
+      .discover-btn.row
+        %a.btn.span9(href="discover")
+          .row
+            .span3
+              :markdown
+                Discover
+                --------
+            .span3.hidden-phone
+              :markdown
+                Run one of our tools to help you identify changes you need to make to your application.  
+            .span3.hidden-phone
+              :markdown
+                Identify the JBoss EAP equivalent capabilities to support your application.
+      .implement-btn.row
+        %a.btn.span9(href="implement")
+          .row
+            .span3
+              :markdown
+                Implement
+                ---------
+            .span3.hidden-phone
+              :markdown
+                Implement the changes to your application
+            .span3.hidden-phone
+              :markdown
+                Set up JBoss EAP with the capabilities needed for your application.   
       .deploy.hidden-phone
-        :markdown
-          Deploy
-          ------
-          Deploy your application on EAP!
+        .row
+          .span3.offset2
+            :markdown
+              Deploy
+              ------
+              Deploy your application on EAP!
   -# Right column
-  .span3.secondary-buttons
+  .span2.offset1.secondary-buttons
     .row
-      %a.btn.btn-inverse(href="migration-drivers")
+      %a.btn.span2.btn-inverse(href="migration-drivers")
         = snippet "home/why_migrate.md"
     .row
-      %a.btn.btn-inverse(href="migration-planning")
+      %a.btn.span2.btn-inverse(href="migration-planning")
         = snippet "home/planning_sheet.md" 
     .row
-      %a.btn.btn-inverse(href="http://www.redhat.com/consulting/technology-solutions/migrations/")
+      %a.btn.span2.btn-inverse(href="http://www.redhat.com/consulting/technology-solutions/migrations/")
         = snippet "home/need_more_help.md" 
     .row
-      %a.btn.btn-inverse(href="http://community.jboss.org/en/migration")
+      %a.btn.span2.btn-inverse(href="http://community.jboss.org/en/migration")
         = snippet "home/discuss.md" 
 .row
   .span9

diff --git a/stylesheets/_migration.scss b/stylesheets/_migration.scss
@@ -44,14 +44,15 @@ $btnDiscoverBackgroundHighlight: #781f1c;
   }
 
   .preparation {
-
+    min-height: 1px;
+    max-height: 90%;
+    background: url(../images/vert_arrow.png) 8em repeat-y; 
     .wallpaper {
       background-image:url(/images/DeployonEAP.png);
       background-repeat:no-repeat;
       background-position: 70px 30px;
       height:385px;
-    }
-
+    } 
     h2 {
       padding-top:10px;
       font-size: 22px;
@@ -60,12 +61,12 @@ $btnDiscoverBackgroundHighlight: #781f1c;
       text-align: center;
       text-transform: uppercase;
       color:#781f1c;
-    }
-
+    } 
     .btn {
       height:75px;
       text-align:left;
       padding-left: 0px;
+      margin-left: 0px;
     }
 
     .spacer5 {
@@ -141,9 +142,10 @@ $btnDiscoverBackgroundHighlight: #781f1c;
     }
 
     .deploy {
-      text-align: center;
-
-      h2 {
+      text-align: center; 
+      background: image-url("bottom_arrow.png") 7.9em -1px no-repeat white;
+      padding-left: 15em;
+      & > h2 {
         padding-top: 0px;
         margin-top: 0px;
       }
@@ -154,7 +156,6 @@ $btnDiscoverBackgroundHighlight: #781f1c;
 .secondary-buttons {
 
   .btn {
-    width: 100%;
     margin-top: 20px;
 
     h2 {
@@ -325,3 +326,6 @@ $btnDiscoverBackgroundHighlight: #781f1c;
   border-right:#E5E5E5;
 } 
 
+.learn-btn, .discover-btn, .implement-btn {
+  margin: 1.6em 0;
+}