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