Styling, added placeholder pages, edited 'Run your own server' instru…

…ctions
zulip · Aug 21, 2015 · 398f3b9 · 398f3b9
1 parent 90c96ce
commit 398f3b9
Show file tree

Hide file tree

Showing 8 changed files with 427 additions and 53 deletions.
diff --git a/clients.html b/clients.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Zulip - Clients</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/media.css">
+  </head>
+  <body>
+    <!-- Navigation bar -->
+    <header>
+      <div class="container">
+        <div id="logo">
+          <a href="index.html"><img src="images/logos/zulip-icon-512x512.png" />zulip</a>
+        </div>
+        <nav>
+          <ul class="downloads">
+            <li><a href="server.html">Server</a></li>
+            <li><a href="clients.html">Clients</a></li>
+          </ul>
+          <ul>
+            <li><a href="features.html">Features</a></li>
+            <li><a href="help.html">Help</a></li>
+            <li><a href="contribute.html">Contribute</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <div class="band band-blue">
+      <div class="container">
+          <h2>Download a Zulip client for your platform</h2>
+      </div>
+    </div>
+
+    <div class="container docs">
+      <article>
+        <section style="text-align: left; color: #000">
+          <h3>Web</h3>
+          <p>Ask your organization for a link to their Zulip web instance.</p>
+          <h3>Desktop</h3>
+          <h4>Mac</h4>
+          <p>Download a package <a href="https://zulip.com/dist/apps/mac/Zulip-latest.dmg">here</a></p>
+          <h4>Windows</h4>
+          <p>Get an executable <a href="https://zulip.com/dist/apps/mac/Zulip-latest.dmg">here</a></p>
+          <h4>Linux</h4>
+          <p>If you have Ubuntu or Debian, you can get it from our apt repo:</p>
+          <div class="terminal">
+          wget https://zulip.com/dist/keys/user-apt.asc<br/>
+          cat user-apt.asc | sudo apt-key add -<br/>
+          sudo apt-add-repository http://apt.zulip.com/user/<br/>
+          sudo apt-get update<br/>
+
+          sudo apt-get install zulip-desktop<br/>
+          </div>
+          or download a binary tarball for 64-bit systems <a href="https://zulip.com/dist/apps/linux/zulip-desktop_latest.bin.tar.gz">here</a>
+          </section>
+        </section>
+
+        <section style="text-align: left; color: #000">
+          <h3>Mobile</h3>
+          <p>Get it on the <a href="http://itunes.com/apps/zulip">App Store</a> and on the <a href="https://play.google.com/store/apps/details?id=com.zulip.android">Google Play Store</a></p>
+          </section>
+        </section>
+      </article>
+    </div>
+
+    <!-- Footer -->
+    <footer>
+      v1.2.1<br/>
+      Licensed under <a href="#">License</a>
+      <ul>
+        <li><a href="#">Github</a></li>
+        <li><a href="#">Docs</a></li>
+        <li><a href="#">Contributors</a></li>
+      </ul>
+    </footer>
+  </body>
+</html>
diff --git a/contribute.html b/contribute.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Zulip - Server</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/media.css">
+  </head>
+  <body>
+    <!-- Navigation bar -->
+    <header>
+      <div class="container">
+        <div id="logo">
+          <a href="index.html"><img src="images/logos/zulip-icon-512x512.png" />zulip</a>
+        </div>
+        <nav>
+          <ul class="downloads">
+            <li><a href="server.html">Server</a></li>
+            <li><a href="clients.html">Clients</a></li>
+          </ul>
+          <ul>
+            <li><a href="features.html">Features</a></li>
+            <li><a href="help.html">Help</a></li>
+            <li><a href="contribute.html">Contribute</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <div class="band band-purple">
+      <div class="container">
+          <h2>Contribute to the open-source project</h2>
+      </div>
+    </div>
+
+    <br/>
+    <br/>
+    <br/>
+
+    <!-- Footer -->
+    <footer>
+      Licensed under <a href="#">License</a>
+      <ul>
+        <li><a href="#">Github</a></li>
+        <li><a href="#">Docs</a></li>
+        <li><a href="#">Contributors</a></li>
+      </ul>
+    </footer>
+  </body>
+</html>
diff --git a/css/main.css b/css/main.css
@@ -5,11 +5,11 @@
 body {
 	font-family: 'Humbug', sans-serif;
 	font-weight: 200;
-	font-size: 18px;
+	font-size: 17px;
 }
 
 a {
-	color: #888;
+	color: #666;
 	text-decoration: none;
 }
 
@@ -24,6 +24,7 @@ img {
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
 	margin: 10px 0;
+	font-weight: 300;
 }
 
 h1 {
@@ -35,31 +36,67 @@ h1 {
 }
 
 h2 {
-	font-size: 1.3em;
-	font-weight: 300;
+	font-size: 1.2em;
 }
 
 h3 {
-	font-size: 1.2em;
-	font-weight: 300;
+	font-size: 1.1em;
+	color: #333;
+	font-weight: 400;
+}
+
+h4 {
+	font-size: 1em;
+	font-weight: 400;
+	color: #559;
 }
 
 h6 {
 	font-size: 0.8em;
 	margin: 0;
 	padding: 0;
-	font-weight: 300;
 	color: #666;
 }
 
+/* Heading bands */
+.band {
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	padding: 2px 0;
+	margin-top: 10px;
+}
+
+.band-red {
+	background: #fcc;
+}
+
+.band-purple {
+	background: #ddf;
+}
+
+.band-green {
+	background: #cfc;
+}
+
+.band-yellow {
+	background: #ffc;
+}
+
+.band-blue {
+	background: #ddedf6;
+}
+
 /* Header */
 header {
 	text-align: center;
+	padding: 8px 0;
 }
 
 header nav ul {
 	display: block;
 	padding: 0;
+	margin: 0;
+	margin-top: 10px;
 }
 
 header nav li {
@@ -83,7 +120,6 @@ header nav .highlighted a:hover {
 #logo {
 	color: #333;
 	font-size: 2em;
-	height: 40px;
 }
 
 #logo img {
@@ -95,8 +131,9 @@ header nav .highlighted a:hover {
 /* Footer */
 footer {
 	text-align: center;
-	font-size: 1em;
+	font-size: 0.9em;
 	padding: 10px;
+	border-top: 1px solid #ccc;
 }
 
 footer ul {
@@ -112,12 +149,7 @@ footer li {
 
 .container {
 	width: 90%;
-	margin: 15px auto;
-}
-
-.feature .container {
-	width: 950px;
-	text-align: left;
+	margin: 0 auto;
 }
 
 #screenshot {
@@ -162,12 +194,15 @@ footer li {
 /* Features */
 .features {
 	text-align: center;
-	background-color: #ddedf6;
+	/* background-color: #ddedf6; */
+	background: #ddedf6;
 	padding: 0 0;
+	border-top: 1px solid #ccc;
 }
 
 .features h2 {
 	padding: 20px;
+	margin: 0;
 }
 
 .features section {
@@ -179,12 +214,14 @@ footer li {
 }
 
 .features section:nth-of-type(1) {
-	border: 0;
+	border-bottom: 0px solid #ccc;
+	border-top: 0;
 	padding-top: 0;
+	margin-top: 0;
 }
 
 .features section:nth-of-type(even) {
-	background-color: #eee;
+	background-color: #fff;
 }
 
 .feature-box {
@@ -218,13 +255,33 @@ footer li {
 
 article {
 	text-align: center;
+	padding: 10px 0;
+}
+
+.docs article a {
+	color: #944;
+	font-weight: 300;
+}
+
+.docs article a:hover {
+	color: #333;
+}
+
+.docs section {
+	text-align: left;
+	color: #000
 }
 
 .terminal {
 	font-family: monospace;
 	font-size: 0.8em;
 	width: 100%;
-	background-color: #555;
+	background-color: #444;
 	color: #fff;
 	padding: 20px;
-}
+	margin-bottom: 20px;
+}
+
+.docs nav {
+	display: none;
+}
diff --git a/css/media.css b/css/media.css
@@ -1,7 +1,9 @@
 /* Media queries */
 @media (min-width: 600px) {
 	header {
-		height: 50px;
+		display: block;
+		height: 56px;
+		padding: 8px 0;
 	}
 
 	header ul {
@@ -38,7 +40,7 @@
 	}
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1050px) {
 	.container {
 		width: 1000px;
 	}
@@ -85,7 +87,7 @@
 
 	.docs nav ul {
 		list-style-type: none;
-		padding: 0;
+		margin: 20px 0;
 		font-size: 1em;
 	}