Bubble Orchestra

dabblet.css

/**
 * Bubble Orchestra
 */

/* demo styles */
a:hover { cursor:pointer }
.bubble { top:20px }
.quote { left:218px }
.autocomplete { left:604px }
.autocomplete + .bubble { left:891px }
.bubble.add { top:204px }

/* resets */
body { font-family:'helvetica'; background:#eee }
a { text-decoration:none; color:#B7DE44 }
blockquote, menu, p, figure, figcaption,
h1, section { margin:0; padding:0 }


/* base bubble styles */
.bubble { padding:14px; position:absolute; border-radius:9px;
 box-shadow:0 2px 5px 0 rgba(0, 0, 0,.3); font-family:helvetica }
	.bubble:after { content:''; height:0; width:0;
	position:absolute; border:14px solid transparent;
	border-bottom-color:#222; bottom:100%; left:50%;
	margin-left:-14px }
.bubble p { margin-bottom:.9em }
.bubble p:last-child { margin:0 }

/* old design rewritten
/* .like */
.bubble.like { background-color:#222; font:13px/1.3 'helvetica';
  color:#fff; max-width:136px }
	.bubble.like:after { border-bottom-color:#222; }

/* new design
/* .add */
.bubble.add { background:#222; color:#fff; font-size:12px; height:85px;
  padding:0; transition:all 500ms }
	.bubble.add:after { border-bottom-color:#222 }
.bubble.add a { color:#50d0f0; font-weight:600 }
.bubble.add section { display:inline-block; vertical-align:top }
.bubble.add .desc { max-width:200px; padding:14px; color:#eee; }
	.bubble.add .desc strong { font-size:16px; color:#fff;
		display:inline-block; margin:0 0 10px; font-weight:500 }
.bubble.add .aggregates { padding:0 14px 0; height:100%; background:#333;
 	border-radius:0 9px 9px 0; text-align:center }
  .bubble.add .aggregates strong { font-size:24px; display:block;
	font-weight:500; margin-top:12px }


/* .quote */
.bubble.quote { background-color:#fff; font-size:12px; line-height:14px;
 color:#000; max-width:23em; border:1px solid #888; padding-left:3em }
	.bubble.quote:before { content:''; height:0; width:0;
	position:absolute; bottom:100%; left:50%;
	border:16px solid transparent; border-bottom-color:#888; margin-left:-16px }
	.bubble.quote:after { border-bottom-color:#fff }	
.bubble.quote cite { display:block; margin-top:1em; font-style:normal }
.bubble.quote a { color:#000; font-weight:bold }
.bubble.quote a[rel="book"] { font-style:italic }

/* quote marks */
.bubble.quote q:before,
.bubble.quote q:after { font-family:Georgia; font-size:5em;
  position:absolute; color:#a1adac }
.bubble.quote q:before { content:'“'; top:.44em; left:.14em }
.bubble.quote q:after { content:'”'; margin-top:.36em; margin-left:.06em }


/* .autocomplete */
.autocomplete { background:#aae916; padding:8px 10px;
  border:2px solid #fff; max-width:240px }
	.autocomplete:before { content:''; height:0; width:0;
	position:absolute; bottom:100%; left:38px;
	border:17px solid transparent; border-bottom-color:#fff; margin-left:-17px }
	.autocomplete:after { border-bottom-color:#aae916; left:38px }
.autocomplete a { display:block; color:#222; font-size:13px;
  line-height:29px; margin:0 2px; padding-right:10px }
.autocomplete a:hover { background:#c3ff37; border-radius:4px;
  margin:0 -2px 0 -2px; padding:0 14px 0 4px }
.autocomplete a+a { border-top:1px solid #c2ef58; 
  box-shadow:0 -1px 0 0 #99d30f }
.autocomplete a:hover+a,
.autocomplete a+a:hover { border:none; box-shadow:none; padding-top:1px }
.autocomplete em { font-style:normal; font-weight:bold }

/* .detail */
.bubble.detail { background-color:#222; font:11px/.5 'helvetica'; color:#fff }
	.bubble.detail:after { border-bottom-color:#222 }
.bubble.detail img { margin-right:12px; border-right:1px solid #3b3b3b;
  margin-right:8px; border-radius:4px }
.bubble.detail figcaption { text-transform:uppercase; display:inline-block;
  vertical-align:top; margin-top:17px; letter-spacing:1px; color:#ccc }
.bubble.detail figcaption a { font-size:22px; text-transform:none; display:block;
  margin-bottom:13px; font-weight:100; letter-spacing:0 }

dabblet.html

<!-- old design recreated in html/css -->
<aside class="bubble like">
  <p>Add to <a href="/user/storyboard">your Storyboard</a>
  456 others like this too</p>
</aside>

<!-- new design -->
<aside class="bubble add">
  <section class="desc">
  	<strong>Add this to your Storyboard</strong>
  	<p><a href="/user/storyboard">Storyboard</a> is created by
  	  adding things you like from across the site.</p>
  </section>
  <section class="aggregates">
    <strong>53</strong>adds
  </section>
</aside>

<!-- quote bubble -->
<blockquote class="bubble quote">
  <q>Cat by the name of <a rel="topic">Charlie Parker</a>. On the
    Dial label." "I mean, what do you call this kind of music?" Junior
    grinned. ... Now, you wanna stick to the big band sound, you go on
    and stick to it, that's up to you</q>
  <cite>— <a rel="author">George P. Pelecanos</a>, 
    <a rel="book">The Big Blowdown</a></cite>
</blockquote>

<!-- search autocomplete -->
<menu type=list class="bubble autocomplete">
  <a href="">Yo-Yo <em>Ma</em></a>
  <a href=""><em>Ma</em> Barker</a>
  <a href=""><em>Ma</em> Baker</a>
  <a href=""><em>Ma</em>xim Litvinov</a>
  <a href=""><em>Ma</em>x Schmeling</a>
  <a href="">David <em>Ma</em>met</a>
  <a href=""><em>Ma</em>ry Shelley</a>
  <a href="">Pig (radioactive <em>ma</em>terial transfer)</a>
  <a href="">The Dancing Wu Li <em>Ma</em>sters</a>
  <a href=""><em>Ma</em>ry, Mary</a>
</menu>

<!-- detail bubble for tiny thumbnails -->
<figure class="bubble detail">
  <img src="http://images.sd-cdn.com/73936.jpg">
  <figcaption>
  	<a href="">Frank Sinatra</a>
  	Musician
  </figcaption>
</figure>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}