Merge pull request nwjs#8 from waghcwb/develop

Develop

.gitignore

@@ -1,4 +1,4 @@
-_site
+_deploy
 _assets/vendor/
 .asset-cache
 .jekyll-metadata

_assets/css/components/_nw-download.scss

@@ -0,0 +1,9 @@
+.nw-download {
+	background-color: $nw-main-white-light;
+	margin-top: -5px;
+	padding-bottom: 2em;
+
+	.nw-download-link {
+		min-width: 15em;
+	}
+}

_assets/css/components/_nw-features.scss

@@ -1,6 +1,4 @@
 .nw-features {
-	border-top: $nw-main-white 1px solid;
-
 	.nw-features-item {
 		.nw-features-item-title {
 			display: inline-block;

_assets/css/components/_nw-header.scss

@@ -1,21 +1,29 @@
 .nw-header {
-	$header-font-size: 1.5em;
-
 	background-color: $nw-main-black;
 	text-align: center;
 	padding: ( $header-font-size * 1.5 ) 0;
 	font-size: $header-font-size;
 	border-bottom: 4px solid $brand-primary;
 	box-shadow: #fff 0 1px 0;
+	height: $header-height;
+
+	> .container {
+		height: 100%;
+	}
 }
 
 .nw-logo {
+	margin: 0;
 	font-weight: normal;
+	height: 100%;
 
 	a {
+		display: block;
 		color: $brand-primary;
 		text-decoration: none;
 		font-weight: 100;
+		height: 100%;
+		line-height: calc( #{$header-height} / 2 );
 
 		strong {
 			color: $nw-main-white;

_assets/css/components/_nw-view-github.scss

@@ -4,8 +4,4 @@
 	a {
 		padding: 1em 2em;
 	}
-
-	i {
-		margin-right: .5em;
-	}
 }

_assets/css/components/_nw-welcome.scss

@@ -8,6 +8,7 @@
 		border-radius: $border-radius-base;
 		position: relative;
 		height: 17em;
+		box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, .05 );
 
 		a {
 			@include flex-center;
@@ -34,11 +35,6 @@
 					@include visual-hidden;
 				}
 
-				left: -100%;
-				font-size: .5em;
-				font-weight: 100;
-
-
 				i {
 					@include visual-hidden;
 
@@ -83,8 +79,4 @@
 		font-weight: 100;
 		margin: 2em 0;
 	}
-}
-
-.nw-welcome + .nw-separator {
-	fill: $nw-main-white;
 }

_assets/css/general/_global.scss

@@ -13,4 +13,15 @@
 
 @import "components/nw-welcome";
 @import "components/nw-features";
-@import "components/nw-view-github";
+@import "components/nw-view-github";
+@import "components/nw-download";
+
+::selection {
+	background: $nw-main-green;
+	color: $nw-main-white;
+}
+
+::-moz-selection {
+	background: $nw-main-green;
+	color: $nw-main-white;
+}

_assets/css/general/_nw-custom-bootstrap.scss

@@ -2,8 +2,13 @@
 	transition: ease-in-out .2s background-color;
 	font-size: 1em;
 	border: none;
+	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, .2 );
 
 	&:not( .btn-link ) {
 		text-transform: uppercase;
 	}
+
+	> i {
+		margin-right: .5em;
+	}
 }

_assets/css/general/_nw-variables.scss

@@ -1,17 +1,45 @@
+/*
+	nw custom
+*/
+
+// colors
 $nw-main-green: #89C64A;
-$nw-main-black: #2A2A2A;
+$nw-main-black: #31393a;
 $nw-main-white: #E9E9E9;
 $nw-main-white-light: lighten( $nw-main-white, 5 );
 $nw-main-orange: #e67e22;
+
+// heights
+$header-height: 10em;
+$nw-button-height: 50px;
+
+// border-radius
 $nw-border-radius: 2px;
 
+// fonts
 $nw-font-stack: 'Open Sans', sans-serif;
+$header-font-size: 1.5em;
+
+// icon
+$nw-button-icon-gutter: $nw-button-height / 3;
+$nw-button-content-gutter: 5px;
+
+
+/*
+	bootstrap custom
+*/
 
-// bootstrap custom
+// main color
 $brand-primary: $nw-main-green;
+
+// buttons
 $btn-font-weight: 100;
-$font-family-sans-serif: $nw-font-stack;
 $btn-primary-border: $brand-primary;
+
+// fonts
+$font-family-sans-serif: $nw-font-stack;
+
+// border-radius
 $border-radius-base: $nw-border-radius;
 $border-radius-large: $nw-border-radius;
 $border-radius-small: $nw-border-radius;

_assets/css/nw-custom.scss

@@ -21,4 +21,48 @@
 			right: 0;
 		}
 	}
+}
+
+.nw-border-top {
+	border-top: $nw-main-white 1px solid;
+}
+
+.nw-separator {
+	fill: $nw-main-white;
+}
+
+.nw-bg-white-light {
+	&:not( .nw-separator ) {
+		background-color: $nw-main-white-light;
+	}
+
+	&.nw-separator {
+		fill: $nw-main-white-light;
+	}
+}
+
+.nw-button {
+	padding: 0;
+	height: $nw-button-height;
+
+	.nw-button-icon {
+		width: calc( 25% - 1px );
+		height: $nw-button-height;
+		padding: $nw-button-icon-gutter;
+		border-right: rgba( 255, 255, 255, .2 ) 1px solid;
+	}
+
+	.nw-button-content {
+		width: 75%;
+		height: $nw-button-height;
+		line-height: ( ( $nw-button-height - $nw-button-icon-gutter ) / 2 );
+	}
+
+	.nw-button-title,
+	.nw-button-subtitle {
+		padding: $nw-button-content-gutter 0;
+		display: block;
+		height: ( $nw-button-height ) - ( $nw-button-content-gutter * 2 );
+		line-height: $nw-button-height / 2;
+	}
 }

_build/build.sh

@@ -2,4 +2,4 @@
 set -e
 
 bundle exec jekyll build
-bundle exec htmlproofer ./_site --disable-external
+bundle exec htmlproofer ./_deploy --disable-external

_config.yml

@@ -3,8 +3,10 @@ email: [email protected]
 description: build awesome cross platforms apps with front-end technologies
 welcome-message: node webkit is an app runtime based on <a href="https://www.chromium.org" target="_blank">Chromium</a> and <a href="https://nodejs.org" target="_blank">node.js</a>
 baseurl: ""
-url: http://nwjs.io
+url: http://dev.nwjs.io
+# url: http://nwjs.io
 markdown: kramdown
+destination: _deploy
 
 github: nwjs/nw.js
 
@@ -14,6 +16,8 @@ gems:
   - html-proofer
   - bootstrap-sass
 
+exclude: ["Gemfile*", "bower.json", "README.md"]
+
 assets:
   # cache: false
   prefix: /assets

_includes/components/blog.html

@@ -0,0 +1,19 @@
+<section class="nw-blog">
+    <section class="container">
+        <div class="page-header">
+            <h3>Blog</h3>
+        </div>
+        <div class="row">
+            {% for post in site.posts %}
+                <div class="col-md-6">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">{{ post.title }} -  <small>{{ post.date | date: "%b %-d, %Y" }}</small></div>
+                        <div class="panel-body">
+                            <a href="{{ post.url | prepend: site.baseurl }}" class="btn btn-link pull-right">Read more</a>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </section>
+</section>

_includes/components/download.html

@@ -0,0 +1,24 @@
+{% include components/separator-rounded.html class="nw-bg-white-light" %}
+
+<section class="nw-download">
+	<section class="container">
+		<div class="row text-center">
+			<div class="col-md-6">
+				<a href="#" class="btn btn-primary">Download</a>
+			</div>
+			<div class="col-md-6">
+				<a href="#" class="nw-button nw-download-link btn btn-primary btn-lg text-center" role="button">
+					<span class="nw-button-icon pull-left ion-android-download"></span>
+					<span class="nw-button-content pull-left">
+						<span class="nw-button-title">
+							<strong>SDK</strong>
+						</span>
+						<span class="nw-button-subtitle">
+							<small>v0.15.1</small>
+						</span>
+					</span>
+				</a>
+			</div>
+		</div>
+	</section>
+</section>

_includes/components/features.html

@@ -1,16 +1,25 @@
-<section class="nw-features">
-	<section class="container">
-	    <div class="row">
-	        <div class="col-md-4">
+<section class="nw-features nw-border-top">
+	<section class="container-fluid">
+		<div class="row">
+	        <div class="col-md-4 col-sm-4">
 	            {% include components/features-item.html icon="ion-code" content="New way of writing native applications web technologies: HTML5, CSS3, and WebGL" %}
 	        </div>
-	        <div class="col-md-4">
+	        <div class="col-md-4 col-sm-4">
 	            {% include components/features-item.html icon="ion-social-html5" content="Full support for the features in browser" %}
 	        </div>
-	        <div class="col-md-4">
-	            {% include components/features-item.html icon="ion-social-nodejs" content="Complete support for Node.js APIs and all third party modules
-
-" %}
+	        <div class="col-md-4 col-sm-4">
+	            {% include components/features-item.html icon="ion-social-nodejs" content="Complete support for NodeJS APIs and all third party modules" %}
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-md-4 col-sm-4">
+	            {% include components/features-item.html icon="ion-social-javascript" content="Call NodeJS modules directly from the DOM" %}
+	        </div>
+	        <div class="col-md-4 col-sm-4">
+	            {% include components/features-item.html icon="ion-lock-combination" content="Javascript Source Protection" %}
+	        </div>
+	        <div class="col-md-4 col-sm-4">
+	            {% include components/features-item.html icon="ion-social-tux" content="Available on Linux, Mac OS X and Windows" %}
 	        </div>
 	    </div>
 	</section>

_includes/components/logo.html

@@ -1,5 +1,5 @@
 <h3 class="nw-logo">
-	<a href="{{ site.baseurl }}">
+	<a href="{{ '/' | prepend: site.baseurl }}">
 		<strong>nw</strong>.js
 	</a>
 </h3>

_includes/components/separator-rounded.html

@@ -0,0 +1,5 @@
+<section class="row">
+	<svg class="nw-separator rounded {{ include.class }}" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
+		<path d="M0 100 C40 0 60 0 100 100 Z"></path>
+	</svg>
+</section>

_includes/components/separator.html

@@ -1,3 +1,5 @@
-<svg class="nw-separator" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
-	<path d="M0 0 L50 100 L100 0 Z"></path>
-</svg>
+<section class="row">
+	<svg class="nw-separator" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
+		<path d="M0 0 L50 100 L100 0 Z"></path>
+	</svg>
+</section>

_includes/components/view-github.html

@@ -1,4 +1,7 @@
+{% include components/separator.html %}
+
 <section class="nw-view-github text-center container">
+
 	<a href="https://github.com/nwjs/nw.js" class="btn btn-primary btn-lg">
 		<i class="ion-social-octocat"></i>
 		View Github project

_includes/components/welcome-item.html

@@ -1,5 +1,5 @@
 <div class="nw-welcome-item text-center">
-	<a href="{{ include.link }}">
+	<a href="{{ include.link | prepend: site.baseurl | prepend: site.url }}">
 		<i class="{{ include.icon }}"></i>
 		<span class="nw-welcome-item-hidden-label">
 			<i class="{{ include.icon }}"></i>

blog.html

@@ -0,0 +1,9 @@
+---
+layout: page
+title: Blog
+permalink: blog/
+---
+
+<section class="container">
+	blog
+</section>