[Front-end] About screen and status bar logo

>
> WTD-668
> WTD-700
Pulling over platform-specific CSS and imagery for About screen and status bar logo;
In progress

platform/commonUI/general/res/sass/_about.scss

@@ -0,0 +1,57 @@
+// General About dialog styling
+
+.t-about {
+	// Styling
+	line-height: 120%;
+	.s-description,
+	.s-info {
+		font-size: 0.8em;
+	}
+	.s-logo-holder {
+		background: url($dirImgs + "bg-lunar-1.jpg") center no-repeat;
+		background-size: cover;
+	}
+	.s-logo {
+//		@include txtShdwLarge(); // text-shadow doesn't work for svg
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+	h1, h2 {
+		color: #fff;
+		font-weight: normal !important;
+	}
+
+	// Layout
+	&.l-about.abs {
+//		top: 20px;
+		overflow: auto;
+	}
+	$contentH: 200px;
+	.l-logo-holder {
+		position: relative;
+		height: 45%;
+		.l-logo {
+			$w: 5%;
+			position: absolute;
+			&.l-logo-app {
+//				@include test(blue);
+				top: 0; right: $w * 5; bottom: 0; left: $w * 5;
+//				height: auto; width: auto;
+			}
+			&.s-logo-nasa {
+//				@include test(red);
+				$m: 10px;
+				background-image: url($dirImgs + 'logo-nasa.svg');
+				top: $m; right: auto; bottom: auto; left: $m;
+				width: $w * 2; height: auto; padding-bottom: $w; padding-top: $w;
+			}
+		}
+	}
+	.l-content {
+//		@include test();
+		position: relative;
+		margin-top: $interiorMarginLg;
+	}
+}
+

platform/commonUI/general/res/sass/_constants.scss

@@ -33,7 +33,7 @@ $btnFontSizeToH: 0.45;
 $ueTopBarH: 35px;
 $ueFooterH: 20px;
 $ueColMargin: 1.5%;
-$ueAppLogoW: 95px;
+$ueAppLogoW: 105px;
 $ueBrowseViewBarH: $ueTopBarH; // was 30px
 $ueEditToolBarH: $ueBrowseViewBarH;
 $ueEditToolBarButtonH: $ueEditToolBarH * 0.8;
@@ -84,7 +84,7 @@ $scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 
 // Paths
-$dirImgs: '../images/';
+$dirImgs: '../images/'; // Relative to platform/css/ directory
 
 // Ticks
 $ticksH: 25px;

platform/commonUI/general/res/sass/_global.scss

@@ -47,8 +47,14 @@ h1, h2, h3 {
 
 h1 {
 	font-size: 1.7em;
-	font-weight: normal;
+	font-weight: normal !important;
+	line-height: 120%;
 	margin-bottom: 20px;
+	margin-top: 0;
+}
+
+p {
+	margin-bottom: $interiorMarginLg;
 }
 
 span {
@@ -89,4 +95,8 @@ span {
 .hide,
 .hidden {
 	display: none !important;
+}
+
+.sep {
+	color: rgba(#fff, 0.2);
 }

platform/commonUI/general/res/sass/_main.scss

@@ -9,6 +9,7 @@
 @import "global";
 @import "fonts";
 @import "user-environ/layout";
+@import "about";
 @import "badges";
 @import "icons";
 @import "lists/tabular";

platform/commonUI/general/res/sass/_mixins.scss

@@ -115,6 +115,9 @@
 @mixin txtShdwSubtle($sVal: 0.1) {
 	@include text-shadow(rgba(black, $sVal) 0 1px 2px);
 }
+@mixin txtShdwLarge($sVal: 0.7) {
+	@include text-shadow(rgba(black, $sVal) 0 3px 7px);
+}
 
 
 @mixin invokeMenu($baseColor) {

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -4,8 +4,12 @@
 		z-index: 100;
 	}
     .btn.close {
+	    @include border-radius($basicCr * 2);
+	    padding: 3px 6px;
         position: absolute;
-        top: $interiorMargin; right: $interiorMargin; bottom: auto; left: auto;
+	    border: none;
+        top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
+	    z-index: 100;
     }
     .editor {
 //        background: $colorBodyBg;
@@ -18,7 +22,7 @@
 		top: $i; right: $i; bottom: $i; left: $i;
 		z-index: 101;
         >.contents {
-            $m: 20px;
+            $m: 25px;
             top: $m; right: $m; bottom: $m; left: $m;
         }
 	}

platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss

@@ -12,17 +12,19 @@
 	}
 	.app-logo {
 		@include box-sizing(border-box);
+		cursor: pointer;
 		font-size: 0.8em;
 		line-height: $ueFooterH - 10px;
 		padding-top: 1px;
 		text-transform: uppercase;
-		&.logo-warp {
+		// Moved following to warp/warp.scss
+/*		&.logo-warp {
 			background: url($dirImgs + 'logo-warp.png') no-repeat left top;
 			color: lighten($colorBodyBg, 40%);
 			font-size: 0.7rem;
 			padding-top: 3px;
 			text-align: right;
-		}
+		}*/
 	}
 }