Putting the new logo to use

Author: tjvantoll

css/style.css

@@ -28,15 +28,26 @@ <h1>Building Apps with NativeScript and Angular 2</h1>
 		<div id="book">
 			<div class="chapter">
 				<h2 id="building-apps-with-nativescript-and-angular-2">Building Apps with NativeScript and Angular 2</h2>
-<p><img src="images/banner.png" class="banner-image plain" alt="NativeScript and Angular 2 logos"></p>
 <p>Welcome to the NativeScript &amp; Angular 2 getting started guide 📚. In this hands-on tutorial, you’ll build a cross-platform iOS and Android app from scratch.</p>
 <blockquote>
 <p><strong>WARNING 🚧</strong>: This guide is being actively written and is not complete. If you find an error in the guide please report the problem at <a href="https://github.com/tjvantoll/nativescript-angular-guide">https://github.com/tjvantoll/nativescript-angular-guide</a>. Pull requests are also welcome 😀.</p>
 </blockquote>
 <h3 id="what-is-nativescript-what-is-angular-2-">What is NativeScript? What is Angular 2?</h3>
-<p><a href="https://www.nativescript.org/">NativeScript</a>  is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine—no <a href="http://developer.telerik.com/featured/what-is-a-webview/">WebViews</a>—resulting in native-like performance and UX. <a href="https://angularjs.org/">Angular JS</a> is one of the most popular open source JavaScript frameworks for application development.</p>
-<p>The latest version of Angular, <a href="https://angular.io/">Angular 2</a>, makes it possible to use Angular outside of a web browser, and developers at <a href="http://www.telerik.com/">Telerik</a> (the company that created and maintains NativeScript) <a href="https://docs.google.com/document/d/1J6fZcVbVa6uONVCJIox2A3Jn5TWgspLufmryfA1OXGk/edit#heading=h.trgonlvb0z3j">have been working closely with developers at Google</a> to make Angular 2 in NativeScript a reality.</p>
-<p>The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular 2 web apps, with the performance you’d expect from native code. Let’s look at how it all works by building an app.</p>
+<div class="intro-box">
+  <img src="images/NativeScript_logo.png" class="plain" alt="NativeScript logo">
+  <p><a href="https://www.nativescript.org/">NativeScript</a>  is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine—no <a href="http://developer.telerik.com/featured/what-is-a-webview/">WebViews</a>—resulting in native-like performance and UX. <a href="https://angularjs.org/">Angular JS</a> is one of the most popular open source JavaScript frameworks for application development.</p>
+</div>
+
+<div class="intro-box">
+  <img src="images/Angular_logo.png" class="plain" alt="Angular logo">
+  <p>The latest version of Angular, <a href="https://angular.io/">Angular 2</a>, makes it possible to use Angular outside of a web browser, and developers at <a href="http://www.telerik.com/">Telerik</a> (the company that created and maintains NativeScript) <a href="https://docs.google.com/document/d/1J6fZcVbVa6uONVCJIox2A3Jn5TWgspLufmryfA1OXGk/edit#heading=h.trgonlvb0z3j">have been working closely with developers at Google</a> to make Angular 2 in NativeScript a reality.</p>
+</div>
+
+<div class="intro-box">
+  <img src="images/NativeScript_Angular_logo.png" class="plain" alt="Angular logo">
+  <p>The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular 2 web apps, with the performance you’d expect from native code. Let’s look at how it all works by building an app.</p>
+</div>
+
 <blockquote>
 <p><strong>WARNING</strong>: Although NativeScript itself is a production-ready framework that drives <a href="https://www.nativescript.org/showcases">many apps in the app stores today</a>, NativeScript’s Angular integration is still in an alpha stage. If you run into issues when using the Angular integration, please report them on <a href="https://github.com/NativeScript/nativescript-angular">https://github.com/NativeScript/nativescript-angular</a>. If you’re looking for a guide on using the production-ready flavor of NativeScript, head to the <a href="http://docs.nativescript.org/start/getting-started">official Getting Started Guide</a>.</p>
 </blockquote>

images/Angular_logo.png

@@ -1,18 +1,25 @@
 ## Building Apps with NativeScript and Angular 2
 
-<img src="images/banner.png" class="banner-image plain" alt="NativeScript and Angular 2 logos">
-
 Welcome to the NativeScript & Angular 2 getting started guide 📚. In this hands-on tutorial, you’ll build a cross-platform iOS and Android app from scratch.
 
 > **WARNING 🚧**: This guide is being actively written and is not complete. If you find an error in the guide please report the problem at <https://github.com/tjvantoll/nativescript-angular-guide>. Pull requests are also welcome 😀.
 
 ### What is NativeScript? What is Angular 2?
 
-[NativeScript](https://www.nativescript.org/)  is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine—no [WebViews](http://developer.telerik.com/featured/what-is-a-webview/)—resulting in native-like performance and UX. [Angular JS](https://angularjs.org/) is one of the most popular open source JavaScript frameworks for application development.
+<div class="intro-box">
+  <img src="images/NativeScript_logo.png" class="plain" alt="NativeScript logo">
+  <p>[NativeScript](https://www.nativescript.org/)  is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine—no [WebViews](http://developer.telerik.com/featured/what-is-a-webview/)—resulting in native-like performance and UX. [Angular JS](https://angularjs.org/) is one of the most popular open source JavaScript frameworks for application development.</p>
+</div>
 
-The latest version of Angular, [Angular 2](https://angular.io/), makes it possible to use Angular outside of a web browser, and developers at [Telerik](http://www.telerik.com/) (the company that created and maintains NativeScript) [have been working closely with developers at Google](https://docs.google.com/document/d/1J6fZcVbVa6uONVCJIox2A3Jn5TWgspLufmryfA1OXGk/edit#heading=h.trgonlvb0z3j) to make Angular 2 in NativeScript a reality.
+<div class="intro-box">
+  <img src="images/Angular_logo.png" class="plain" alt="Angular logo">
+  <p>The latest version of Angular, [Angular 2](https://angular.io/), makes it possible to use Angular outside of a web browser, and developers at [Telerik](http://www.telerik.com/) (the company that created and maintains NativeScript) [have been working closely with developers at Google](https://docs.google.com/document/d/1J6fZcVbVa6uONVCJIox2A3Jn5TWgspLufmryfA1OXGk/edit#heading=h.trgonlvb0z3j) to make Angular 2 in NativeScript a reality.</p>
+</div>
 
-The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular 2 web apps, with the performance you’d expect from native code. Let’s look at how it all works by building an app.
+<div class="intro-box">
+  <img src="images/NativeScript_Angular_logo.png" class="plain" alt="Angular logo">
+  <p>The result is a software architecture that allows you to build mobile apps using the same framework—and in some cases the same code—that you use to build Angular 2 web apps, with the performance you’d expect from native code. Let’s look at how it all works by building an app.</p>
+</div>
 
 > **WARNING**: Although NativeScript itself is a production-ready framework that drives [many apps in the app stores today](https://www.nativescript.org/showcases), NativeScript’s Angular integration is still in an alpha stage. If you run into issues when using the Angular integration, please report them on https://github.com/NativeScript/nativescript-angular. If you’re looking for a guide on using the production-ready flavor of NativeScript, head to the [official Getting Started Guide](http://docs.nativescript.org/start/getting-started).
 

images/NativeScript_Angular_logo.png

@@ -16,9 +16,10 @@
 	var toc = $("#toc-padding");
 	$(".chapter").each(function(chapterNumber) {
 		$(this).find("h2").each(function() {
+			var valueToPrepend = chapterNumber === 0 ? "" : "<strong>" + chapterNumber + ". </strong>";
 			$(this)
 				.attr("id", "chapter" + chapterNumber)
-				.prepend("<strong>" + chapterNumber + ". </strong>");
+				.prepend(valueToPrepend);
 			toc.append("<h5><a href='#chapter" + chapterNumber + "'>" +
 				$(this).html() + "</a></h5>");
 		});

images/NativeScript_logo.png

@@ -48,6 +48,17 @@ a:hover {
 	color: #333;
 	background: #f8f8f8;
 }
+
+.intro-box {
+	display: flex;
+	align-items: center;
+	img {
+		flex: 0 0 150px;
+		height: 150px;
+		margin-right: 1em;
+	}
+}
+
 strong{
 	font-size:1.2em;
 }