Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the index page to not contain npm only instructions, add screenshot, and update colors to match branding #137

Merged
merged 2 commits into from
Nov 3, 2018
Merged

Update the index page to not contain npm only instructions, add screenshot, and update colors to match branding #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f43605
Update the index page to not contain npm only instructions + add scre…
astorije Sep 18, 2018
7f5c59d
Update colors to match branding / default theme
astorije Sep 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 47 additions & 31 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -106,8 +103,8 @@ img {
padding: 0 20px;
}
#nav {
background: #455164;
color: #bcc4d3;
background: #415364;
color: #b7c5d1;
}
#nav ul.nav-links {
float: right;
Expand Down Expand Up @@ -155,7 +152,7 @@ img {
top: 0;
bottom: 0;
right: 20px;
background: #455164;
background: #415364;
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
Expand Down Expand Up @@ -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;
}

Expand All @@ -216,7 +213,7 @@ img {
}

#splash {
background: #455164;
background: #415364;
color: #fff;
text-align: center;
padding-bottom: 50px;
Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -303,7 +319,7 @@ img {
}
#menu a:hover,
#menu a.active {
color: #84ce88;
color: #50a656;
}
#menu a.active {
font-weight: bold;
Expand Down
28 changes: 9 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
30 changes: 0 additions & 30 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down