445 lines
12 KiB
HTML
445 lines
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<title>Dumble : auto tumble your delicious links</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta name="description" content="Dumble is an experiment in creating a tumblelog from a user's delicious links."/>
|
|
|
|
<!--<link rel="shortcut icon" href="{Favicon}">
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" id="rss-feed-head" href=""/>
|
|
-->
|
|
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
|
|
<script type="text/javascript" src="jquery.cookie.js"></script>
|
|
<script type="text/javascript" src="dumble.js"></script>
|
|
|
|
<style type="text/css" media="screen">
|
|
/* CSS Reset by Eric Meyer
|
|
* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
|
|
*/
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-size: 100%;
|
|
font-family: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
/* remember to define focus styles! */
|
|
:focus {
|
|
outline: 0;
|
|
}
|
|
body {
|
|
line-height: 1;
|
|
color: black;
|
|
background: white;
|
|
}
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
/* tables still need 'cellspacing="0"' in the markup */
|
|
table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
caption, th, td {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
}
|
|
blockquote:before, blockquote:after,
|
|
q:before, q:after {
|
|
content: "";
|
|
}
|
|
blockquote, q {
|
|
quotes: "" "";
|
|
}
|
|
|
|
body {
|
|
background:#262523;
|
|
color: #ddc;
|
|
font: normal 14px "Trebuchet MS", Helvetica, Arial, sans-serif;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
abbr,acronym {
|
|
border-bottom:1px dotted #CC9933;
|
|
cursor:help;
|
|
}
|
|
|
|
em, i {
|
|
font-style: italic;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
line-height: 1em;
|
|
}
|
|
|
|
h2 {
|
|
color: #ccb;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
padding-left: 3em;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1.5em;
|
|
}
|
|
|
|
a, a:visited, a:active {
|
|
color: #94a970;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:hover {
|
|
color: #262523;
|
|
text-decoration: none;
|
|
}
|
|
|
|
abbr {
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: dotted;
|
|
}
|
|
|
|
blockquote {
|
|
background-color: #4f534f;
|
|
border: 1px solid #333;
|
|
font-style: italic;
|
|
margin: 1em 2em 1.5em 1em;
|
|
padding: .25em 1em;
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 1.5em 3em;
|
|
}
|
|
|
|
ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
input {
|
|
color: #ddc;
|
|
background-color: #363b39;
|
|
font-size: 0.9em;
|
|
padding: 0.3em;
|
|
border: 1px solid #ddc;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
button {
|
|
color: #ddc;
|
|
background-color: #334B42;
|
|
font-size: 0.9em;
|
|
padding: 0.3em;
|
|
border: 1px solid #ddc;
|
|
}
|
|
|
|
/* Header */
|
|
#header {
|
|
margin: 1em auto;
|
|
width: 40em;
|
|
}
|
|
|
|
#header a, #header a:visited, #header a:active {
|
|
color: #eef;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#header a:hover {
|
|
color: #ccb;
|
|
}
|
|
|
|
#friends {
|
|
border-top: 1px solid #555;
|
|
}
|
|
|
|
.wordlist {
|
|
margin: 1em;
|
|
padding: 1em 0em 0em 0em;
|
|
}
|
|
.wordlist br {clear: both}
|
|
.wordlist ul { list-style: none;}
|
|
.wordlist li {
|
|
margin-bottom: 0.5em; padding: 0; display: block; float: left; width: 25%;
|
|
}
|
|
|
|
/* Posts */
|
|
#posts {
|
|
margin: 0 auto;
|
|
width: 42em;
|
|
}
|
|
|
|
/* Individual Post */
|
|
.post {
|
|
background-color: #363b39;
|
|
border: 1px solid #494949;
|
|
margin: 1.5em 0;
|
|
padding: 1em;
|
|
}
|
|
|
|
.post .date {
|
|
display: block;
|
|
font-size: 1.5em;
|
|
font-weight: normal;
|
|
margin-bottom: .5em;
|
|
text-align: right;
|
|
}
|
|
|
|
.post .date a, .post .date a:visited, .post .date a:active {
|
|
color: #94a970;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.post .date a:hover {
|
|
color: #262523;
|
|
}
|
|
|
|
.post .date a .diff {
|
|
font-size: 1.6em;
|
|
line-height: 0;
|
|
}
|
|
|
|
|
|
/* Titles */
|
|
.regular h3, .conversation h3, .link h3 {
|
|
color: #94a970;
|
|
font-size: 1.5em;
|
|
line-height: 1em;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
|
|
/* Quote Posts */
|
|
.quote {
|
|
font-size: 1.5em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.quote .source {
|
|
font-size: smaller; font-style: italic;
|
|
}
|
|
|
|
.quote .source a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Link Posts */
|
|
.link h3 a, .link h3 a:visited, .link h3 a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link h3 a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Photo/Video/Audio */
|
|
.photo, .video, .audio {
|
|
text-align: center;
|
|
overflow: auto;
|
|
}
|
|
|
|
.photo img {
|
|
background-color: #404040;
|
|
border: 1px solid #333;
|
|
margin: 1em 0 .5em;
|
|
padding: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.photo .stars {
|
|
background-color: transparent;
|
|
border: 0pt none;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.photo .caption, .video .caption, .audio .caption {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
font-weight: normal;
|
|
margin-top: .5em;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
/* Conversations */
|
|
.conversation ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.conversation ul li {
|
|
border-bottom: 1px solid #565b59;
|
|
padding: .25em 0;
|
|
}
|
|
|
|
.conversation ul li .person {
|
|
color: #565b59;
|
|
display: block;
|
|
float: left;
|
|
width: 9em;
|
|
}
|
|
|
|
.conversation ul li .line {
|
|
display: block;
|
|
margin-left: 10em;
|
|
}
|
|
|
|
/* Previous and Next Links */
|
|
#previous-next {
|
|
font-size: 1.25em;
|
|
margin: 3em 0 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
#previous-next .pagecount {
|
|
margin: 0 1.5em;
|
|
}
|
|
|
|
#previous-next a, #previous-next a:visited, #previous-next a:active {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#previous-next a:hover {
|
|
color: #ddc;
|
|
}
|
|
|
|
/* Footer */
|
|
#footer {
|
|
border-top: 1px solid #555;
|
|
color: #555;
|
|
margin: 0 auto;
|
|
width: 40em;
|
|
}
|
|
|
|
#footer ul {
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
#footer ul li {
|
|
display: inline;
|
|
margin: 0 1em;
|
|
}
|
|
|
|
#footer ul li a, #footer ul li a:visited, #footer ul li a:active {
|
|
color: #94a970;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#footer ul li a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#history {
|
|
text-align: left;
|
|
position: absolute;
|
|
width: 15em;
|
|
background-color: #363b39;
|
|
border: 1px solid #494949;
|
|
margin-left: 44em;
|
|
padding: 0em;
|
|
}
|
|
|
|
#history h2 {text-align: center; padding: 0.2em; border-bottom: 1px solid #494949;
|
|
font-size: 1.2em;}
|
|
#history ul {list-style: none; margin: 1em 1em 0.5em 1em;}
|
|
#history-clear a, #history-clear a:visited,
|
|
#history-clear a:active, #history-clear a:hover {text-decoration: none; color: #555;}
|
|
</style>
|
|
|
|
<!--[if IE]>
|
|
<style type="text/css" media="screen">
|
|
.conversation ul li {
|
|
width: 98%;
|
|
}
|
|
</style>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<h1><a href=".">Dumble: delicious tumblelog</a></h1>
|
|
<h2>auto tumble your delicious links</h2>
|
|
</div>
|
|
|
|
<div id="posts">
|
|
|
|
<div id="history"><h2>Session History</h2><ul></ul>
|
|
<h2 id="history-clear">
|
|
<a href="" onClick="javascript:$('#history-clear').hide();$('#history ul').slideUp('slow').empty();Dumble.updateHistory();return false;">Clear?</a>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="post" style="background-color: #334B42;">
|
|
<div class="regular">
|
|
<h3 id="aboutHeader" style="color: #eef; text-align: center;">What is Dumble?</h3>
|
|
<div id="about"><strong>Dumble</strong> is an <a href="http://oohembed.com/" target="_blank">oohEmbed</a> powered <a href="http://antrix.net/journal/techtalk/dumble.html" target="_blank">experiment</a> in creating a <a href="http://en.wikipedia.org/wiki/Tumblelog" target="_blank">tumblelog</a> from a user's <a href="http://delicious.com/" target="_blank">delicious.com</a> links.<br/><br/>To create a tumblelog for a different delicious user, just modify the details below.
|
|
<div style="margin: 1em 1em 0em 1em; padding: 1em 1em 0em 1em;">
|
|
<form id="sourceForm" style="margin-bottom: 2em;">
|
|
Username: <input id="sourceUser" type="text" size="10"/>
|
|
A tag (optional): <input id="sourceTag" type="text" size="10"/>
|
|
<button type="submit">Update</button>
|
|
</form>
|
|
</div>
|
|
<div id="tags" class="wordlist">
|
|
<h3 style="text-align: center; color: #ddc;"></h3>
|
|
<ul id="tags-list" class="wordlist"></ul><br/>
|
|
</div>
|
|
|
|
<div style="border-top: 1px solid #555; padding: 1em; margin: 1em;">
|
|
Need a link to this page? <a id='permalink' href="">Here you go!</a>
|
|
Or get the feed! <a id='rss-feed-body' style="border: none;" href=""><img style="vertical-align: middle" src="images/feed-icon.png" alt="RSS Feed icon"/></a><br/><br/>
|
|
There's also a <a href="javascript:{var b='http://oohembed.com/dumble/?u='; var u=document.location.href;m = /del\.icio\.us\/([\w\.]+)\/?/i.exec(u);if(m && m[1] != 'tag' && m[1] != 'network' && m[1] != 'subscriptions' && m[1] != 'url' && m[1] != 'for') {var go = b+m[1]; n = /del\.icio\.us\/\w+\/(\w+)\/?/i.exec(u); if (n) {go = go + '&t=' + n[1];} document.location.href=go;} else {alert('Could not figure out delicious user name');}}">View in Dumble</a> bookmarklet and a similar <a href="http://antrix.net/stuff/gm/dumble.oohembed.user.js">greasemonkey script</a> to integrate Dumble with delicious.
|
|
</div>
|
|
<div id="friends" class="wordlist">
|
|
<h3 style="text-align: center; color: #ddc;"></h3>
|
|
<ul id="friends-list" class="wordlist"></ul><br/>
|
|
<div id="networklink" style="text-align: center; margin-top: 1em;">
|
|
<a target="_blank"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- end regular post -->
|
|
</div>
|
|
|
|
<div id="dynposts">
|
|
<!-- dynamic posts inserted here -->
|
|
</div>
|
|
|
|
<div id="previous-next">
|
|
<a href="" onClick="javascript:Analytics.trackPage('/dumble/--more--/');Dumble.updatePage();return false;">More?</a>
|
|
</div>
|
|
|
|
</div> <!-- end posts-->
|
|
|
|
<div id="footer">
|
|
<ul>
|
|
<li>Engine <a href="http://jquery.com/" target="_blank">jQuery</a></li>
|
|
<li>Designer <a href="http://cubicle17.com/" target="_blank">Bill Israel</a></li>
|
|
<li>Code Monkey <a href="http://antrix.net/" target="_blank">Deepak Sarda</a></li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|