issue #89: added flow chart blockers (all three with arrows) and scre…

…en grab blockers (separate rectangles) at various resolutions. started plugging them into the homepage to see what's what.
SwiftkickWeb · Jul 1, 2017 · fb04ce1 · fb04ce1
1 parent 8248feb
commit fb04ce1
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 10 deletions.
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/images/[email protected] b/app/assets/images/[email protected]
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -187,6 +187,22 @@ a	{
 	margin-bottom: 0em;
 }
 
+.row__hero-banner {
+  margin-top: 1em;
+
+  h1 {
+    text-indent: -9999px;
+    width: 1px;
+    height: 1px;
+    background-image: '';
+    overflow: hidden;
+  }
+}
+
+.row__hero-flow {
+  text-align: center;
+}
+
 
 .row-sample {
   margin-top: 3.5em;

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,4 +1,3 @@
-<!doctype html>
 <html class="no-js" lang="">
 	<head>
 		<meta charset="utf-8">
@@ -24,21 +23,32 @@
     <%= render "layouts/nav" unless current_page?('/') %>
 
     <header class="container-fluid page-header page-header__hero" role="banner">
-      <div class="text-center page-header__content">
+      <div class="page-header__content">
         <!-- If the particular view has some markup for :page_header -->
         <% if content_for?(:page_header) %>
           <%= yield :page_header %>
 
         <!-- Otherwise, show the hero banner -->
         <% else %>
-          <h1 class="page-header__title"><%= t('brand') %></h1>
-          <div class="logo"><%= image_tag "[email protected]", alt: " Welcome to #{ t('brand') }. This is our logo." %></div>
-          <h2 class="page-header__subtitle">Plan your meals for the  week using your favorite recipes from your self-curated cookbook.</h2>
-          <h3 class="page-header__motto">We'll even build you a shopping list to take to the grocery store.</h3>
-          <div class="page-header__call-to-action"><%= link_to "Start buildling your cookbook <i class=\"glyphicon glyphicon-chevron-right \"></i>".html_safe, new_user_registration_path, class: "btn btn-primary btn-lg" %> </div>
-          <div class="page-header__login">
-            <p>Already have an account?</p>
-            <%= link_to "Log in to your account", new_user_session_path, class: "btn btn-default" %>
+          <div class="row__hero-banner">
+            <div class="col-sm-12 col-md-4 col-md-offset-1">
+              <h1 class="page-header__title"><%= t('brand') %></h1>
+              <div class="logo"><%= image_tag "[email protected]", alt: "Welcome to #{ t('brand') }. This is our logo." %></div>
+              <h2 class="page-header__subtitle">Plan your meals for the  week using your favorite recipes from your self-curated cookbook.</h2>
+              <h3 class="page-header__motto">We'll even build you a shopping list to take to the grocery store.</h3>
+              <div class="page-header__call-to-action"><%= link_to "Sign up to start buildling your cookbook <i class=\"glyphicon glyphicon-chevron-right \"></i>".html_safe, new_user_registration_path, class: "btn btn-primary btn-lg" %> </div>
+              <div class="page-header__login">
+                <p>Already have an account?</p>
+                <%= link_to "Log in to your account", new_user_session_path, class: "btn btn-default" %>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-6">
+              <div class="row row__hero-flow">
+                <div class="col-sm-12 col-md-12"><%= image_tag "[email protected]", alt: " Step 1: Enter recipes." %><p>Add recipes.</p></div>
+                <div class="col-sm-6 col-md-6"><%= image_tag "[email protected]", alt: "Step 2: Plan your FoodWeek." %><p>Create a foodweek.</p></div>
+                <div class="col-sm-6 col-md-6"><%= image_tag "[email protected]", alt: "Step 3: Generate your shopping list." %><p>Go shopping.</p></div>
+              </div>
+            </div>
           </div>
         <% end %>
       </div>