slight redesign

kbrsh · Jul 6, 2018 · 61d0eed · 61d0eed
1 parent 378cfe0
commit 61d0eed
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 53 deletions.
diff --git a/web/css/index.css b/web/css/index.css
@@ -1,44 +1,22 @@
-h1 {
-	font-size: 50px;
-	font-weight: 600;
-	letter-spacing: 1px;
-	margin-bottom: 20px;
-}
-
-#nav {
-	display: flex;
-	justify-content: space-between;
-	left: 0;
-	right: 0;
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-
-#nav a {
+body {
+	background: #121212;
 	color: #F7F7F7;
-	text-decoration: none;
-}
-
-#nav-home {
-	margin-bottom: 0;
-	font-weight: 200;
-	letter-spacing: 1px;
-}
-
-#nav-items a {
-	margin-left: 16px;
 }
 
 #head {
-	background: #121212;
-	color: #F7F7F7;
+	margin-top: 100px;
 }
 
 #head img {
 	height: 100px;
 	margin-bottom: 20px;
 }
 
+#head h1 {
+	font-size: 50px;
+	margin-bottom: 20px;
+}
+
 #head a {
 	margin-bottom: 20px;
 }
@@ -60,16 +38,33 @@ h1 {
 	margin-bottom: 70px;
 }
 
+.feature h3 {
+	font-weight: 700;
+	letter-spacing: 5px;
+}
+
+.feature p {
+	font-weight: 200;
+}
+
 #feature-minimal pre:nth-of-type(2) {
 	margin: 0;
 }
 
 #example {
 	height: 100%;
 	margin-bottom: 16px;
-	background-color: #E6E6E6;
+	background-color: #232323;
+}
+
+#example p {
+	font-size: 30px;
+	font-weight: 200;
 }
 
 #example input {
 	width: 80%;
+	color: #D5D5D5;
+	background-color: #343434;
+	border-color: #676767;
 }
diff --git a/web/css/post.css b/web/css/post.css
@@ -0,0 +1,9 @@
+#post {
+	justify-content: space-between;
+	margin-top: 100px;
+}
+
+#side a {
+	color: #676767;
+	text-decoration: none;
+}
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -9,6 +9,33 @@ body {
 	margin: 0 auto;
 }
 
+#nav {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+#nav a {
+	color: #F7F7F7;
+	text-decoration: none;
+}
+
+#nav-home {
+	margin-bottom: 0;
+	font-weight: 200;
+	letter-spacing: 1px;
+}
+
+#nav-items a {
+	margin-left: 16px;
+}
+
+h1, h2, h3 {
+	font-weight: 600;
+	letter-spacing: 1px;
+}
+
 button {
 	font-size: 13px;
 	letter-spacing: 1px;
@@ -19,7 +46,7 @@ button {
 pre code {
 	position: relative;
 	background: #1f292e;
-	border: 1px solid #343434;
+	border: 1px solid #29363d;
 	color: #b3c3cc;
 	tab-size: 3;
 }

diff --git a/web/doc/guide.html b/web/doc/guide.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="The minimal & fast UI library.">
+		<meta name="author" content="Kabir Shah">
+
+		<title>Moon | Guide</title>
+
+		<link rel="shortcut icon" href="../img/favicon.png"/>
+
+		<link rel="stylesheet" type="text/css" href="../css/lib/wing.min.css" />
+		<link rel="stylesheet" type="text/css" href="../css/styles.css" />
+		<link rel="stylesheet" type="text/css" href="../css/post.css" />
+
+		<script src="../dist/moon.min.js"></script>
+
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+				(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+				m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+			ga('create', 'UA-70792533-14', 'auto');
+			ga('send', 'pageview');
+		</script>
+	</head>
+
+	<body>
+		<div id="post" class="container flex">
+			<div id="side">
+				<h6>Documentation</h6>
+				<a href="./guide.html">Guide</a>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/web/index.html b/web/index.html
@@ -26,7 +26,7 @@
 	</head>
 
 	<body>
-		<div id="nav" class="container position-absolute flex align-center">
+		<div id="nav" class="container">
 			<h2 id="nav-home"><a href="./">Moon</a></h2>
 
 			<div id="nav-items">
@@ -37,7 +37,7 @@ <h2 id="nav-home"><a href="./">Moon</a></h2>
 			</div>
 		</div>
 
-		<section id="head" class="flex size-full align-center">
+		<section id="head" class="container text-center">
 			<div class="container-small text-center">
 				<img src="./img/logo.png" alt="Moon Logo">
 				<h1>The minimal & fast user interface library</h1>
@@ -46,11 +46,12 @@ <h1>The minimal & fast user interface library</h1>
 			</div>
 		</section>
 
-		<section id="feature-minimal" class="container feature"> <h1>Minimal</h1>
+		<section id="feature-minimal" class="container feature">
+			<h3>MINIMAL</h3>
 			<p>Moon instances are composed of data and a view to display the data. Actions performed through the view update the data along with the view. The view is defined with the Moon view language — a minimalistic template language allowing powerful interpolation and logic. The data is defined with a JavaScript object containing values of any type.</p>
 			<div class="row">
 				<div class="col">
-					<pre><code lang="mvl"><span class="red">&lt;h1</span><span class="red">&gt;</span>{text}<span class="red">&lt;/h1</span><span class="red">&gt;</span>
+					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>{text}<span class="red">&lt;/p</span><span class="red">&gt;</span>
 <span class="red">&lt;input</span> <span class="orange">type</span>=<span class="green">&quot;text&quot;</span> <span class="orange">@bind</span>={text} <span class="red">/&gt;</span></code></pre>
 					<pre><code lang="js"><span class="blue">Moon</span>({
 	root: <span class="green">&quot;#root&quot;</span>,
@@ -64,18 +65,16 @@ <h1>The minimal & fast user interface library</h1>
 		</section>
 
 		<section id="feature-fast" class="container feature">
-			<h1>Fast</h1>
+			<h3>FAST</h3>
 			<p>Moon instances are compiled from the Moon view language to lower level JavaScript DOM operations. Moon generates code to first create and initialize your application. At compile-time, Moon can identify the dynamic parts of your application and generate code to update them when needed at runtime.</p>
 			<div class="row">
 				<div class="col">
-					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Count: {count}<span class="red">&lt;/p</span><span class="red">&gt;</span>
-<span class="red">&lt;button</span> <span class="orange">@click</span>={<span class="blue">increment</span>()}<span class="red">&gt;</span>
-	Increment
-<span class="red">&lt;/button</span><span class="red">&gt;</span></code></pre>
+					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Static content.<span class="red">&lt;/p</span><span class="red">&gt;</span>
+<span class="red">&lt;p</span><span class="red">&gt;</span>Dynamic content: {dynamic}<span class="red">&lt;/p</span><span class="red">&gt;</span></code></pre>
 				</div>
 				<div class="col">
 					<pre><code lang="js"><span class="purple">function</span> <span class="blue">update</span>() {
-	m.<span class="blue">stc</span>(m[<span class="orange">3</span>], instance.count);
+	m.<span class="blue">stc</span>(m6, instance.dynamic);
 }</code></pre>
 				</div>
 			</div>

diff --git a/web/js/index.js b/web/js/index.js
@@ -1,5 +1,5 @@
 Moon({
 	root: "#example",
-	view: "<h2>{text}</h2><input type='text' @bind={text}/>",
+	view: "<p>{text}</p><input type='text' @bind={text}/>",
 	text: "Hello Moon!"
 });
diff --git a/web/src/doc/guide.md b/web/src/doc/guide.md
@@ -0,0 +1,5 @@
+---
+title: Guide
+---
+
+## Installation
diff --git a/web/template/index.html b/web/template/index.html
@@ -26,7 +26,7 @@
 	</head>
 
 	<body>
-		<div id="nav" class="container position-absolute flex align-center">
+		<div id="nav" class="container">
 			<h2 id="nav-home"><a href="./">Moon</a></h2>
 
 			<div id="nav-items">
@@ -37,7 +37,7 @@ <h2 id="nav-home"><a href="./">Moon</a></h2>
 			</div>
 		</div>
 
-		<section id="head" class="flex size-full align-center">
+		<section id="head" class="container text-center">
 			<div class="container-small text-center">
 				<img src="./img/logo.png" alt="Moon Logo">
 				<h1>The minimal & fast user interface library</h1>
@@ -46,11 +46,12 @@ <h1>The minimal & fast user interface library</h1>
 			</div>
 		</section>
 
-		<section id="feature-minimal" class="container feature"> <h1>Minimal</h1>
+		<section id="feature-minimal" class="container feature">
+			<h3>MINIMAL</h3>
 			<p>Moon instances are composed of data and a view to display the data. Actions performed through the view update the data along with the view. The view is defined with the Moon view language — a minimalistic template language allowing powerful interpolation and logic. The data is defined with a JavaScript object containing values of any type.</p>
 			<div class="row">
 				<div class="col">
-					<pre><code lang="mvl"><span class="red">&lt;h1</span><span class="red">&gt;</span>{text}<span class="red">&lt;/h1</span><span class="red">&gt;</span>
+					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>{text}<span class="red">&lt;/p</span><span class="red">&gt;</span>
 <span class="red">&lt;input</span> <span class="orange">type</span>=<span class="green">&quot;text&quot;</span> <span class="orange">@bind</span>={text} <span class="red">/&gt;</span></code></pre>
 					<pre><code lang="js"><span class="blue">Moon</span>({
 	root: <span class="green">&quot;#root&quot;</span>,
@@ -64,18 +65,16 @@ <h1>The minimal & fast user interface library</h1>
 		</section>
 
 		<section id="feature-fast" class="container feature">
-			<h1>Fast</h1>
+			<h3>FAST</h3>
 			<p>Moon instances are compiled from the Moon view language to lower level JavaScript DOM operations. Moon generates code to first create and initialize your application. At compile-time, Moon can identify the dynamic parts of your application and generate code to update them when needed at runtime.</p>
 			<div class="row">
 				<div class="col">
-					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Count: {count}<span class="red">&lt;/p</span><span class="red">&gt;</span>
-<span class="red">&lt;button</span> <span class="orange">@click</span>={<span class="blue">increment</span>()}<span class="red">&gt;</span>
-	Increment
-<span class="red">&lt;/button</span><span class="red">&gt;</span></code></pre>
+					<pre><code lang="mvl"><span class="red">&lt;p</span><span class="red">&gt;</span>Static content.<span class="red">&lt;/p</span><span class="red">&gt;</span>
+<span class="red">&lt;p</span><span class="red">&gt;</span>Dynamic content: {dynamic}<span class="red">&lt;/p</span><span class="red">&gt;</span></code></pre>
 				</div>
 				<div class="col">
 					<pre><code lang="js"><span class="purple">function</span> <span class="blue">update</span>() {
-	m.<span class="blue">stc</span>(m[<span class="orange">3</span>], instance.count);
+	m.<span class="blue">stc</span>(m6, instance.dynamic);
 }</code></pre>
 				</div>
 			</div>

diff --git a/web/template/post.html b/web/template/post.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="The minimal & fast UI library.">
+		<meta name="author" content="Kabir Shah">
+
+		<title>Moon | {{title}}</title>
+
+		<link rel="shortcut icon" href="../img/favicon.png"/>
+
+		<link rel="stylesheet" type="text/css" href="../css/lib/wing.min.css" />
+		<link rel="stylesheet" type="text/css" href="../css/styles.css" />
+		<link rel="stylesheet" type="text/css" href="../css/post.css" />
+
+		<script src="../dist/moon.min.js"></script>
+
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+				(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+				m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+			})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+			ga('create', 'UA-70792533-14', 'auto');
+			ga('send', 'pageview');
+		</script>
+	</head>
+
+	<body>
+		<div id="post" class="container flex">
+			<div id="side">
+				<h6>Documentation</h6>
+				{{#posts.doc}}
+				<a href="./{{file}}">{{title}}</a>
+				{{/posts.doc}}
+			</div>
+		</div>
+	</body>
+</html>