Landing page (part 3)
This commit is contained in:
benweet
parent
44a3a35148
commit
4129d7b2d4
@ -19,7 +19,7 @@
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.navbar-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@ -81,15 +81,6 @@
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.logo i::before {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all ease-in-out 1.5s;
|
||||
transition: all ease-out 1.5s;
|
||||
@ -114,14 +105,23 @@
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
img.modal-content {
|
||||
margin: 70px auto;
|
||||
.img {
|
||||
margin: 20px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.social {
|
||||
font-size: 26px;
|
||||
margin-right: 20px;
|
||||
margin: 0 16px 5px;
|
||||
}
|
||||
|
||||
.social i::before {
|
||||
margin-right: 10px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.social a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -145,6 +145,10 @@
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -160,7 +164,7 @@
|
||||
$('.logo').removeClass('transparent scale');
|
||||
}, 500);
|
||||
setTimeout(function() {
|
||||
$('.logo .transparent, .navbar-inner .transparent, .footer .transparent').removeClass('transparent scale');
|
||||
$('.logo .transparent, .footer .transparent').removeClass('transparent scale');
|
||||
}, 1500);
|
||||
})
|
||||
</script>
|
||||
@ -169,14 +173,14 @@
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="slide modal-body" id="slide1">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="navbar navbar-default navbar-fixed">
|
||||
<div class="navbar-inner">
|
||||
<div class="nav transition transparent">
|
||||
<div class="nav">
|
||||
<a class="btn btn-success" href="editor" title="Editor"><i class="icon-pencil"></i> Start writing
|
||||
now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="centered logo transition transparent scale">
|
||||
<img src="res/img/logo.svg"/>
|
||||
|
||||
@ -184,9 +188,9 @@
|
||||
In-browser markdown editor<br>
|
||||
|
||||
<div class="social">
|
||||
<a href=""><i class="icon-twitter"></i></a>
|
||||
<a href=""><i class="icon-github-circled"></i></a>
|
||||
<a href=""><img height="25" src="https://cdn.monetizejs.com/resources/button.svg"></a>
|
||||
<a href="https://twitter.com/stackedit" target="_blank"><i class="icon-twitter"></i></a>
|
||||
<a href="https://github.com/benweet/stackedit" target="_blank"><i class="icon-github-circled"></i></a>
|
||||
<a href="https://monetizejs.com/authorize?client_id=ESTHdCYOi18iLhhO&summary=true" target="_blank"><img height="25" src="https://cdn.monetizejs.com/resources/button.svg"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,12 +214,15 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<img class="modal-content" width="600" src="res/img/syntax-highlighting.gif">
|
||||
<br>
|
||||
<br>
|
||||
<img class="img modal-content" width="600" src="res/img/syntax-highlighting.gif">
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-1">
|
||||
<h2 id="rich-markdown-editor">Rich editor</h2>
|
||||
<h2 id="rich-markdown-editor">Rich markdown editor</h2>
|
||||
|
||||
<p>StackEdit’s markdown syntax highlighting is unique. The refined text formatting of the editor helps you
|
||||
<p>StackEdit’s markdown syntax highlighting is unique. The refined text formatting of the editor
|
||||
helps you
|
||||
visualize the final rendering of your documents.</p>
|
||||
<br>
|
||||
|
||||
@ -227,6 +234,8 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<br>
|
||||
<br>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
@ -235,11 +244,15 @@
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<h2 id="live-preview-with-scroll-sync" class="text-center">Live preview with Scroll Sync</h2>
|
||||
|
||||
<p>StackEdit’s Scroll Sync extension binds accurately the scrollbars of the preview panel and the
|
||||
editor panel to ensure that you always keep an eye on the output while writing.</p>
|
||||
<p>StackEdit’s Scroll Sync extension binds accurately the scrollbars of the editor panel and the
|
||||
preview panel to ensure that you always keep an eye on the output while writing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="modal-content" width="600" src="res/img/live-preview.png">
|
||||
<br>
|
||||
<br>
|
||||
<img class="img modal-content" width="600" src="res/img/live-preview.png">
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-1">
|
||||
@ -252,20 +265,18 @@
|
||||
<h2 id="fully-customizable">Fully customizable</h2>
|
||||
|
||||
<p>StackEdit has an infinite combinations of settings. Theme, layout, shortcuts can be
|
||||
personalized. For the rest, StackEdit lets you create your own extension…</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<hr>
|
||||
personalized. For the rest, StackEdit gives you the freedom to make your own extension…</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="dark inset-shadow menu-img">
|
||||
</div>
|
||||
<div id="slide4" class="modal-footer modal-header">
|
||||
<div id="slide3" class="modal-footer modal-header">
|
||||
<div class="container">
|
||||
|
||||
|
||||
@ -276,28 +287,88 @@
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<h2 id="simultaneous-collaboration">Simultaneous collaboration</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<img class="img modal-content" width="600" src="res/img/publish.png">
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-1">
|
||||
<br>
|
||||
|
||||
<p>Documents in StackEdit can be synchronized and shared through Google Drive and Dropbox. When two
|
||||
collaborators are working on the same document at the same time, StackEdit takes care of merging the
|
||||
modifications.</p>
|
||||
<h2 id="publish-straight-to-your-blog">Straight to your blog</h2>
|
||||
|
||||
<h2 id="review-comments">Review comments</h2>
|
||||
|
||||
<p>StackEdit allows you to insert inline comments and embed collaborator discussions in your documents, much
|
||||
like Microsoft Word or Google Docs.</p>
|
||||
|
||||
<h2 id="publish-straight-to-your-blog">Publish straight to your blog</h2>
|
||||
|
||||
<p>StackEdit can upload your documents directly to Blogger, GitHub, Tumblr, WordPress… You can choose
|
||||
<p>StackEdit can upload your documents directly to Blogger, GitHub, Tumblr, WordPress… You can
|
||||
choose
|
||||
whether to upload in markdown format, HTML, or to format the output using Underscore template
|
||||
engine.</p>
|
||||
|
||||
<h2 id="write-offline">Write offline</h2>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<p>Even when you travel, StackEdit is still accessible and lets you write in offline just like any
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2 id="simultaneous-collaboration">Simultaneous collaboration</h2>
|
||||
|
||||
<p>Documents in StackEdit can be synchronized and shared through Google Drive and Dropbox. When two
|
||||
collaborators are working on the same document at the same time, StackEdit takes care of merging
|
||||
the
|
||||
modifications.</p>
|
||||
</div>
|
||||
<div class="col-md-7 col-md-offset-1">
|
||||
<img class="img" width="600" src="res/img/comments.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-7">
|
||||
<img class="img" width="600" src="res/img/conflict.png">
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-1">
|
||||
<br>
|
||||
|
||||
<h2 id="review-comments">Review comments</h2>
|
||||
|
||||
<p>StackEdit allows you to insert inline comments and embed collaborator discussions in your
|
||||
documents, much
|
||||
like Microsoft Word or Google Docs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<h2 id="write-offline" class="text-center">Write offline!</h2>
|
||||
|
||||
<p>Even when you travel, StackEdit is still accessible and lets you write offline just like any
|
||||
desktop application. Now you have no excuse!</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -308,28 +379,89 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slide5" class="modal-footer modal-header">
|
||||
<div id="slide4" class="modal-footer modal-header">
|
||||
<div class="container">
|
||||
<h1 id="extended-markdown-support">Extended markdown support</h1>
|
||||
<h1 id="extended-markdown-support">Extended markdown support.</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<h2 id="github-flavored-markdown">GitHub Flavored Markdown</h2>
|
||||
|
||||
<p>StackEdit supports different markdown flavors such as Markdown Extra and GitHub flavored Markdown. Each
|
||||
<p>StackEdit supports different markdown flavors such as Markdown Extra and GitHub flavored
|
||||
Markdown. Each
|
||||
markdown feature can be enabled or disabled at your convenience.</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<img class="img" width="410" src="res/img/code-block.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<h2 id="latex-mathematical-expressions">LaTeX mathematical expressions</h2>
|
||||
|
||||
<p>StackEdit integrates MathJax to render mathematics from LaTeX expressions inside your markdown document,
|
||||
<p>StackEdit integrates MathJax to render mathematics from LaTeX expressions inside your markdown
|
||||
document,
|
||||
as you would do on Stack Exchange.</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<img class="img" width="210" src="res/img/math.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<h2 id="uml-diagrams">UML diagrams</h2>
|
||||
|
||||
<p>StackEdit enables you to write sequence diagrams and flow charts using a simple text syntax.</p>
|
||||
<p>StackEdit enables you to write sequence diagrams and flow charts using a simple syntax.</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6 col-md-offset-1">
|
||||
<br>
|
||||
<img class="img" width="250" src="res/img/diagram.png">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="social">
|
||||
<a href="https://twitter.com/stackedit" target="_blank"><i class="icon-twitter"></i></a>
|
||||
<a href="https://github.com/benweet/stackedit" target="_blank"><i class="icon-github-circled"></i></a>
|
||||
<a href="https://monetizejs.com/authorize?client_id=ESTHdCYOi18iLhhO&summary=true" target="_blank"><img height="25" src="https://cdn.monetizejs.com/resources/button.svg"></a>
|
||||
</div>
|
||||
Copyright 2013-2014 <a href="https://twitter.com/benweet" target="_blank">Benoit Schweblin</a><br>
|
||||
Licensed under an <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License</a><br>
|
||||
<a href="privacy_policy.html" target="_blank">Privacy Policy</a><br>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -261,7 +261,7 @@ define([
|
||||
if(discussion.type == 'conflict') {
|
||||
result.unshift(_.template(commentTmpl, {
|
||||
author: 'StackEdit',
|
||||
content: 'Multiple users have made conflicting modifications.',
|
||||
content: 'Conflicting changes have been detected.',
|
||||
reply: true
|
||||
}));
|
||||
}
|
||||
|
||||
BIN
public/res/img/code-block.png
Normal file
BIN
public/res/img/code-block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
public/res/img/comments.png
Normal file
BIN
public/res/img/comments.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
public/res/img/conflict.png
Normal file
BIN
public/res/img/conflict.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/res/img/diagram.png
Normal file
BIN
public/res/img/diagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
public/res/img/math.png
Normal file
BIN
public/res/img/math.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
public/res/img/publish.png
Normal file
BIN
public/res/img/publish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@ -1138,7 +1138,7 @@ a {
|
||||
&.replied {
|
||||
color: fade(@label-danger-bg, 70%);
|
||||
&:hover, &.active, &.active:hover {
|
||||
color: fade(@label-danger-bg, 100%) !important;
|
||||
color: fade(@label-danger-bg, 80%) !important;
|
||||
}
|
||||
}
|
||||
&.icon-split {
|
||||
@ -1162,7 +1162,7 @@ a {
|
||||
}
|
||||
|
||||
.comment-highlight, .find-replace-highlight {
|
||||
background-color: fade(@logo-yellow, 60%);
|
||||
background-color: fade(@logo-yellow, 50%);
|
||||
}
|
||||
|
||||
.find-replace-select {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user