Christian Müller
11 years ago
3 changed files with 331 additions and 1 deletions
@ -0,0 +1,54 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>NoteHub — Free Pastebin for One-Off Markdown Publishing</title> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"> |
||||||
|
<link href="https://fonts.googleapis.com/css?family=PT+Serif:700|Noticia+Text:700&subset=latin,cyrillic" |
||||||
|
rel="stylesheet" type="text/css" /> |
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" /> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="hero"> |
||||||
|
<h1>NoteHub</h1> |
||||||
|
<h2>Free and Hassle-free Pastebin for Markdown Pages.</h2> |
||||||
|
<br> |
||||||
|
<a class="landing-button" href="/new" style="color: white">New Page</a> |
||||||
|
</div> |
||||||
|
<div id="dashed-line"></div> |
||||||
|
<article class="helvetica bottom-space" style="font-size: 1em"> |
||||||
|
<h2>Features</h2> |
||||||
|
<ul> |
||||||
|
<li><strong>Themes</strong>: specify the color scheme in the URL: <a href="/2014/3/31/demo-note">default</a>, <a href="/2014/3/31/demo-note?theme=dark">dark</a>, |
||||||
|
<a href="/2014/3/31/demo-note?theme=solarized-light">solarized light</a>, <a href="/2014/3/31/demo-note?theme=solarized-dark">solarized dark</a>.</li> |
||||||
|
<li><strong>Fonts</strong>: specify a font (e.g., <a href="http://www.google.com/webfonts/">Google Web Fonts</a>) for headers |
||||||
|
and body text in the URL like <a href="/8m4l9">this</a> or <a href="/2014/3/31/demo-note?text-font=monospace&header-font=Courier&text-size=0.7&header-size=1.1">this</a>.</li> |
||||||
|
<li><strong>Short URLs</strong>: every page (including theme & font options) has its own short url.</li> |
||||||
|
<li><strong>Editing</strong>: if you set a password during publishing, you can edit your note any time later.</li> |
||||||
|
<li><strong>Statistics</strong>: page view counter, publishing and editing date.</li> |
||||||
|
<li><strong>Expiration</strong>: all notes with less than 30 views after the first 30 days will expire.</li> |
||||||
|
<li><strong>Export</strong>: the original markdown content can be displayed in plain text format.</li> |
||||||
|
<li><strong>API</strong>: Integrate the publishing functionality into your editor using the official <a href="/api">NoteHub API</a>.</li> |
||||||
|
</ul> |
||||||
|
<h2>Changelog</h2> |
||||||
|
<ul> |
||||||
|
<li><strong>2014-09</strong>: text size setting added (<a href="/2014/3/31/demo-note?text-font=monospace&header-font=Courier&text-size=0.7&header-size=1.1">example</a>)</li> |
||||||
|
<li><strong>2014-07</strong>: deprecated all API versions less than 1.4 & performance improvements.</li> |
||||||
|
<li><strong>2014-03</strong>: note expiration implemented.</li> |
||||||
|
<li><strong>2014-02</strong>: a simple JS-client for API testing <a href="/api-test.html">added</a>.</li> |
||||||
|
<li><strong>2014-01</strong>: <a href="/api">NoteHub API</a>, mobile friendly styling and more.</li> |
||||||
|
<li><strong>2013-03</strong>: new color themes.</li> |
||||||
|
<li><strong>2012-07</strong>: password protection for note editing added.</li> |
||||||
|
<li><strong>2012-06</strong>: NoteHub released as a result of an <a href="/2012/6/16/how-notehub-is-built">experiment</a>.</li> |
||||||
|
</ul> |
||||||
|
</article> |
||||||
|
<div id="footer"> |
||||||
|
<p> |
||||||
|
Source code on <a href="https://github.com/chmllr/NoteHub">GitHub</a> · Hosted on |
||||||
|
<a href="http://heroku.com">Heroku</a> · DB on <a href="http://redislabs.com">RedisLabs</a> · SSL by |
||||||
|
<a href="http://cloudflare.com">CloudFlare</a> |
||||||
|
<br> Created by <a href="https://github.com/chmllr">@chmllr</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,276 @@ |
|||||||
|
.ui-border { |
||||||
|
border-radius: 3px; |
||||||
|
border: 1px solid #333; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
border-bottom: 1px dotted; |
||||||
|
text-decoration: none; |
||||||
|
color: #097; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
color: #0a8; |
||||||
|
} |
||||||
|
|
||||||
|
a:visited { |
||||||
|
color: #054; |
||||||
|
} |
||||||
|
|
||||||
|
#draft { |
||||||
|
margin-bottom: 3em; |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.ui-elem { |
||||||
|
background: #fff; |
||||||
|
font-size: 1em; |
||||||
|
opacity: 0.8; |
||||||
|
padding: 0.3em; |
||||||
|
border-radius: 3px; |
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
border: 1px solid #333; |
||||||
|
} |
||||||
|
|
||||||
|
.landing-button, |
||||||
|
textarea, |
||||||
|
fieldset { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.landing-button { |
||||||
|
padding: 10px; |
||||||
|
border-radius: 10px; |
||||||
|
background: #0a2; |
||||||
|
font-size: 1.5em; |
||||||
|
text-decoration: none; |
||||||
|
box-shadow: 0 2px 5px #aaa; |
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
.landing-button:hover { |
||||||
|
background: #0b2; |
||||||
|
} |
||||||
|
|
||||||
|
.helvetica { |
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
#footer { |
||||||
|
text-align: center; |
||||||
|
padding-bottom: 1em; |
||||||
|
font-size: 0.8em; |
||||||
|
width: 100%; |
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 767px) { |
||||||
|
#footer { |
||||||
|
font-size: 0.4em; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#footer a { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
html, |
||||||
|
body { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
color: #333; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
#hero { |
||||||
|
text-align: center; |
||||||
|
padding-bottom: 5em; |
||||||
|
padding-top: 5em; |
||||||
|
} |
||||||
|
|
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
font-family: Noticia Text, 'Noticia Text', 'PT Serif', 'Georgia'; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 1.8em; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
font-size: 1.6em; |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 1.4em; |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 1.2em; |
||||||
|
} |
||||||
|
|
||||||
|
h5 { |
||||||
|
font-size: 1.1em; |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 1.0em; |
||||||
|
} |
||||||
|
|
||||||
|
#hero h1 { |
||||||
|
font-size: 2.5em; |
||||||
|
} |
||||||
|
|
||||||
|
#hero h2 { |
||||||
|
margin: 2em; |
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
article { |
||||||
|
-webkit-flex: 1; |
||||||
|
flex: 1; |
||||||
|
text-align: justify; |
||||||
|
margin-top: 5em; |
||||||
|
font-family: Georgia, 'Georgia'; |
||||||
|
margin-right: auto; |
||||||
|
margin-left: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) { |
||||||
|
article { |
||||||
|
width: 800px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 1023px) { |
||||||
|
article { |
||||||
|
width: 90%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.central-element { |
||||||
|
margin-right: auto; |
||||||
|
margin-left: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) { |
||||||
|
.central-element { |
||||||
|
width: 800px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 1023px) { |
||||||
|
.central-element { |
||||||
|
width: 90%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
article img { |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
article p { |
||||||
|
line-height: 140%; |
||||||
|
font-size: 1.2em; |
||||||
|
} |
||||||
|
|
||||||
|
article > h1:first-child { |
||||||
|
margin: 2em; |
||||||
|
font-size: 2.0em; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.centered { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.bottom-space { |
||||||
|
margin-bottom: 7em; |
||||||
|
} |
||||||
|
|
||||||
|
code, |
||||||
|
pre { |
||||||
|
font-size: 1.2em; |
||||||
|
background: #efefef; |
||||||
|
font-family: monospace; |
||||||
|
} |
||||||
|
|
||||||
|
pre { |
||||||
|
border: 1px dotted#888; |
||||||
|
padding: 0.5em; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
*:focus { |
||||||
|
outline: 0px none transparent; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) { |
||||||
|
textarea { |
||||||
|
width: 800px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
textarea { |
||||||
|
height: 500px; |
||||||
|
font-size: 1em; |
||||||
|
font-family: Courier; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.hidden { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
#dashed-line { |
||||||
|
margin-bottom: 3em; |
||||||
|
margin-top: 3em; |
||||||
|
border-bottom: 1px dashed#888; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
width: 100%; |
||||||
|
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
|
||||||
|
th { |
||||||
|
background-color: #efefef; |
||||||
|
line-height: 2.5em; |
||||||
|
padding: 0.3em; |
||||||
|
} |
||||||
|
|
||||||
|
td { |
||||||
|
line-height: 2.5em; |
||||||
|
padding: 0.3em; |
||||||
|
border-top: 1px dotted#888; |
||||||
|
} |
||||||
|
|
||||||
|
.middot { |
||||||
|
padding: 0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
display: -webkit-flex; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
-webkit-flex-direction: column; |
||||||
|
flex-direction: column; |
||||||
|
display: flex; |
||||||
|
min-height: 100vh; |
||||||
|
} |
||||||
Loading…
Reference in new issue