Skip to content

Instantly share code, notes, and snippets.

@sjmog

sjmog/gist:4677490

Created January 30, 2013 21:53
Show Gist options
  • Save sjmog/4677490 to your computer and use it in GitHub Desktop.
Save sjmog/4677490 to your computer and use it in GitHub Desktop.
Download ZIP
A nice little notepad app. Waiting for someone to use HTML5 data storage! Designed so entire code can be posted in to URL bar with 'data:text/html, ' in front. No need to host!
Raw
gistfile1.html
<html>
<head>
<style type="text/css">
html { height: 100%; width:100%; background: #FAFAF0;}
.bodydiv {
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
margin: 0 auto;
padding: 0;
height: 1000%;
max-width:800px !important;
/* gradients - second red border, first red border, top white space, blue lines */
background-image: -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #DDD3C7 19px, white 20px);
background-image: -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #DDD3C7 19px, white 20px);
background-image: -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #DDD3C7 19px, white 20px);
background-image: -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #DDD3C7 19px, white 20px);
background-image: linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #DDD3C7 19px, white 20px);
background-size: 1px, 1px, auto, auto 20px;
background-repeat: repeat-y, repeat-y, no-repeat, repeat;
background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}
[draggable=true] {
-khtml-user-drag: element;
}
.paper {
margin: 0;
display: block;
font: 10pt "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
line-height: 20px;
padding-top: 50px;
padding-left: 10.5%;
padding-right: 10.5%;
text-align: justify;
}
.paper:first-line {
font: 20pt "Helvetica Neue" Helvetica, sans-serif;
line-height: 33px;
vertical-align: baseline;
}
.paper:focus {
outline: none;
}
</style>
</head>
<body style="width:100%;height:100%;margin:0 auto;">
<div class="bodydiv">
<p class="paper" contenteditable="true" spellcheck="true" dropzone="link"></p>​
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment