changed design of front page

alex-benoit · Oct 14, 2016 · cd3025e · cd3025e
1 parent 2ed263a
commit cd3025e
Show file tree

Hide file tree

Showing 18 changed files with 102 additions and 164 deletions.
diff --git a/app/assets/images/placeholder.png b/app/assets/images/placeholder.png
diff --git a/app/assets/stylesheets/components/_alert.scss b/app/assets/stylesheets/components/_alert.scss
diff --git a/app/assets/stylesheets/components/_avatars.scss b/app/assets/stylesheets/components/_avatars.scss
diff --git a/app/assets/stylesheets/components/_badges.scss b/app/assets/stylesheets/components/_badges.scss
diff --git a/app/assets/stylesheets/components/_body.scss b/app/assets/stylesheets/components/_body.scss
diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
@@ -1,6 +0,0 @@
-@import "alert";
-@import "avatars";
-@import "badges";
-@import "table";
-@import "body";
-@import "svg";

diff --git a/app/assets/stylesheets/components/_svg.scss b/app/assets/stylesheets/components/_svg.scss
diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
@@ -2,8 +2,8 @@
  * Fonts
  * ------------------------------------- */
 // Google fonts
-@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700|Roboto+Slab:100,300,400,500,700");
-$base-font: "Lato", "Helvetica", "sans-serif";
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700|Roboto+Slab:100,300,400,500,700");
+$base-font: "Open Sans", "Helvetica", "sans-serif";
 $header-font: "Roboto Slab", "Helvetica", "sans-serif";
 
 // Local fonts (uncomment following lines)
@@ -24,7 +24,7 @@ $base-height: 1.4;
  * Colors
  * ------------------------------------- */
 // Scheme
-$brand-color: #D23333;
+$brand-color: #CB4F4F;
 
 $red: #EE5F5B;
 $blue: #469AE0;

diff --git a/app/assets/stylesheets/layout/_footer.scss b/app/assets/stylesheets/layout/_footer.scss
@@ -1,7 +1,6 @@
 .footer {
   z-index: 3;
   height: 70px;
-  position: fixed;
-  bottom: 0%;
   width: 100%;
+  background-color: $brand-color;
 }
diff --git a/app/assets/stylesheets/layout/_navbar.scss b/app/assets/stylesheets/layout/_navbar.scss
@@ -5,4 +5,5 @@
   position: fixed;
   top: 0%;
   width: 100%;
+  background-color: $brand-color;
 }
diff --git a/app/assets/stylesheets/layout/_utilities.scss b/app/assets/stylesheets/layout/_utilities.scss
@@ -1,25 +1,13 @@
-/* -------------------------------------
- * Utilities classes
- * These are examples of utilities classes
- * Feel free to change them and create your own
- * ------------------------------------- */
-
-// Paddings
-.padded {
-  padding-top: 5em;
-  padding-bottom: 5em;
+body {
+  background: #F7F7F7;
 }
 
-// Backgrounds
-.bg-black {
-  background: #4a4a4a;
-}
-.bg-grey {
-  background: #aeaeae;
-}
-.bg-blue {
-  background: #00a3e1;
-}
-.bg-dark-blue {
-  background: #3b5998;
+a {
+  color: $brand-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $brand-color;
+    text-decoration: underline;
+  }
 }
diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss
@@ -1,4 +1,74 @@
+.home-top-line {
+  width: 100%;
+  min-height: 3px;
+  background-color: $brand-color;
+}
+
+.vertically-align {
+  min-height: 90vh;
+  display: flex;
+  align-items: center;
+}
 #home {
-  min-height: calc(100vh - 140px);
-  padding-top: 150px;
+  img {
+    margin-bottom: 30px;
+  }
+
+  .search-box {
+    display: inline-block;
+    width: 100%;
+    border-radius: 3px;
+    padding: 4px 55px 4px 15px;
+    position: relative;
+    background: #fff;
+    border: 1px solid #ddd;
+    @include transition(all 200ms ease-in-out);
+
+    &.hovered, &:hover, &:active {
+      border: 1px solid #aaa;
+    }
+
+    input[type=text] {
+      border: none;
+      box-shadow: none;
+      display: inline-block;
+      padding: 0;
+      background: white;
+
+      &:hover, &:focus, &:active {
+        box-shadow: none;
+      }
+
+      &:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 1000px white inset;
+      }
+    }
+
+    .search-btn {
+      position: absolute;
+      right: 3px;
+      top: 3px;
+      bottom: 3px;
+      color: #aaa;
+      border-radius: 3px;
+      font-size: 21px;
+      padding: 0px 10px 3px;
+      @include transition(all 200ms ease-in-out);
+
+      &:hover {
+        color: #fff;
+        background-color: $brand-color;
+      }
+
+      .fa {
+        font-size: 21px;
+      }
+    }
+  }
+
+  p {
+    margin-top: 15px;
+    color: #7B7B7B;
+  }
 }
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,10 +10,7 @@
     <%= stylesheet_link_tag    'application', media: 'all' %>
   </head>
   <body>
-    <%= render 'shared/navbar' %>
-    <%= render 'shared/flashes' %>
     <%= yield %>
-    <%= render 'shared/footer' %>
     <%= javascript_include_tag 'application' %>
     <%= yield(:after_js) %>
   </body>

diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -1,15 +1,18 @@
-<div class="container">
-  <div class="row">
-    <div id="home" class="col-xs-12 col-md-6 col-md-offset-3 text-center">
-      <div>
-        <h1>Github Languages</h1>
-        <form action="/user" method="get" class="form-inline">
-          <div class="form-group">
-            <label for="username">Github Username</label>
-            <input type="text" name="user" id="username" class="form-control">
-          </div>
-          <input type="submit" value="Submit" class="btn btn-default">
-        </form>
+<div class="home-top-line"></div>
+<div class="vertically-align">
+  <div class="container">
+    <div class="row">
+      <div id="home" class="col-xs-12 col-md-6 col-md-offset-3 text-center">
+        <%= image_tag("placeholder.png") %>
+        <div class='search-box'>
+          <form class='search-form' action='/user' method='get'>
+            <input class='form-control' placeholder='Github Username' type='text' name="user">
+            <button class='btn btn-link search-btn'>
+              <i class='fa fa-search'></i>
+            </button>
+          </form>
+        </div>
+        <p>Discover your favorite programming languages. <a href="#">About this page</a>.</p>
       </div>
     </div>
   </div>

diff --git a/app/views/shared/_flashes.html.erb b/app/views/shared/_flashes.html.erb
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb