Skip to content

Instantly share code, notes, and snippets.

@chriscoyier

chriscoyier/dabblet.css

Forked from telic/dabblet.css
Created February 24, 2012 03:56
Show Gist options
  • Save chriscoyier/1897249 to your computer and use it in GitHub Desktop.
Save chriscoyier/1897249 to your computer and use it in GitHub Desktop.
Download ZIP
Lined Paper
Raw
dabblet.css
/**
* Lined Paper
*/
html {
background-color:white;
padding:10px;
font-family:sans-serif; font-size:15px;
}
body {
background-color:#f6f6f6;
box-shadow:0 2px 8px rgba(0,0,0,.5);
display:table; padding:0; margin:0;
position:relative; z-index:0;
}
address {
position:absolute; top:15px; right:20px;
text-align:right;
font-size:smaller;
font-style:normal;
}
h1 {
position:absolute;
left:120px; top:40px;
font-size:larger; font-weight:normal;
text-decoration:underline;
}
ol {
list-style-type:none;
border-left:2px solid rgba(255,0,30,.25);
border-right:2px solid rgba(255,0,30,.05);
padding:0; margin:0;
margin-left:100px; margin-right:80px;
position:relative; z-index:0;
float:left;
width:500px;
}
ol li {
padding:0;
margin-left:-104px; margin-right:-81px;
padding-left:110px; padding-right:85px;
border-bottom:2px solid rgba(0,160,255,.1);
line-height:30px; height:30px;
}
ol li:first-child {
border-top:2px solid rgba(0,160,255,.1);
margin-top:120px;
}
ol li:last-child {
margin-bottom:50px;
}
ol::after {
content:"Kilroy";
position:absolute;
bottom:50px; right:-65px;
color:rgba(0,160,255,.16);
line-height:30px;
font-weight:400;
font-family:'Mrs Sheppards', cursive;
letter-spacing:2px;
}
ol::before {
content:"";
background-color:white; box-shadow:0 2px 4px rgba(0,0,0,.5) inset;
height:25px; width:25px; border-radius:25px;
position:absolute; top:105px; left:-75px;
}
body::before {
content:"";
background-color:white; box-shadow:0 2px 4px rgba(0,0,0,.5) inset;
height:25px; width:25px; border-radius:25px;
position:absolute; top:50%; left:27px;
}
body::after {
content:"";
background-color:white; box-shadow:0 2px 4px rgba(0,0,0,.5) inset;
height:25px; width:25px; border-radius:25px;
position:absolute; bottom:105px; left:27px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<address>
Maxwell Terpstra (#5231)<br>
English 11, Period 2B<br>
February 23, 2012
</address>
<h1>Notes</h1>
<ol>
<li>Eat Breakfeast</li>
<li>Feed Pugsly, the cow.</li>
<li>
<li>Sit Down</li>
<li>Eat lunch</li>
<li>Call mom</li>
<li>Tweet about feeding my cow, pugsly</li>
<li>Join a hangout in google+</li>
<li>Prepare Dinner</li>
<li>Eat Dinner</li>
<li>Get ready for bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
<li>Go to bed</li>
</ol>
<link href='http://fonts.googleapis.com/css?family=Mrs+Sheppards' rel='stylesheet' type='text/css'>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment