Skip to content

Instantly share code, notes, and snippets.

@Potherca

Potherca/dabblet.css

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Potherca/88c805c02d01f3427ccd to your computer and use it in GitHub Desktop.
Save Potherca/88c805c02d01f3427ccd to your computer and use it in GitHub Desktop.
Download ZIP
Footer for Potherca
Raw
dabblet.css
/**
* Footer for Potherca
*/
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
.created-by{
background-color:rgb(255,255,255);
border-radius:0.35em;
color:inherit;
font-family:'Droid Sans', Arial, sans-serif;
padding:1.15em 0.25em 2.2em;
text-decoration:none;
width:9.1em;
}
.potherca{
border-bottom:1px solid rgb(220,50,50);
border-bottom-color:rgba(220,50,50,1);
color:rgb(220, 50, 47);
position:relative;
transition:border 0.350s ease-out;
}
.created-by:hover .potherca{
border-color:transparent;
border-bottom-color:rgba(220,50,50,0);
}
.potherca::after{
background:no-repeat url(http://pother.ca/images/avatars/ben-cartoon-background-red-252-square.png);
background-size:100%;
border-radius:2em;
content:" ";
display:block;
height:4em;
position:absolute;
right:0;
top:-0.85em;
transform:rotateX(90deg);
transition:transform 0.350s ease-out;
width:4em;
}
.created-by:hover .potherca::after{
height:4em;
transform:rotateX(0deg);
}
/***************************************************************************************/
html, body{
height:100%;
background:rgb(245,245,235);
}
div{
height:50%;
margin-top:-4em;
}
p{
display:block;
margin:1em auto;
text-align:center;
}
/*EOF*/
Raw
dabblet.html
<div></div>
<p><a href="http://pother.ca/" class="created-by">Created by <span class="potherca">Potherca</span></a></p>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>✿ Dabblet</title>
<link href="./dabblet.css" rel="stylesheet" />
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
</head>
<body>
<script src="http://pother.ca/JsBase/add-on/load-dabblet-on-bl.ocks.org.js" id="dabblet-html-goes-here"></script>
</body>
</html>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment