Merge pull request #445 from sharelatex/pr-new-logo

PR New logo

services/web/app/views/general/404.pug

@@ -3,11 +3,13 @@ extends ../layout
 block content
 	.content
 		.container
-			.row
-				.col-md-8.col-md-offset-2.text-center
-					.page-header
-						h2 #{translate("cant_find_page")}
-					p
-						a(href="/")
-							i.fa.fa-arrow-circle-o-left
-							|  #{translate("take_me_home")}
+			.error-container
+				.error-figure
+					img.error-img(
+						src="/img/brand/404-visual.svg"
+						alt="Not found"
+					)
+				.error-details
+					p.error-status Not found
+					p.error-description #{translate("cant_find_page")}
+					a.error-btn(href="/") Home

services/web/app/views/general/500.pug

@@ -1,24 +1,36 @@
 doctype html
-html(itemscope, itemtype='http://schema.org/Product')
+html.full-height(itemscope, itemtype='http://schema.org/Product')
 	head
 		title Something went wrong
 		link(rel="icon", href="/favicon.ico")
 		if buildCssPath
 			link(rel='stylesheet', href=buildCssPath('/style.css'))
 		link(href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css",rel="stylesheet")
-	body
-		.content
-			.container
-				.row
-					.col-md-8.col-md-offset-2.text-center
-						.page-header
-							h2 Oh dear, something went wrong.
-						if buildImgPath
-							p
-								img(src=buildImgPath("lion-sad-128.png"), alt="Sad Lion")
-						p
-							| Something went wrong with your request, sorry. Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
-						p
-							a(href="/")
-								i.fa.fa-arrow-circle-o-left
-								|  Take me home
+	body.full-height
+		.content.full-height
+			.container.full-height
+				.error-container.full-height
+					.error-figure.error-figure-500
+						img.error-img(
+							src="/img/brand/500-visual-socket.svg"
+							alt="Error"
+						)
+					.error-details
+						p.error-status Something went wrong, sorry.
+						p.error-description Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
+						a.error-btn(href="/") Home
+		//- .content
+		//- 	.container
+		//- 		.row
+		//- 			.col-md-8.col-md-offset-2.text-center
+		//- 				.page-header
+		//- 					h2 Oh dear, something went wrong.
+		//- 				if buildImgPath
+		//- 					p
+		//- 						img(src=buildImgPath("lion-sad-128.png"), alt="Sad Lion")
+		//- 				p
+		//- 					| Something went wrong with your request, sorry. Our staff are probably looking into this, but if it continues, please contact us at #{settings.adminEmail}
+		//- 				p
+		//- 					a(href="/")
+		//- 						i.fa.fa-arrow-circle-o-left
+		//- 						|  Take me home

services/web/app/views/layout.pug

@@ -18,7 +18,11 @@ html(itemscope, itemtype='http://schema.org/Product')
 		-else
 			title= translate(title) + ' - ShareLaTeX, ' + translate("online_latex_editor") 
 
-		link(rel="icon", href="/favicon.ico")
+		link(rel="icon", href="favicon.ico")
+		link(rel="icon", sizes="192x192", href="touch-icon-192x192.png")
+		link(rel="apple-touch-icon-precomposed", href="favicon-152.png")
+		link(rel="mask-icon", href="mask-favicon.svg", color="#a93529")
+			
 		link(rel='stylesheet', href=buildCssPath('/style.css'))
 
 		block _headLinks

services/web/app/views/project/editor.pug

@@ -7,13 +7,18 @@ block vars
 
 block content
 	.editor(ng-controller="IdeController").full-size
-		.loading-screen(ng-show="state.loading")
-			.container
-				h3 #{translate("loading")}...
-				.progress
-					.progress-bar(style="width: 20%", ng-style="{'width': state.load_progress + '%'}")
-				p.text-center.text-danger(ng-if="state.error").ng-cloak 
-					span(ng-bind-html="state.error")
+		.loading-screen(ng-if="state.loading")
+			.loading-screen-lion-container
+				.loading-screen-lion(
+					style="height: 20%;"
+					ng-style="{ 'height': state.load_progress + '%' }"
+				)
+			h3.loading-screen-label(ng-if="!state.error") #{translate("loading")}
+				span.loading-screen-ellip .
+				span.loading-screen-ellip .
+				span.loading-screen-ellip .
+			p.loading-screen-error(ng-if="state.error").ng-cloak 
+				span(ng-bind-html="state.error")
 
 		include ./editor/feature-onboarding
 		

services/web/public/img/brand/404-visual.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="777.5" height="820.52" viewBox="0 0 777.5 820.52">
+  <g>
+    <g>
+      <circle cx="388.75" cy="388.75" r="388.75" fill="#798ed2" opacity="0.05"/>
+      <rect x="182.22" y="230.37" width="413.04" height="295.03" fill="#a93529"/>
+      <path d="M389.5,229.95s9.34-15.08,42.47-13.25,133.77,14.17,133.77,14.17V492.25s-91.3-16.45-141.84-11.88c-22.82,2.06-35.25,11.88-35.25,11.88S390.13,230.63,389.5,229.95Z" fill="#fff"/>
+      <path d="M389.18,230.52s-10.59-15.5-43.72-13.67S211.7,231,211.7,231V492.41S303,476,353.53,480.52c22.82,2.06,35.25,11.88,35.25,11.88S388.54,231.2,389.18,230.52Z" fill="#fff"/>
+      <path d="M388.78,487.15v5.26s0-1.88,0-5.26Z" fill="#e9e6d9"/>
+      <g>
+        <circle cx="195.09" cy="656.25" r="12.92" fill="#a93529"/>
+        <path d="M194.85,696.16c2.64,5.28,23.77,6.3,46.21,6.16,22.66-.14,43.81-.66,46.53-5.94,6.85-13.27-34.66-41.88-46.42-41.88C227.16,654.5,187.73,681.91,194.85,696.16Z" fill="#a93529"/>
+        <circle cx="220.92" cy="630.4" r="12.92" fill="#a93529"/>
+        <circle cx="261.54" cy="630.4" r="12.92" fill="#a93529"/>
+        <circle cx="287.38" cy="656.25" r="12.92" fill="#a93529"/>
+      </g>
+      <g>
+        <circle cx="490.12" cy="774.44" r="12.92" fill="#a93529"/>
+        <path d="M489.89,814.35c2.64,5.28,23.77,6.3,46.21,6.16,22.66-.14,43.81-.66,46.53-5.94,6.85-13.27-34.66-41.88-46.42-41.88C522.19,772.69,482.76,800.11,489.89,814.35Z" fill="#a93529"/>
+        <circle cx="515.96" cy="748.6" r="12.92" fill="#a93529"/>
+        <circle cx="556.58" cy="748.6" r="12.92" fill="#a93529"/>
+        <circle cx="582.41" cy="774.44" r="12.92" fill="#a93529"/>
+      </g>
+      <rect x="211.7" y="406.39" width="354.03" height="88.87" fill="#fff"/>
+      <path d="M502.94,451.45c-58.5-14.55-114.29-5-114.29,40.8L386.37,228s.41-11.71,16.15-24.17l-3.15,27.79L442.13,218l-25.65,30.49L427.12,257l-14.5,20.45,31.82,54.39L422.55,370.5l21.88,42.19-20.3,17.14Z" fill="#cfcfcf"/>
+      <path d="M353.53,480.52c22.82,2.06,35.25,11.88,35.25,11.88v2.86H211.7v-2.86S303,476,353.53,480.52Z" fill="#e7e6e6"/>
+      <path d="M423.89,480.38c-22.82,2.08-35.25,12-35.25,12v2.88H565.73v-2.88S474.43,475.76,423.89,480.38Z" fill="#e7e6e6"/>
+    </g>
+  </g>
+</svg>

services/web/public/img/brand/500-visual-plug.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="650.95" height="260.49" viewBox="0 0 650.95 260.49">
+  <g>
+    <g>
+      <path d="M464.53,260.49c-27.17,0-75.15-13.71-105.35-46.51-25.23-27.4-26.69-55.26-28.09-82.2-1-18.92-1.92-36.79-11-53.72C290.25,22.75,182.7-.54.34,8.84L0,2.09C187.78-7.58,294.42,16.23,326,74.86c9.84,18.27,10.86,37.74,11.84,56.57,1.35,25.75,2.74,52.37,26.32,78,30.92,33.59,81.25,46.18,105.54,44.12,8.27-.7,9.89-2.86,10-3.1,2.59-4-15.91-19.6-29.41-31-30.14-25.42-67.66-57.07-58.22-86.53,5.29-16.54,24-28.7,57.23-37.18l1.67,6.55C420.66,110,403,121,398.54,135c-8.05,25.15,29.05,56.45,56.14,79.3,22,18.57,36.56,30.84,30.74,39.83-2.22,3.42-7.32,5.5-15.15,6.17C468.48,260.42,466.56,260.49,464.53,260.49Z" fill="#505050"/>
+      <path d="M526.92,129.37h0a9.79,9.79,0,0,1,10-9.55H641a9.79,9.79,0,0,1,10,9.55h0a9.79,9.79,0,0,1-10,9.55H536.87a9.79,9.79,0,0,1-10-9.55Zm10-46.66a9.79,9.79,0,0,1-10-9.55h0a9.79,9.79,0,0,1,10-9.55H641a9.79,9.79,0,0,1,10,9.55h0a9.79,9.79,0,0,1-10,9.55H536.87" fill="#919296" fill-rule="evenodd"/>
+      <rect x="444.49" y="57.18" width="68.71" height="88.17" fill="#919296"/>
+      <rect x="473.95" y="41.51" width="118.01" height="117.98" fill="#c1c2c5"/>
+    </g>
+  </g>
+</svg>

services/web/public/img/brand/500-visual-socket.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="777.28" height="777.28" viewBox="0 0 777.28 777.28">
+  <g>
+    <g>
+      <circle cx="388.64" cy="388.64" r="388.64" fill="#798ed2" opacity="0.05"/>
+      <g>
+        <rect x="241.27" y="232.25" width="294.75" height="294.75" fill="#c1c2c5"/>
+        <path d="M388.64,468.11a88.49,88.49,0,1,0-88.49-88.49A88.66,88.66,0,0,0,388.64,468.11Z" fill="#919296" fill-rule="evenodd"/>
+        <path d="M352.86,366.1a13.27,13.27,0,1,1-13.27,13.27,13.27,13.27,0,0,1,13.27-13.27Zm71.9,0a13.27,13.27,0,1,1-13.27,13.27A13.27,13.27,0,0,1,424.75,366.1Z" fill="#505050" fill-rule="evenodd"/>
+      </g>
+    </g>
+  </g>
+</svg>

services/web/public/img/brand/lion-grey.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 431" width="500" height="431">
+	<g>
+		<circle cx="291.77" cy="172.48" r="11.72" fill="#acadb2"/>
+		<path d="M307.12,310.59a4.71,4.71,0,0,0-5.89-3.08c-12.93,4.05-29.57,6.22-46.52,6.56v-57c0-.14-0.07-0.25-0.08-0.39,14.13-4.8,43.14-26.44,37.62-37.14-2.48-4.81-21.73-5.28-42.35-5.41-20.43-.13-39.65.8-42.06,5.61-5.81,11.62,22.39,32.84,37.49,37.13,0,0.07,0,.13,0,0.2v57c-17-.35-33.6-2.52-46.52-6.58a4.7,4.7,0,0,0-2.82,9c15.16,4.76,34.61,7.13,54.07,7.13s38.86-2.37,54-7.11A4.71,4.71,0,0,0,307.12,310.59Z" fill="#acadb2"/>
+		<circle cx="208.27" cy="172.48" r="11.72" fill="#acadb2"/>
+		<path d="M249.3,405c2.88,9.34,5.7,19.73,7.43,25.28,37.9-.39,72.72-0.26,109.1,0-0.09-14.67-.93-23.15-1-35.49l19.91,21.41c18.71-36.35,41.83-62.9,48.36-103.75,26.95-17,36.71-51.27,55.46-77.28-9.25-4.64-18.86-5.69-27.55-10,11.42-3.81,27-7,39-11-16.71-26.89-30-52.75-45.65-78.11-7.54-14.6-22.8-18.82-37.65-7.17,0.35-10.22,15.18-29.16,10.76-37.39-12.87-24-26.86-50.76-41-74.1L357,41.24,368.26,0.75C340.85,1.44,312,3.18,287,2.26c-19.65-.73-37.79,6.58-41.27,29.92C243.87,21.81,240.54,12.77,226.88,8,196.14-2.66,138.19.13,123.25,1.39c5.28,13,6.07,27.18,11.07,39.46L107.79,28.42C96.56,49,84,68.43,71.62,87c-8.47,16.32-12,31.15,13.72,45-14.26-.49-25-4.33-34.37-4.65C34.13,157.58,15.5,184.53,0,214.81c16.88-.43,33.29,7.54,43.2,7.29h0c-8,5.5-10.43,16.17-22.73,24.61,22.64,19.05,17.76,60.78,48.78,67.77-0.73,5.22-4.71,14.07-2.2,19.05,14.17,28.1,32.86,51.37,48.65,79.92,9.39-13.15,19.17-17.67,26.48-27.21l-4.61,42.83c17.87,0.61,35,1.42,52.21,1.74C211.09,431.22,242.32,431.25,249.3,405ZM348.58,86.26c4.24-6.39,25.13,3.51,28.49,9.37,2.82,4.91.82,29.09-6.37,29.42-2.86.13-8.14-8.58-13.63-18S347,88.63,348.58,86.26ZM122.66,95.63c3.36-5.85,24.25-15.75,28.49-9.37,1.57,2.37-3.06,11.43-8.5,20.77S131.88,125.17,129,125C121.84,124.72,119.84,100.54,122.66,95.63Zm20,290h0Zm20.9-86.71,6.21-10.75-43.25-74.92,61.74-106.94H311.74l61.75,106.94-43.26,74.92,6.21,10.76-43.22,74.86H206.78Z" fill="#acadb2"/>
+	</g>
+</svg>

services/web/public/img/brand/lion.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 431" width="500" height="431">
+	<g>
+		<circle cx="291.77" cy="172.48" r="11.72" fill="#a93529"/>
+		<path d="M307.12,310.59a4.71,4.71,0,0,0-5.89-3.08c-12.93,4.05-29.57,6.22-46.52,6.56v-57c0-.14-0.07-0.25-0.08-0.39,14.13-4.8,43.14-26.44,37.62-37.14-2.48-4.81-21.73-5.28-42.35-5.41-20.43-.13-39.65.8-42.06,5.61-5.81,11.62,22.39,32.84,37.49,37.13,0,0.07,0,.13,0,0.2v57c-17-.35-33.6-2.52-46.52-6.58a4.7,4.7,0,0,0-2.82,9c15.16,4.76,34.61,7.13,54.07,7.13s38.86-2.37,54-7.11A4.71,4.71,0,0,0,307.12,310.59Z" fill="#a93529"/>
+		<circle cx="208.27" cy="172.48" r="11.72" fill="#a93529"/>
+		<path d="M249.3,405c2.88,9.34,5.7,19.73,7.43,25.28,37.9-.39,72.72-0.26,109.1,0-0.09-14.67-.93-23.15-1-35.49l19.91,21.41c18.71-36.35,41.83-62.9,48.36-103.75,26.95-17,36.71-51.27,55.46-77.28-9.25-4.64-18.86-5.69-27.55-10,11.42-3.81,27-7,39-11-16.71-26.89-30-52.75-45.65-78.11-7.54-14.6-22.8-18.82-37.65-7.17,0.35-10.22,15.18-29.16,10.76-37.39-12.87-24-26.86-50.76-41-74.1L357,41.24,368.26,0.75C340.85,1.44,312,3.18,287,2.26c-19.65-.73-37.79,6.58-41.27,29.92C243.87,21.81,240.54,12.77,226.88,8,196.14-2.66,138.19.13,123.25,1.39c5.28,13,6.07,27.18,11.07,39.46L107.79,28.42C96.56,49,84,68.43,71.62,87c-8.47,16.32-12,31.15,13.72,45-14.26-.49-25-4.33-34.37-4.65C34.13,157.58,15.5,184.53,0,214.81c16.88-.43,33.29,7.54,43.2,7.29h0c-8,5.5-10.43,16.17-22.73,24.61,22.64,19.05,17.76,60.78,48.78,67.77-0.73,5.22-4.71,14.07-2.2,19.05,14.17,28.1,32.86,51.37,48.65,79.92,9.39-13.15,19.17-17.67,26.48-27.21l-4.61,42.83c17.87,0.61,35,1.42,52.21,1.74C211.09,431.22,242.32,431.25,249.3,405ZM348.58,86.26c4.24-6.39,25.13,3.51,28.49,9.37,2.82,4.91.82,29.09-6.37,29.42-2.86.13-8.14-8.58-13.63-18S347,88.63,348.58,86.26ZM122.66,95.63c3.36-5.85,24.25-15.75,28.49-9.37,1.57,2.37-3.06,11.43-8.5,20.77S131.88,125.17,129,125C121.84,124.72,119.84,100.54,122.66,95.63Zm20,290h0Zm20.9-86.71,6.21-10.75-43.25-74.92,61.74-106.94H311.74l61.75,106.94-43.26,74.92,6.21,10.76-43.22,74.86H206.78Z" fill="#a93529"/>
+	</g>
+</svg>

services/web/public/mask-favicon.svg

@@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <title>favicon</title>
+  <path d="M14,0H2A2,2,0,0,0,0,2V14a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V2A2,2,0,0,0,14,0ZM11.3,11.56A2.87,2.87,0,0,1,10,12.69a4.93,4.93,0,0,1-2.26.45A7.26,7.26,0,0,1,6.37,13q-.64-.13-1.34-.33a3.94,3.94,0,0,0-.61-.16L4.53,10H5.79l.34,1.66a1.33,1.33,0,0,0,.59.34,3.11,3.11,0,0,0,1,.14A1.88,1.88,0,0,0,9,11.81a1.26,1.26,0,0,0,.41-1A1.22,1.22,0,0,0,9.12,10a2.48,2.48,0,0,0-.73-.61q-.47-.27-1.29-.65A6.46,6.46,0,0,1,5.23,7.54a2.63,2.63,0,0,1-.77-2,2.45,2.45,0,0,1,.4-1.36,2.75,2.75,0,0,1,1.21-1,4.79,4.79,0,0,1,2-.37A7,7,0,0,1,9.32,3q.56.1,1.14.26l.51.12-.09,2.38H9.66l-.33-1.6a1,1,0,0,0-.44-.23,2.57,2.57,0,0,0-.76-.1A1.64,1.64,0,0,0,7,4.12,1.17,1.17,0,0,0,6.63,5a1.22,1.22,0,0,0,.3.82,2.87,2.87,0,0,0,.76.62q.46.27,1.35.7a11.53,11.53,0,0,1,1.31.73,3.47,3.47,0,0,1,.94.93,2.26,2.26,0,0,1,.39,1.32A2.9,2.9,0,0,1,11.3,11.56Z"/>
+</svg>

services/web/public/stylesheets/app/editor.less

@@ -14,6 +14,18 @@
 @import "./editor/review-panel.less";
 @import "./editor/feature-onboarding.less";
 
+@keyframes blink {
+	0% { 
+		opacity: 0.2;
+	}
+	20% { 
+		opacity: 1;
+	}
+	100% { 
+		opacity: 0.2;
+	}
+}
+
 .full-size {
 	position: absolute;
 	top: 0;
@@ -53,24 +65,59 @@
 }
 
 .loading-screen {
-	h3 {
-		padding-top: 136px;
-		background-image: url(/img/lion-128.png);
-		background-repeat: no-repeat;
-		background-position: top center;
-	}
-	.full-size;
-	background-color: #fafafa;
-	.container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background-color: #FFF;
+}
+	.loading-screen-lion-container {
+		width: 15%;
+		min-width: 200px;
 		text-align: center;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 400px;
-		margin-left: -200px;
-		margin-top: -200px;
 	}
-}
+		.loading-screen-lion {
+			position: relative;
+			width: 100%;
+			padding-top: 86.2%;
+			height: 0;
+			background: url(/img/brand/lion-grey.svg) no-repeat bottom / 100%;
+
+    		&::after {
+				content: '';
+				position: absolute;
+				height: inherit;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				background: url(/img/brand/lion.svg) no-repeat bottom / 100%;
+				transition: height .5s;
+    		}
+		}
+		.loading-screen-label {
+			margin: 0;
+			padding-top: 1em;
+			font-size: 2em;
+			color: @gray-dark;
+		}
+			.loading-screen-ellip {
+				animation: blink 1.4s both infinite;
+				&:nth-child(2) {
+					animation-delay: 0.2s;
+				}
+				&:nth-child(3) {
+					animation-delay: 0.4s;
+				}
+			}
+
+		.loading-screen-error {
+			margin: 0;
+			padding-top: 1em;
+			color: @state-danger-text;
+		}
+
 
 .loading-panel {
 	.full-size;

services/web/public/stylesheets/app/error-pages.less

@@ -0,0 +1,86 @@
+.full-height {
+	height: 100%;
+	padding: 0;
+}
+
+.error-container {
+	display: flex;
+	align-items: center;
+}
+	.error-figure {
+		display: none;
+		flex: 0 0 50%;
+		padding: @line-height-computed * 2;
+		@media (min-width: @screen-sm-min) {
+			display: block;
+		}
+	}
+	.error-figure-500 {
+		&::before {
+			content: '';
+			display: block;
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 80%;
+			background-image: url(/img/brand/500-visual-plug.svg);
+			background-size: 400px;
+			background-repeat: no-repeat;
+			background-position: right 70%;
+			pointer-events: none;
+		}
+		&::after {
+			content: '';
+			display: block;
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 50%;
+			background-image: url(/img/brand/500-visual-tail.svg);
+			background-size: 100px;
+			background-repeat: no-repeat;
+			background-position: 90% bottom;
+			pointer-events: none;
+		}
+	}
+		.error-img {
+			display: block;
+			max-width: 380px;
+			height: auto;
+			margin: 0 auto;
+		}
+
+	.error-details {
+		flex: 0 1 50%;
+		padding: @line-height-computed * 2;
+	}
+		.error-status {
+			font-family: @font-family-serif;
+			margin-bottom: (@line-height-computed / 4);
+			color: @gray-dark;
+			font-size: @font-size-h1;
+		}
+		.error-description {
+			font-family: @font-family-serif;
+			font-size: @font-size-h3;
+			color: @gray;
+			margin-bottom: @line-height-computed * 2;
+		}
+		.error-btn {
+			color: @navbar-default-link-color;
+			border: 2px solid @navbar-default-link-color;
+			border-radius: @border-radius-base;
+			font-weight: 700;
+			line-height: 1;
+			padding: @padding-base-vertical @padding-base-horizontal;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+				color: #fff;
+				background-color: @navbar-default-link-hover-bg;
+				border: 2px solid @navbar-default-link-hover-color;
+			}
+		}

services/web/public/stylesheets/app/project-list.less

@@ -347,11 +347,11 @@ ul.project-list {
 
 .announcements-btn {
 	position: absolute;
-	bottom: -50px;
+	bottom: -35px;
 	right: 3%;
 	width: 80px;
 	height: 80px;
-	background: url(/img/lion-128.png) no-repeat center/80% transparent;
+	background: url(/img/brand/lion.svg) no-repeat center/80% transparent;
 	border-radius: 50%;
 	box-shadow: none;
 	z-index: 1;
@@ -361,7 +361,7 @@ ul.project-list {
 				box-shadow 0.25s ease;
 
 	&:hover {
-		bottom: -45px;
+		bottom: -25px;
 	}
 
 	&-open, &-open:hover,

services/web/public/stylesheets/components/navbar.less

@@ -384,24 +384,13 @@
     position: absolute;
     top: 5px;
     bottom: 5px;
-    width: 135px;
+    width: 180px;
     padding: 0;
-    background-image: url('/img/logo.png');
+    background-image: url('/img/brand/logo-horizontal.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: left center;
   }
-  @media
-    only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (   min--moz-device-pixel-ratio: 2),
-    only screen and (     -o-min-device-pixel-ratio: 2/1),
-    only screen and (        min-device-pixel-ratio: 2),
-    only screen and (                min-resolution: 192dpi),
-    only screen and (                min-resolution: 2dppx) { 
-        .navbar-brand {
-          background-image: url('/img/logo@2x.png');
-        }
-  }
 
   .navbar-text {
     color: @navbar-default-color;

services/web/public/stylesheets/core/variables.less

@@ -51,10 +51,11 @@
 
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
 //@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,600,700);
-@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i);
+//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i);
+@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
 
 @font-family-sans-serif:  "Open Sans", sans-serif;
-@font-family-serif:       "PT Serif", serif;
+@font-family-serif:       "Merriweather", serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
@@ -79,7 +80,7 @@
 @headings-font-family:    @font-family-serif;
 @headings-font-weight:    500;
 @headings-line-height:    1.1;
-@headings-color:          @gray-darker;
+@headings-color:          @gray-dark;
 
 
 //-- Iconography

services/web/public/stylesheets/style.less

@@ -79,6 +79,7 @@
 @import "app/sprites.less";
 @import "app/invite.less";
 @import "app/review-features-page.less";
+@import "app/error-pages.less";
 
 @import	"../js/libs/pdfListView/TextLayer.css";
 @import	"../js/libs/pdfListView/AnnotationsLayer.css";