added shift font and continued work on home page

bvallelunga · Apr 6, 2014 · 381ae7f · 381ae7f
1 parent ebd0f6d
commit 381ae7f
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 8 deletions.
diff --git a/public/fonts/shift.woff b/public/fonts/shift.woff
diff --git a/public/js/home/index.js b/public/js/home/index.js
@@ -0,0 +1,3 @@
+$(function() {
+
+});
diff --git a/public/less/core/body.less b/public/less/core/body.less
@@ -25,6 +25,17 @@ body {
     	font-style: normal;
     }
 
+    @font-face {
+    	font-family: 'Shift';
+    	src:url('/fonts/shift.eot');
+    	src:url('/fonts/shift.eot') format('embedded-opentype'),
+    		url('/fonts/shift.woff') format('woff'),
+    		url('/fonts/shift.ttf') format('truetype'),
+    		url('/fonts/shift.svg') format('svg');
+    	font-weight: normal;
+    	font-style: normal;
+    }
+
     * {
         outline: none;
         -webkit-font-smoothing: subpixel-antialiased;

diff --git a/public/less/core/header.less b/public/less/core/header.less
@@ -6,7 +6,7 @@
     width: 100%;
     padding: 25px 0 5px 0;
     .clearfix();
-    .box-shadow(0 1px 3px rgba(0, 0, 0, 0.05));
+    .box-shadow(0 1px 5px rgba(0, 0, 0, 0.3));
 
     .logo {
         .float-left();

diff --git a/public/less/home/index.less b/public/less/home/index.less
@@ -1,19 +1,83 @@
 @import '../compless/all';
 
-.backdrop {
-    position: absolute;
-    z-index: 0;
+.hero {
+    position: relative;
     width: 100%;
-    height: 100%;
+    height: 500px;
+    overflow: hidden;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
 
     .darkener {
-        position: fixed;
+        position: absolute;
+        z-index: 1;
         width: 100%;
         height: 100%;
         z-index: 1;
-        .linear-gradient(0deg, rgba(0, 0, 0, .80), rgba(0, 0, 0, .15));
+        .linear-gradient(0deg, rgba(0, 0, 0, .70), rgba(0, 0, 0, .4));
+    }
+
+    .container {
+        position: relative;
+        z-index: 2;
+        margin-top: 140px;
+
+        .title,
+        .subtitle {
+            color: #fff;
+            font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            font-size: 48px;
+            font-weight: lighter;
+            text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 1px;
+
+            &.subtitle {
+                margin-top: 5px;
+                font-size: 20px;
+            }
+        }
+
+        .search {
+            display: inline-block;
+            margin-top: 5px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 5px;
+            .border-radius(3px);
+            .box-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
+
+            .input {
+                background: #fff;
+                color: #333;
+                padding: 10px;
+                font-size: 16px;
+                margin-right: 5px;
+                .border-radius(2px);
+
+                &:first-child {
+                    width: 325px;
+                }
+
+                &:nth-child(2) {
+                    width: 150px;
+                }
+            }
+
+            .button {
+                color: #fff;
+                padding: 10px 15px;
+                font-size: 16px;
+                cursor: pointer;
+                .border-radius(2px);
+                .linear-gradient(0deg, darken(#36B1F3, 10%), #36B1F3);
+
+                &:hover {
+                    .linear-gradient(0deg, darken(#36B1F3, 15%), #36B1F3);
+
+                    &:active {
+                        .linear-gradient(0deg, darken(#36B1F3, 20%), #36B1F3);
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/views/home/index.html b/views/home/index.html
@@ -1,4 +1,19 @@
 <% include ../includes/start.html %>
 <% include ../includes/header.html %>
-
+<div class="hero" style="<%= backdrop %>">
+    <div class="darkener"></div>
+    <div class="container">
+        <div class="title">Explore your bubble</div>
+        <div class="subtitle">
+            Dine in over 50 restaurants and 400 cities.
+        </div>
+        <div class="search">
+            <form action="/search/" method="get">
+                <input name="q" type="text" class="input" placeholder="sake steakhouse..."/>
+                <input name="l" type="text" class="input" placeholder="location" value="<%= location.city %>" />
+                <input type="submit" class="button" value="Search" />
+            </form>
+        </div>
+    </div>
+</div>
 <% include ../includes/end.html %>