Style adjusments; make announcements close when backdrop is clicked.

services/web/app/views/project/list.jade

@@ -21,12 +21,15 @@ block content
 
 	.content.content-alt.project-list-page(ng-controller="ProjectPageController")
 		.container
-			
-			div(
+			.announcements(
 				ng-controller="AnnouncementsController"
+				ng-class="{ 'announcements-open': ui.isOpen }"
 				ng-cloak
 			)
-				.announcements-backdrop(ng-if="ui.isOpen")
+				.announcements-backdrop(
+					ng-if="ui.isOpen"
+					ng-click="ui.isOpen = false;"
+				)
 				a.announcements-btn(
 					href
 					ng-if="announcements.length"
@@ -41,15 +44,13 @@ block content
 						ng-repeat="announcement in announcements"
 					)
 						h2.announcement-header {{ announcement.title }}
-						p.announcement-date {{ announcement.date | date:"longDate" }}
 						p.announcement-description {{ announcement.excerpt }}
-						a(
-							ng-href="{{ announcement.url }}"
-							target="_blank"
-						) Read more
-				//- .card.card-thin(ng-show="dataReceived")
-				//- 	a.announcement-title(href, ng-click="openLink()") {{ title }}
-				//- 	p.announcement-description {{ excerpt }}
+						.announcement-meta
+							p.announcement-date {{ announcement.date | date:"longDate" }}
+							a.announcement-link(
+								ng-href="{{ announcement.url }}"
+								target="_blank"
+							) Read more
 
 			.row(ng-cloak)
 				span(ng-if="projects.length > 0")

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

@@ -1,4 +1,4 @@
-@announcements-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
+@announcements-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
 
 @keyframes pulse {
 	0% {
@@ -318,6 +318,12 @@ ul.project-list {
 	}
 }
 
+.announcements {
+	position: absolute;
+	bottom: 0;
+	right: 3%;
+}
+
 .announcements-backdrop {
 	position: fixed;
 	top: 0;
@@ -333,7 +339,7 @@ ul.project-list {
 .announcements-btn {
 	position: absolute;
 	bottom: -50px;
-	right: 3%;
+	right: 0;
 	width: 80px;
 	height: 80px;
 	background: url(/img/lion-128.png) no-repeat center/80% transparent;
@@ -352,52 +358,83 @@ ul.project-list {
 	&-has-new, &-has-new:hover {
 		background-color: #FFF;
 		box-shadow: @announcements-shadow;
-		bottom: 40px;
+		bottom: 30px;
 	}
 }
-.announcements-badge {
-	display: inline-block;
-	position: absolute;
-	font-size: 11px;
-	height: 1.8em;
-	min-width: 1.8em;
-	border-radius: 0.9em;
-	line-height: 1.8;
-	padding: 0 2px;
-	top: 1px;
-	right: 1px;
-	font-weight: bold;
-	color: #FFF;
-	background-color: @red;
-	vertical-align: baseline;
-	white-space: nowrap;
-	text-align: center;
-	z-index: 1;
-	animation: pulse 1s alternate infinite;
-}
+	.announcements-badge {
+		display: inline-block;
+		position: absolute;
+		font-size: 11px;
+		height: 1.8em;
+		min-width: 1.8em;
+		border-radius: 0.9em;
+		line-height: 1.8;
+		padding: 0 2px;
+		top: 1px;
+		right: 1px;
+		font-weight: bold;
+		color: #FFF;
+		background-color: @red;
+		vertical-align: baseline;
+		white-space: nowrap;
+		text-align: center;
+		z-index: 1;
+		animation: pulse 1s alternate infinite;
+	}
 
 .announcements-body {
 	position: absolute;
-	right: 3%;
-	bottom: 130px;
+	right: 95px;
+	bottom: 30px;
 	width: 700px;
 	min-height: 100px;
 	background: #FFF;
 	z-index: 1;
 	box-shadow: @announcements-shadow;
-	padding: 0 @line-height-computed;
+	padding: @line-height-computed;
 	border-radius: @border-radius-base;
 	animation: fade-in 0.35s forwards;
+
+	&::after {
+		content: "\25b8";
+		position: absolute;
+		left: 100%;
+		bottom: 17px;
+		width: 30px;
+		color: #FFF;
+		text-shadow: @announcements-shadow;
+		font-size: 2em;
+		overflow: hidden;
+		text-indent: -6px;
+	}
 }
 	.announcement {
-		margin-bottom: @line-height-computed;
-	}
+		margin-bottom: @line-height-computed * 1.5;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}	
 		.announcement-header {
 			.page-header;
-			margin-bottom: 0;
+			margin: 0;
+		}
+
+		.announcement-description {
+			margin: (@line-height-computed / 4) 0 (@line-height-computed / 2);
 		}
 
-		.announcement-date {
-			.small;
-			margin: (@line-height-computed / 4) 0;
+		.announcement-meta {
+			.clearfix;
+			font-size: 0.9em;
 		}
+
+			.announcement-date {
+				float: left;
+				color: @gray;
+				margin: 0;
+			}
+
+			.announcement-link {
+				float: right;
+				margin: 0;
+			}