Merge pull request #137 from thelounge/astorije/index

Update the index page to not contain npm only instructions, add screenshot, and update colors to match branding
thelounge · Nov 3, 2018 · 0d47aed · 0d47aed
2 parents b04e359 + 7f5c59d
commit 0d47aed
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 80 deletions.
diff --git a/css/style.css b/css/style.css
@@ -44,19 +44,16 @@ abbr[title] {
 
 body {
 	background: #fff;
-	color: #455164;
+	color: #415364;
 	font: 15px Muli, sans-serif;
 	margin: 0;
 	margin-bottom: 100px;
 }
-a {
-	color: #84ce88;
-	font-weight: bold;
-}
+a,
 a:hover,
 a:focus {
-	color: #84ce88;
-	outline: 0;
+	font-weight: bold;
+	color: #50a656;
 }
 h2 {
 	font-size: 32px;
@@ -106,8 +103,8 @@ img {
 	padding: 0 20px;
 }
 #nav {
-	background: #455164;
-	color: #bcc4d3;
+	background: #415364;
+	color: #b7c5d1;
 }
 #nav ul.nav-links {
 	float: right;
@@ -155,7 +152,7 @@ img {
 	top: 0;
 	bottom: 0;
 	right: 20px;
-	background: #455164;
+	background: #415364;
 	opacity: 0;
 	visibility: hidden;
 	transition: opacity .2s, visibility .2s;
@@ -187,17 +184,17 @@ img {
 }
 
 #nav .search-input-group input::-moz-placeholder {
-	color: #bcc4d3;
+	color: #b7c5d1;
 	opacity: .5;
 }
 
 #nav .search-input-group input::-webkit-input-placeholder {
-	color: #bcc4d3;
+	color: #b7c5d1;
 	opacity: .5;
 }
 
 #nav .search-input-group input:-ms-input-placeholder {
-	color: #bcc4d3;
+	color: #b7c5d1;
 	opacity: .5;
 }
 
@@ -216,7 +213,7 @@ img {
 }
 
 #splash {
-	background: #455164;
+	background: #415364;
 	color: #fff;
 	text-align: center;
 	padding-bottom: 50px;
@@ -227,39 +224,53 @@ img {
 	margin: 0;
 }
 #splash h2 {
-	color: #bcc4d3;
+	color: #b7c5d1;
 	font-size: 18px;
 	margin: 0;
 }
 #splash p {
 	margin-top: 18px;
-	color: #bcc4d3;
+	color: #b7c5d1;
 }
 #splash .row {
 	padding: 20px 0;
 }
 #splash .hgroup {
 	margin: 60px 0;
 }
-#splash .card {
-	background: #84ce88;
+#splash a:not(.btn) {
+	color: #84ce88;
+}
+.btn {
+	border: 2px solid #84ce88;
 	border-radius: 3px;
+	color: #84ce88;
 	display: inline-block;
-	padding: 15px;
-	margin: 5px;
-	min-width: 45%;
-}
-#splash .card strong {
-	display: block;
-	font-size: 17px;
+	font-size: 12px;
+	font-weight: bold;
+	letter-spacing: 1px;
+	margin-bottom: 10px;
+	padding: 9px 17px;
+	text-transform: uppercase;
+	transition: background 0.2s, border-color 0.2s, color 0.2s;
+	word-spacing: 3px;
+	cursor: pointer; /* This is useful for `<button>` elements */
 }
-#splash #stable_version,
-#splash #prerelease_version {
-	opacity: .7;
+
+.btn:disabled,
+.btn:hover,
+.btn:focus {
+	background: #84ce88;
+	color: #fff;
+	opacity: 1;
+	text-decoration: none;
 }
-#splash #prerelease_card.hidden {
-	display: none;
+
+.btn:active {
+	box-shadow: none;
+	opacity: 0.8;
 }
+
 #features {
 	padding: 50px 0 80px;
 }
@@ -271,8 +282,13 @@ img {
 	font-weight: bold;
 }
 #features .feature {
+	text-align: center;
 	padding-bottom: 20px;
 }
+#features .screenshot {
+	box-shadow: 0 0 25px rgba(65, 83, 100, 0.5);
+	border-radius: 5px;
+}
 #main h1,
 #main h2,
 #main h3 {
@@ -303,7 +319,7 @@ img {
 }
 #menu a:hover,
 #menu a.active {
-	color: #84ce88;
+	color: #50a656;
 }
 #menu a.active {
 	font-weight: bold;

diff --git a/index.html b/index.html
@@ -11,34 +11,24 @@ <h1>The self-hosted web IRC client</h1>
 					<h2>Always connected.</h2>
 				</div>
 
-				<p>Install <a href="https://www.npmjs.org/package/thelounge">The Lounge from npm</a>:</p>
-
-				<div class="card">
-					<strong>yarn global add thelounge</strong>
-					<small id="stable_version">&nbsp;</small>
-				</div>
-
-				<div id="prerelease_card" class="card hidden">
-					<strong>yarn global add thelounge@next</strong>
-					<small id="prerelease_version"></small>
-				</div>
-
 				<p>
-					Or, <a href="https://demo.thelounge.chat/" target="_blank">try the demo</a>.
+					<a class="btn" href="/docs">Get started</a>
+					<br>
+					Or <a href="https://demo.thelounge.chat/">try the demo</a>.
 				</p>
-
 			</div>
 		</div>
 	</div>
 </div>
 
 <div id="features">
 	<div class="container">
-		<div class="row">
-			<div class="col-sm-12">
-				<h2>Why you should use it</h2>
-			</div>
-		</div>
+		<p>
+			<a href="https://user-images.githubusercontent.com/613331/44947980-3b2f2f00-ae1e-11e8-9bd9-9e1aff5cd7e1.png">
+				<img class="screenshot" src="https://user-images.githubusercontent.com/613331/44947980-3b2f2f00-ae1e-11e8-9bd9-9e1aff5cd7e1.png">
+			</a>
+		</p>
+
 		<div class="row">
 			<div class="col-sm-4 feature">
 				<h3>Modern features</h3>

diff --git a/js/main.js b/js/main.js
@@ -1,33 +1,3 @@
-// Retrieval of latest version number(s) (from GitHub releases) to display
-// it/them on the homepage. If there are no current pre-releases, only display
-// latest stable version.
-(function() {
-	const stableVersion = $("#stable_version");
-
-	if (stableVersion.length) {
-		$.getJSON("https://api.github.com/repos/thelounge/lounge/releases", function(json) {
-			var latest = json[0];
-			var stable;
-			var prerelease;
-
-			if (latest.prerelease) {
-				prerelease = latest;
-				stable = json.find(function (release) { return !release.prerelease; });
-			} else {
-				stable = latest;
-			}
-
-			// `.substr(1)` strips `v` in `vX.Y.Z`
-			stableVersion.text("version " + stable.tag_name.substr(1) + (prerelease ? " (stable)" : ""));
-
-			if (prerelease) {
-				$("#prerelease_version").text("version " + prerelease.tag_name.substr(1) + " (pre-release)");
-				$("#prerelease_card").removeClass("hidden");
-			}
-		});
-	}
-}());
-
 // Real-time client-side search using https://github.com/olivernn/lunr.js
 // Open search field with the search icon, close it with "Escape" / the close
 // icon, cycle through results with "Up" and "Down" and visit selected result