From cb57c2f28ddbde509ada9783e05b0bed79a2ac00 Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Tue, 22 Jul 2014 11:50:15 +0100
Subject: [PATCH] Tweak css and style on homepage

---
 services/web/app/views/layout/navbar.jade     |  4 +-
 .../web/public/stylesheets/app/homepage.less  | 42 ++++++++-----------
 .../public/stylesheets/components/navbar.less |  9 ++--
 3 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/services/web/app/views/layout/navbar.jade b/services/web/app/views/layout/navbar.jade
index 38bd507d64..0b6b7de692 100644
--- a/services/web/app/views/layout/navbar.jade
+++ b/services/web/app/views/layout/navbar.jade
@@ -1,11 +1,11 @@
 nav.navbar.navbar-default
 	.container-fluid
 		.navbar-header
-			button.navbar-toggle(data-toggle="collapse",data-target="#navbar-collapse")
+			button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}")
 				i.fa.fa-bars
 			a(href='/').navbar-brand
 
-		.navbar-collapse.collapse#navbar-collapse
+		.navbar-collapse.collapse(collapse="navCollapsed")
 			ul.nav.navbar-nav.navbar-right
 				each item in nav.header
 					if ((item.only_when_logged_in && session && session.user) || (item.only_when_logged_out && (!session || !session.user)) || (!item.only_when_logged_out && !item.only_when_logged_in))
diff --git a/services/web/public/stylesheets/app/homepage.less b/services/web/public/stylesheets/app/homepage.less
index 534720bcde..de418c6517 100644
--- a/services/web/public/stylesheets/app/homepage.less
+++ b/services/web/public/stylesheets/app/homepage.less
@@ -3,7 +3,6 @@
 	background-image: -webkit-linear-gradient(left,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
 	background-image: linear-gradient(to right,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
 	position: relative;
-	min-height: @line-height-computed * 29.5;
 	text-align: center;
 	overflow: hidden;
 	h1, p {
@@ -14,7 +13,7 @@
 		font-size: 4.75rem;
 		line-height: 6.25rem;
 		margin-bottom: 0;
-		margin-top: @line-height-computed * 2;
+		margin-top: @line-height-computed;
 		text-shadow: 0 1px 3px rgba(0,0,0,0.42);
 		span {
 			font-family: @font-family-sans-serif;
@@ -25,26 +24,18 @@
 	p:first-of-type {
 		font-size: @line-height-computed;
 		font-weight: 200;
-		letter-spacing: 2px;
+		letter-spacing: 1px;
 		margin-top: 0;
 		text-rendering: auto;
-	}
-	.register {
-		margin-top: @line-height-computed * 4;
-		.input {
-			margin-bottom: @line-height-computed / 2;
-		}
-		div.error {
-			color: rgb(189, 7, 7);
-			padding: 1px;
-		}
+		margin-bottom: @line-height-computed;
 	}
 	.register-banner {
 		background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
 		background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
 		padding: @line-height-computed 0;
-		margin-top: 140px;
-		position: relative;
+		position: absolute;
+		bottom: 0;
+		width: 100%;
 		h2 {
 			color: white;
 			margin-top: 0;
@@ -56,10 +47,13 @@
 			margin-left: @line-height-computed / 2;
 		}
 	}
-	img {
-		box-shadow: 0 0 50px rgba(0,0,0,.67);
-		margin-top: @line-height-computed;
-		margin-bottom: -@line-height-computed * 15;
+	.screenshot {
+		height: 450px;
+		overflow-y: hidden;
+		img {
+			box-shadow: 0 0 50px rgba(0,0,0,.67);
+			max-width: 100%;
+		}
 	}
 	.btn-hero {
 		background-color: transparent;
@@ -83,16 +77,16 @@
 }
 
 .universities {
-	overflow: hidden;
-	height: 160px;
-	border-left: none;
-	border-right: none;
+	// overflow: hidden;
+	// height: 160px;
+	// border-left: none;
+	// border-right: none;
 	padding-bottom: @line-height-computed;
 	text-align: center;
 	margin: 0 auto;
 	img {
 		max-width: 100%;
-		max-height: 80px;
+		max-height: 60px;
 	}
 }
 
diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less
index 6ca67808f8..6b765f0b14 100755
--- a/services/web/public/stylesheets/components/navbar.less
+++ b/services/web/public/stylesheets/components/navbar.less
@@ -421,11 +421,14 @@
       color: @gray;
       padding: 12px 12px 13px;
       margin-left: 0;
-      &:hover,
-      &:focus {
+      &:hover {
         color: @gray-dark;
         background-color: @gray-lightest;
       }
+      &:focus {
+          color: @gray;
+          background-color: transparent;
+      }
     }
 
     @media (min-width: @grid-float-breakpoint) {
@@ -440,7 +443,7 @@
     border-color: @navbar-default-toggle-border-color;
     color: @navbar-default-link-color;
     &:hover,
-    &:focus {
+    &.active {
       background-color: @navbar-default-toggle-hover-bg;
       border-color: @navbar-default-toggle-hover-bg;
       color: #fff;