diff --git a/lib/response.js b/lib/response.js
index 5c5798c86..acd3c719f 100644
--- a/lib/response.js
+++ b/lib/response.js
@@ -93,7 +93,8 @@ function showIndex(req, res, next) {
github: config.github,
gitlab: config.gitlab,
dropbox: config.dropbox,
- google: config.google
+ google: config.google,
+ signin: req.isAuthenticated()
});
res.write(content);
res.end();
diff --git a/public/css/cover.css b/public/css/cover.css
index 40e6ed53c..bde3ec7cd 100644
--- a/public/css/cover.css
+++ b/public/css/cover.css
@@ -53,6 +53,8 @@ body {
vertical-align: middle;
}
.cover-container {
+ width: 100%;
+ padding-top: 80px;
margin-right: auto;
margin-left: auto;
}
@@ -65,6 +67,13 @@ body {
* Header
*/
+.masthead {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
@@ -135,8 +144,10 @@ body {
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
- position: relative;
+ position: absolute;
top: 0;
+ left: 0;
+ width: 100% !important;
}
.mastfoot {
position: fixed;
@@ -279,8 +290,11 @@ input {
color: #d43f3a;
}
.ui-or {
- margin-top: 5px;
- margin-bottom: 5px;
+ margin: 5px;
+}
+.ui-use-tags {
+ min-width: 172px;
+ max-width: 344px;
}
.modal-title {
@@ -306,4 +320,20 @@ input {
background: white;
cursor: inherit;
display: block;
+}
+
+.social-foot {
+ line-height: 30px;
+}
+.social-foot > *, .social-foot > * > * {
+ vertical-align: middle !important;
+}
+
+@media (max-width: 768px) {
+ span.ui-or {
+ display: block;
+ }
+ .ui-use-tags {
+ max-width: 100%;
+ }
}
\ No newline at end of file
diff --git a/public/js/cover.js b/public/js/cover.js
index 6f46ab88b..c97bd256d 100644
--- a/public/js/cover.js
+++ b/public/js/cover.js
@@ -40,8 +40,8 @@ function pageInit() {
parseServerToHistory(historyList, parseHistoryCallback);
},
function () {
- $('.ui-signin').slideDown();
- $('.ui-or').slideDown();
+ $('.ui-signin').show();
+ $('.ui-or').show();
$('.ui-welcome').hide();
$('.ui-avatar').prop('src', '').hide();
$('.ui-name').html('');
@@ -57,18 +57,17 @@ $(".masthead-nav li").click(function () {
});
$(".ui-home").click(function () {
- $(".section").hide();
- $("#home").fadeIn();
+ if (!$("#home").is(':visible')) {
+ $(".section:visible").hide();
+ $("#home").fadeIn();
+ }
});
$(".ui-history").click(function () {
- $(".section").hide();
- $("#history").fadeIn();
-});
-
-$(".ui-releasenotes").click(function () {
- $(".section").hide();
- $("#releasenotes").fadeIn();
+ if (!$("#history").is(':visible')) {
+ $(".section:visible").hide();
+ $("#history").fadeIn();
+ }
});
function checkHistoryList() {
@@ -292,7 +291,7 @@ $(".ui-logout").click(function () {
var filtertags = [];
$(".ui-use-tags").select2({
- placeholder: 'Use tags...',
+ placeholder: 'Select tags...',
multiple: true,
data: function () {
return {
diff --git a/public/views/index.ejs b/public/views/index.ejs
index eb3b121e0..daf123b17 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -8,7 +8,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
- <meta name="description" content="Realtime collaborative markdown notes on all platforms.">
+ <meta name="description" content="Best way to write and share your knowledge in markdown.">
<meta name="keywords" content="Collaborative, Markdown, Notes">
<title>HackMD - Collaborative markdown notes</title>
<link rel="icon" type="image/png" href="<%- url %>/favicon.png">
@@ -41,56 +41,78 @@
<h3 class="masthead-brand"></h3>
<nav>
<ul class="nav masthead-nav">
- <li class="ui-home active"><a href="#">Home</a>
+ <li class="ui-home<% if(!signin) { %> active<% } %>"><a href="#">Intro</a>
</li>
- <li class="ui-history"><a href="#">History</a>
+ <li class="ui-history<% if(signin) { %> active<% } %>"><a href="#">History</a>
</li>
</ul>
</nav>
</div>
</div>
- <div id="home" class="section">
+ <div id="home" class="section"<% if(signin) { %> style="display:none;"<% } %>>
<div class="inner cover">
<h1 class="cover-heading"><i class="fa fa-file-text"></i> HackMD</h1>
<p class="lead">
- Realtime collaborative markdown notes on all platforms.
+ Best way to write and share your knowledge in markdown.
</p>
<% if(facebook || twitter || github || gitlab || dropbox || google) { %>
- <a type="button" class="btn btn-lg btn-success ui-signin" data-toggle="modal" data-target=".signin-modal" style="display:none;">Sign In</a>
- <div class="ui-or" style="display:none;">Or</div>
+ <span class="ui-signin">
+ <br>
+ <a type="button" class="btn btn-lg btn-success ui-signin" data-toggle="modal" data-target=".signin-modal" style="width: 170px;">Sign In</a>
+ </span>
+ <span class="ui-or">or</span>
<% }%>
- <p class="lead">
- <a href="<%- url %>/new" class="btn btn-lg btn-default">New note</a>
- </p>
- <h5>Share directly with URL <i class="fa fa-link"></i></h5>
- <a class="btn btn-primary" href="<%- url %>/features">More features <i class="fa fa-chevron-right"></i></a>
+ <span class="ui-signin">
+ <a href="<%- url %>/new" class="btn btn-lg btn-default" style="width: 170px;">New guest note</a>
+ <br>
+ <br>
+ </span>
+ <div class="lead row" style="width: 90%; margin: 0 auto;">
+ <div class="col-md-4 inner">
+ <a href="<%- url %>/features#share-note">
+ <i class="fa fa-bolt fa-3x"></i>
+ <h4>Collaborate with URL</h4>
+ </a>
+ </div>
+ <div class="col-md-4 inner">
+ <a href="<%- url %>/features#mathjax">
+ <i class="fa fa-bar-chart fa-3x"></i>
+ <h4>Support charts and MathJax</h4>
+ </a>
+ </div>
+ <div class="col-md-4 inner">
+ <a href="<%- url %>/features#slide-mode">
+ <i class="fa fa-tv fa-3x"></i>
+ <h4>Support slide mode</h4>
+ </a>
+ </div>
+ </div>
</div>
- <br>
</div>
- <div id="history" class="section" style="display:none;">
+ <div id="history" class="section"<% if(!signin) { %> style="display:none;"<% } %>>
<% if(facebook || twitter || github || gitlab || dropbox || google) { %>
<div class="ui-signin">
- <h4>
- <a type="button" class="btn btn-success" data-toggle="modal" data-target=".signin-modal">Sign In</a> to get own history!
- </h4>
- <p>Below are history from browser</p>
+ <p>Below is the history from browser</p>
</div>
<div class="ui-signout" style="display:none;">
<img class="ui-avatar">
<h4 class="ui-welcome">Welcome! <span class="ui-name"></span></h4>
- <a href="<%- url %>/new" class="btn btn-default">New note</a> Or
+ <a href="<%- url %>/new" class="btn btn-md btn-default">New note</a> or
<a href="#" class="btn btn-danger ui-logout">Sign Out</a>
</div>
<% }%>
+ <h4>
+ <a type="button" href="<%- url %>/features" class="btn btn-primary">Explore all features</a>
+ </h4>
<hr>
<form class="form-inline">
<div class="form-group" style="vertical-align: bottom;">
- <input class="form-control ui-use-tags" style="min-width:172px;max-width:344px;" />
+ <input class="form-control ui-use-tags" />
</div>
<div class="form-group">
- <input class="search form-control" placeholder="Search anything..." />
+ <input class="search form-control" placeholder="Search keyword..." />
</div>
<a href="#" class="sort btn btn-default" data-sort="text" title="Sort by title">
Title
@@ -117,8 +139,8 @@
<div class="mastfoot">
<div class="inner">
- <h6>
- <iframe src="//ghbtns.com/github-btn.html?user=hackmdio&repo=hackmd&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px" style="vertical-align:middle;"></iframe>
+ <h6 class="social-foot">
+ <iframe src="//ghbtns.com/github-btn.html?user=hackmdio&repo=hackmd&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
</h6>
<p>
© 2016 <a href="https://www.facebook.com/TakeHackMD" target="_blank"><i class="fa fa-facebook-square"></i> HackMD</a> | <a href="<%- url %>/s/release-notes" target="_blank">Releases</a>