Permalink
Browse files

Add an about bubble to the links at the bottom

  • Loading branch information...
1 parent 9d66b6e commit ed462eb44b83ff1961a3f695ede3476a33627d88 Sean McBride committed Feb 20, 2011
Showing with 77 additions and 0 deletions.
  1. +6 −0 index.html
  2. +29 −0 resources/behavior.js
  3. +42 −0 resources/styles.css
View
@@ -25,6 +25,12 @@ <h2 class="tagline">has a website</h2>
<li><a href="http://github.com/seanami" title="Sean on GitHub">github</a></li>
<li><a href="http://typekit.com" title="Sean at work">work</a></li>
</ul>
+ <p class="about-text">
+ <strong>What's this all about?</strong><br>
+ This page is my digital anchor. It's also a demonstration of CSS3. Each
+ theme is inspired by something from my life. Click the dots above to
+ apply different CSS and fonts to the simple markup underneath.
+ </p>
</div>
</body>
</html>
View
@@ -9,6 +9,7 @@
themes.push($.parseJSON(matches[i].replace('THEME = ', '')));
}
setupPicker(themes);
+ setupAboutBubble();
});
}
@@ -44,6 +45,34 @@
centerVertically();
}
+ function setupAboutBubble() {
+ var enterTimeout, leaveTimeout;
+ var $li = $('<li>')
+ .addClass('about')
+ .mouseenter(function(e) {
+ clearTimeout(leaveTimeout);
+ enterTimeout = setTimeout(function() {
+ $li.addClass('show');
+ }, 1000);
+ })
+ .mouseleave(function(e) {
+ clearTimeout(enterTimeout);
+ leaveTimeout = setTimeout(function() {
+ $li.removeClass('show');
+ }, 250);
+ });
+ var $a = $('<a>')
+ .text('what?')
+ .attr('href', '#about')
+ .click(function(e) {
+ e.preventDefault();
+ clearTimeout(enterTimeout);
+ clearTimeout(leaveTimeout);
+ $li.addClass('show');
+ });
+ $('.links').prepend($li.append($a).append($('.about-text')));
+ }
+
function selectTheme($el) {
var theme = $el.data('theme');
// Change picker selection
View
@@ -101,6 +101,48 @@ body {
color: rgba(255, 255, 255, 0.9);
}
+.about-text {
+ display: none;
+}
+
+.links .about {
+ position: relative;
+}
+
+.links .about .about-text {
+ background-color: #fff;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ bottom: 100%;
+ color: #333;
+ font-weight: normal;
+ left: -20px;
+ line-height: 1.5;
+ opacity: 0.9;
+ padding: 20px;
+ position: absolute;
+ text-align: left;
+ width: 320px;
+}
+
+.links .show .about-text {
+ display: block;
+}
+
+.links .about .about-text:before {
+ background-color: #fff;
+ bottom: -10px;
+ content: " ";
+ height: 20px;
+ left: 35px;
+ position: absolute;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ transform: rotate(45deg);
+ width: 20px;
+}
+
/* Default theme
THEME = {
"name": "default",

0 comments on commit ed462eb

Please sign in to comment.