Skip to content

Instantly share code, notes, and snippets.

@bbuecherl

bbuecherl/about-this-pen.markdown

Last active August 29, 2015 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bbuecherl/1f9c8698fc02fbc5ad03 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bbuecherl/1f9c8698fc02fbc5ad03 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Bernhard Bücherl.
Raw
about-this-pen.markdown
Raw
index.html
<!--
Include this in your pen: https://rawgit.com/bbuecherl/1f9c8698fc02fbc5ad03/raw/2306ab52003977f1fa68901216235dee05a3c89d/script.js
Then configure utils.about to your needs:
-->
<script>
window.addEventListener("load",function() {
window.utils.about({
user: {
name: "bbuecherl",
twitter: "bbuecherl",
github: "bbuecherl",
pinterest: "bbuecherl",
stackoverflow: "995320/bbuecherl",
url: "http://bbuecherl.de"
},
title: "codepen-utils",
info: "A utility library for codepen"
});
},false);
</script>
Raw
script.js
/*! codepen-utils by bbuecherl */
var $warn = function(w) { console && console.warn("codepen-utils: " + w); };
window.utils = {
about: (function() {
var socials = {
codepen: "http://codepen.io/%",
twitter: "http://twitter.com/%",
github: "https://github.com/%",
dribbble: "http://dribbble.com/%",
pinterest: "http://pinterest.com/%",
"stack-overflow": "http://stackoverflow.com/users/%",
tumblr: "http://%.tumblr.com/",
flickr: "http://flickr.com/photos/%",
globe: "%"
};
return function(options) {
// prepare options
if(!options.user)
$warn("user not set");
var shown = true,
toggle = function() {
if(shown)
overlay.style.display = popup.style.display = "none";
else
overlay.style.display = popup.style.display = "block";
shown = !shown;
},
about = document.createElement("div"),
overlay = document.createElement("div"),
popup = document.createElement("div"),
popup_title = document.createElement("div"),
popup_info = document.createElement("div"),
popup_by = document.createElement("div");
about.className = "codepen__utils-about-button fa fa-info";
about.title = "About " + options.title + " by " + options.user.name;
popup.className = "codepen__utils-about-popup";
overlay.className = "codepen__utils-about-overlay";
popup_title.className = "codepen__utils-about-title";
popup_info.className = "codepen__utils-about-info";
popup_by.className = "codepen__utils-about-by";
overlay.style.opacity = options.overlay || 0.1;
//by
var by = "<span>by " + options.user.name + "</span>";
options.user.codepen = options.user.codpen || options.user.name;
options.user.globe = options.user.url;
for(var s in socials) {
var ns = s.replace(/-/g, "");
if(options.user[ns])
by += " <a href=\"" + socials[s].replace("%", options.user[ns]) + "\" class=\"fa fa-" + s + "\" target=\"_blank\"></a>";
}
popup_title.innerHTML = options.title || document.getElementsByTagName("title")[0].innerHTML;
popup.appendChild(popup_title);
if(options.info) {
popup_info.innerHTML = options.info;
popup.appendChild(popup_info);
}
popup_by.innerHTML = by;
popup.appendChild(popup_by);
document.body.appendChild(about);
document.body.appendChild(overlay);
document.body.appendChild(popup);
about.addEventListener("click", toggle, false);
overlay.addEventListener("click", toggle, false);
toggle();
};
}())
};
var utils_style = document.createElement("link");
utils_style.rel = "stylesheet";
utils_style.href = "https://rawgit.com/bbuecherl/1f9c8698fc02fbc5ad03/raw/6bc912480979f469bad7279c7b1d88dab55ef168/style.css";
document.getElementsByTagName("head")[0].appendChild(utils_style);
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.codepen__utils-about-button {
font-size: 40px;
position: fixed;
z-index: 100001;
-webkit-transform: translateZ(100001px);
transform: translateZ(100001px);
left: 32px;
bottom: 32px;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
padding: 8px;
background: #180F26;
color: #A9C06D;
cursor: pointer;
}
.codepen__utils-about-overlay {
position: fixed;
z-index: 100000;
-webkit-transform: translateZ(100000px);
transform: translateZ(100000px);
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #180F26;
cursor: pointer;
}
.codepen__utils-about-popup {
position: fixed;
z-index: 100002;
-webkit-transform: translateZ(100002px);
transform: translateZ(100002px);
left: 102px;
bottom: 32px;
width: 256px;
min-height: 48px;
padding: 10px;
background: #A9C06D;
color: #180F26;
}
.codepen__utils-about-popup::before {
width: 16px;
height: 16px;
content: "";
display: block;
position: absolute;
bottom: 0;
background: #A9C06D;
margin-left: -16px;
margin-bottom: 22.5px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.codepen__utils-about-popup .codepen__utils-about-title {
font: normal normal normal 28px Source Sans Pro;
line-height: 32px;
padding-bottom: 4px;
border-bottom: 1px solid #6D612F;
}
.codepen__utils-about-popup .codepen__utils-about-info {
padding: 4px 0;
border-bottom: 1px solid #6D612F;
line-height: 24px;
font: normal normal normal 16px Source Sans Pro;
}
.codepen__utils-about-popup .codepen__utils-about-by {
padding-top: 4px;
}
.codepen__utils-about-popup .codepen__utils-about-by span {
font: italic normal normal 13px Source Sans Pro;
line-height: 16px;
padding: 4px;
display: block;
float: left;
color: #6D612F;
}
.codepen__utils-about-popup .codepen__utils-about-by a {
color: #03314A;
text-decoration: none;
font-size: 16px;
line-height: 16px;
float: right;
padding: 4px;
display: block;
}
Raw
style.scss
$color__bg: #180F26;
$color__base: #A9C06D;
$color__medium: #6D612F;
$color__social: #03314A;
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400);
.codepen__utils-about-button {
font-size: 40px;
position: fixed;
z-index: 100001;
transform: translateZ(100001px);
left: 32px;
bottom: 32px;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
padding: 8px;
background: $color__bg;
color: $color__base;
cursor: pointer;
}
.codepen__utils-about-overlay {
position: fixed;
z-index: 100000;
transform: translateZ(100000px);
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $color__bg;
cursor: pointer;
}
.codepen__utils-about-popup {
position: fixed;
z-index: 100002;
transform: translateZ(100002px);
left: 102px;
bottom: 32px;
width: 200px;
min-height: 48px;
padding: 10px;
background: $color__base;
color: $color__bg;
&::before {
width: 16px;
height: 16px;
content: "";
display: block;
position: absolute;
bottom: 0;
background: $color__base;
margin-left: -16px;
margin-bottom: 22.5px;
transform: rotate(45deg);
}
.codepen__utils-about-title {
font: normal normal normal 28px Source Sans Pro;
line-height: 32px;
padding-bottom: 4px;
border-bottom: 1px solid $color__medium;
}
.codepen__utils-about-info {
padding: 4px 0;
border-bottom: 1px solid $color__medium;
line-height: 24px;
font: normal normal normal 16px Source Sans Pro;
}
.codepen__utils-about-by {
padding-top: 4px;
span {
font: italic normal normal 13px Source Sans Pro;
line-height: 16px;
padding: 4px;
display: block;
float: left;
color: $color__medium;
}
a {
color: $color__social;
text-decoration: none;
font-size: 16px;
line-height: 16px;
float: right;
padding: 4px;
display: block;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment